/* The theme's stylesheet initializes tailwindcss and imports the theme's default styles.

   The $ThemeStylesheet path is evaluated via a postcss resolver, which finds the theme's
   main stylesheet within the theme's gem.

   To control the order of the tailwindcss imports further, you can eject the theme's
   stylesheet locally using the following command, which will take precedence.
   > rake bullet_train:themes:light:eject_css

   Read more: https://bullettrain.co/docs/stylesheets
*/

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='checkbox']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='radio']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

.font-display-semi-condensed {
  letter-spacing: 0 !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Aktiv Grotesk ships multiple figure styles; this turns on Figma's "Proportional
       uppercase/lining" — pnum (proportional spacing — tighter than the default monowidth
       used for column-alignment) + lnum (lining figures — uppercase-height, the modern
       look). Inherits app-wide. Anywhere that NEEDS column-aligned digits (timers, color
       hex, length counters) explicitly applies `tabular-nums`, which only flips the
       spacing axis — the lining-figures inherited from here are preserved. */
  font-variant-numeric: proportional-nums lining-nums;
}

/* Every stroked path inside an icon (the `.icon` class is auto-applied by
     `app/views/themes/atelier/_icon.html.erb`) keeps a constant 1.5px stroke
     no matter how the SVG is scaled. Sets the default so individual icons
     don't need `vector-effect="non-scaling-stroke"` on every path. */

svg.\!icon path[stroke],
  svg.\!icon line[stroke],
  svg.\!icon circle[stroke],
  svg.\!icon rect[stroke],
  svg.\!icon polyline[stroke],
  svg.\!icon polygon[stroke] {
  vector-effect: non-scaling-stroke !important;
}

svg.icon path[stroke],
  svg.icon line[stroke],
  svg.icon circle[stroke],
  svg.icon rect[stroke],
  svg.icon polyline[stroke],
  svg.icon polygon[stroke] {
  vector-effect: non-scaling-stroke;
}

svg.\!icon path[stroke],
  svg.\!icon line[stroke],
  svg.\!icon circle[stroke],
  svg.\!icon rect[stroke],
  svg.\!icon polyline[stroke],
  svg.\!icon polygon[stroke] {
  vector-effect: non-scaling-stroke !important;
}

/* Missing-icon safety net. When inline_svg can't find an icon it renders a bare
     <svg class="svg-not-found"> WITHOUT the caller's sizing class — and a replaced <svg>
     with no intrinsic size defaults to 300x150, which silently blows out its container and
     can create page-wide overflow-x. Pin the fallback to zero so a typo'd/removed icon
     degrades to nothing instead of breaking the layout. (config/initializers/inline_svg.rb
     sets the .svg-not-found class.) */

.svg-not-found {
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Buttons are actions, not selectable copy — a click (or quick double-click) should never highlight
     a button's label (the native text-selection behavior, independent of the button's background).
     App-wide here so every button gets it: the .button-* component classes, custom buttons like the
     guide nav, and raw <button>s alike. Opt an element back in with `user-select: text` if needed. */

button {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

/* App-wide focus-visible standard: a solid content-primary outline that only
     appears during keyboard navigation (focus-visible), never on mouse click.
     Add the `hide-focus-ring` class to opt an element out.

     Exception: fields styled as `.floating-input-field` or `.text-input` (text inputs,
     textareas, and native <select>s) are excluded. They already show an inset content-primary
     border on `:focus` (identical for click and keyboard), so the extra outer ring is redundant —
     keyboard focus should match the click/active state. */

a:not(.hide-focus-ring):focus-visible,
  button:not(.hide-focus-ring):focus-visible,
  input:not(.hide-focus-ring):not(.floating-input-field):not(.text-input):not(.search-input):focus-visible,
  textarea:not(.hide-focus-ring):not(.floating-input-field):not(.text-input):focus-visible,
  select:not(.hide-focus-ring):not(.floating-input-field):not(.text-input):focus-visible {
  outline: 2px solid var(--content-primary);
  transition: outline 0.2s ease;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.form-input,.form-textarea,.form-select,.form-multiselect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

.form-select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}

.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}

.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}

.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}

.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
}

.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.9em;
}

.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}

.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}

.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.5;
}

.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}

.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

/* OTP field validation states — toggled per-box by otp_controller. `!` overrides each box's
     default border/background utilities. Smooth because the boxes carry `.transition`. */

.otp-box-success {
  border-color: var(--brand-secondary-moola) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(239 254 246 / var(--tw-bg-opacity, 1)) !important;
  color: var(--brand-secondary-moola) !important;
}

.otp-box-error {
  --tw-border-opacity: 1 !important;
  border-color: rgb(232 59 71 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 242 243 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(232 59 71 / var(--tw-text-opacity, 1)) !important;
}

a {
  color: var(--secondary-500);
}

a:hover {
  color: var(--secondary-600);
  text-decoration-line: underline;
}

b,
  strong {
  font-weight: 600;
}

.buttons > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Button Styles, combines hover, active, focus styles */

/* OL-3343: the legacy `.button-disabled:not(.no-disabled-style)` rule was removed here — it
     applied a stray inset box-shadow (shadow-inner) plus hardcoded richBlack bg/text that
     predate the --background-disabled token. The modern disabled style now lives solely in
     buttons.css (.button-disabled → !bg-background-disabled + text-content-tertiary, no shadow). */

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link-disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link-disabled {
  background-color: var(--background-overlay);
}

.button-link-disabled {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link-disabled,
.floating-input-field.button-link-disabled:focus,
.floating-input-field.button-link-disabled:hover,
.floating-input-field.button-link-disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link-disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link-disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link-disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.button-focusable {
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-focusable:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-focusable {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-focusable:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-focusable:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

/* Used in @extend declarations below */

.button-base {
  cursor: pointer;
}

.button-base:hover {
  text-decoration-line: none;
}

.button-base {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-base:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-base {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-base:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-base:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-base {
  /* set a default "press down" effect for small buttons */
}

.button-base:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* inline icons */

[data-select-all-target='wrapper'].button-base svg {
  display: block;
}

.button-base svg {
  display: inline-block;
}

.button-base {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-base:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base:disabled),
  .button-primary-dark:has(.button-base:disabled),
  .button-secondary:has(.button-base:disabled),
  .button-tertiary:has(.button-base:disabled),
  .button-danger:has(.button-base:disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base:disabled):not(.no-disabled-style), .button-primary-dark:has(.button-base:disabled):not(.no-disabled-style), .button-secondary:has(.button-base:disabled):not(.no-disabled-style), .button-tertiary:has(.button-base:disabled):not(.no-disabled-style), .button-danger:has(.button-base:disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base:disabled:hover),
  .button-primary-dark:has(.button-base:disabled:hover),
  .button-secondary:has(.button-base:disabled:hover),
  .button-tertiary:has(.button-base:disabled:hover),
  .button-danger:has(.button-base:disabled:hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base:disabled:hover):not(.no-disabled-style), .button-primary-dark:has(.button-base:disabled:hover):not(.no-disabled-style), .button-secondary:has(.button-base:disabled:hover):not(.no-disabled-style), .button-tertiary:has(.button-base:disabled:hover):not(.no-disabled-style), .button-danger:has(.button-base:disabled:hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base:disabled:active),
  .button-primary-dark:has(.button-base:disabled:active),
  .button-secondary:has(.button-base:disabled:active),
  .button-tertiary:has(.button-base:disabled:active),
  .button-danger:has(.button-base:disabled:active) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base:disabled:active):not(.no-disabled-style), .button-primary-dark:has(.button-base:disabled:active):not(.no-disabled-style), .button-secondary:has(.button-base:disabled:active):not(.no-disabled-style), .button-tertiary:has(.button-base:disabled:active):not(.no-disabled-style), .button-danger:has(.button-base:disabled:active):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

/* transition everything */

/* define defaults for blending modes */

.button-base.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style)),
  .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style)),
  .button-secondary:has(.button-base.disabled:not(.no-disabled-style)),
  .button-tertiary:has(.button-base.disabled:not(.no-disabled-style)),
  .button-danger:has(.button-base.disabled:not(.no-disabled-style)) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-secondary:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-tertiary:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-danger:has(.button-base.disabled:not(.no-disabled-style)):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style):hover),
  .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style):hover),
  .button-secondary:has(.button-base.disabled:not(.no-disabled-style):hover),
  .button-tertiary:has(.button-base.disabled:not(.no-disabled-style):hover),
  .button-danger:has(.button-base.disabled:not(.no-disabled-style):hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-secondary:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-tertiary:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-danger:has(.button-base.disabled:not(.no-disabled-style):hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style):active),
  .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style):active),
  .button-secondary:has(.button-base.disabled:not(.no-disabled-style):active),
  .button-tertiary:has(.button-base.disabled:not(.no-disabled-style):active),
  .button-danger:has(.button-base.disabled:not(.no-disabled-style):active) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-primary-dark:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-secondary:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-tertiary:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-danger:has(.button-base.disabled:not(.no-disabled-style):active):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style)),
  .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style)),
  .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style)),
  .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style)),
  .button-danger:has(.button-base.\!disabled:not(.no-disabled-style)) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style), .button-danger:has(.button-base.\!disabled:not(.no-disabled-style)):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style):hover),
  .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style):hover),
  .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style):hover),
  .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style):hover),
  .button-danger:has(.button-base.\!disabled:not(.no-disabled-style):hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style), .button-danger:has(.button-base.\!disabled:not(.no-disabled-style):hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style):active),
  .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style):active),
  .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style):active),
  .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style):active),
  .button-danger:has(.button-base.\!disabled:not(.no-disabled-style):active) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-primary-dark:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-secondary:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-tertiary:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style), .button-danger:has(.button-base.\!disabled:not(.no-disabled-style):active):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light {
  cursor: pointer;
}

.button-base-light:hover {
  text-decoration-line: none;
}

.button-base-light {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-base-light:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-base-light {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-base-light:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-base-light:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-base-light {
  /* set a default "press down" effect for small buttons */
}

.button-base-light:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light svg {
  display: inline-block;
}

.button-base-light {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-base-light:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-light {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-base-light:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-base-light-hover {
  background-blend-mode: soft-light, normal;
  box-shadow: 0px -1px 1px 0px rgba(255, 255, 255, 0.2) inset,
      0px 6px 12px 0px rgba(255, 255, 255, 0.2) inset,
      0px 8px 2px 0px rgba(0, 0, 0, 0), 0px 5px 2px 0px rgba(0, 0, 0, 0.01),
      0px 3px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.07),
      0px 1px 1px 0px rgba(0, 0, 0, 0.08);
}

.button-base-light-active {
  background-blend-mode: multiply, normal;
  box-shadow: 0px -1px 1px 0px rgba(255, 255, 255, 0.2) inset,
      0px 6px 12px 0px rgba(255, 255, 255, 0.2) inset,
      0px 7.76px 1.94px 0px rgba(0, 0, 0, 0),
      0px 4.85px 1.94px 0px rgba(0, 0, 0, 0.01),
      0px 2.91px 1.94px 0px rgba(0, 0, 0, 0.04),
      0px 0.97px 0.97px 0px rgba(0, 0, 0, 0.07),
      0px 0.97px 0.97px 0px rgba(0, 0, 0, 0.08);
}

.button-base-dark {
  cursor: pointer;
}

.button-base-dark:hover {
  text-decoration-line: none;
}

.button-base-dark {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-base-dark:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-base-dark {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-base-dark:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-base-dark:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-base-dark {
  /* set a default "press down" effect for small buttons */
}

.button-base-dark:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark svg {
  display: inline-block;
}

.button-base-dark {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-base-dark:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-base-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-base-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-base-dark {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-base-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

/* classes for button-{priority}-{type} according to design */

.button-primary-seafoam {
  cursor: pointer;
}

.button-primary-seafoam:hover {
  text-decoration-line: none;
}

.button-primary-seafoam {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-primary-seafoam:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-primary-seafoam {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-primary-seafoam:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-primary-seafoam:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-primary-seafoam {
  /* set a default "press down" effect for small buttons */
}

.button-primary-seafoam:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam svg {
  display: inline-block;
}

.button-primary-seafoam {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-primary-seafoam:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-primary-seafoam.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-seafoam {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-primary-seafoam:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-primary-seafoam:hover {
  background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.25) 0%,
          rgba(255, 255, 255, 0.25) 100%
        ),
        var(--button-bg-color);
}

.button-primary-seafoam:hover {
  background-blend-mode: soft-light, normal;
  box-shadow: 0px -1px 1px 0px rgba(255, 255, 255, 0.2) inset,
      0px 6px 12px 0px rgba(255, 255, 255, 0.2) inset,
      0px 8px 2px 0px rgba(0, 0, 0, 0), 0px 5px 2px 0px rgba(0, 0, 0, 0.01),
      0px 3px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.07),
      0px 1px 1px 0px rgba(0, 0, 0, 0.08);
}

.button-primary-seafoam:active {
  background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.02) 0%,
          rgba(0, 0, 0, 0.02) 100%
        ),
        var(--button-bg-color);
}

.button-primary-seafoam:active {
  background-blend-mode: multiply, normal;
  box-shadow: 0px -1px 1px 0px rgba(255, 255, 255, 0.2) inset,
      0px 6px 12px 0px rgba(255, 255, 255, 0.2) inset,
      0px 7.76px 1.94px 0px rgba(0, 0, 0, 0),
      0px 4.85px 1.94px 0px rgba(0, 0, 0, 0.01),
      0px 2.91px 1.94px 0px rgba(0, 0, 0, 0.04),
      0px 0.97px 0.97px 0px rgba(0, 0, 0, 0.07),
      0px 0.97px 0.97px 0px rgba(0, 0, 0, 0.08);
}

/* .button-primary {
    --button-bg-color: theme("colors.salmon.DEFAULT");
  } */

.button-primary-seafoam {
  --button-bg-color: #9ce7c1;
}

/*
    button-secondary is black and white.

    We define separate classes, button-secondary-dark and
    button-secondary-light, and then create a button-secondary
    class that applies both of them
  */

.button-secondary-dark:hover, .button-secondary-light:hover {
  --button-overlay-color-light: rgba(0, 0, 0, 0.03);
  --button-overlay-color-dark: rgba(255, 255, 255, 0.25);
  --button-overlay-color: transparent;
  /* override separately */
  background: linear-gradient(
          0deg,
          var(--button-overlay-color),
          var(--button-overlay-color)
        ),
        var(--button-bg-color);
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01),
        0px 3px 2px rgba(0, 0, 0, 0.04), 0px 1px 1px rgba(0, 0, 0, 0.07),
        0px 1px 1px rgba(0, 0, 0, 0.08),
        inset 0px -1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 6px 12px rgba(255, 255, 255, 0.2);
}

.button-secondary-dark:active, .button-secondary-light:active {
  --button-overlay-color-light: rgba(0, 0, 0, 0.03);
  --button-overlay-color-dark: rgba(255, 255, 255, 0.25);
  --button-overlay-color: transparent;
  /* override separately */
  background: linear-gradient(
          0deg,
          var(--button-overlay-color),
          var(--button-overlay-color)
        ),
        var(--button-bg-color);
  box-shadow: 0px 4.85px 1.94px rgba(0, 0, 0, 0.01),
        0px 2.91px 1.94px rgba(0, 0, 0, 0.04),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.07),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.08),
        inset 0px -1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 6px 12px rgba(255, 255, 255, 0.2);
}

.button-secondary-dark {
  cursor: pointer;
}

.button-secondary-dark:hover {
  text-decoration-line: none;
}

.button-secondary-dark {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-secondary-dark:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-secondary-dark {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-secondary-dark:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-secondary-dark:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-secondary-dark {
  /* set a default "press down" effect for small buttons */
}

.button-secondary-dark:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark svg {
  display: inline-block;
}

.button-secondary-dark {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-secondary-dark:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-dark {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-secondary-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-secondary-dark {
  --button-bg-color: #0B051D;
  --tw-ring-color: var(--tw-ring-color-light);
}

/* TODO: in dark mode, this doesn't work */

.button-secondary-dark:hover {
  --button-overlay-color: var(--button-overlay-color-dark);
  --blend-mode: var(--blend-mode-soft-light-normal);
}

.button-secondary-dark:active {
  --button-overlay-color: var(--button-overlay-color-dark);
  --blend-mode: var(--blend-mode-soft-light-normal);
}

.button-secondary-light {
  cursor: pointer;
}

.button-secondary-light:hover {
  text-decoration-line: none;
}

.button-secondary-light {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-secondary-light:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-secondary-light {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-secondary-light:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-secondary-light:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-secondary-light {
  /* set a default "press down" effect for small buttons */
}

.button-secondary-light:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light svg {
  display: inline-block;
}

.button-secondary-light {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-secondary-light:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-secondary-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-secondary-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary-light {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-secondary-light:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-secondary-light {
  --tw-ring-color: var(--tw-ring-color-light);
  background: transparent;
  background-blend-mode: normal;
  box-shadow: none;
  border-width: 1px;
  border-color: rgb(11 5 29 / .08);
}

.button-secondary-light:where(.dark, .dark *) {
  border-color: rgb(248 245 244 / .08);
}

.button-secondary-light:hover,
    .button-secondary-light:active,
    .button-secondary-light:focus {
  --button-bg-color: #322f2814;
  /* opacity-08 */
  background: var(--button-bg-color);
  box-shadow: none;
}

/*
    button-tertiary is a gray button of different shades in light and dark mode.

    Similarly as with button-secondary, we define separate classes, button-tertiary-dark and
    button-tertiary-light, and then create a button-tertiary class that applies both of them.
  */

.button-tertiary-dark {
  cursor: pointer;
}

.button-tertiary-dark:hover {
  text-decoration-line: none;
}

.button-tertiary-dark {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-tertiary-dark:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-tertiary-dark {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-tertiary-dark:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-tertiary-dark:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-tertiary-dark {
  /* set a default "press down" effect for small buttons */
}

.button-tertiary-dark:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark svg {
  display: inline-block;
}

.button-tertiary-dark {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-tertiary-dark:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-dark.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-dark {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-tertiary-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-tertiary-dark {
  --button-bg-color: rgb(248 245 244 / 15%);
  --tw-ring-color: var(--tw-ring-color-dark);
  /* TODO: in dark mode, this doesn't work */
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px 1px 1px rgba(0, 0, 0, 0.11),
      inset 0px 6px 12px rgba(0, 0, 0, 0.04);
}

.button-tertiary-dark:hover {
  background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.25),
          rgba(255, 255, 255, 0.25)
        ),
        var(--button-bg-color);
  background-blend-mode: soft-light, normal;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01),
        0px 3px 2px rgba(0, 0, 0, 0.04), 0px 1px 1px rgba(0, 0, 0, 0.07),
        0px 1px 1px rgba(0, 0, 0, 0.08), inset 0px -1px 1px rgba(0, 0, 0, 0.11),
        inset 0px 6px 12px rgba(0, 0, 0, 0.04);
}

.button-tertiary-dark:active {
  background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.02),
          rgba(0, 0, 0, 0.02)
        ),
        var(--button-bg-color);
  background-blend-mode: multiply, normal;
  box-shadow: 0px 4.85px 1.94px rgba(0, 0, 0, 0.01),
        0px 2.91px 1.94px rgba(0, 0, 0, 0.04),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.07),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.08),
        inset 0px -0.97px 0.97px rgba(0, 0, 0, 0.11),
        inset 0px 6px 12px rgba(0, 0, 0, 0.04);
}

.button-tertiary-light {
  cursor: pointer;
}

.button-tertiary-light:hover {
  text-decoration-line: none;
}

.button-tertiary-light {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-tertiary-light:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-tertiary-light {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-tertiary-light:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-tertiary-light:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-tertiary-light {
  /* set a default "press down" effect for small buttons */
}

.button-tertiary-light:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light svg {
  display: inline-block;
}

.button-tertiary-light {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-tertiary-light:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-tertiary-light.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary-light {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-tertiary-light:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.button-tertiary-light {
  --button-bg-color: #F1EDEA;
  --tw-ring-color: var(--tw-ring-color-light);
  /* TODO: in dark mode, this doesn't work */
  background: linear-gradient(
        180deg,
        rgba(19, 21, 23, 0) 0%,
        rgba(19, 21, 23, 0.04) 100%
      ),
      var(--button-bg-color);
  box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.11);
}

.button-tertiary-light:hover {
  background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.25),
          rgba(255, 255, 255, 0.25)
        ),
        linear-gradient(
          180deg,
          rgba(19, 21, 23, 0) 0%,
          rgba(19, 21, 23, 0.04) 100%
        ),
        var(--button-bg-color);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01),
        0px 3px 2px rgba(0, 0, 0, 0.04), 0px 1px 1px rgba(0, 0, 0, 0.07),
        0px 1px 1px rgba(0, 0, 0, 0.08),
        inset 0px -1px 1px rgba(255, 255, 255, 0.11);
}

.button-tertiary-light:active {
  background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.02),
          rgba(0, 0, 0, 0.02)
        ),
        linear-gradient(
          180deg,
          rgba(19, 21, 23, 0) 0%,
          rgba(19, 21, 23, 0.04) 100%
        ),
        var(--button-bg-color);
  background-blend-mode: multiply, normal, normal;
  box-shadow: 0px 4.85px 1.94px rgba(0, 0, 0, 0.01),
        0px 2.91px 1.94px rgba(0, 0, 0, 0.04),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.07),
        0px 0.97px 0.97px rgba(0, 0, 0, 0.08),
        inset 0px -0.97px 0.97px rgba(255, 255, 255, 0.11);
}

/*
    button-link occupies the same space as a button, but is styled as a link, even if coded as a <button> or <input>
  */

.button-link {
  cursor: pointer;
  font-weight: 500;
  color: var(--content-primary);
  --button-bg-color: transparent;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: underline;
  /* link-looking buttons don't have a "press down" effect */
}

.button-link,
    .button-link.button-large,
    .button-link.button-small {
  padding: 0;
  border-radius: 2px;
}


    .button-link.\!button-small {
  padding: 0 !important;
  border-radius: 2px !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link:disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link:disabled {
  background-color: var(--background-overlay);
}

.button-link:disabled {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link:disabled,
.floating-input-field.button-link:disabled:focus,
.floating-input-field.button-link:disabled:hover,
.floating-input-field.button-link:disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link:disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link:disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link:disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link:disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link:disabled:hover {
  background-color: var(--background-overlay);
}

.button-link:disabled:hover {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link:disabled:hover,
.floating-input-field.button-link:disabled:hover:focus,
.floating-input-field.button-link:disabled:hover:hover,
.floating-input-field.button-link:disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link:disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link:disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link:disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link:disabled:active, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link:disabled:active {
  background-color: var(--background-overlay);
}

.button-link:disabled:active {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link:disabled:active,
.floating-input-field.button-link:disabled:active:focus,
.floating-input-field.button-link:disabled:active:hover,
.floating-input-field.button-link:disabled:active:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link:disabled:active:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link:disabled:active:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link:disabled:active:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.disabled {
  background-color: var(--background-overlay);
}

.button-link.disabled {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link.disabled,
.floating-input-field.button-link.disabled:focus,
.floating-input-field.button-link.disabled:hover,
.floating-input-field.button-link.disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.disabled:hover {
  background-color: var(--background-overlay);
}

.button-link.disabled:hover {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link.disabled:hover,
.floating-input-field.button-link.disabled:hover:focus,
.floating-input-field.button-link.disabled:hover:hover,
.floating-input-field.button-link.disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.disabled:active, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.disabled:active {
  background-color: var(--background-overlay);
}

.button-link.disabled:active {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link.disabled:active,
.floating-input-field.button-link.disabled:active:focus,
.floating-input-field.button-link.disabled:active:hover,
.floating-input-field.button-link.disabled:active:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.disabled:active:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.disabled:active:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.disabled:active:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.\!disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.\!disabled {
  background-color: var(--background-overlay);
}

.button-link.\!disabled {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link.\!disabled,
.floating-input-field.button-link.\!disabled:focus,
.floating-input-field.button-link.\!disabled:hover,
.floating-input-field.button-link.\!disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.\!disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.\!disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.\!disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.\!disabled:hover {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:hover {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link.\!disabled:hover,
.floating-input-field.button-link.\!disabled:hover:focus,
.floating-input-field.button-link.\!disabled:hover:hover,
.floating-input-field.button-link.\!disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.\!disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.\!disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-link.\!disabled:active, .btn-toggle input[type='radio']:checked + button.button-secondary.button-link.\!disabled:active {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:active {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-link.\!disabled:active,
.floating-input-field.button-link.\!disabled:active:focus,
.floating-input-field.button-link.\!disabled:active:hover,
.floating-input-field.button-link.\!disabled:active:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .button-link.\!disabled:active:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-link.\!disabled:active:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.button-link.\!disabled:active:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.button-link:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process {
  cursor: pointer;
}

.button-exit-process:hover {
  text-decoration-line: none;
}

.button-exit-process {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-exit-process:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-exit-process {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-exit-process:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-exit-process:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-exit-process {
  /* set a default "press down" effect for small buttons */
}

.button-exit-process:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process svg {
  display: inline-block;
}

.button-exit-process {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-exit-process:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-exit-process.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-exit-process.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-exit-process {
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-base);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.button-exit-process,
.floating-input-field.button-exit-process:focus,
.floating-input-field.button-exit-process:hover,
.floating-input-field.button-exit-process:active {
  box-shadow: none;
}

.button-exit-process:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.button-add-nested-item {
  cursor: pointer;
}

.button-add-nested-item:hover {
  text-decoration-line: none;
}

.button-add-nested-item {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-add-nested-item:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-add-nested-item {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-add-nested-item:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-add-nested-item:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-add-nested-item {
  /* set a default "press down" effect for small buttons */
}

.button-add-nested-item:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item svg {
  display: inline-block;
}

.button-add-nested-item {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-add-nested-item:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-nested-item.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  padding: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.0113rem;
  font-weight: 700;
  color: var(--content-primary);
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.button-add-nested-item:hover {
  background-color: var(--grayscale-1);
  text-decoration-line: none;
}

.button-add-nested-item:active {
  --tw-scale-x: 0.995;
  --tw-scale-y: 0.995;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-nested-item {
  /* box-shadow: 0px 0px 0px 0px #342e26, 0px 0px 0px 0px rgba(52, 46, 38, 0),
      0px 0px 2px 0px rgba(52, 46, 38, 0.08),
      0px 4px 6px 0px rgba(52, 46, 38, 0.04); */
}

.button-add-price-nested-item {
  cursor: pointer;
}

.button-add-price-nested-item:hover {
  text-decoration-line: none;
}

.button-add-price-nested-item {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-add-price-nested-item:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-add-price-nested-item {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-add-price-nested-item:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-add-price-nested-item:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-add-price-nested-item {
  /* set a default "press down" effect for small buttons */
}

.button-add-price-nested-item:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item svg {
  display: inline-block;
}

.button-add-price-nested-item {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-add-price-nested-item:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-add-price-nested-item.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  padding: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.0113rem;
  font-weight: 700;
  color: var(--content-primary);
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.button-add-price-nested-item:hover {
  background-color: var(--grayscale-1);
  text-decoration-line: none;
}

.button-add-price-nested-item:active {
  --tw-scale-x: 0.995;
  --tw-scale-y: 0.995;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-add-price-nested-item {
  /* box-shadow: 0px 0px 0px 0px #342e26, 0px 0px 0px 0px rgba(52, 46, 38, 0),
      0px 0px 2px 0px rgba(52, 46, 38, 0.08),
      0px 4px 6px 0px rgba(52, 46, 38, 0.04); */
}

.button-add-price-nested-item {
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.button-add-price-nested-item:hover {
  background-color: var(--grayscale-1);
}

/* Original Bullet Train Button Styles */

.\!button {
  cursor: pointer;
}

.\!button:hover {
  text-decoration-line: none;
}

.\!button {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.\!button:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.\!button {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.\!button:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.\!button:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.\!button {
  /* set a default "press down" effect for small buttons */
}

.\!button:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button svg {
  display: inline-block;
}

.\!button {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.\!button:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!button.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.\!button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.\!button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button {
  cursor: pointer;
}

.button:hover {
  text-decoration-line: none;
}

.button {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button {
  /* set a default "press down" effect for small buttons */
}

.button:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button svg {
  display: inline-block;
}

.button {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color {
  cursor: pointer;
}

.button-color:hover {
  text-decoration-line: none;
}

.button-color {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.button-color:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.button-color {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.button-color:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.button-color:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.button-color {
  /* set a default "press down" effect for small buttons */
}

.button-color:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color svg {
  display: inline-block;
}

.button-color {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.button-color:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-color.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-color.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-color {
  background-color: var(--background-overlay);
  text-align: center;
  font-weight: 600;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.button-color {
  /* no inner shadow on any buttons! */
}

.button-color:hover {
  background-color: var(--bg-fill-secondary-hover);
  transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.button-color {
  border-radius: 9999px;
  line-height: 1;
  width: auto;
  aspect-ratio: 1/1;
}

.btn-toggle input[type='checkbox'],
    .btn-toggle input[type='radio'] {
  display: none;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.button-secondary.bg-transparent {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.\!bg-transparent, .btn-toggle input[type='radio']:checked + button.button-secondary.\!bg-transparent {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary span span, .btn-toggle input[type='radio']:checked + button.button-secondary span span {
  color: var(--content-primary);
}

.btn-toggle.btn-color-picker input[type='checkbox']:checked + button, .btn-toggle.btn-color-picker input[type='radio']:checked + button {
  border-radius: 9999px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.full {
  display: flex;
  width: 100%;
  justify-content: center;
}

form.\!form > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

form.form > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

form.\!form .form-wrapper > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

form.form .form-wrapper > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

form.\!form .form-wrapper[disabled] {
  opacity: 0.3 !important;
  position: relative !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

form.form .form-wrapper[disabled] {
  opacity: 0.3;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

form.\!form .form-wrapper[disabled]:before {
  content: '' !important;
  position: absolute !important;
  background-color: transparent !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

form.form .form-wrapper[disabled]:before {
  content: '';
  position: absolute;
  background-color: transparent;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*
    This is the best way I know how to solve the problem of Tailwind's `space-y-5` creating extra space at the top
    because Rails injects hidden fields at the top of our forms. However, we don't need this on `get` forms, because
    no extra element is injected into the form.
    */

form.\!form[method='post' i],
    form.\!form[method='patch' i] {
  margin-top: -1.25rem;
}

form.form[method='post' i],
    form.form[method='patch' i] {
  margin-top: -1.25rem;
}

form.\!form[method='post' i],
    form.\!form[method='patch' i] {
  margin-top: -1.25rem;
}

form.\!form .buttons {
  padding-top: 0.25rem;
}

form.\!form .buttons > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

form.form .buttons {
  padding-top: 0.25rem;
}

form.form .buttons > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.table {
  width: 100%;
}

.table > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
  --tw-divide-opacity: 0.05;
}

.table {
  text-align: left;
}

.table:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}

.table th {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.33;
  letter-spacing: 0;
  font-weight: 600;
  text-transform: uppercase;
}

.table th:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.table th:first-child {
  padding-left: 1.25rem;
}

.table th:last-child {
  padding-right: 1.25rem;
}

.table tbody > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
  --tw-divide-opacity: 0.05;
}

.table tbody:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}

.table td {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.table td:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.table td:first-child {
  padding-left: 1.25rem;
}

.table td:last-child {
  padding-right: 1.25rem;
}

.table td.buttons {
  padding-right: 0.75rem;
}

.table td.buttons > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.table td.buttons {
  text-align: right;
}

/* just having a cell with buttons shouldn't expand the height of a table row. */

.table td.buttons > * {
  /* @apply -mt-5 -mb-5; */
}

.box-table .table th:first-child, .box-table .table td:first-child {
  padding-left: 2rem;
}

.box-table .table th:last-child, .box-table .table td:last-child {
  padding-right: 2rem;
}

.pagy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pagy a:not(.gap) {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-style: none;
  background-color: var(--background-overlay);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--content-primary);
  cursor: pointer;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.pagy a:not(.gap):hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.pagy a:not(.gap):active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.pagy a:not(.gap):not([href]) {
  /* disabled links */
  cursor: not-allowed;
  background-color: var(--background-base);
  color: var(--content-tertiary);
}

.pagy a:not(.gap):not([href]):hover {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.pagy a:not(.gap).current {
  background-color: var(--brand-primary-brew);
  color: var(--background-elevated);
}

.message .pagy a:not(.gap).current .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

/* Hide page numbers on mobile/tablet, show only prev/next */

@media (max-width: 1023px) {
  .pagy {
    /* Make prev/next buttons larger on small screens */
  }

  .pagy a:not([aria-label='Previous']):not([aria-label='Next']) {
    display: none;
  }

  .date-range-calendar .flatpickr-day.pagy a:not([aria-label='Previous']):not([aria-label='Next']) {
    display: block;
    visibility: hidden;
  }

  .pagy a[aria-label='Previous'],
      .pagy a[aria-label='Next'] {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Gap/ellipsis styling */

.pagy .gap {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-style: none;
  cursor: default;
  background-color: var(--background-overlay);
  color: var(--content-primary);
  text-align: center;
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1;
}

.pagy .gap:hover {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Hide gap/ellipsis on mobile/tablet */

@media (max-width: 1023px) {
  .pagy .gap {
    display: none;
  }

  .date-range-calendar .flatpickr-day.pagy .gap {
    display: block;
    visibility: hidden;
  }
}

/* Replace text symbols with SVG icons using CSS */

.pagy a[aria-label='Previous']:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 10L3.5 6L7.5 2' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.pagy a[aria-label='Next']:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 2L8.5 6L4.5 10' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Larger icons on small screens */

@media (max-width: 1023px) {
  .pagy a[aria-label='Previous']:before,
      .pagy a[aria-label='Next']:before {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13.333L5.333 8L10 2.667' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .pagy a[aria-label='Next']:before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2.667L10.667 8L6 13.333' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* Hide the original text symbols */

.pagy a[aria-label='Previous'],
    .pagy a[aria-label='Next'] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  font-size: 0;
  /* Hide the text */
}

/* Style the gap/ellipsis */

.pagy .gap:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 6C1 5.44772 1.44772 5 2 5C2.55228 5 3 5.44772 3 6C3 6.55228 2.55228 7 2 7C1.44772 7 1 6.55228 1 6ZM5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6ZM9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6Z' fill='currentColor'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.pagy .gap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  font-size: 0;
  /* Hide the text */
}

[data-select-all-target='wrapper'].pagy label {
  display: block;
}

.pagy label {
  display: inline-block;
  white-space: nowrap;
  border-radius: 0.5rem;
  background-color: var(--background-overlay);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.pagy label input {
  border-radius: 0.375rem;
  border-style: none;
  background-color: var(--background-elevated);
}

/* Fix Safari issue related to <summary> / <details> arrow */

details > summary.list-none::-webkit-details-marker,
  details > summary.list-none::marker {
  display: none;
}

.field-border-disabled,
    .field-border-disabled:hover,
    .field-border-disabled:focus {
  --border-color: #DCD8DA;
}

.field-border-base {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.field-border-base,
    .field-border-base:hover,
    .field-border-base:focus,
    .field-border-base:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

/* can't @apply field-border-disabled, but it would be cool, so copying its contents */

.field-border-base:disabled,
      .field-border-base:disabled:hover,
      .field-border-base:disabled:focus,
      .field-border-base:disabled:focus-within {
  --border-color: #DCD8DA;
}

.field-border {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.field-border, .field-border:hover, .field-border:focus, .field-border:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.field-border:disabled, .field-border:disabled:hover, .field-border:disabled:focus, .field-border:disabled:focus-within {
  --border-color: #DCD8DA;
}

.field-border:hover,
    .field-border:focus,
    .field-border:focus-within {
  --border-color: rgb(11 5 29 / 36%);
}

.field-border:focus,
    .field-border:focus-within {
  --ring-color: rgb(11 5 29 / 16%);
}

.field-no-border {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.field-no-border, .field-no-border:hover, .field-no-border:focus, .field-no-border:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.field-no-border:disabled, .field-no-border:disabled:hover, .field-no-border:disabled:focus, .field-no-border:disabled:focus-within {
  --border-color: #DCD8DA;
}

.field-no-border:hover,.field-no-border:focus,.field-no-border:focus-within {
  --border-color: rgb(11 5 29 / 36%);
}

.field-no-border:focus,.field-no-border:focus-within {
  --ring-color: rgb(11 5 29 / 16%);
}

.field-no-border {
  border-radius: 0.5rem;
  --border-width: 0;
  --border-color: transparent;
}

.field-no-border:focus {
  --border-width: 1px;
}

.text-input-base {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .text-input-base {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.text-input-base {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.text-input-base::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input-base::placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input-base:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.text-input-base:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input-base:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input-disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.text-input-disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

/*
    Not applied to super_select, so you'll need to adjust super_select.css separately
  */

.text-input {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .text-input {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.text-input {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.text-input::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input::placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.text-input:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input {
  /* OL-3343: keep textarea text + placeholder at 16px on desktop too — text-input-base
       shrinks to 14px at md, but the text-field component (.floating-input-field) is a flat 16px. */
}

@media (min-width: 768px) {
  .text-input {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.text-input {
  /* OL-3343: match the text-field component (.floating-input-field) box exactly — 12px radius,
       1px inset border (content-border-dark), 1px inset content-primary on hover, 2px inset
       content-primary on focus (no outer ring). Token vars (--content-*) are always defined in
       figma.css, so no hardcoded hex fallbacks (they'd only go stale). --rounded-radius-12 is
       not a CSS var, so its 12px fallback is load-bearing — keep it. */
  border: none;
  border-radius: var(--rounded-radius-12, 12px);
  box-shadow: 0 0 0 1px inset var(--content-border-dark);
  transition-property: box-shadow, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.text-input:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary);
}

.text-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary);
}

.text-input:disabled,
    .text-input.disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.text-input:disabled:where(.dark, .dark *),
    .text-input.disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}


    .text-input.\!disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}


    .text-input.\!disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

/* Error state: red-500 inset border (mirrors .floating-input-field.field-border-for-error).
       Higher specificity than :hover/:focus so it persists while focused. Used by the over-limit
       character counter (fields--field#updateLengthIndicator) and server validation errors. */

.text-input.field-border-for-error,
    .text-input.field-border-for-error:hover,
    .text-input.field-border-for-error:focus {
  box-shadow: 0 0 0 2px inset #e83b47;
}

.text-input-label {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--content-primary);
}

.text-input-label:where(.dark, .dark *) {
  color: var(--content-tertiary);
}

/* ── Search input ──────────────────────────────────────────────────────────
     Pill-shaped filter field with a leading search icon. Variants split two ways:
       resting surface — .search-input-neutral (filled background-base, borderless)
                       — .search-input-outlined (elevated background + 1px border)
       size            — base is `lg` (44px); .search-input-sm is 32px (matches the
                         chips / small buttons). Left padding leaves room for the
                         absolutely-positioned leading icon (pl-12 lg / pl-9 sm).
     Active (focus): the surface keeps its resting background and gains a `shadow-sm`
     lift — no background swap — plus the app-wide keyboard focus-ring (base.css).
     ──────────────────────────────────────────────────────────────────────── */

.search-input {
  height: 2.75rem;
  width: 100%;
  border-radius: 9999px;
  padding-left: 3rem;
  padding-right: 2.25rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--content-primary);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.search-input::-moz-placeholder {
  color: var(--content-secondary);
}

.search-input::placeholder {
  color: var(--content-secondary);
}

.search-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Active (focus) lift: the shadow-sm token (0px 2px 8px rgba(0,0,0,0.06)),
       declared directly rather than via @apply focus:shadow-sm. Going through the
       utility pulls in Tailwind's box-shadow composite, and pairing it with
       focus:ring-0 emits a second box-shadow that references the --tw-ring-*
       custom properties — which are never initialized in the Atelier build, so the
       whole property is invalid-at-computed-value and paints nothing. A plain
       declaration sidesteps that machinery and also overrides the
       @tailwindcss/forms focus ring, so no focus:ring-0 is needed. `transition`
       (above) animates box-shadow, so the lift eases in on focus. */

.search-input:focus {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
}

.search-input-sm {
  height: 2rem;
  padding-left: 2.25rem;
  padding-right: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.search-input-neutral {
  border-width: 0px;
  background-color: var(--background-base);
}

.search-input-outlined {
  /* Resting: 1px neutral border. Active (focus): border darkens to content-border-dark
       alongside the shadow-sm lift (focus:border also overrides the @tailwindcss/forms
       blue focus default). */
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
}

.search-input-outlined:focus {
  border-color: var(--content-border-dark);
}

/* Orders insights bar — initial collapsed state, set server-side from the
     orders_insights_hidden cookie so the bar doesn't flash open before the
     insights-bar controller connects. The controller writes inline height/overflow
     on connect, which beats this rule from then on. */

.insights-bar-collapsed {
  height: 0;
  overflow: hidden;
}

/* Initial collapsed state for the `disclosure` controller — keeps a panel from flashing
     open before JS connects (first used by the order-detail receipt breakdown). The
     controller writes inline max-height/opacity on toggle, which beats this rule. */

.disclosure-collapsed {
  max-height: 0;
  opacity: 0;
}

/* Order-row product thumbnail stacks (per-order breakdown popover): one image rotated upright,
     or two stacked + fanned. Positioned by absolute left + z-index inside a relative wrapper. */

.thumb-stack-front {
  left: 4px;
  z-index: 2;
  transform: rotate(3deg);
}

.thumb-stack-back {
  left: 0;
  z-index: 1;
  transform: rotate(-4deg);
}

.thumb-stack-single {
  transform: rotate(3deg);
}

/* Orders search clear (×) — our custom clear button (cross-large glyph), replacing the
     native type=search clear. Shown only when the field is BOTH focused and non-empty
     (:placeholder-shown ⇒ empty). focus-within (not :focus) keeps it visible while the
     button itself is clicked, since focus stays inside the wrapper; display:none (not
     opacity) so it also leaves the tab order when hidden. The button carries NO display
     utility, so these component-layer rules own its display. */

.orders-search-clear {
  display: none;
}

.orders-search-field:focus-within input:not(:-moz-placeholder-shown) ~ .orders-search-clear {
  display: grid;
}

.orders-search-field:focus-within input:not(:placeholder-shown) ~ .orders-search-clear {
  display: grid;
}

/* Popover quick-filter field (orders nested menus, Figma 5206-5857) — a borderless, full-width
     input on the menu's own bg. Clicking in must show NOTHING but the caret, so we strip every
     browser/@tailwindcss/forms focus affordance from the input itself: forms applies a box-shadow
     ring + blue border-color on :focus that `focus:outline-none` alone doesn't clear. The ONLY focus
     cue is the keyboard-only row ring below. */

.popover-filter-field input {
  /* padding:0 — the wrapper's px-4 owns the 16px inset (so the text lines up with the option
       checkboxes); @tailwindcss/forms otherwise adds its own .75rem, double-indenting the text. */
  border: 0;
  padding: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.popover-filter-field input:focus,
  .popover-filter-field input:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
}

/* Drop the native search-field magnifier / clear-X decorations (type=search). */

.popover-filter-field input::-webkit-search-decoration,
  .popover-filter-field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* No focus ring: these filter fields are designed as search boxes, and search boxes across the app
     rely on their input style rather than a keyboard-focus ring. The wrappers therefore drop the
     keyboard-focus controller, so there's no data-kbd-focus rule here. */

/* Keep a nested filter row lit while ITS submenu is open. The dropdown root gets `.active`
     for the whole time the flyout is shown, so mirror the row's hover state onto its trigger —
     it stays clearly the active menu even once the pointer moves off the row into the submenu
     (without this, leaving the row drops :hover and the background vanishes mid-interaction). */

.nested-filter-row.active [data-dropdown-target="trigger"] {
  background-color: var(--background-base);
  color: var(--content-primary);
}

.nested-filter-row.\!active [data-dropdown-target="trigger"] {
  background-color: var(--background-base);
  color: var(--content-primary);
}

/* Forced-$ range inputs — hover/focus match the floating-label text fields (.floating-input-field)
     exactly: the border is an INSET box-shadow (never an outer ring — the input opts out of the global
     focus-visible outline via `hide-focus-ring`), thickening to content-primary on hover (1px) and
     focus (2px). Resting stays a 1px content-border-neutral inset. border:none drops the
     @tailwindcss/forms default border so only the box-shadow shows. */

.filter-total-input {
  border: none;
  box-shadow: 0 0 0 1px inset var(--content-border-neutral);
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-total-input:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary);
}

.filter-total-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary);
}

/* Orders filter trigger, active (filters applied): content-primary border + a 1px box-shadow spread
     in the same colour, reading as a 2px outline. */

.filter-trigger-active {
  border-color: var(--content-primary);
  box-shadow: 0 0 0 1px var(--content-primary);
}

/* The active-filter count badge's 2px white ring (over the button corner) — a box-shadow so it
     doesn't affect layout. */

.filter-trigger-badge {
  box-shadow: 0 0 0 2px var(--background-elevated);
}

/* Done was clicked: dim the grid body — every child BELOW the sticky header (its first child) — to
     50% and make it inert until the filtered view renders, so applying filters reads as responsive
     (popover already gone, grid clearly "refreshing"). Turbo replaces the grid on render, clearing it. */

.orders-grid-refreshing > :not(:first-child) {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* "Connected" verified badge — recolors the shared non-flat award badge in place:
     scallop (1st path) → green-600, checkmark (2nd path) → brand-crisp. CSS fill overrides
     the SVG's hardcoded fill attributes, so no separate asset/restart is needed. */

.badge-connected path:first-of-type {
  fill: #4FAA71;
}

.badge-connected path:last-of-type {
  fill: var(--brand-primary-crisp);
}

/* ────────────────────────────────────────────────────────────────────────
     Row divider — drawn as an inset background-image line (not a border) so it
     spans the content width and ignores the row's horizontal cell padding. A
     full-bleed border runs wider than the content; this gradient line matches
     it. Pattern used by modern settings UIs (e.g. Claude). The last row in a
     group draws no line. Apply to each row + the header row of a list. */

.row-divider {
  background-image: linear-gradient(var(--content-border-neutral), var(--content-border-neutral));
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 1px;
  /* mobile: content is flush, so full-width line */
}

.row-divider:last-child {
  background-image: none;
}

@container (min-width: 36rem) {
  /* @xl: cells gain 8px L/R padding, so inset the line 16px to match content. */

  .row-divider {
    background-size: calc(100% - 16px) 1px;
  }
}

/* Independent row divider (Orders 2.0). Unlike `.row-divider` above — a background-image
     line painted on each row, which the row's hover/selection highlight overlaps and clips —
     this is its OWN 1px element placed BETWEEN rows, so nothing can paint over it. It's
     transparent until the list opts in with `.show-row-dividers` on the container, so a single
     class — flipped live in JS by the Display ▸ row-dividers switch (orders--row-dividers) — toggles
     every divider at once. Stays 1px tall even when hidden, so it's a pure colour swap with no layout
     shift; the 200ms transition fades it in/out so the toggle is instant, never a page reload. */

.row-divider-line {
  background-color: transparent;
  transition: background-color 200ms ease;
}

.show-row-dividers .row-divider-line {
  background-color: var(--content-border-neutral);
}

/* Summary-bar divider (Orders 2.0): the 24px line between metric cards. Hovering a metric fills its
     inner card with a rounded background; the dividers flanking the hovered card fade out so that fill
     reads as one clean rectangle, then fade back in on hover-out. A divider hides when EITHER adjacent
     cell is hovered — `.summary-cell:hover + …` catches the cell to the divider's LEFT, `:has(+ …)` the
     cell to its RIGHT. (The metric hover lives on the inner card, but it fills its padding-less cell,
     so the cell — the divider's actual sibling — gets :hover too.) */

.summary-divider {
  transition: opacity 200ms ease;
}

.summary-cell:hover + .summary-divider,
  .summary-divider:has(+ .summary-cell:hover) {
  opacity: 0;
}

.text-input-no-border {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .text-input-no-border {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.text-input-no-border {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.text-input-no-border::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input-no-border::placeholder {
  color: rgb(11 5 29 / .32);
}

.text-input-no-border:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.text-input-no-border:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input-no-border:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.text-input-no-border {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.text-input-no-border, .text-input-no-border:hover, .text-input-no-border:focus, .text-input-no-border:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.text-input-no-border:disabled, .text-input-no-border:disabled:hover, .text-input-no-border:disabled:focus, .text-input-no-border:disabled:focus-within {
  --border-color: #DCD8DA;
}

.text-input-no-border:hover,.text-input-no-border:focus,.text-input-no-border:focus-within {
  --border-color: rgb(11 5 29 / 36%);
}

.text-input-no-border:focus,.text-input-no-border:focus-within {
  --ring-color: rgb(11 5 29 / 16%);
}

.text-input-no-border {
  border-radius: 0.5rem;
  --border-width: 0;
  --border-color: transparent;
}

.text-input-no-border:focus {
  --border-width: 1px;
  z-index: 50;
}

/* allow ring to be on top of any dividers */

.text-input-no-border:disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.text-input-no-border:disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.field-border-for-error,
    .field-border-for-error:hover,
    .field-border-for-error:focus {
  --border-color: #e83b47;
  --ring-color: #fde3e5;
}

[type='checkbox']:checked {
  background-size: 10px 10px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1.875 4.912 1.667 2.276 4.583-4.375"/></svg>');
}

[type='checkbox']:indeterminate {
  background-size: 10px 10px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-width="1.5" d="M1.563 5h6.875"/></svg>');
}

[type='checkbox']:disabled, [type='radio']:disabled {
  background-color: rgb(11 5 29 / .12);
  opacity: 0.5;
}

.large-button-hover {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--grayscale-1);
  /* background: linear-gradient(
      90deg,
      theme(colors.seafoam.100) 0%,
      theme(colors.offWhite / 0%) 110.35%
    );
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06); */
}

.large-button-hover-border-gradient {
  content: '';
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--grayscale-1);
  inset: -1px;
  z-index: 0;
  /* background: linear-gradient(
      105deg,
      theme(colors.seafoam.200 / 0%) 10%,
      white 40%,
      white 50%,
      theme(colors.seafoam.100) 90%
    ); */
}

/*
    Uses a mask to punch out an overlay that has a background gradient set via Tailwind's bg-gradient-to-*
    e.g.: relative z-0 after:border-gradient after:bg-gradient-to-b after:from-white after:to-white/40
  */

.border-gradient {
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  z-index: -1;
  mask: linear-gradient(black, black) content-box,
      linear-gradient(black, black);
  -webkit-mask: linear-gradient(black, black) content-box,
      linear-gradient(black, black);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding: var(--border-gradient-width, 1px);
  /* Thickness of the border */
  box-sizing: border-box;
}

.wavy-border {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="51" height="5" viewBox="0 0 51 5" fill="none"><path d="M33.945 4.94886H33.9929C38.242 4.94886 38.242 0.948863 42.4911 0.948863C46.7402 0.948863 46.7402 4.94886 50.9893 4.94886V0C46.7402 0 4.24911 0 0 0V4.94886C4.24911 4.94886 4.2491 0.948863 8.49821 0.948863C12.7304 0.948863 12.7473 4.91786 16.9466 4.94886H16.9965C21.2456 4.94886 21.2456 0.948863 25.4947 0.948863C27.5534 0.948863 28.6147 1.88786 29.644 2.85586L29.8435 3.04286C30.8649 4.00286 31.9182 4.93486 33.945 4.94886Z" fill="%230B051D" fill-opacity="0.04"/></svg>');
  background-repeat: repeat-x;
  background-size: 51px 5px;
  background-position: center;
}

svg.stroke-width-1\.5 path,
    svg.stroke-width-1\.5 circle,
    svg.stroke-width-1\.5 rect {
  stroke-width: var(--icon-stroke-width, 1.5);
}

svg.stroke-width-2 path,
    svg.stroke-width-2 circle,
    svg.stroke-width-2 rect {
  stroke-width: var(--icon-stroke-width, 2);
}

svg.stroke-width-3 path,
    svg.stroke-width-3 circle,
    svg.stroke-width-3 rect {
  stroke-width: var(--icon-stroke-width, 3);
}

svg.icon-size-10 {
  height: 2.5rem;
  width: 2.5rem;
}

svg.icon-size-8 {
  height: 2rem;
  width: 2rem;
}

svg.icon-size-7 {
  height: 1.75rem;
  width: 1.75rem;
}

svg.icon-size-6 {
  height: 1.5rem;
  width: 1.5rem;
}

svg.icon-size-5 {
  height: 1.25rem;
  width: 1.25rem;
}

svg.icon-size-4 {
  height: 1rem;
  width: 1rem;
}

svg.icon-size-3\.5 {
  height: 0.875rem;
  width: 0.875rem;
}

svg.icon-size-3 {
  height: 0.75rem;
  width: 0.75rem;
}

svg.icon-size-2\.5 {
  height: 0.625rem;
  width: 0.625rem;
}

svg.icon-size-2 {
  height: 0.5rem;
  width: 0.5rem;
}

.rotate-y-0 {
  transform: rotateY(0deg);
}

.rotate-y-90 {
  transform: rotateY(90deg);
}

/* Toast container is a top-layer popover. Strip the UA popover chrome (inset,
     margin, border, padding, background, clipping) so the toast's own utility
     classes drive its fixed top-center positioning. In @layer components so the
     positioning utilities (later layer) still win for top/left/width. */

.toast-popover {
  inset: auto;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* basic link with thin underline that runs smoothly across descenders */

.button-link {
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.button-link:hover {
  text-decoration-line: underline;
}

.button-link {
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.\!button {
  background-color: var(--background-overlay);
  text-align: center;
  font-weight: 600;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.button {
  background-color: var(--background-overlay);
  text-align: center;
  font-weight: 600;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.\!button {
  /* no inner shadow on any buttons! */
}

.button {
  /* no inner shadow on any buttons! */
}

.\!button:hover {
  background-color: var(--bg-fill-secondary-hover) !important;
  transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 0.15s !important;
}

.button:hover {
  background-color: var(--bg-fill-secondary-hover);
  transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

/* Base button styles with states (including medium size by default) */

.btn-internal-layout {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.btn-base {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-base:hover {
  text-decoration-line: none;
}

.btn-base:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-base:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

/* Keep pointer-cursor on input[type=submit] hover. The hover background-color
     comes from their button-* class (e.g. .button-primary-dark) — we intentionally
     do NOT dim with opacity, which would fight the class-driven hover. */

input[type='submit']:hover,
  input[type='button']:hover,
  input[type='reset']:hover {
  cursor: pointer;
}

input[type='submit'],
  input[type='button'],
  input[type='reset'] {
  /* .btn-base centers its label with inline-flex (the text is a flex child on a
       <button>). An <input> button renders its `value` as the element's own text,
       NOT a flex child, so flex centering doesn't apply and the label drifts
       left. Switch input buttons to inline-block + text-align: center so the
       value label centers (inline-block keeps the original inline-flex sizing:
       content-width when auto, full-width inside a grid/flex cell). Applies
       app-wide so this never bites per-button again. */
  display: inline-block;
  text-align: center;
}

/* Button variants */

.button-primary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-primary:hover {
  text-decoration-line: none;
}

.button-primary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-primary {
  color: var(--brand-primary-crisp);
}

.button-primary:hover {
  color: var(--brand-primary-crisp);
}

.button-primary {
  background-color: var(--bg-fill-moola, #254f1a);
}

.button-primary:hover {
  background-color: var(--bg-fill-moola-hover, #1d3d14);
}

.button-primary-dark {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-primary-dark:hover {
  text-decoration-line: none;
}

.button-primary-dark:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-dark:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-primary-dark {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.message .button-primary-dark .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.button-primary-dark:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
}

/* Inverse of button-primary-dark: a solid white (background-elevated) surface with
     content-primary text, for a primary action sitting on a dark fill (e.g. the
     sentiment-negative "Stripe disconnected" banner). Subtle background-base hover. */

.button-primary-inverse {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-primary-inverse:hover {
  text-decoration-line: none;
}

.button-primary-inverse:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary-inverse:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-primary-inverse {
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.button-primary-inverse:hover {
  color: var(--content-primary);
  background-color: var(--background-base);
}

.button-secondary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-secondary:hover {
  text-decoration-line: none;
}

.button-secondary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-secondary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-secondary {
  background-color: var(--background-overlay);
  color: var(--content-primary);
}

.button-secondary:hover {
  color: var(--content-primary);
  background-color: var(--bg-fill-secondary-hover);
}

.button-tertiary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-tertiary:hover {
  text-decoration-line: none;
}

.button-tertiary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-tertiary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-tertiary {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.btn-toggle input[type='checkbox']:checked + .button-tertiary:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-tertiary:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay) !important;
}

.button-tertiary:hover {
  color: var(--content-primary);
}

.button-tertiary:where(.dark, .dark *) {
  background-color: transparent !important;
}

.button-tertiary:hover {
  background-color: var(--background-overlay);
}

/* Full-width button. Previously undefined — it only worked inside
     align-items:stretch flex parents. Defining it makes it work everywhere,
     including centered/block contexts (e.g. the ready_to_generate CTA). The
     existing stretch-context usages are unchanged (width:100% == stretch). */

.button-full {
  width: 100%;
}

.box-footer .button-secondary,
  .box-actions .button-secondary,
  .buttons .button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.box-footer .button-secondary:hover,
  .box-actions .button-secondary:hover,
  .buttons .button:hover {
  text-decoration-line: none;
}

.box-footer .button-secondary:active,
  .box-actions .button-secondary:active,
  .buttons .button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.box-footer .button-secondary:where(.dark, .dark *),
  .box-actions .button-secondary:where(.dark, .dark *),
  .buttons .button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.box-footer .button-secondary,
  .box-actions .button-secondary,
  .buttons .button {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.box-footer .button-secondary:hover,
  .box-actions .button-secondary:hover,
  .buttons .button:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
}

.buttons .\!button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.buttons .\!button:hover {
  text-decoration-line: none;
}

.buttons .\!button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.buttons .\!button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .\!button {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.buttons .\!button:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
}

.box-footer .button-secondary,
  .box-actions .button-secondary,
  .buttons .button {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}


  .buttons .\!button {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.box-actions .bulk-actions-selectable-toggle {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.box-actions .bulk-actions-selectable-toggle:hover {
  text-decoration-line: none;
}

.box-actions .bulk-actions-selectable-toggle:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.box-actions .bulk-actions-selectable-toggle:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.box-actions .bulk-actions-selectable-toggle {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.box-actions .bulk-actions-selectable-toggle:hover {
  color: var(--content-primary);
}

.box-actions .bulk-actions-selectable-toggle:where(.dark, .dark *) {
  background-color: transparent !important;
}

.box-actions .bulk-actions-selectable-toggle:hover {
  background-color: var(--background-overlay);
}

.buttons .button-secondary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.buttons .button-secondary:hover {
  text-decoration-line: none;
}

.buttons .button-secondary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.buttons .button-secondary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .button-secondary {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.buttons .button-secondary:hover {
  color: var(--content-primary);
}

.buttons .button-secondary:where(.dark, .dark *) {
  background-color: transparent !important;
}

.buttons .button-secondary:hover {
  background-color: var(--background-overlay);
}

.button-disabled,
  .button[disabled],
  .button-primary[disabled],
  .button-secondary[disabled],
  .button-tertiary[disabled],
  .button-primary-dark[disabled],
  .button-danger[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}


  .\!button[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-disabled:not(.no-disabled-style), .button[disabled]:not(.no-disabled-style), .button-primary[disabled]:not(.no-disabled-style), .button-secondary[disabled]:not(.no-disabled-style), .button-tertiary[disabled]:not(.no-disabled-style), .button-primary-dark[disabled]:not(.no-disabled-style), .button-danger[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
}

 .\!button[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
}

.button-disabled:not(.no-disabled-style), .button[disabled]:not(.no-disabled-style), .button-primary[disabled]:not(.no-disabled-style), .button-secondary[disabled]:not(.no-disabled-style), .button-tertiary[disabled]:not(.no-disabled-style), .button-primary-dark[disabled]:not(.no-disabled-style), .button-danger[disabled]:not(.no-disabled-style) {
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-disabled:not(.no-disabled-style):active, .button[disabled]:not(.no-disabled-style):active, .button-primary[disabled]:not(.no-disabled-style):active, .button-secondary[disabled]:not(.no-disabled-style):active, .button-tertiary[disabled]:not(.no-disabled-style):active, .button-primary-dark[disabled]:not(.no-disabled-style):active, .button-danger[disabled]:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

 .\!button[disabled]:not(.no-disabled-style) {
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

 .\!button[disabled]:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Handle nested button-disabled class on child elements */

.button-primary:has(.button-disabled),
  .button-primary-dark:has(.button-disabled),
  .button-secondary:has(.button-disabled),
  .button-tertiary:has(.button-disabled),
  .button-danger:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.button-disabled):not(.no-disabled-style), .button-primary-dark:has(.button-disabled):not(.no-disabled-style), .button-secondary:has(.button-disabled):not(.no-disabled-style), .button-tertiary:has(.button-disabled):not(.no-disabled-style), .button-danger:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-danger {
  /* Brighter red (--bg-fill-danger-hover, #d62c38) is the default; sentiment-negative is
       the hover state — flipped from the prior default→hover order. */
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-danger:hover {
  text-decoration-line: none;
}

.button-danger:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-danger:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-danger {
  background-color: var(--bg-fill-danger-hover);
  color: var(--brand-primary-crisp);
}

.button-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1));
  color: var(--brand-primary-crisp);
}

.button-icon {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-icon:hover {
  text-decoration-line: none;
}

.button-icon:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-icon:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-icon {
  aspect-ratio: 1 / 1;
  height: 32px;
  width: 32px;
  background-color: var(--background-overlay);
  padding: 0px !important;
  color: var(--content-primary);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-icon:hover {
  color: var(--content-primary);
}

.button-icon {
  /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
  border-radius: var(--rounded-full, 99999px) !important;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
}

.button-icon:hover {
  background-color: var(--bg-fill-secondary-hover);
}

/* Hover / active feedback: the glyph scales up inside the (fixed-size) button, so
     every icon-button variant gets the lift automatically. Mirrors the marketplace
     scroll arrows (110%, 150ms); :active covers mobile tap-and-hold (no hover there). */

.button-icon svg {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-icon:hover svg,
  .button-icon:active svg {
  transform: scale(1.1);
}

/* Focus ring is handled by the app-wide focus-visible standard in base.css
     (2px content-primary outline, keyboard-only). No custom :focus ring here —
     a plain :focus box-shadow would also fire on mouse click. */

/* Circle variant */

.button-icon-circle {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-icon-circle:hover {
  text-decoration-line: none;
}

.button-icon-circle:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-icon-circle:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-icon-circle {
  aspect-ratio: 1 / 1;
  height: 32px;
  width: 32px;
  background-color: var(--background-overlay);
  padding: 0px !important;
  color: var(--content-primary);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-icon-circle:hover {
  color: var(--content-primary);
}

.button-icon-circle {
  /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
  border-radius: var(--rounded-full, 99999px) !important;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
}

.button-icon-circle:hover {
  background-color: var(--bg-fill-secondary-hover);
}

.button-icon-circle svg {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-icon-circle:hover svg, .button-icon-circle:active svg {
  transform: scale(1.1);
}

.button-icon-circle.button-xs {
  height: 26px;
  width: 26px;
  padding: 0.375rem !important;
}

.button-icon-circle.button-xs svg {
  height: 0.875rem !important;
  width: 0.875rem !important;
}

.button-icon-circle.button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon-circle.\!button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon-circle.button-small svg {
  height: 1rem !important;
  width: 1rem !important;
}

.button-icon-circle.\!button-small svg {
  height: 1rem !important;
  width: 1rem !important;
}

.button-icon-circle.button-medium {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.625rem !important;
}

.button-icon-circle.button-medium svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon-circle.button-large {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle.button-large svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon-circle.button-icon-pagination svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

.button-icon-circle.wizard-button--next {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle.wizard-button--next svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon-circle.wizard-button--previous {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle.wizard-button--previous svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon-circle.button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon-circle.\!button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon-circle.button-medium.lightbox-pagination svg {
  width: 14px !important;
  height: 14px !important;
}

.button-icon-circle {
  aspect-ratio: 1 / 1;
  border-radius: 9999px !important;
}

/* Primary dark circle variant */

.button-icon-circle-primary-dark {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-icon-circle-primary-dark:hover {
  text-decoration-line: none;
}

.button-icon-circle-primary-dark:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-icon-circle-primary-dark:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-icon-circle-primary-dark {
  aspect-ratio: 1 / 1;
  height: 32px;
  width: 32px;
  background-color: var(--background-overlay);
  padding: 0px !important;
  color: var(--content-primary);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-icon-circle-primary-dark:hover {
  color: var(--content-primary);
}

.button-icon-circle-primary-dark {
  /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
  border-radius: var(--rounded-full, 99999px) !important;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
}

.button-icon-circle-primary-dark:hover {
  background-color: var(--bg-fill-secondary-hover);
}

.button-icon-circle-primary-dark svg {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-icon-circle-primary-dark:hover svg, .button-icon-circle-primary-dark:active svg {
  transform: scale(1.1);
}

.button-icon-circle-primary-dark.button-xs {
  height: 26px;
  width: 26px;
  padding: 0.375rem !important;
}

.button-icon-circle-primary-dark.button-xs svg {
  height: 0.875rem !important;
  width: 0.875rem !important;
}

.button-icon-circle-primary-dark.button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon-circle-primary-dark.\!button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon-circle-primary-dark.button-small svg {
  height: 1rem !important;
  width: 1rem !important;
}

.button-icon-circle-primary-dark.\!button-small svg {
  height: 1rem !important;
  width: 1rem !important;
}

.button-icon-circle-primary-dark.button-medium {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.625rem !important;
}

.button-icon-circle-primary-dark.button-medium svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon-circle-primary-dark.button-large {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle-primary-dark.button-large svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon-circle-primary-dark.button-icon-pagination svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

.button-icon-circle-primary-dark.wizard-button--next {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle-primary-dark.wizard-button--next svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon-circle-primary-dark.wizard-button--previous {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon-circle-primary-dark.wizard-button--previous svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon-circle-primary-dark.button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon-circle-primary-dark.\!button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon-circle-primary-dark.button-medium.lightbox-pagination svg {
  width: 14px !important;
  height: 14px !important;
}

.button-icon-circle-primary-dark {
  aspect-ratio: 1 / 1;
  border-radius: 9999px !important;
}

.button-icon-circle-primary-dark {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.message .button-icon-circle-primary-dark .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.button-icon-circle-primary-dark:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--brand-primary-brew) !important;
}

/* Inverse variant: for controls sitting over a dark / media background (image,
     video, dark fill). "Inverse" flips the base theme to light colors so the
     control reads on dark surfaces — translucent white at rest, brighter on
     hover, white icon. Reusable wherever a component needs an on-dark variant. */

.button-icon-inverse {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.button-icon-inverse:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.button-icon-inverse {
  background-color: rgba(255, 255, 255, 0.08);
}

.button-icon-inverse:hover,
    .button-icon-inverse:active {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

/* Icon button size variants (box size is border-box, so it includes padding).
     xs: 26px box /  6px padding / 14px icon
     sm: 32px box /  8px padding / 16px icon
     md: 40px box / 10px padding / 20px icon
     lg: 44px box / 12px padding / 20px icon */

.button-icon.button-xs {
  height: 26px;
  width: 26px;
  padding: 0.375rem !important;
}

.button-icon.button-xs svg {
  height: 0.875rem !important;
  width: 0.875rem !important;
}

.button-icon.button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon.\!button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.button-icon.button-small svg {
  height: 1rem !important;
  width: 1rem !important;
}

.button-icon.\!button-small svg {
  height: 1rem !important;
  width: 1rem !important;
}

.button-icon.button-medium {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.625rem !important;
}

.button-icon.button-medium svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-icon.button-large {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon.button-large svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

/* Pagination-arrow chevrons sit at 12px — smaller than the default 16px sm icon-button
     glyph. Scoped to this modifier (and placed AFTER the size variants so it wins the
     cascade at equal specificity) so a plain .button-icon.button-small stays 16px.
     (Re-added post-rebase for the marketplace carousel/pagination, OL-3404.) */

.button-icon.button-icon-pagination svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

/* Chrome icon buttons step up to md (40px box / 10px padding / 20px icon) on mobile for a
     comfortable touch target, reverting to their authored size on desktop. Add
     `.page-header-toolbar` to the page's header bar — or `.drawer-footer-toolbar` to the drawer's
     mobile pagination footer, which is the same idea one edge down — and every icon button inside
     steps up. Mirrors the `.button-medium` icon spec; scoped to <lg so desktop is untouched. The
     !important + descendant selector overrides any per-button size variant (e.g. a header
     control authored as `.button-small`) on mobile only. */

@media (max-width: 1023px) {
  .page-header-toolbar .button-icon,
    .page-header-toolbar .button-icon-circle,
    .page-header-toolbar .button-icon-circle-primary-dark,
    .drawer-footer-toolbar .button-icon,
    .drawer-footer-toolbar .button-icon-circle,
    .drawer-footer-toolbar .button-icon-circle-primary-dark {
    height: 2.5rem !important;
    width: 2.5rem !important;
    padding: 0.625rem !important;
  }

  .page-header-toolbar .button-icon svg,
    .page-header-toolbar .button-icon-circle svg,
    .page-header-toolbar .button-icon-circle-primary-dark svg,
    .drawer-footer-toolbar .button-icon svg,
    .drawer-footer-toolbar .button-icon-circle svg,
    .drawer-footer-toolbar .button-icon-circle-primary-dark svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

  .page-header-toolbar .button-icon.button-icon-pagination svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
}

/* Icon button background variants. Three supported styles:
       • neutral (default `.button-icon`): background-overlay at rest — used in
         navbars / wherever the control should feel present.
       • ghost (`.button-icon-ghost`): transparent at rest; fills with
         background-overlay on hover (desktop) and on :active (mobile tap-and-hold,
         where there is no hover). This is the standard for close/menu triggers.
       • elevated (`.button-icon-elevated`): a raised white surface with a hairline
         border + soft shadow — for floating actions that sit over content (carousel
         arrows, a card's hover affordance). Composes with the size variants. */

.btn-toggle input[type='checkbox']:checked + button.button-secondary.button-icon-ghost, .btn-toggle input[type='radio']:checked + button.button-secondary.button-icon-ghost {
  background-color: var(--background-overlay) !important;
}

.button-icon-ghost {
  background-color: transparent !important;
}

.button-icon-ghost:hover,
    .button-icon-ghost:active {
  background-color: var(--background-overlay) !important;
}

.button-icon-elevated {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated) !important;
  --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  color: var(--content-primary, #342e26);
  /* Clip to the button's shape. The base .button-icon sets aspect-ratio:1, which —
       with overflow visible — applies a content-based automatic minimum size; the 1px
       border then pushes a sm button's min-content past 32px and it renders 34px wide.
       overflow:hidden disables that auto-minimum so the fixed square size holds. */
  overflow: hidden;
}

.button-icon-elevated:hover {
  background-color: var(--background-base) !important;
}

/* Size variants - medium is the default */

.button-large {
  /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
  height: 3rem;
  border-radius: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Large buttons carry 20px icons (matches the .button-icon.button-large spec);
       overrides whatever size the markup's icon class set. */

.button-large svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.button-medium {
  height: 2.5rem;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.\!button-small {
  height: 2rem;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.button-small {
  height: 2rem;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.button-circular {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-circular:hover {
  text-decoration-line: none;
}

.button-circular:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-circular:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-circular {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0px !important;
}

.button-integration {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-integration:hover {
  text-decoration-line: none;
}

.button-integration:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-integration:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.button-integration {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.btn-toggle input[type='checkbox']:checked + .button-integration:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .button-integration:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay) !important;
}

.button-integration:hover {
  color: var(--content-primary);
}

.button-integration:where(.dark, .dark *) {
  background-color: transparent !important;
}

.button-integration:hover {
  background-color: var(--background-overlay);
}

.button-integration[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-integration[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-integration[disabled]:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-integration:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-integration:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-integration {
  z-index: 0;
  width: 100%;
  border-radius: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Wizard buttons for offers and profile wizards. BEM style */

.wizard-button {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.wizard-button--large {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.5rem;
  color: var(--interactive-control);
}


    .button-link.wizard-button--next {
  padding: 0;
  border-radius: 2px;
}

.wizard-button--next {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.wizard-button--next:hover {
  text-decoration-line: none;
}

.wizard-button--next:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--next:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.wizard-button--next {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.message .wizard-button--next .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.wizard-button--next:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
}

.wizard-button--next[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--next[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--next[disabled]:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--next:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--next:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-icon.wizard-button--next {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon.wizard-button--next svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.wizard-button--next {
  /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
  height: 3rem;
  border-radius: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.wizard-button--next svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

@media (max-width: 1023px) {
  .builder-header-inverse .wizard-button--next {
    color: var(--content-primary, #342e26);
    background-color: #ffffff;
  }

  .builder-header-inverse dialog .wizard-button--next {
    color: var(--brand-primary-crisp, #f3f0e8);
    background-color: var(--brand-primary-brew);
  }

  .builder-header-inverse dialog .wizard-button--next:hover {
    background-color: var(--bg-fill-dark-hover);
  }
}


    .button-link.wizard-button--previous {
  padding: 0;
  border-radius: 2px;
}

.btn-toggle input[type='checkbox']:checked + button.wizard-button--previous.bg-transparent, .btn-toggle input[type='radio']:checked + button.wizard-button--previous.bg-transparent {
  background-color: var(--background-overlay);
}

.btn-toggle input[type='checkbox']:checked + button.wizard-button--previous span span, .btn-toggle input[type='radio']:checked + button.wizard-button--previous span span {
  color: var(--content-primary);
}

.wizard-button--previous {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.wizard-button--previous:hover {
  text-decoration-line: none;
}

.wizard-button--previous:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--previous:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.wizard-button--previous {
  background-color: var(--background-overlay);
  color: var(--content-primary);
}

.wizard-button--previous:hover {
  color: var(--content-primary);
  background-color: var(--bg-fill-secondary-hover);
}

.box-footer .wizard-button--previous,
  .box-actions .wizard-button--previous {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.box-footer .wizard-button--previous:hover,
  .box-actions .wizard-button--previous:hover {
  text-decoration-line: none;
}

.box-footer .wizard-button--previous:active,
  .box-actions .wizard-button--previous:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.box-footer .wizard-button--previous:where(.dark, .dark *),
  .box-actions .wizard-button--previous:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.box-footer .wizard-button--previous,
  .box-actions .wizard-button--previous {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.box-footer .wizard-button--previous:hover,
  .box-actions .wizard-button--previous:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
}

.box-footer .wizard-button--previous,
  .box-actions .wizard-button--previous {
  @extend .button-primary-dark;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.buttons .wizard-button--previous {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.buttons .wizard-button--previous:hover {
  text-decoration-line: none;
}

.buttons .wizard-button--previous:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.buttons .wizard-button--previous:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .wizard-button--previous {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.buttons .wizard-button--previous:hover {
  color: var(--content-primary);
}

.buttons .wizard-button--previous:where(.dark, .dark *) {
  background-color: transparent !important;
}

.buttons .wizard-button--previous:hover {
  background-color: var(--background-overlay);
}

.wizard-button--previous[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--previous[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--previous[disabled]:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--previous:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--previous:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.button-icon.wizard-button--previous {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.button-icon.wizard-button--previous svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.wizard-button--previous {
  /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
  height: 3rem;
  border-radius: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.wizard-button--previous svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.wizard-button--previous {
  border-style: none;
  background-color: var(--background-overlay);
}

.publish-flow__footer-actions > .wizard-button--previous {
  transition: opacity 0.2s ease;
}

.publish-flow__footer-actions:has([data-spinner-shown="true"]) > .wizard-button--previous {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .publish-flow__footer-actions > .wizard-button--previous {
    transition: opacity 0.2s ease, flex-grow 0.25s ease, padding 0.25s ease, margin 0.25s ease;
  }

  .publish-flow__footer-actions:has([data-spinner-shown="true"]) > .wizard-button--previous {
    flex-grow: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: -12px;
    overflow: hidden;
  }
}

.wizard-button--skip {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.5rem;
  color: var(--interactive-control);
  color: var(--content-secondary);
  text-decoration-color: var(--content-secondary);
}

.wizard-button--skip:hover {
  color: var(--content-secondary);
  text-decoration-line: underline;
}

.wizard-button--save-and-exit {
  cursor: pointer;
}

.wizard-button--save-and-exit:hover {
  text-decoration-line: none;
}

.wizard-button--save-and-exit {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.wizard-button--save-and-exit:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.wizard-button--save-and-exit {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.wizard-button--save-and-exit:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.wizard-button--save-and-exit:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.wizard-button--save-and-exit {
  /* set a default "press down" effect for small buttons */
}

.wizard-button--save-and-exit:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit svg {
  display: inline-block;
}

.wizard-button--save-and-exit {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.wizard-button--save-and-exit:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.wizard-button--save-and-exit.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wizard-button--save-and-exit {
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-base);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.wizard-button--save-and-exit,
.floating-input-field.wizard-button--save-and-exit:focus,
.floating-input-field.wizard-button--save-and-exit:hover,
.floating-input-field.wizard-button--save-and-exit:active {
  box-shadow: none;
}

.wizard-button--save-and-exit:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.wizard-button--save-and-exit {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  letter-spacing: 0em;
  color: var(--content-primary);
}

.wizard-button--save-and-exit:hover {
  background-color: var(--background-elevated);
}

.wizard-button--save-and-exit:active {
  background-color: var(--background-elevated);
}

/* CSS-based loader to replace Lottie spinner */

.ol-loader {
  width: 16px;
  height: 16px;
  aspect-ratio: 2;
  --_gradient: no-repeat
      radial-gradient(circle closest-side, currentColor 80%, transparent);
  background:
      var(--_gradient) 0% 50%,
      var(--_gradient) 50% 50%,
      var(--_gradient) 100% 50%;
  background-size: calc(100%/3 - 2px) 50%;
  animation: l3 1s infinite linear;
  flex-shrink: 0;
}

@keyframes l3 {
  20% {
    background-position: 0% 0%,   50% 50%, 100% 50%;
  }

  40% {
    background-position: 0% 100%, 50% 0%,  100% 50%;
  }

  60% {
    background-position: 0% 50%,  50% 100%,100% 0%;
  }

  80% {
    background-position: 0% 50%,  50% 50%, 100% 100%;
  }
}

/* ── Chip family ───────────────────────────────────────────────────────────
     `.chip` is the visual primitive (a pill). Behavioral variants layer on top:
       • filter  — multi-select toggle            (future)
       • action  — navigates / triggers an action (future)
       • choice  — single-select within a group   (.chip-choice — tab/segmented)

     Interaction (per design): hover fills with background-overlay, active presses
     to scale .98, and keyboard focus uses the app-wide focus-visible outline
     defined in base.css (a:focus-visible) — no per-component ring needed.
     ──────────────────────────────────────────────────────────────────────── */

.\!chip {
  /* shrink-0 is load-bearing: in a scrolling flex row (e.g. the marketplace
       category tablist) WebKit/iOS Safari shrinks flex items below their
       min-content width, so the `whitespace-nowrap` label spilled out over the
       pill background. Pinning flex-shrink to 0 keeps each chip at its label
       width and lets the row scroll instead. Chromium already did this. */
}

.chip {
  /* shrink-0 is load-bearing: in a scrolling flex row (e.g. the marketplace
       category tablist) WebKit/iOS Safari shrinks flex items below their
       min-content width, so the `whitespace-nowrap` label spilled out over the
       pill background. Pinning flex-shrink to 0 keeps each chip at its label
       width and lets the row scroll instead. Chromium already did this. */
}

.\!chip {
  display: inline-flex;
  height: 2rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.5;
  color: var(--content-primary);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.\!chip:hover {
  background-color: var(--background-overlay);
}

.\!chip:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.chip {
  display: inline-flex;
  height: 2rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.5;
  color: var(--content-primary);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.chip:hover {
  background-color: var(--background-overlay);
}

.chip:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Size variants. The base `.chip` is `sm` (32px) for back-compat; `.chip-md`
     upgrades to 40px. Horizontal padding tracks the Figma chip spec (sm 14px,
     md 10px). Any chip style (choice, glassy, …) can be rendered at either size. */

.chip-sm {
  height: 2rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.chip-md {
  height: 2.5rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

/* 40px size — the larger chip height (our standard mobile/touch size), for chips that sit
     among 40px controls (e.g. the gallery toolbar, where they line up with the 40px icon
     buttons). Same pill + 12px padding-x, just taller. */

.chip-lg {
  height: 2.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Glassy chip — the surface (fill, blur, shadow, hover) comes from the reusable
     `.glassy-effect[-active]` utility (see glassy.css). Here we drop the chip's
     solid border, set the semibold label, ensure a smooth `transition`, and use a
     gentler press scale (0.99) than the base chip's 0.98. */

.chip-glassy {
  border-color: transparent;
  font-weight: 600;
  line-height: 1rem;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.chip-glassy:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Stat / meta chip — a small read-only pill for at-a-glance metrics (e.g. "5 Sales").
     Unlike the interactive .chip it has no fixed height (sizes to the text-xs line-height +
     padding) and no border. Defaults to the neutral base/primary; pass a text-/bg- utility to
     tint it (e.g. text-brand-secondary-moola for a positive stat — utilities win over this
     component layer). On a <button>/<a> it gains the chip hover/press affordances, so the same
     pill can become click-to-expand later without restyling. */

.chip-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  white-space: nowrap;
  border-radius: 9999px;
  background-color: var(--background-base);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--content-primary);
}

button.chip-stat,
  a.chip-stat {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

button.chip-stat:hover,
  a.chip-stat:hover {
  background-color: var(--background-overlay);
}

button.chip-stat:active,
  a.chip-stat:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Secondary meta inside a chip (e.g. a count, or an aspect-ratio value) — sits 4px after
     the label in the muted secondary color. */

.chip-count {
  color: var(--content-secondary);
}

/* Choice chip — single-select group member (tab / segmented behavior).
     Selected = filled background-overlay; the neutral border is KEPT (not swapped to transparent),
     so the selected chip reads the same outline as the rest of the group. Selection is signalled
     either by `aria-selected` (link/tab chips) or a checked radio inside the chip (form chips:
     `<label class="chip chip-choice"><input type="radio" class="sr-only">…</label>`). */

.chip-choice[aria-selected="true"],
  .chip-choice:has(input:checked) {
  background-color: var(--background-overlay);
}

/* Tab chip — a chip used as a navigation tab (e.g. the Earnings Sales/Commissions
     tabs). A solid background-base pill when inactive, flipping to a filled
     content-primary pill with inverse text when selected (the dark-active-pill
     pattern, consistent across desktop and mobile). Distinct from .chip-choice, whose
     selected state is the subtler background-overlay fill. */

.chip-tab {
  border-color: transparent;
  background-color: var(--background-base);
}

.chip-tab[aria-selected="true"],
  .chip-tab[aria-selected="true"]:hover {
  background-color: var(--content-primary);
  color: var(--content-primary-inverse);
}

/* Filter chip — applies a filter: a popover (trailing chevron) or a simple on/off toggle,
     optionally with a leading icon. Applied means a real filter is applied: `data-active` (a
     non-default value, set by the filter_chip_with_menu partial once the form has submitted) or
     `aria-pressed` (a plain toggle is on). The applied state is a filled dark pill with inverse
     text — the app's dark-active-pill pattern, matching .chip-tab — held on hover so it doesn't
     flip to the light overlay. A default selection (e.g. "all" / "newest") stays neutral/bordered. */

.chip-filter[data-active="true"],
  .chip-filter[data-active="true"]:hover,
  .chip-filter[aria-pressed="true"],
  .chip-filter[aria-pressed="true"]:hover {
  border-color: transparent;
  background-color: var(--content-primary);
  color: var(--content-primary-inverse);
}

/* The chevron + any leading icon carry an explicit content-primary color, so they don't inherit
     the pill's inverse text — flip them to inverse so they read on the dark surface. */

.chip-filter[data-active="true"] .icon,
  .chip-filter[aria-pressed="true"] .icon {
  color: var(--content-primary-inverse);
}

.chip-filter[data-active="true"] .\!icon,
  .chip-filter[aria-pressed="true"] .\!icon {
  color: var(--content-primary-inverse);
}

/* Mobile touch standard — chips default to a 40px height on mobile (a comfortable touch target),
     keeping the 32px desktop size. The explicit .chip-sm stays 32px; .chip-md / .chip-lg are already
     40px. Placed last so it wins the cascade over the base/size-variant heights on mobile. */

@media (max-width: 1023px) {
  .\!chip {
    height: 2.5rem !important;
  }

   {
    height: 2rem !important;
  }

  .chip {
    height: 2.5rem;
  }

  .chip-sm {
    height: 2rem;
  }
}

/* ── Glassy surface ──────────────────────────────────────────────────────────
     A reusable "frosted glass" TREATMENT: a sheen gradient over a backdrop blur, plus
     layered shadows that read as a raised glass tile. The background colour is
     intentionally NOT set here — apply `.glassy-effect` to any pill/card/button surface
     and let that element own its fill (so it composes onto something that already has a
     background, e.g. a translucent screen fill). Pair with `.glassy-effect-active` for
     the pressed/selected state (see the marketplace category chips).

     NOTE: diverges from origin/main by this one removed `background-color` line — the
     marketplace chips relied on the utility supplying `--background-screen`, so when this
     branch merges main those chips need their own fill set at the element level.

     Values mirror the Figma spec (OL Collab Builder, node 5158:14612):
       background-screen = rgba(255,255,255,0.8)   background-base = #f7f5f0
     ──────────────────────────────────────────────────────────────────────── */

.glassy-effect {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.02) 100%);
  /* The glassy edge is drawn as an inset box-shadow (below). Zero the host chip's
       own border so it doesn't double up with that hairline. */
  border-width: 0;
  backdrop-filter: blur(10px);
  box-shadow:
      /* The ONLY inset the default chip carries: a hairline edge in the neutral
         border token. The white inset highlights are exclusive to the active /
         selected chip (.glassy-effect-active) — don't add them here. */
      inset 0 0 0 1px var(--content-border-neutral),
      0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

/* On hover the glass warms to the `--background-base` fill. (Also overrides the
     host component's own hover background — e.g. `.chip`'s — so the glass stays
     in control of its surface.) */

.glassy-effect:hover {
  background-color: var(--background-base, #f7f5f0);
}

/* Pressed / selected glass — warm top-lit gradient fill with a deep multi-layer
     inset shadow (Figma spec). The opaque gradient covers any host hover
     background, so no hover override is needed here. */

.glassy-effect-active {
  background-color: transparent;
  background-image: linear-gradient(180deg, #f1eee4 0%, var(--grayscale-gray-2, #efebe3) 100%);
  border-color: transparent;
  backdrop-filter: blur(10px);
  box-shadow:
      inset 0 -2px 4px 0 rgba(255, 255, 255, 0.7),
      inset 0 -2px 0.5px -0.5px rgba(255, 255, 255, 0.68),
      inset -5px 4px 5px -5px rgba(0, 0, 0, 0.06),
      inset 5px 0 5px -5px rgba(0, 0, 0, 0.09),
      inset 0 18px 18px -15px rgba(0, 0, 0, 0.08),
      inset 0 8px 10px -3px rgba(0, 0, 0, 0.09),
      inset 0 2px 1px 0 rgba(0, 0, 0, 0.05),
      inset 0 2px 0.5px -0.5px rgba(255, 255, 255, 0.05),
      /* Default outer drop shadow — same as the inactive chip — for consistent
         elevation across states, on top of all the inset layers above. */
      0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

/* ── Scrim ───────────────────────────────────────────────────────────────────
     A reusable gradient veil: solid at one edge, easing to transparent at the
     other. Use it anywhere you want content to dissolve into a surface rather than
     cut off at a hard line — sticky headers/nav bars, sticky footers/toolbars, or
     a contrast wash behind text overlaid on an image or video.

     Why the long stop list: a plain 2-stop `linear-gradient(white, transparent)`
     ramps alpha *linearly*, which the eye reads as a hard band partway down. So we
     ease it the way postcss-easing-gradients does
     (https://github.com/larsenwork/postcss-easing-gradients): hold solid, then
     sample an ease-in-out (smoothstep) curve across the tail as many intermediate
     stops. The alpha eases in and back out symmetrically, so there's no visible edge
     — just a soft dissolve.

     Customise via four CSS variables:
       --scrim-rgb    color channels (default white). Set `0 0 0` for a dark scrim
                      over media — see `.scrim-dark`.
       --scrim-angle  gradient direction (default `to bottom`). The solid edge is
                      the gradient's start, so `to bottom` = solid top, fading down
                      (a sticky header); `to top` = solid bottom (a sticky footer).
                      Use the `.scrim-to-*` modifiers below.
       --scrim-start  where the solid band ends and the fade begins (default `40%`).
                      Raise it to hold the veil solid deeper into the box before it
                      lets go — e.g. behind an opaque control that occupies the top,
                      so the dissolve happens in the clear space below it rather than
                      hidden behind the control.
       --scrim-end    where the veil has fully dissolved (default `100%`, the far
                      edge). Lower it (e.g. `[--scrim-end:60%]`) to finish the fade
                      early and leave the rest of the box clear.

     The eased curve lives BETWEEN start and end: each fade stop is
     `start + (end - start) * f`, so moving either knob restretches the same easing
     rather than distorting it. The f multipliers ARE the curve — don't hand-edit
     them; regenerate from postcss-easing-gradients if the easing ever needs to
     change. (Defaults 40% / 100% reproduce the original stop list exactly.)
     ──────────────────────────────────────────────────────────────────────────── */

.scrim {
  --scrim-rgb: 255 255 255;
  --scrim-angle: to bottom;
  --scrim-start: 40%;
  --scrim-end: 100%;
  --scrim-span: calc(var(--scrim-end) - var(--scrim-start));
  background-image: linear-gradient(
      var(--scrim-angle),
      rgb(var(--scrim-rgb) / 1) 0%,
      rgb(var(--scrim-rgb) / 1) var(--scrim-start),
      rgb(var(--scrim-rgb) / 0.987) calc(var(--scrim-start) + var(--scrim-span) * 0.08),
      rgb(var(--scrim-rgb) / 0.951) calc(var(--scrim-start) + var(--scrim-span) * 0.157),
      rgb(var(--scrim-rgb) / 0.896) calc(var(--scrim-start) + var(--scrim-span) * 0.227),
      rgb(var(--scrim-rgb) / 0.825) calc(var(--scrim-start) + var(--scrim-span) * 0.29),
      rgb(var(--scrim-rgb) / 0.741) calc(var(--scrim-start) + var(--scrim-span) * 0.353),
      rgb(var(--scrim-rgb) / 0.648) calc(var(--scrim-start) + var(--scrim-span) * 0.412),
      rgb(var(--scrim-rgb) / 0.55) calc(var(--scrim-start) + var(--scrim-span) * 0.472),
      rgb(var(--scrim-rgb) / 0.45) calc(var(--scrim-start) + var(--scrim-span) * 0.53),
      rgb(var(--scrim-rgb) / 0.352) calc(var(--scrim-start) + var(--scrim-span) * 0.588),
      rgb(var(--scrim-rgb) / 0.259) calc(var(--scrim-start) + var(--scrim-span) * 0.648),
      rgb(var(--scrim-rgb) / 0.175) calc(var(--scrim-start) + var(--scrim-span) * 0.71),
      rgb(var(--scrim-rgb) / 0.104) calc(var(--scrim-start) + var(--scrim-span) * 0.777),
      rgb(var(--scrim-rgb) / 0.049) calc(var(--scrim-start) + var(--scrim-span) * 0.847),
      rgb(var(--scrim-rgb) / 0.013) calc(var(--scrim-start) + var(--scrim-span) * 0.92),
      rgb(var(--scrim-rgb) / 0) var(--scrim-end)
    );
}

/* Direction — mirrors Tailwind's `bg-gradient-to-*`: the scrim is solid at the
     start and fades toward the named edge. `to-b` (solid top → sticky header) is
     the default; `to-t` flips it for a sticky footer. */

.scrim-to-b {
  --scrim-angle: to bottom;
}

.scrim-to-r {
  --scrim-angle: to right;
}

.scrim-to-l {
  --scrim-angle: to left;
}

/* Footer variant (solid bottom, fading up). Same eased curve as the header `.scrim`, but the solid
     hold ends at 25% (vs the header's 40%) and the easing tail is remapped across 25→100% — so the wash
     releases the solid lower and clears more content above a bottom bar before going opaque, instead of
     cutting content off high in the view. A footer scrim reads "too heavy" with the header distribution
     because the eye sits below the fade, not above it; this is the standard for footers. */

.scrim-to-t {
  --scrim-angle: to top;
  background-image: linear-gradient(
      var(--scrim-angle),
      rgb(var(--scrim-rgb) / 1) 0%,
      rgb(var(--scrim-rgb) / 1) 25%,
      rgb(var(--scrim-rgb) / 0.987) 31%,
      rgb(var(--scrim-rgb) / 0.951) 36.8%,
      rgb(var(--scrim-rgb) / 0.896) 42%,
      rgb(var(--scrim-rgb) / 0.825) 46.8%,
      rgb(var(--scrim-rgb) / 0.741) 51.5%,
      rgb(var(--scrim-rgb) / 0.648) 55.9%,
      rgb(var(--scrim-rgb) / 0.55) 60.4%,
      rgb(var(--scrim-rgb) / 0.45) 64.8%,
      rgb(var(--scrim-rgb) / 0.352) 69.1%,
      rgb(var(--scrim-rgb) / 0.259) 73.6%,
      rgb(var(--scrim-rgb) / 0.175) 78.2%,
      rgb(var(--scrim-rgb) / 0.104) 83.2%,
      rgb(var(--scrim-rgb) / 0.049) 88.5%,
      rgb(var(--scrim-rgb) / 0.013) 94%,
      rgb(var(--scrim-rgb) / 0) 100%
    );
}

/* Dark scrim — for light text/controls overlaid on imagery or video. */

.scrim-dark {
  --scrim-rgb: 0 0 0;
}

/* ── Tuck banner ──────────────────────────────────────────────────────────────
     A bar that tucks BEHIND a rounded card, so the card reads as layered on top of it.

     The whole illusion is two 28px concave NOTCHES — quarter-circle cutouts painted in the
     bar's own colour — that fill the gap a rounded card corner leaves against the bar's
     straight edge. The card covers the middle of the bar; only its corners reveal the
     notches, so the card appears to nest INTO the bar rather than sit on a separate strip.

     ── Placement (pick exactly one) ─────────────────────────────────────────────
       .tuck-banner--eyebrow     the bar sits ABOVE the card. Rounds its TOP; the notches hang
                                 BELOW it, filling the card's rounded TOP corners.
       .tuck-banner--chinstrap   the bar sits BELOW the card. Rounds its BOTTOM; the notches sit
                                 ABOVE it, filling the card's rounded BOTTOM corners.

     Both are tucked at EVERY width, and that consistency is deliberate: a tucked bar is attached
     to a discrete card, and that card is still there on mobile.

     ── Full-bleed (opt-in) ──────────────────────────────────────────────────────
       .tuck-banner--full-bleed  Below lg the bar stops being a card accessory and becomes a
                                 square, edge-to-edge PAGE bar. Only for the GLOBAL banners
                                 (Stripe-disconnected, masquerade), which genuinely span the page
                                 down there with no card sitting on them — nothing to nest into,
                                 so square the bar and drop the notches.

     Do NOT reach for full-bleed just because something is on mobile. Dropping the notches below lg
     for EVERY banner is the old behaviour of this component, and it silently deleted the
     chinstrap's tuck (the card flattened into the bar). The two cases are different; keep them so.

     ── Colour ───────────────────────────────────────────────────────────────────
     Set --tuck-color ONCE and the bar fill and BOTH notches derive from it, so they can't drift
     apart. Callers set it with an arbitrary-property utility, same as .scrim's --scrim-rgb:
       [--tuck-color:var(--content-primary)]
       [--tuck-color:var(--sentiment-negative)]
     (Previously each caller hand-wrote the colour three times — a bar fill plus two full
     radial-gradient strings — under a "keep in sync" comment.)
     ──────────────────────────────────────────────────────────────────────────── */

.tuck-banner {
  --tuck-color: var(--content-primary);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
  color: var(--background-elevated);
  --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background-color: var(--tuck-color);
}

/* Placement: which edge rounds, and the bar's own text/padding rhythm. An eyebrow carries page-level
     messaging (larger); a chinstrap is a compact status strip hanging off a card. */

.tuck-banner--eyebrow {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

@media (min-width: 1024px) {
  .tuck-banner--eyebrow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

.tuck-banner--eyebrow {
  border-radius: 28px 28px 0 0;
}

.tuck-banner--chinstrap {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
}

@media (min-width: 1024px) {
  .tuck-banner--chinstrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.tuck-banner--chinstrap {
  border-radius: 0 0 28px 28px;
}

.tuck-banner__notch {
  pointer-events: none;
  position: absolute;
  height: 1.75rem;
  width: 1.75rem;
}

.tuck-banner__notch--left {
  left: 0px;
}

.tuck-banner__notch--right {
  right: 0px;
}

/* The notch hangs off the side the CARD is on. Its quarter-circle is centred on the corner of the
     notch box that TOUCHES the card, so the transparent disc lands exactly where the card's rounded
     corner sits and the bar colour fills the leftover sliver. */

.tuck-banner--eyebrow .tuck-banner__notch {
  top: 100%;
}

.tuck-banner--chinstrap .tuck-banner__notch {
  bottom: 100%;
}

.tuck-banner--eyebrow .tuck-banner__notch--left {
  background: radial-gradient(circle at bottom right, transparent 28px, var(--tuck-color) 28px);
}

.tuck-banner--eyebrow .tuck-banner__notch--right {
  background: radial-gradient(circle at bottom left, transparent 28px, var(--tuck-color) 28px);
}

.tuck-banner--chinstrap .tuck-banner__notch--left {
  background: radial-gradient(circle at top right, transparent 28px, var(--tuck-color) 28px);
}

.tuck-banner--chinstrap .tuck-banner__notch--right {
  background: radial-gradient(circle at top left, transparent 28px, var(--tuck-color) 28px);
}

/* Opt-in only. Below lg the bar goes edge-to-edge and square, with nothing nesting into it. */

@media (max-width: 1023px) {
  .tuck-banner--full-bleed {
    border-radius: 0;
  }

  .tuck-banner--full-bleed .tuck-banner__notch {
    display: none;
  }
}

.button-loader {
  position: relative;
  padding-right: 48px;
  text-indent: -999999px;
  min-width: 112px;
}

.button-loader::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 32px 0 #fff, -32px 0 #fff;
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  animation: flash 0.5s ease-out infinite alternate;
}

.bulk-action-unavailable {
  display: none !important;
}

.date-range-calendar .flatpickr-day.bulk-action-unavailable {
  display: block !important;
  visibility: hidden !important;
}

.bulk-actions-selectable-item-checkbox-wrapper {
  display: none;
}

.date-range-calendar .flatpickr-day.bulk-actions-selectable-item-checkbox-wrapper {
  display: block;
  visibility: hidden;
}

.bulk-actions .bulk-actions-checkbox-cell {
  width: 1rem;
  padding-right: 0px;
}

.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle {
  display: none;
}

.date-range-calendar .flatpickr-day.bulk-actions:not(.selectable-available) .bulk-actions-selectable-toggle {
  display: block;
  visibility: hidden;
}

.bulk-actions:not(.selectable) td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2) {
  padding-left: 1.25rem;
}

.bulk-actions:not(.selectable) .box-table td:nth-child(2),.bulk-actions:not(.selectable) th:nth-child(2) {
  padding-left: 2rem;
}

.bulk-actions.selectable-available:not(.selectable) .bulk-action {
  display: none;
}

.date-range-calendar .flatpickr-day.bulk-actions.selectable-available:not(.selectable) .bulk-action {
  display: block;
  visibility: hidden;
}

.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell {
  display: none;
}

.date-range-calendar .flatpickr-day.bulk-actions.selectable-available:not(.selectable) .bulk-actions-checkbox-cell {
  display: block;
  visibility: hidden;
}

.bulk-actions.selectable .bulk-action-single {
  display: none;
}

.date-range-calendar .flatpickr-day.bulk-actions.selectable .bulk-action-single {
  display: block;
  visibility: hidden;
}

/* Mobile sheet menu rows match the settings/profile mobile list (settings.css `.navigation a.item`):
     the per-property trigger rows reuse the shared menu_item, so its popover styling is overridden here
     — full-bleed tap target, 16px content inset, 14px rows, no rounding, no hover (touch), and
     background-base only while pressed. (Icon → size-6 and label → text-base are set in the row markup
     via max-lg:.) The descendant selector outranks menu_item's single-class utilities, so no !important
     is needed. The desktop popover keeps menu_item's own px-2.5 / py-2 / rounded-radius-12 styling. */

@media not all and (min-width: 1024px) {
  .btn-toggle input[type='checkbox']:checked + .filter-popover-menu .nested-filter-row > a:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .filter-popover-menu .nested-filter-row > a:hoverbutton.button-secondary {
    background-color: var(--background-overlay);
  }

  .filter-popover-menu .nested-filter-row > a {
    gap: 0.75rem;
    border-radius: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .filter-popover-menu .nested-filter-row > a:hover {
    background-color: transparent;
  }

  .filter-popover-menu .nested-filter-row > a:active {
    background-color: var(--background-base);
  }
}

/* Filter sheet option checkboxes — 20px box + softer 6px radius on mobile. checkbox.css's
     `input.checkbox-clean` is element+class specificity with a !important radius, so this deeper
     selector (+ ! on size/radius) is what wins. */

@media not all and (min-width: 1024px) {
  .filter-popover-menu input.checkbox-clean {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 0.375rem !important;
  }
}

.rounded-dialog {
  border-radius: 1.75rem;
}

@media (min-width: 1024px) {
  .rounded-dialog {
    border-radius: 2rem;
  }
}

/* match the rounded-dialog */

.rounded-dialog-button {
  border-radius: 0.625rem;
}

@media not all and (min-width: 1024px) {
  .rounded-dialog-button {
    border-radius: 0.75rem;
  }
}

.dialog-button {
  border-radius: 0.625rem;
}

@media not all and (min-width: 1024px) {
  .dialog-button {
    border-radius: 0.75rem;
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .dialog-button {
    /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .dialog-button {
    /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
    height: 3rem;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .dialog-button
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .dialog-button.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .dialog-button.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .dialog-button {
    /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
    height: 3rem;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .dialog-button svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }
}

/* ── Mobile sheet types ──────────────────────────────────────────────────────────
     Three presentations, applied via the dialog partials' mobile_* flags:

       .dialog-bottom-sheet   BOTTOM SHEET — auto height (sized to content), rounded top
                              corners, pinned to the bottom edge (mt-auto). The default.
       .dialog-full-sheet     FULL-HEIGHT BOTTOM SHEET — the bottom sheet grown to ~full
                              height: 100dvh minus an 8px peek of backdrop at the top, still
                              rounded-top. Reads as a tall sheet, not a page.
       .dialog-full-screen    FULL-SCREEN SHEET — NOT a bottom sheet: true 100dvh, square
                              corners, no top peek, no margins. Reads like a dedicated page
                              overlaid on the view (compose flows, full editors).
     All three slide up on open (animation selectors above). ────────────────────────── */

.dialog-bottom-sheet {
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: auto;
  margin-bottom: 0px !important;
  width: 100%;
  max-width: 100% !important;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.dialog-full-sheet {
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: auto;
  margin-bottom: 0px !important;
  width: 100%;
  max-width: 100% !important;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  height: calc(100dvh - 8px);
  max-height: none;
}

.dialog-full-screen {
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  height: 100dvh;
  max-height: none;
  width: 100%;
  max-width: 100% !important;
  border-radius: 0 !important;
}

.date-input .single-daterange {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .date-input .single-daterange {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.date-input .single-daterange {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.date-input .single-daterange::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.date-input .single-daterange::placeholder {
  color: rgb(11 5 29 / .32);
}

.date-input .single-daterange:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.date-input .single-daterange:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.date-input .single-daterange:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.date-input .single-daterange {
  /* OL-3343: keep textarea text + placeholder at 16px on desktop too — text-input-base
       shrinks to 14px at md, but the text-field component (.floating-input-field) is a flat 16px. */
}

@media (min-width: 768px) {
  .date-input .single-daterange {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.date-input .single-daterange {
  /* OL-3343: match the text-field component (.floating-input-field) box exactly — 12px radius,
       1px inset border (content-border-dark), 1px inset content-primary on hover, 2px inset
       content-primary on focus (no outer ring). Token vars (--content-*) are always defined in
       figma.css, so no hardcoded hex fallbacks (they'd only go stale). --rounded-radius-12 is
       not a CSS var, so its 12px fallback is load-bearing — keep it. */
  border: none;
  border-radius: var(--rounded-radius-12, 12px);
  box-shadow: 0 0 0 1px inset var(--content-border-dark);
  transition-property: box-shadow, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.date-input .single-daterange:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary);
}

.date-input .single-daterange:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary);
}

.date-input .single-daterange:disabled,.date-input .single-daterange.disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.date-input .single-daterange:disabled:where(.dark, .dark *),.date-input .single-daterange.disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.date-input .single-daterange:disabled,.date-input .single-daterange.disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.date-input .single-daterange:disabled:where(.dark, .dark *),.date-input .single-daterange.disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.date-input .single-daterange.field-border-for-error,.date-input .single-daterange.field-border-for-error:hover,.date-input .single-daterange.field-border-for-error:focus {
  box-shadow: 0 0 0 2px inset #e83b47;
}

.date-range-inputs .date-input .single-daterange:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

.date-range-inputs .date-input .single-daterange:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  border-radius: 0.5rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  border-style: none !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect, .daterangepicker .hourselect:hover, .daterangepicker .minuteselect:hover, .daterangepicker .ampmselect:hover, .daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus, .daterangepicker .hourselect:focus-within, .daterangepicker .minuteselect:focus-within, .daterangepicker .ampmselect:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.daterangepicker .hourselect:disabled, .daterangepicker .minuteselect:disabled, .daterangepicker .ampmselect:disabled, .daterangepicker .hourselect:disabled:hover, .daterangepicker .minuteselect:disabled:hover, .daterangepicker .ampmselect:disabled:hover, .daterangepicker .hourselect:disabled:focus, .daterangepicker .minuteselect:disabled:focus, .daterangepicker .ampmselect:disabled:focus, .daterangepicker .hourselect:disabled:focus-within, .daterangepicker .minuteselect:disabled:focus-within, .daterangepicker .ampmselect:disabled:focus-within {
  --border-color: #DCD8DA;
}

.daterangepicker .hourselect:hover, .daterangepicker .minuteselect:hover, .daterangepicker .ampmselect:hover, .daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus, .daterangepicker .hourselect:focus-within, .daterangepicker .minuteselect:focus-within, .daterangepicker .ampmselect:focus-within {
  --border-color: rgb(11 5 29 / 36%);
}

.daterangepicker .hourselect:focus, .daterangepicker .minuteselect:focus, .daterangepicker .ampmselect:focus, .daterangepicker .hourselect:focus-within, .daterangepicker .minuteselect:focus-within, .daterangepicker .ampmselect:focus-within {
  --ring-color: rgb(11 5 29 / 16%);
}

.daterangepicker .hourselect, .daterangepicker .minuteselect, .daterangepicker .ampmselect {
  --ring-width: 3px;
  -moz-text-align-last: center;
       text-align-last: center;
}

.daterangepicker .calendar-table .active {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(33 168 117 / var(--tw-bg-opacity, 1)) !important;
}

.daterangepicker .calendar-table .\!active {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(33 168 117 / var(--tw-bg-opacity, 1)) !important;
}

.select2-container {
  width: 100%;
}

.select2-border {
  outline: 0 !important;
  --border-color: rgb(11 5 29 / 36%) !important;
  --ring-color: rgb(11 5 29 / 16%) !important;
  border-style: none !important;
}

.no-edges .select2-border {
  border-style: none !important;
  border-radius: 0.5rem !important;
}

.select2-selection--single {
  height: auto;
}

.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  line-height: inherit;
  min-height: 2.5rem;
}

@media (min-width: 768px) {
  .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    min-height: 2.25rem;
  }
}

.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  /* py-2, text-base md:text-sm => line-height: 1.5rem md:1.25rem */
}

.select2-selection--single,
  .select2-selection--multiple {
  border-radius: 0.5rem !important;
  padding-top: 0px !important;
}

.no-edges .select2-selection--single, .no-edges .select2-selection--multiple {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.no-edges .select2-selection--single,
.floating-input-field.no-edges .select2-selection--single:focus,
.floating-input-field.no-edges .select2-selection--single:hover,
.floating-input-field.no-edges .select2-selection--single:active,.floating-input-field .no-edges .select2-selection--multiple,
.floating-input-field .no-edges .select2-selection--multiple:focus,
.floating-input-field .no-edges .select2-selection--multiple:hover,
.floating-input-field .no-edges .select2-selection--multiple:active {
  box-shadow: none;
}

.no-edges .select2-selection--single, .no-edges .select2-selection--multiple {
  border-radius: inherit !important;
}

.select2-selection--single.focus-visible, .select2-selection--multiple.focus-visible {
  outline: 0 !important;
  --border-color: rgb(11 5 29 / 36%) !important;
  --ring-color: rgb(11 5 29 / 16%) !important;
  border-style: none !important;
}

.select2-selection--single:focus, .select2-selection--multiple:focus {
  outline: 0 !important;
}

.select2-selection--single .select2-selection__rendered, .select2-selection--multiple .select2-selection__rendered {
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
}

/* Floating label support for super_select */

.floating-input .select2-container .select2-selection--single,
    .floating-input .select2-container .select2-selection--multiple {
  border-radius: 0.75rem !important;
  box-shadow: 0 0 0 1px inset
        var(--content-border-dark, rgba(52, 46, 38, 0.12));
  border: none;
  background: var(--content-background-elevated, #fff);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.floating-input .select2-container .select2-selection--single:hover:not(:focus), .floating-input .select2-container .select2-selection--multiple:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

.floating-input .select2-container .select2-selection--single .select2-selection__rendered, .floating-input .select2-container .select2-selection--multiple .select2-selection__rendered {
  padding-top: 22px !important;
  /* Space for floating label: 8px (top) + 12px (font-size) + 12px (spacing) */
  padding-bottom: 8px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.floating-input .select2-container.select2-container--focus .select2-selection--single,
      .floating-input .select2-container.select2-container--focus .select2-selection--multiple,
      .floating-input .select2-container.select2-container--open .select2-selection--single,
      .floating-input .select2-container.select2-container--open .select2-selection--multiple {
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
  outline: none;
}

/* Multiple selects need extra height for tags */

.floating-input .select2-container .select2-selection--multiple .select2-selection__rendered {
  min-height: 48px !important;
}

.select2-selection--single .select2-selection__rendered {
  padding-left: 0.875rem !important;
  padding-right: 2rem !important;
}

.select2-selection--multiple .select2-selection__rendered {
  padding-left: 0.875rem !important;
  padding-right: 0.25rem !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.5rem !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
  width: 30px;
  bottom: 0px;
  top: 0px;
  right: 0px;
  height: auto;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow b {
  display: block;
  position: absolute;
  top: 50%;
  left: auto;
  right: 0.875rem;
  transform: translateY(-50%);
  border: none;
  width: 20px;
  height: 20px;
  /* Chevron arrow - larger size (20px) with primary color (#342e26 = --content-primary), stroke-2 to match our icon stroke override */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23342e26' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0;
}

.select2-container--default
    .select2-selection--multiple
    ul.select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 0.25rem;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
  position: relative;
  border: none;
  font-size: inherit;
  float: none;
  padding-right: 0.375rem;
  line-height: 24px;
}

@media (min-width: 768px) {
  .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    line-height: 20px;
  }
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
  /* adjusts the height */
  margin-top: 0.25rem;
  margin-right: 0.25rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  border-radius: 0.25rem;
  background-color: var(--background-neutral) !important;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  font-weight: 600;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice .select2-selection__choice__remove {
  margin-left: 0.5rem;
  font-size: 26px;
  font-weight: normal;
}

.select2-container--open .select2-selection--single,
    .select2-container--open .select2-selection--multiple,
    .select2-container--focus:not(.select2-container--disabled) .select2-selection--single,
    .select2-container--focus:not(.select2-container--disabled) .select2-selection--multiple {
  outline: 0 !important;
  --border-color: rgb(11 5 29 / 36%) !important;
  --ring-color: rgb(11 5 29 / 16%) !important;
  border-style: none !important;
}

.no-edges .select2-container--open .select2-selection--single,
      .no-edges .select2-container--open .select2-selection--multiple,
      .no-edges .select2-container--focus .select2-selection--single,
      .no-edges .select2-container--focus .select2-selection--multiple {
  border: none !important;
  border-radius: 0.5rem !important;
}

.select2-container--disabled .select2-selection--single,
    .select2-container--disabled .select2-selection--multiple {
  background-color: rgb(11 5 29 / .04) !important;
  color: rgb(11 5 29 / .32) !important;
}

.select2-container--disabled .select2-selection--single:where(.dark, .dark *),
    .select2-container--disabled .select2-selection--multiple:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04) !important;
  color: rgb(248 245 244 / .32) !important;
}

.select2-container--disabled .select2-selection--single,
    .select2-container--disabled .select2-selection--multiple,
    .select2-container--disabled .select2-selection--single:hover,
    .select2-container--disabled .select2-selection--multiple:hover,
    .select2-container--disabled .select2-selection--single:focus,
    .select2-container--disabled .select2-selection--multiple:focus {
  --border-color: #DCD8DA;
}

/* Desktop dropdown panel matches the redesigned Popover/menu component (OL-3319):
     white surface, 12px radius, 1px border-neutral, shadow-modal, 6px inset. The
     panel's own bottom inset is dropped (padding: 6px 6px 0); the 6px below the last
     row lives on the options list instead (see select2-results__options below), so it
     scrolls WITH the content rather than forming a fixed bottom band that the scrolling
     list would have to clip past — while a short, non-scrolling list still gets a
     symmetric 6px top/bottom inset.
     (Mobile bottom-sheet overrides border/radius/shadow + keeps a 2px inset under
     .use-modal-on-mobile below, so these are desktop-only.) */

.select2-container .select2-dropdown {
  overflow: hidden !important;
  --tw-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12) !important;
  --tw-shadow-colored: 0px 4px 24px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--content-border-neutral);
  /* Horizontal gutter lives on the results list (below), not here, so a full-bleed <hr> divider
       reaches the panel edge instead of being clipped by .select2-results' overflow at the 6px inset. */
  padding: 6px 0 0;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  width: auto !important;
  min-width: 100%;
}

.select2-container .select2-results {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.select2-container .select2-results > .select2-results__options {
  max-height: none !important;
  width: auto !important;
  /* 6px below the last row, matching the panel's 6px top inset. It lives here on
       the list (the scroll container's content) rather than on the dropdown so it
       (a) renders even in Chrome, which drops a scroll container's own padding-bottom,
       and (b) scrolls with the content on a long list instead of clipping it. */
  padding: 0 6px 6px;
}

/* A pinned dropdown_footer_action (fields--super-select#injectDropdownFooterAction) sits below
     the scrolling option list. Lift the panel's own height cap and move it onto the list, so the
     panel grows to fit list + footer instead of the footer eating into (and hiding) the last
     options. flex:0 1 auto lets the list size to its content, capped at the list max-height. */

.select2-container .select2-dropdown.has-dropdown-footer,
  /* Also beat the .custom-width height cap (the `.custom-width .select2-container--open
     .select2-dropdown` rule below) so a footered filter-chip panel still grows to fit its list. */
  .custom-width .select2-container.select2-container--open .select2-dropdown.has-dropdown-footer {
  max-height: none;
}

.select2-container .select2-dropdown.has-dropdown-footer > .select2-results {
  flex: 0 1 auto;
  max-height: var(--dropdown-max-height, 300px);
}

/* Filter-chip menus reuse the advanced filter popover's footer verbatim (its own flex gap-2
     px-4 py-3, no divider). Neutralise the generic dropdown_footer_action slot wrapper's margin /
     padding / border here so that footer's own styling shows through unchanged — other slot users
     (e.g. the domain selector) keep the wrapper's default treatment. */

.select2-container .select2-dropdown.filter-chip-menu > [data-dropdown-footer-action] {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.select2-container .select2-results__option {
  white-space: normal;
  word-break: break-word;
}

.select2-container .select2-results__option .super-select--option-row {
  width: 100%;
}

.select2-container .select2-results__option .super-select--option-label {
  width: 100%;
}

.select2-container .select2-results__option .super-select--option-text {
  width: 100%;
}

/* Optgroup section headers (Earnings Status → Commission / Withdrawals): the label is
     .select2-results__group (carrying a .super-select--group-header span), with the options nested
     beneath. Mirrors the advanced filter's grouped rows — an extra-small header + a full-bleed
     divider between groups. The group is itself a .select2-results__option, so strip its option inset. */

.select2-container .select2-results__option:has(> .select2-results__group) {
  padding: 0;
}

.select2-container .select2-results__group {
  display: block;
  margin: 0;
  padding: 0;
}

.select2-container .super-select--group-header {
  /* 10px left/right so the header text aligns with the option checkboxes (6px gutter + 10px = 16px). */
  display: block;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--content-secondary);
}

/* The first group needs no divider above it. */

.select2-container .select2-results__options > .select2-results__option:first-child .super-select--group-divider {
  display: none;
}

/* The full-bleed divider between groups is a real <li><hr> injected by
     super_select_controller#insertGroupDividers (matching the advanced filter's group divider) —
     an app-standard horizontal rule, not a pseudo-element. */

/* Filter-chip menu items sit flush-left (no inset) — a standing preference. Overrides select2's
     base 6px + nested 1em option padding-left. Scoped to .custom-width (the filter chips' dropdowns)
     so ordinary form super_selects keep their padding. */

.custom-width .select2-results__option {
  padding-left: 0 !important;
}

.select2-container .select2-dropdown > div:last-child {
  flex-shrink: 0;
}

.hide-prompt .select2-dropdown::after {
  display: none !important;
}

.hide-dropdown .select2-dropdown {
  display: none !important;
}

.hide-preview {
  position: relative;
}

.hide-preview select {
  display: none;
}

.date-range-calendar .flatpickr-day.hide-preview select {
  display: block;
  visibility: hidden;
}

.hide-preview .select2-container:has(.select2-selection) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.hide-preview .select2-container--default .select2-results > .select2-results__options {
  max-height: inherit !important;
}

.custom-width .select2-container.select2-container--open .select2-dropdown {
  width: var(--dropdown-width, 10rem) !important;
  min-width: var(--dropdown-min-width, none);
  max-width: var(--dropdown-max-width, none);
  max-height: var(--dropdown-max-height, 200px);
}

.hide-blank-option
    .select2-results__option:has(.super-select--option-row-blank) {
  display: none;
}

.select2-dropdown.select2-dropdown--above {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.select2-dropdown.select2-dropdown--below {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.select2-container--default .select2-results__option {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  padding: 2px;
}

.select2-container--default
    .select2-results__option
    .super-select--option-row {
  /* Popover menu-row metrics (OL-3319): 10px/6px padding, 10px radius. */
  padding: 6px 10px;
  border-radius: 0.625rem;
}

@media not all and (min-width: 768px) {
  .select2-container--default
    .select2-results__option
    .super-select--option-row {
    border-radius: 0.75rem;
  }
}

/* Even 8px spacing between the checkbox, leading glyph, and label is the option row's flex gap
     (see .super-select--option-row below) — no compensating negative margin. */

.super-select--single
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-row {
  position: relative;
}

.super-select--single
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-row:after {
  content: '';
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="%230B051D" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m3 7.86 2.667 3.64L13 4.5"/></svg>');
}

.super-select--single
    .select2-container--default
    .select2-results__option
    .super-select--option-row {
  padding-right: 40px;
}

.super-select--single
    .select2-container--default
    .select2-results__option
    .super-select--option-row:after {
  right: 15px;
}

.super-select--single.checkmark-left
    .select2-container--default
    .select2-results__option
    .super-select--option-row {
  padding-left: 40px;
  padding-right: 10px;
}

.super-select--single.checkmark-left
    .select2-container--default
    .select2-results__option
    .super-select--option-row:after {
  left: 15px;
  right: auto;
}

.super-select--single
    .select2-container--default
    .select2-results__option
    .super-select--option-row .super-select--option-checkbox {
  display: none !important;
}

/* Orders Status filter (.orders-status-filter): the per-status count sits in the
     same far-right slot as the selected checkmark (which is an ::after at right:15px
     on .super-select--option-row), rendered in content-secondary. On the selected row
     the count is hidden so the checkmark takes its place — no point showing the count
     of the view you're already in. The row is positioned so the absolute count anchors
     to its right edge. */

.orders-status-filter
    .select2-container--default
    .select2-results__option
    .super-select--option-row {
  position: relative;
}

.orders-status-filter
    .select2-container--default
    .select2-results__option
    .super-select--option-right-label {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--content-secondary);
}

.orders-status-filter
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-right-label {
  display: none;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row {
  /* Kept relative only to anchor the orders-status count's absolute right-label. The checkbox is a
       normal flex child now (below), so there's no room-making left padding. */
  position: relative;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row
    .super-select--option-checkbox {
  /* A normal 16px flex child (was absolutely positioned at left:10px over a 40px-padded row).
       display: block / none is toggled per selection state below. */
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row
    .super-select--option-checkbox > svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row
    .super-select--option-checkbox.super-select--option-checkbox-not-selected {
  display: block;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option
    .super-select--option-row
    .super-select--option-checkbox.super-select--option-checkbox-selected {
  display: none;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-row
    .super-select--option-checkbox.super-select--option-checkbox-not-selected {
  display: none;
}

.super-select--multiple
    .select2-container--default
    .select2-results__option[aria-selected='true']
    .super-select--option-row
    .super-select--option-checkbox.super-select--option-checkbox-selected {
  display: block;
}

.select2-selection__rendered
    .super-select--option-row
    .super-select--option-checkbox {
  display: none !important;
}

.select2-container--default .select2-results__option:hover > .super-select--option-row,
  .select2-container--default .select2-results__option:active > .super-select--option-row {
  /* Surface reveals on hover/press only — never select2's default-highlighted first item. Direct
       child (>) is required: a group is itself a .select2-results__option, so hovering any option in
       it makes the group container :hover too — a descendant selector would light up the whole group. */
  background-color: var(--background-base) !important;
}

/* select2's --highlighted state ships a blue background AND white text. The bg is neutralised
     (bg-white !important above) and the surface is intentionally suppressed on the auto-highlighted
     first item (the hover/press rule above), but the WHITE TEXT leaked through — so the highlighted
     row rendered white-on-white: an invisible label beside a lone faint checkbox, which read as a
     broken menu next to the advanced filter popover's clean rows. Pin text + icons back to
     content-primary so keyboard-highlighted / auto-highlighted rows stay legible. */

.select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--default .select2-results__option--highlighted[aria-selected] .super-select--option-label,
  .select2-container--default .select2-results__option--highlighted[aria-selected] .super-select--option-image {
  color: var(--content-primary) !important;
}

/* Typeahead box — matches the floating-label text field component: 32px tall,
     14px text, 8px radius, 1px inset border-dark at rest, content-primary on
     hover, 2px content-primary on focus/active, 150ms ease. */

.select2-search__field {
  height: 2rem !important;
  border-radius: 0.5rem !important;
  border-style: none !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: 0 !important;
  box-shadow: 0 0 0 1px inset var(--content-border-dark, rgba(52, 46, 38, 0.12));
  background: var(--content-background-elevated, #fff);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.select2-search__field:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

.select2-search__field:focus,
    .select2-search__field:active {
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
  outline: none !important;
}

.super-select--option-description,
  .super-select--option-image,
  .super-select--option-color {
  display: none;
}

.date-range-calendar .flatpickr-day.super-select--option-description,.date-range-calendar .flatpickr-day
  .super-select--option-image,.date-range-calendar .flatpickr-day
  .super-select--option-color {
  display: block;
  visibility: hidden;
}

.select2-results .super-select--option-description,
    .select2-results .super-select--option-text,
    .select2-results .super-select--option-image {
  display: block;
}

.select2-results .super-select--option-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.select2-results .super-select--option-text {
  flex: 1 1 0%;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.select2-results .super-select--option-image {
  /* Sizes to its own glyph so the row's 8px flex gap lands on the visible edges — no fixed box,
         no absolute centering, no trailing margin. 16px icons align with the 16px checkbox; images
         (merchant avatars) stay 20px to match the advanced filter's rows. */
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.select2-results .super-select--option-image > i,
      .select2-results .super-select--option-image > svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.select2-results .super-select--option-image > img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.125rem;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Product/media thumbnail variant (commissions Product filter): a larger 28px squared
         thumbnail with an 8px radius rather than the 20px round avatar. mr-0 drops select2's legacy
         `.select2-results img` trailing margin so the thumbnail relies on the row's 8px flex gap
         (the round avatars never hit that margin — their fallback is an initials <div>, not an <img>). */

.select2-results .super-select--option-image > img.super-select--option-thumb {
  margin-right: 0px;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
}

[data-select-all-target='wrapper'].select2-results .super-select--option-color {
  display: block;
}

.select2-results .super-select--option-color {
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
}

.select2-results .super-select--option-label {
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.select2-results .select2-results__option[aria-disabled='true'] .super-select--option-label,
      .select2-results .select2-results__option[aria-disabled='true'] .super-select--option-description,
      .select2-results .select2-results__option[aria-disabled='true'] .super-select--option-image,
      .select2-results .select2-results__option[aria-disabled='true'] .super-select--option-image svg {
  color: var(--content-tertiary);
}

.select2-results .super-select--option-description {
  display: block;
  color: rgb(11 5 29 / .36);
}

.no-edges .select2-container,
    .no-edges .select2-container > .selection {
  border-radius: inherit !important;
}

/* 
    We're using a modal on mobile to show the select2 dropdown.
    On desktop, we're using the select2 dropdown as a dropdown menu.
  */

/* In the bottom sheet the dropdown is a flex column that fills the sheet
       (container → dropdown → results all flex-1 + min-h-0), so the results list
       — not a fixed 300px box — becomes the scroll area and extends all the way
       to the bottom of the sheet. */

.use-modal-on-mobile dialog:modal[open] .select2-container--open {
  position: static !important;
  display: flex !important;
  min-height: 0px !important;
  width: 100% !important;
  flex: 1 1 0% !important;
  flex-direction: column !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-dropdown {
  position: static !important;
  min-height: 0px !important;
  width: 100% !important;
  flex: 1 1 0% !important;
  overflow: visible !important;
  border-radius: 0 !important;
  border-style: none !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.floating-input-field.use-modal-on-mobile dialog:modal[open] .select2-dropdown,
.floating-input-field.use-modal-on-mobile dialog:modal[open] .select2-dropdown:focus,
.floating-input-field.use-modal-on-mobile dialog:modal[open] .select2-dropdown:hover,
.floating-input-field.use-modal-on-mobile dialog:modal[open] .select2-dropdown:active {
  box-shadow: none !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-dropdown {
  max-height: none !important;
  /* Edge-to-edge: no horizontal inset so each row's press band reaches the sheet edges (rows
         manage their own 16px content gutter). Keep a 2px vertical inset only. */
  padding: 2px 0 !important;
  /* Neutralize select2's above/below open-direction translate; in the sheet the
         dropdown is static and full-height, and the -translate-y-1 (--above) just
         shifts the list up, leaving a gap at the bottom of the scroll area. */
  transform: none !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-dropdown::after {
  display: none;
}

.date-range-calendar .flatpickr-day.use-modal-on-mobile dialog:modal[open] .select2-dropdown::after {
  display: block;
  visibility: hidden;
}

.use-modal-on-mobile dialog:modal[open] .select2-container--default .select2-results {
  min-height: 0px !important;
  flex: 1 1 0% !important;
  overflow-y: auto !important;
}

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results
      > .select2-results__options {
  max-height: none !important;
  overflow: visible;
  overflow-y: visible;
  /* Drop the desktop 6px side inset so rows go edge-to-edge in the sheet (they keep their own
         16px content gutter). Only the horizontal inset is cleared; the 6px bottom stays. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bottom-sheet menu rows — match the app's dialog-menu pattern.
       The list is edge-to-edge (activeModalBody cancels the body gutters), each
       row is full-width and tappable, the :active / highlighted band spans the
       full width, and content keeps a 16px L/R gutter (so dividers added later
       can honor it too). */

.use-modal-on-mobile dialog:modal[open] .select2-search--dropdown {
  padding: 0 16px 12px !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-container--default .select2-results__option {
  padding: 0 !important;
}

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option
      .super-select--option-row {
  /* gap-3 (12px) between the leading visual and the label — the bottom-sheet standard, matching
         the advanced filter's rows (desktop keeps the tighter 8px popover gap). */
  gap: 0.75rem;
  border-radius: 0;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  padding: 14px 16px;
  background-color: transparent;
}

/* The single-select check (`:after`) lives at the right gutter; the
       `.super-select--single` wrapper is outside the moved dialog, so target the
       selected row directly. Reserve right padding so a long selected label can't
       run under the check, and align the check itself to the 16px gutter. */

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option[aria-selected='true']
      .super-select--option-row {
  padding-right: 44px;
}

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option[aria-selected='true']
      .super-select--option-row:after {
  right: 16px;
}

/* Leading visual sizes to its own glyph — no forced box, no trailing margin; the row's 12px gap
       (above) owns the spacing. Icons are 24px in the sheet (matching the advanced filter's menu-item
       icons — bigger than the 16px popover glyph for a touch-friendly bottom sheet); images (avatars /
       thumbnails) stay 20px. */

.use-modal-on-mobile dialog:modal[open] .select2-results .super-select--option-image {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

.use-modal-on-mobile dialog:modal[open] .select2-results .super-select--option-image > i,
      .use-modal-on-mobile dialog:modal[open] .select2-results .super-select--option-image > svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

.use-modal-on-mobile dialog:modal[open] .select2-results .super-select--option-image > img {
  margin-right: 0px;
  height: 1.25rem;
  width: 1.25rem;
}

/* 16px labels in the bottom sheet — the shared standard for every select2 sheet (filter chips,
       form checklists, single-select / radio lists), not just the filter chips. */

.use-modal-on-mobile dialog:modal[open] .select2-results .super-select--option-text {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Only tap-and-hold (:active) reveals the full-width background-base band, transitioned smoothly
       via the row's `transition`. Deliberately NOT select2's auto-highlight (--highlighted): select2
       stamps that on the first option the instant the dropdown opens, so including it here lit up the
       first row on open for no reason. There's no keyboard nav to follow on touch, so :active is the
       only state that should reveal the band. */

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option:active
      .super-select--option-row {
  background-color: var(--background-base) !important;
}

/* Group dividers keep the 16px gutter in the bottom sheet. The divider markup carries -mx-1.5 so
       it goes full-bleed inside the desktop popover's 6px inset; in a sheet we want it inset to line
       up with the option rows' 16px content, never running to the sheet edges. */

.use-modal-on-mobile dialog:modal[open] .super-select--group-divider {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

/* Group header aligns with the option rows' 16px content inset in the bottom sheet — the base 10px
       (px-2.5) is tuned for the desktop popover's 6px gutter (6 + 10 = 16), which doesn't hold in the
       sheet where the list is edge-to-edge. */

.use-modal-on-mobile dialog:modal[open] .super-select--group-header {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Multi-select checkbox in the bottom sheet: 20px, moved to the right gutter (order-last), to match
       the advanced filter's checkbox-clean. The flex-1 label (base .super-select--option-text rule)
       pushes it to the edge. This is the shared standard for EVERY select2 bottom sheet — filter chips,
       form checklists, single-select / radio lists — hence no .filter-chip-menu scope. Together with
       the full-bleed rows, 14/16 padding, 12px gap, 16px icons, and text-base labels above, it's the
       one consistent mobile layout for any select2 that converts to a sheet. (Single-selects hide the
       checkbox and show a right-gutter checkmark instead, so this is inert for them.) */

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option
      .super-select--option-row
      .super-select--option-checkbox {
  order: 9999;
  margin-left: 8px;
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.use-modal-on-mobile dialog:modal[open]
      .select2-container--default
      .select2-results__option
      .super-select--option-row
      .super-select--option-checkbox > svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Allow select2 dropdowns to overflow dialogs */

dialog:has(.select2-container--open) {
  overflow: visible !important;
}

dialog:has(.select2-container--open) > div {
  overflow: visible !important;
}

/* Bank picker (Transfer-to sheet) — scoped to the destination-payment-method results list by id, since
     select2's dropdownCssClass compat module isn't bundled. The leading visual is a generic bank glyph in
     a 44px background-base circle (20px glyph); a real brand logo fills the circle as a 44px image with no
     background. The label is two lines — account type + last 4 (primary) over the bank name (text-sm,
     content-secondary). */

#select2-external_transfer_destination_payment_method-results .super-select--option-image {
  height: 2.75rem;
  width: 2.75rem;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--background-base);
}

#select2-external_transfer_destination_payment_method-results .super-select--option-image > svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary#select2-external_transfer_destination_payment_method-results .super-select--option-image:has(img), .btn-toggle input[type='radio']:checked + button.button-secondary#select2-external_transfer_destination_payment_method-results .super-select--option-image:has(img) {
  background-color: var(--background-overlay);
}

#select2-external_transfer_destination_payment_method-results .super-select--option-image:has(img) {
  background-color: transparent;
}

#select2-external_transfer_destination_payment_method-results .super-select--option-image > img {
  height: 2.75rem !important;
  width: 2.75rem !important;
  border-radius: 9999px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

#select2-external_transfer_destination_payment_method-results .super-select--option-label {
  font-weight: 500;
  color: var(--content-primary);
}

#select2-external_transfer_destination_payment_method-results .super-select--option-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  color: var(--content-secondary);
}

/* Filter-chip bottom sheet: 16px header gutter so the title lines up with the option rows' own 16px
     content inset (and matches the advanced filter popover's 16px header). The shared dialog header is
     px-5 (20px); scope this to the filter-chip sheet only, since the general dropdown-modal menus keep
     20px row content (group-[.with-items]/dropdown-modal:px-5) and would misalign at 16px. The header
     is the dialog's first child (the heading row); this only matches on mobile, where the chip menu is
     wrapped in a dialog. */

dialog:has(.filter-chip-menu) > div:first-child {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.super-select--option-label .super-select--option-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
     Shared slider foundation

     Both the single-value slider (fields--slider, e.g. offer/commission %) and
     the dual-handle range slider (fields--range-slider, e.g. the Orders "Order
     total" filter) are built the same way: a `.slider-scaffold` container holds
     a thin resting `.slider-track` + a moola `.slider-fill`, and one or two
     native range <input class="slider-input">s ride on top as invisible carriers
     for a 24px moola handle. The input keeps a full 24px height for a large grab
     area while the visible track stays 3px.

     Per-control overrides (set on .slider-scaffold):
       --slider-track-height   resting + fill thickness (default 3px)
       --slider-track-color    resting track colour     (default content-border-input)
       --slider-fill-color     fill + handle colour     (default moola)
       --slider-thumb-size     handle diameter          (default 24px)
     ───────────────────────────────────────────────────────────────────────── */

.slider-scaffold {
  --slider-track-height: 3px;
  --slider-track-color: var(--content-border-input);
  --slider-fill-color: var(--brand-secondary-moola);
  --slider-thumb-size: 24px;
  position: relative;
  width: 100%;
  height: var(--slider-thumb-size);
}

/* Resting track — full width, vertically centred, non-interactive so clicks
     fall through to the input beneath. */

.slider-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--slider-track-height, 3px);
  border-radius: 9999px;
  background: var(--slider-track-color, var(--content-border-input));
  pointer-events: none;
}

/* Filled portion. Single-value: starts at 0, width driven by --slider-percentage
     (set inline). Dual-handle: the controller sets left + width between the thumbs. */

.slider-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--slider-track-height, 3px);
  border-radius: 9999px;
  background: var(--slider-fill-color, var(--brand-secondary-moola));
  pointer-events: none;
}

/* The native range <input> — transparent everywhere except the handle it paints. */

.slider-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  position: relative;
  width: 100%;
  margin: 0;
  height: var(--slider-thumb-size, 24px);
  background: transparent;
  outline: none;
}

/* Overlaid variant (dual-handle): the input body ignores pointer events so two
     stacked inputs don't block one another; only the thumbs stay grabbable. */

.slider-input--overlaid {
  pointer-events: none;
}

.slider-input::-webkit-slider-runnable-track {
  height: var(--slider-thumb-size, 24px);
  background: transparent;
  border: 0;
}

.slider-input::-moz-range-track {
  height: var(--slider-thumb-size, 24px);
  background: transparent;
  border: 0;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: var(--slider-thumb-size, 24px);
  height: var(--slider-thumb-size, 24px);
  border-radius: 9999px;
  background: var(--slider-fill-color, var(--brand-secondary-moola));
  border: 2px solid var(--background-elevated);
  cursor: grab;
}

.slider-input::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.slider-input::-moz-range-thumb {
  pointer-events: auto;
  width: var(--slider-thumb-size, 24px);
  height: var(--slider-thumb-size, 24px);
  border-radius: 9999px;
  background: var(--slider-fill-color, var(--brand-secondary-moola));
  border: 2px solid var(--background-elevated);
  cursor: grab;
}

.slider-input::-moz-range-thumb:active {
  cursor: grabbing;
}

.switch {
  position: relative;
  z-index: 0;
  display: inline-flex;
  height: 1.5rem;
  width: 2.375rem;
  min-width: 2.375rem;
  align-items: center;
}

.switch__track-base {
  position: absolute;
  inset: 0px;
  z-index: 0;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 237 234 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.switch__track-base:where(.dark, .dark *) {
  background-color: var(--background-neutral);
}

.switch__track-checked {
  position: absolute;
  inset: 0px;
  z-index: 10;
  border-radius: 9999px;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: var(--brand-secondary-moola) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--brand-secondary-moola) var(--tw-gradient-to-position);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.switch__track-checked[type='checkbox']:disabled,
  .switch__track-checked[type='radio']:disabled {
  cursor: not-allowed;
  background-color: var(--content-border-dark);
}

.switch__track-hover {
  position: absolute;
  inset: 0px;
  z-index: 10;
  border-radius: 9999px;
  background-color: var(--background-overlay);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.switch__thumb {
  position: absolute;
  left: 0.125rem;
  top: 50%;
  z-index: 10;
  height: 1.25rem;
  width: 1.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.8);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.switch__thumb::after {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

/* Small variant for dense rows like popover toggles: 24px x 16px track, 12px thumb (the 2px inset
     is inherited from .switch__thumb). Usages apply the matching 0.5rem thumb travel: 24 - 12 - 2*2. */

.switch--sm {
  height: 1rem;
  width: 1.5rem;
  min-width: 1.5rem;
}

.switch--sm .switch__thumb {
  height: 0.75rem;
  width: 0.75rem;
}

.segmented-control__shell {
  position: relative;
  height: 2rem;
  min-width: 2.5rem;
  border-radius: 9999px;
  border-width: 2px;
  border-color: var(--content-border-dark);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.segmented-control__box {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 9999px;
  padding: 0.15rem;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.segmented-control__label {
  z-index: 50;
  display: flex;
  height: 1.5rem;
  width: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--content-secondary);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-toggle input[type='checkbox']:checked + .segmented-control__label:has(:checked)button.button-secondary, .btn-toggle input[type='radio']:checked + .segmented-control__label:has(:checked)button.button-secondary {
  background-color: var(--background-overlay);
}

.segmented-control__label:hover {
  background-color: var(--background-overlay);
  color: var(--content-secondary);
}

.segmented-control__label:focus-visible {
  color: var(--content-secondary);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: #342e2633;
}

.segmented-control__label:has(:checked) {
  background-color: transparent;
}

.segmented-control__label:has(:selected) {
  color: var(--content-primary) !important;
}

.segmented-control__label:has(:checked) {
  color: var(--content-primary) !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.segmented-control__label input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.segmented-control label:first-of-type:has(input[type='radio']:checked)
      ~ .segmented-control__active {
  transform: translateX(-100%);
}

.segmented-control label:last-of-type:has(input[type='radio']:checked)
      ~ .segmented-control__active {
  transform: translateX(0%);
}

.segmented-control__active {
  background-color: var(--background-overlay);
  color: var(--background-base);
  position: absolute;
  left: 50%;
  height: 1.5rem;
  cursor: pointer;
  border-radius: 9999px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  /* @apply absolute left-1/2 h-9 rounded-radius-12 shadow-md transition-transform segmented-control-slider; */
}

.segmented-control label:first-of-type:has(input[type='radio']:checked)
      ~ .segmented-control-slider {
  transform: translateX(-100%);
}

.segmented-control label:last-of-type:has(input[type='radio']:checked)
      ~ .segmented-control-slider {
  transform: translateX(0%);
}

.segmented-control .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 237 132 / var(--tw-border-opacity, 1));
  background-color: var(--brand-primary-shine);
  padding-left: 5px;
  padding-right: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--content-primary);
}

.segmented-control .\!badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 237 132 / var(--tw-border-opacity, 1));
  background-color: var(--brand-primary-shine);
  padding-left: 5px;
  padding-right: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--content-primary);
}

.segmented-control .badge {
  padding-top: 3px;
  padding-bottom: 3px;
}

.segmented-control .\!badge {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.segmented-control-slider {
  background-color: var(--background-overlay);
  color: var(--background-base);
}

/* Hide dividers adjacent to checked inputs or hovered labels */

[data-controller*="segmented-control"] label:has(input:checked)+div,
  [data-controller*="segmented-control"] label.group:hover+div {
  opacity: 0;
}


  [data-controller*="segmented-control"] label.\!group:hover+div {
  opacity: 0 !important;
}

.read-more-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--read-more-line-clamp, 2);
  line-clamp: var(--read-more-line-clamp, 2);
}

[data-controller='read-more'] [data-read-more-target='toggle'] {
  visibility: hidden;
}

[data-controller='read-more'].truncated [data-read-more-target='toggle'] {
  visibility: visible;
}

.pcr-app[data-controller='read-more'].truncated [data-read-more-target='toggle'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.autocomplete-dropdown[data-controller='read-more'].truncated [data-read-more-target='toggle'] {
  display: block;
}

/* NOTE: not sure why this was here, but it breaks the above display declaration */

/* .read-more-content[style*='--read-more-line-clamp'] {
    display: inline !important;
  } */

/* One-off icon-size override for the sidebar close/expand toggle: the drawer
     glyph reads better at 18px than the 16px default that
     `.button-icon.button-small` enforces. `flex-shrink: 0` keeps the SVG from
     being shrunk to fit the button's 16px content area (it overflows ~1px into
     the 8px padding, which is fine visually). */

.button-icon.button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.button-icon.\!button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.\!tooltip {
  /* Dark "data popup" — a small desktop-only info label on certain buttons. A clean rounded
       rectangle (no arrow, see below): 13px/150% medium, -0.32px tracking, white
       (background-elevated) text. An inline-flex pill sized to its content (no min-height); the
       shortcut span sits inline next to the label with an 8px gap. text-13 carries a 1.33
       line-height + 0 tracking, but the explicit leading-[150%]/tracking-tight-2 after it win. */
}

.tooltip {
  /* Dark "data popup" — a small desktop-only info label on certain buttons. A clean rounded
       rectangle (no arrow, see below): 13px/150% medium, -0.32px tracking, white
       (background-elevated) text. An inline-flex pill sized to its content (no min-height); the
       shortcut span sits inline next to the label with an 8px gap. text-13 carries a 1.33
       line-height + 0 tracking, but the explicit leading-[150%]/tracking-tight-2 after it win. */
}

.\!tooltip {
  position: absolute;
  border-radius: 0.5rem;
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.8125rem;
  line-height: 1.33;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.02rem;
}

.tooltip {
  position: absolute;
  border-radius: 0.5rem;
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.8125rem;
  line-height: 1.33;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.02rem;
}

.\!tooltip {
  background-color: var(--content-primary);
  color: var(--background-elevated);
}

.tooltip {
  background-color: var(--content-primary);
  color: var(--background-elevated);
}

.\!tooltip:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.tooltip:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.\!tooltip {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
}

.tooltip {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
}

.\!tooltip {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.tooltip {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.\!tooltip[aria-hidden="true"] {
  display: none;
}

.tooltip[aria-hidden="true"] {
  display: none;
}

.\!tooltip {
  top: 0px;
  left: 0px;
}

.tooltip {
  top: 0px;
  left: 0px;
}

.\!tooltip {
  width: -moz-max-content;
  width: max-content;
}

.tooltip {
  width: -moz-max-content;
  width: max-content;
}

.\!tooltip {
  z-index: 50;
}

.tooltip {
  z-index: 50;
}

.\!tooltip {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 5.5px;
  padding-bottom: 5.5px;
}

.tooltip {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 5.5px;
  padding-bottom: 5.5px;
}

.\!tooltip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tooltip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.\!tooltip {
  max-width: min(calc(100vw - 20px), 200px) !important;
}

.tooltip {
  max-width: min(calc(100vw - 20px), 200px);
}

/* Inline keyboard shortcut hint inside a tooltip. Sits to the right of the label
     with an 8px gap (provided by `.tooltip { gap: 8px }`), rendered at 64% opacity
     to mirror content-secondary's relationship to content-primary in light theme.
     text-xs (a step down from the tooltip's text-sm label) is a component-level rule
     for every hotkey tooltip; the per-character spacing is applied in
     tooltip_creator_controller#createTooltipElement so both rules stay centralised. */

.tooltip-shortcut {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  color: var(--background-elevated);
  opacity: 0.64;
}

.\!tooltip.light .tooltip-shortcut {
  color: var(--content-secondary);
  opacity: 1;
}

.tooltip.light .tooltip-shortcut {
  color: var(--content-secondary);
  opacity: 1;
}

/* A shortcut tooltip on a form-changes submit (e.g. the builder's Save button) is only meaningful
     while that button is enabled — ⌘S does nothing when it's disabled. The tooltip-creator wraps the
     <input> in .tooltip-generated-wrapper next to the generated .tooltip, so suppress the tooltip
     whenever the wrapped submit is disabled. (The submit keeps data-form-changes-target; only the
     aria/shortcut attrs get moved to the wrapper.) */

.tooltip-generated-wrapper:has(input[data-form-changes-target="submit"]:disabled) .tooltip {
  display: none;
}

.tooltip-generated-wrapper:has(input[data-form-changes-target="submit"]:disabled) .\!tooltip {
  display: none !important;
}

.\!tooltip.light {
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.tooltip.light {
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.\!tooltip.light {
  border-width: 1px;
  border-color: var(--content-border-neutral);
}

.tooltip.light {
  border-width: 1px;
  border-color: var(--content-border-neutral);
}

.\!tooltip.light {
  /* Light tooltips carry longer copy than the dark 1–2 word data popups, so they override
       the base's dark-label type: 12px text-xs at a 1.33 line-height (text-xs also zeroes the
       base's tight tracking), and a larger 10px radius. Medium weight + content-primary colour
       carry over from the base .tooltip / above. */
}

.tooltip.light {
  /* Light tooltips carry longer copy than the dark 1–2 word data popups, so they override
       the base's dark-label type: 12px text-xs at a 1.33 line-height (text-xs also zeroes the
       base's tight tracking), and a larger 10px radius. Medium weight + content-primary colour
       carry over from the base .tooltip / above. */
}

.\!tooltip.light {
  border-radius: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.33;
}

.tooltip.light {
  border-radius: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.33;
}

.\!tooltip.light {
  /* Sentence-length copy — always left-align (the tooltip otherwise inherits center). */
}

.tooltip.light {
  /* Sentence-length copy — always left-align (the tooltip otherwise inherits center). */
}

.\!tooltip.light {
  text-align: left;
}

.tooltip.light {
  text-align: left;
}

.\!tooltip.light {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0),
      0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01),
      0 2px 5px 0 rgba(0, 0, 0, 0.06) !important;
}

.tooltip.light {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0),
      0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01),
      0 2px 5px 0 rgba(0, 0, 0, 0.06);
}

.\!tooltip.arrow-hidden .tooltip-arrow {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
}

.tooltip.arrow-hidden .tooltip-arrow {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
}

.show-tooltip .tooltip {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.show-tooltip .\!tooltip {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.tooltip-arrow {
  position: absolute;
  height: 0.5rem;
  width: 0.5rem;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: inherit;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* No arrow on the dark data-popup tooltip — it's a clean rounded rectangle.
     The light variant (used elsewhere) keeps its arrow. */

.\!tooltip:not(.light) .tooltip-arrow {
  display: none;
}

.date-range-calendar .flatpickr-day.\!tooltip:not(.light) .tooltip-arrow {
  display: block;
  visibility: hidden;
}

.tooltip:not(.light) .tooltip-arrow {
  display: none;
}

.date-range-calendar .flatpickr-day.tooltip:not(.light) .tooltip-arrow {
  display: block;
  visibility: hidden;
}

.\!tooltip.light .tooltip-arrow {
  border-color: var(--content-border-neutral);
}

.tooltip.light .tooltip-arrow {
  border-color: var(--content-border-neutral);
}

[data-select-all-target='wrapper'].\!tooltip.light[data-placement='top'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.\!tooltip.light[data-placement='top'] .tooltip-arrow {
  border-right-width: 1px;
  border-bottom-width: 1px;
}

[data-select-all-target='wrapper'].tooltip.light[data-placement='top'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.tooltip.light[data-placement='top'] .tooltip-arrow {
  border-right-width: 1px;
  border-bottom-width: 1px;
}

[data-select-all-target='wrapper'].\!tooltip.light[data-placement='bottom'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.\!tooltip.light[data-placement='bottom'] .tooltip-arrow {
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-select-all-target='wrapper'].tooltip.light[data-placement='bottom'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.tooltip.light[data-placement='bottom'] .tooltip-arrow {
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-select-all-target='wrapper'].\!tooltip.light[data-placement='left'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.\!tooltip.light[data-placement='left'] .tooltip-arrow {
  border-top-width: 1px;
  border-right-width: 1px;
}

[data-select-all-target='wrapper'].tooltip.light[data-placement='left'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.tooltip.light[data-placement='left'] .tooltip-arrow {
  border-top-width: 1px;
  border-right-width: 1px;
}

[data-select-all-target='wrapper'].\!tooltip.light[data-placement='right'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.\!tooltip.light[data-placement='right'] .tooltip-arrow {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-select-all-target='wrapper'].tooltip.light[data-placement='right'] .tooltip-arrow {
  border-color: var(--content-border-dark);
}

.tooltip.light[data-placement='right'] .tooltip-arrow {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.tooltip-arrow-hidden {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
}

/* Opt-in fixed positioning (paired with data-tooltip-strategy="fixed" on the wrapper): the tooltip is
     positioned against the viewport by Floating UI so it's never clipped by an ancestor's overflow, and
     the controller portals it to <body> so it escapes ancestor stacking contexts. A high z then overlays
     ALL page chrome (sidebar, sticky header, …); pointer-events:none so it never intercepts clicks on the
     content it covers. Two classes beat the base `.tooltip { position: absolute; z-50 }`. */

.\!tooltip.tooltip-fixed {
  position: fixed !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}

.tooltip.tooltip-fixed {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}

/* Visible state driven by a class on the tooltip itself (not only the wrapper's descendant selector),
     so a portaled fixed tooltip — moved to <body>, no longer a wrapper descendant — still fades in. */

.\!tooltip.show-tooltip {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

.tooltip.show-tooltip {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

.tooltip-generated-wrapper {
  display: inline-block;
}

/* Canonical inline text link: semibold + a 1.5px underline that stays visible
     on hover. Exposed as link-medium / link-large (see the design-system
     showcase, _link.html.erb). Reach for these instead of hand-rolling underline
     utilities. The `underline`/`hover:underline` here cover non-anchor usages
     (e.g. on a <button> or <span>); on an actual <a> they're overridden by the
     unlayered global `a { no-underline }` reset — see the unlayered re-assert
     below the @layer block, which is what actually paints the line on links. */

.link-base {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-line: underline;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.link-base:hover {
  text-decoration-line: underline;
}

.link-base {
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.link-large {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-line: underline;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.link-large:hover {
  text-decoration-line: underline;
}

.link-large {
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1.5rem;
  color: var(--interactive-control);
}

a.link-large,
a.link-large:hover {
  text-decoration-line: underline;
}

.link-medium {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  letter-spacing: 0em;
  text-decoration-line: underline;
  text-decoration-color: var(--content-secondary);
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.link-medium:hover {
  text-decoration-line: underline;
}

.link-medium {
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.25rem;
  color: var(--interactive-control);
}

a.link-medium,
a.link-medium:hover {
  text-decoration-line: underline;
}

.button-link-share {
  /* active:scale-[0.98] matches the core .button-base press effect — scale-95 shrank these too hard. */
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--background-overlay);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.button-link-share:hover {
  border-color: transparent;
  background-color: var(--background-overlay);
}

.button-link-share:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: var(--background-overlay);
  background-color: var(--background-elevated);
}

/* Dotted-underline affordance: signals that a piece of text reveals more detail on
     hover (desktop) / tap (mobile), typically via a tooltip. Pair with a tooltip —
     either `data-create-tooltip` + an `aria-label`, or the custom_tooltip partial —
     and add `tabindex="0"` so a mobile tap can focus→open it.

     `inline-block` + a line-height just under 1 condense the line box so the 2px dotted border
     rides up tight against the text (an inline border otherwise paints down at the font's descent
     line, leaving a visible gap). The text-to-border gap is HALF the line-height delta, so the
     `calc(1em - 2px)` below sits the border ~1px closer to the text than a flat `leading-none`
     would — without moving the text itself (inline-block aligns by baseline, so any surrounding
     text stays put). Color defaults to the content-border-dark border token; override with another
     `border-*` utility where a different tone is needed. */

[data-select-all-target='wrapper'].dotted-hint {
  display: block;
}

.dotted-hint {
  display: inline-block;
  border-bottom-width: 2px;
  border-style: dotted;
  border-color: var(--content-border-dark);
  text-decoration-line: none;
  line-height: calc(1em - 2px);
}

/* Standard selectable radio-button card (icon/content + a hidden radio input).
     Used by the publish-flow destination step, the create-collab dialog, and
     onboarding. The border stays 1px in every state so selection never shifts
     layout — the selected state's thicker edge comes from a 2px inset box-shadow
     ring, not a wider border. Pair with `.transition` in the markup (or rely on
     the transition-property below) so state changes animate smoothly. */

.radio-card {
  cursor: pointer;
  border-radius: 1.25rem;
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--background-elevated);
  transition-duration: 0.15s;
  transition-property: background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.radio-card:hover {
  border-color: var(--content-primary, #342e26);
}

.radio-card:has(input:checked), .radio-card:has(input:focus-visible) {
  border-color: var(--content-primary, #342e26);
  background-color: var(--background-light, #fbfaf7);
  /* Net 2px edge ring = the 1px border above + this 1px inset shadow, matching the
         expressive (:lg) segmented control's 2px selected outline. (A 2px shadow on top of
         the 1px border read as ~3px — the border+shadow doubling the user flagged.) */
  box-shadow: 0 0 0 1px var(--content-primary, #342e26) inset;
}

.radio-card:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Explicit radio-button indicator — a 20px control rendered on the right of a
     radio-card in place of an icon (the "explicit" variant). Reflects the card's
     hidden input via :has, so no JS is needed to show the selected state. */

.radio-card__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--content-border-input, #e5dfd3);
  position: relative;
  transition: border-color 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.radio-card__radio::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: var(--content-primary, #342e26);
  transform: scale(0);
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.radio-card:has(input:checked) .radio-card__radio {
  border-color: var(--content-primary, #342e26);
}

.radio-card:has(input:checked) .radio-card__radio::after {
  transform: scale(1);
}

/* Ghost variant — transparent by default; a subtle --background-base fill on
     hover/active and when selected (the radio button also signals selection, so
     no border/ring is needed). 16px padding all sides, borderless. Rules sit
     after the base so they win the same-specificity cascade. */

.radio-card--ghost {
  border-color: transparent;
  background-color: transparent;
  padding: 16px;
}

.radio-card--ghost:hover, .radio-card--ghost:active {
  border-color: transparent;
  background-color: var(--background-base, #f7f5f0);
}

.radio-card--ghost:has(input:checked), .radio-card--ghost:has(input:focus-visible) {
  border-color: transparent;
  background-color: var(--background-base, #f7f5f0);
  box-shadow: none;
}

input[type='checkbox'] {
  border-radius: 0.25rem !important;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  color: var(--content-primary) !important;
}

input[type='checkbox']:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Clean, flat checkbox (Orders 2.0 list — reusable). The design-system default: a
     16px box, 4px radius, 1px content-border-input border, TRANSPARENT until checked;
     checked fills with content-primary and shows a 10px white tick (a minus when
     indeterminate). Selectors are element-qualified (`input.checkbox-clean`) so they beat
     the global `input[type=checkbox]` rules above — its white bg and white focus ring —
     without a pile of `!important`. The radius is set with `!important` only because the
     global pins it via `!rounded-radius-4`. No box-shadow ring on click (that was the
     "white blur"); keyboard focus still gets a clean outline. */

input.checkbox-clean {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--content-border-input);
  border-radius: 4px !important;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

input.checkbox-clean:hover {
  border-color: var(--content-primary);
}

/* Row-hosted checkbox — hovering the ROW must not darken the box. HTML propagates a label's
     :hover to its labeled control, so inside a clickable <label> row the plain :hover rule above
     fires from anywhere on the row. Opt-in fix: wrap the input in `.checkbox-hover-scope` (a span
     spanning only the box) and the darken keys off the WRAPPER's geometry instead — the row hover
     keeps its bg change, the border only darkens when the cursor is over the box itself.
     :not(:checked) keeps the checked state's content-primary border intact throughout. */

.checkbox-hover-scope {
  display: inline-flex;
}

.checkbox-hover-scope > input.checkbox-clean:not(:checked):hover {
  border-color: var(--content-border-input);
}

.checkbox-hover-scope:hover > input.checkbox-clean:not(:checked) {
  border-color: var(--content-primary);
}

/* Kill the global white focus ring + the forms box-shadow ring (the "blur"). */

input.checkbox-clean:focus {
  outline: none;
  box-shadow: none;
}

/* Keyboard focus only (not mouse clicks) gets a clean content-primary outline. */

input.checkbox-clean:focus-visible {
  outline: 2px solid var(--content-primary);
  outline-offset: 1px;
}

input.checkbox-clean:checked,
  input.checkbox-clean:indeterminate {
  background-color: var(--content-primary);
  border-color: var(--content-primary);
}

input.checkbox-clean:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1.875 4.912 1.667 2.276 4.583-4.375'/%3E%3C/svg%3E");
}

input.checkbox-clean:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='1.5' d='M1.563 5h6.875'/%3E%3C/svg%3E");
}

input[type='checkbox'].checkout {
  /* try to match Stripe's checkbox style */
  border-radius: 0.3125rem !important;
}

input[type='checkbox'].checkout:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-size: 14px;
}

/* Animated checkbox — reusable. Add `.checkbox-animated transition` to any
     `input[type="checkbox"]`. On check: a content-primary circle scales out from
     the centre to flood the rounded box, then a white tick pops in. On uncheck it
     reverses and the border eases back to the default colour (no lingering fill).
     Selectors are element-qualified so they beat the global `input[type=checkbox]`
     rule above (incl. its `!rounded-radius-4`). */

input.checkbox-animated {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--background-elevated);
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--content-border-input);
  border-radius: 6px !important;
  background-image: none;
}

input.checkbox-animated:hover {
  border-color: var(--content-primary);
}

input.checkbox-animated:checked {
  border-color: var(--content-primary);
  background-image: none;
}

/* Radial fill: a circle larger than the box, scaled 0 → 1 from the centre and
     clipped to the rounded-rect by the host's `overflow: hidden`. */

input.checkbox-animated::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  background-color: var(--content-primary);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input.checkbox-animated:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

/* White tick (our `check-checkmark` icon, stroke 1.5), revealed just after the
     fill lands. */

input.checkbox-animated::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' vector-effect='non-scaling-stroke' d='m4.5 11.79 4 5.46 11-10.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.08s ease, transform 0.12s ease;
}

input.checkbox-animated:checked::after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.1s ease 0.12s,
      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s;
}

.\!checkbox {
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.\!checkbox:last-child {
  margin-bottom: 0px;
}

.checkbox {
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.checkbox:last-child {
  margin-bottom: 0px;
}

/* Hide default checkbox but keep it accessible */

.\!checkbox .custom-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.checkbox .custom-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Custom checkbox container */

.checkbox-label {
  display: flex;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: flex-start;
}

.checkbox-label::before {
  content: '';
  margin-right: 0.5rem;
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.125rem;
}

.checkbox-label::after {
  content: '';
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--background-elevated);
  position: absolute;
  left: 2px;
  top: 2px;
}

/* Focus state */

.\!checkbox .custom-checkbox:focus ~ .checkbox-label::after {
  --tw-shadow: 0px 0px 0px 1px rgba(52,46,38,0.44),0px 0px 0px 4px rgba(11,5,29,0.16);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 0px 0px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.checkbox .custom-checkbox:focus ~ .checkbox-label::after {
  --tw-shadow: 0px 0px 0px 1px rgba(52,46,38,0.44),0px 0px 0px 4px rgba(11,5,29,0.16);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 0px 0px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Checked state */

.\!checkbox .custom-checkbox:checked ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
}

.checkbox .custom-checkbox:checked ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
}

.\!checkbox .custom-checkbox:checked ~ .checkbox-label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: var(--background-elevated) !important;
}

.checkbox .custom-checkbox:checked ~ .checkbox-label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  color: var(--background-elevated);
}

/* Indeterminate state */

.\!checkbox .custom-checkbox:indeterminate ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
}

.checkbox .custom-checkbox:indeterminate ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
}

.\!checkbox .custom-checkbox:indeterminate ~ .checkbox-label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.70837 6.5H10.2917' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: var(--background-elevated) !important;
}

.checkbox .custom-checkbox:indeterminate ~ .checkbox-label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.70837 6.5H10.2917' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  color: var(--background-elevated);
}

/* Disabled state */

.\!checkbox .custom-checkbox:disabled ~ .checkbox-label {
  cursor: not-allowed;
  color: var(--content-tertiary);
}

.checkbox .custom-checkbox:disabled ~ .checkbox-label {
  cursor: not-allowed;
  color: var(--content-tertiary);
}

.\!checkbox .custom-checkbox:disabled ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--background-overlay);
  --tw-shadow: 0px 1px 2px 0px rgba(11,5,29,0.12);
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.checkbox .custom-checkbox:disabled ~ .checkbox-label::after {
  border-color: var(--content-border-dark);
  background-color: var(--background-overlay);
  --tw-shadow: 0px 1px 2px 0px rgba(11,5,29,0.12);
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Help text styling */

.checkbox-label p {
  color: var(--content-tertiary);
}

/* Multiple checkboxes container */

[data-controller='select-all'] {
  display: flex;
  flex-direction: column;
}

[data-select-all-target='wrapper'] {
  display: none;
}

.date-range-calendar .flatpickr-day[data-select-all-target='wrapper'] {
  display: block;
  visibility: hidden;
}

[data-select-all-target='wrapper'].inline-block {
  display: block;
}

/* Select all section borders */

[data-select-all-target='wrapper'].border-b {
  border-color: var(--content-border-dark);
}

[data-select-all-target='wrapper'].\!border-t {
  border-color: var(--content-border-dark);
}

[data-select-all-target='wrapper'].border-t {
  border-color: var(--content-border-dark);
}

.box_shadow_sm {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
}

.layout {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--screen-margin);
}

/* Break a child out of the .layout gutter so it spans edge-to-edge of the
     container, then pad + scroll-pad it back so its content stays aligned.
     `--edge-bleed` is the bleed distance; it defaults to the responsive gutter,
     but can be overridden — e.g. a centered max-width section overrides it with a
     `cqw`-based value to bleed all the way past the centering offset to the panel
     edge (see the Pricing carousel). Apply to a horizontal scroller for a
     full-bleed carousel whose cards still start at the content's left edge. */

.edge-bleed {
  --edge-bleed: var(--screen-margin, 16px);
  margin-left: calc(-1 * var(--edge-bleed));
  margin-right: calc(-1 * var(--edge-bleed));
  padding-left: var(--edge-bleed);
  padding-right: var(--edge-bleed);
  scroll-padding-left: var(--edge-bleed);
  scroll-padding-right: var(--edge-bleed);
}

/* Same bleed, but only below the first layout breakpoint — for components that
     go full-bleed on phones yet sit boxed within the gutter from there up. */

@media (max-width: 768px) {
  .edge-bleed-mobile {
    --edge-bleed: var(--screen-margin, 16px);
    margin-left: calc(-1 * var(--edge-bleed));
    margin-right: calc(-1 * var(--edge-bleed));
    padding-left: var(--edge-bleed);
    padding-right: var(--edge-bleed);
    scroll-padding-left: var(--edge-bleed);
    scroll-padding-right: var(--edge-bleed);
  }
}

/* App-standard MOBILE horizontal scroll list — the "a desktop grid becomes an edge-to-edge,
     horizontally-scrolling row on phones" primitive, so this doesn't get hand-assembled every time.
     The track bleeds out past the 16px mobile gutter to the container's edges, but its first item
     still starts at the 16px content edge (scroll-padding holds snapped items there too); scrolling
     reveals overflow on BOTH sides. Scoped to <lg and INERT at lg+, so a caller only adds
     `lg:grid-cols-N` (etc.) for the desktop grid — no resets to undo the bleed/scroll.

     Use it: put `.edge-scroll` on the SAME element as the track layout, e.g.
       <div class="edge-scroll grid grid-flow-col auto-cols-[150px] gap-3 lg:grid-flow-row lg:auto-cols-auto lg:grid-cols-6 lg:gap-4">
     and give each item `snap-start`. FREE scroll by default; add `.edge-scroll--snap` for mandatory
     snap. (`flex` works as the track too.)

     Unlike `.edge-bleed` — which tracks the responsive `--screen-margin` for all-size carousels that
     live inside a `.layout` — this HARD-PINS the bleed to the 16px app mobile gutter via
     `--edge-scroll-gutter`, so it works in ANY mobile context (builder panels, sheets, etc.), not just
     a `.layout`. Override `--edge-scroll-gutter` only if a container's mobile gutter isn't 16px. */

@media (max-width: 1023px) {
  .edge-scroll {
    --edge-scroll-gutter: 1rem;
    margin-inline: calc(-1 * var(--edge-scroll-gutter));
    padding-inline: var(--edge-scroll-gutter);
    scroll-padding-inline: var(--edge-scroll-gutter);
    overflow-x: auto;
    /* overflow-x: auto forces a non-visible overflow-y to compute to auto, so it must be set
         explicitly — but `hidden` then clips the items' box-shadows top/bottom. Open vertical clip
         room with padding-block and cancel it with a matching negative margin-block, so shadows show
         while the track's layout position is unchanged. */
    overflow-y: hidden;
    padding-block: 0.5rem;
    margin-block: -0.5rem;
    scrollbar-width: none;
    /* Firefox */
  }

  .edge-scroll::-webkit-scrollbar {
    display: none;
  }

  /* WebKit */

  .edge-scroll--snap {
    scroll-snap-type: x mandatory;
  }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--background-base);
}

/* Shimmer is a darker (light transparent black) sweep over the base, rather than a white one. */

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.06) 50%,
      rgba(0, 0, 0, 0) 100%
    );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Skeleton "card": a real card (border + shadow + elevated bg) renders in skeleton mode as a
     FLAT background-base block — no border, no shadow — keeping only the rounded radius (set in
     markup). Because the card is itself background-base, `.skeleton` elements inside it would be
     invisible, so they switch to background-overlay (a touch darker) to stay legible. */

.skeleton-card {
  background-color: var(--background-base);
}

.skeleton-card .skeleton {
  background-color: var(--background-overlay);
}

/* Inline numeric cart value rendered as a small shimmer bar while the order summary
     recalculates (order-bump toggle). Applied by the Stripe payment element controller and
     composed with `.skeleton`; discarded when the cart turbo frame swaps in fresh totals. */

.cart-value-skeleton {
  color: transparent !important;
  display: inline-block;
  min-width: 3.5rem;
  border-radius: var(--radius-4, 4px);
  vertical-align: middle;
  /* Override the primitive's theme-derived `--background-base` (beige on the
       checkout theme) with a neutral grey so the shimmer bar reads as "loading". */
  background-color: rgba(17, 24, 39, 0.08);
}

/* Content fade-in when real settings content renders (also covers the skeleton→content
     hand-off: skeleton is discarded on the Turbo Drive body swap, new content fades in). */

.settings-content-fade-in {
  animation: settings-content-fade-in 0.18s ease-out;
}

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

  to {
    opacity: 1;
  }
}

/* Generic content fade-in for any skeleton→content hand-off (e.g. the Orders insights bar's
     lazy stats frame), reusing the settings fade keyframes. */

.skeleton-content-fade-in {
  animation: settings-content-fade-in 0.18s ease-out;
}

/* Sparkline draw-on: the line (pathLength normalized to 1) starts fully dashed-out and draws
     left→right once the real stats render after the lazy frame loads. Delayed slightly so the
     content fade-in lands first. */

.spark-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: spark-draw 0.6s ease-out 0.15s forwards;
}

@keyframes spark-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    display: none;
  }

  .settings-content-fade-in,
    .skeleton-content-fade-in {
    animation: none;
  }

  .spark-draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.-inset-\[1px\] {
  inset: -1px;
}

.inset-0 {
  inset: 0px;
}

.inset-auto {
  inset: auto;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}

.inset-x-5 {
  left: 1.25rem;
  right: 1.25rem;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.\!right-6 {
  right: 1.5rem !important;
}

.\!top-1\.5 {
  top: 0.375rem !important;
}

.\!top-6 {
  top: 1.5rem !important;
}

.-bottom-2 {
  bottom: -0.5rem;
}

.-bottom-3 {
  bottom: -0.75rem;
}

.-bottom-4 {
  bottom: -1rem;
}

.-bottom-6 {
  bottom: -1.5rem;
}

.-left-1\.5 {
  left: -0.375rem;
}

.-left-10 {
  left: -2.5rem;
}

.-left-2 {
  left: -0.5rem;
}

.-left-3 {
  left: -0.75rem;
}

.-left-4 {
  left: -1rem;
}

.-right-1\.5 {
  right: -0.375rem;
}

.-right-3 {
  right: -0.75rem;
}

.-right-4 {
  right: -1rem;
}

.-right-6 {
  right: -1.5rem;
}

.-right-\[1px\] {
  right: -1px;
}

.-top-0 {
  top: -0px;
}

.-top-1\.5 {
  top: -0.375rem;
}

.-top-4 {
  top: -1rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-12 {
  bottom: 3rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-3 {
  bottom: 0.75rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-5 {
  bottom: 1.25rem;
}

.bottom-52 {
  bottom: 13rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.bottom-8 {
  bottom: 2rem;
}

.bottom-\[-100px\] {
  bottom: -100px;
}

.bottom-\[32px\] {
  bottom: 32px;
}

.bottom-\[5\.5rem\] {
  bottom: 5.5rem;
}

.bottom-\[N\] {
  bottom: N;
}

.bottom-\[calc\(4rem\+env\(safe-area-inset-bottom\)\)\] {
  bottom: calc(4rem + env(safe-area-inset-bottom));
}

.bottom-auto {
  bottom: auto;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-0\.5 {
  left: 0.125rem;
}

.left-1 {
  left: 0.25rem;
}

.left-1\/2 {
  left: 50%;
}

.left-10 {
  left: 2.5rem;
}

.left-2 {
  left: 0.5rem;
}

.left-2\.5 {
  left: 0.625rem;
}

.left-3 {
  left: 0.75rem;
}

.left-3\.5 {
  left: 0.875rem;
}

.left-4 {
  left: 1rem;
}

.left-5 {
  left: 1.25rem;
}

.left-9 {
  left: 2.25rem;
}

.left-\[-9999px\] {
  left: -9999px;
}

.left-\[0\.125rem\] {
  left: 0.125rem;
}

.left-\[1\.53px\] {
  left: 1.53px;
}

.left-\[12\.97px\] {
  left: 12.97px;
}

.left-\[12px\] {
  left: 12px;
}

.left-\[14px\] {
  left: 14px;
}

.left-\[18px\] {
  left: 18px;
}

.left-\[22px\] {
  left: 22px;
}

.left-\[58px\] {
  left: 58px;
}

.left-\[59px\] {
  left: 59px;
}

.left-\[5px\] {
  left: 5px;
}

.left-\[6\.75px\] {
  left: 6.75px;
}

.left-\[6px\] {
  left: 6px;
}

.left-\[8px\] {
  left: 8px;
}

.left-\[99\.88px\] {
  left: 99.88px;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-1 {
  right: 0.25rem;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-1\/2 {
  right: 50%;
}

.right-10 {
  right: 2.5rem;
}

.right-2 {
  right: 0.5rem;
}

.right-2\.5 {
  right: 0.625rem;
}

.right-3 {
  right: 0.75rem;
}

.right-3\.5 {
  right: 0.875rem;
}

.right-4 {
  right: 1rem;
}

.right-5 {
  right: 1.25rem;
}

.right-6 {
  right: 1.5rem;
}

.right-8 {
  right: 2rem;
}

.right-9 {
  right: 2.25rem;
}

.right-\[1\.9rem\] {
  right: 1.9rem;
}

.right-\[2\.3rem\] {
  right: 2.3rem;
}

.right-full {
  right: 100%;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1 {
  top: 0.25rem;
}

.top-1\.5 {
  top: 0.375rem;
}

.top-1\/2 {
  top: 50%;
}

.top-10 {
  top: 2.5rem;
}

.top-2 {
  top: 0.5rem;
}

.top-24 {
  top: 6rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.top-6 {
  top: 1.5rem;
}

.top-7 {
  top: 1.75rem;
}

.top-8 {
  top: 2rem;
}

.top-\[-4px\] {
  top: -4px;
}

.top-\[10px\] {
  top: 10px;
}

.top-\[120px\] {
  top: 120px;
}

.top-\[183\.05px\] {
  top: 183.05px;
}

.top-\[3px\] {
  top: 3px;
}

.top-\[4\.26px\] {
  top: 4.26px;
}

.top-\[43px\] {
  top: 43px;
}

.top-\[44px\] {
  top: 44px;
}

.top-\[4px\] {
  top: 4px;
}

.top-\[5\.14px\] {
  top: 5.14px;
}

.top-\[6px\] {
  top: 6px;
}

.top-\[7\.76px\] {
  top: 7.76px;
}

.top-\[7px\] {
  top: 7px;
}

.top-\[92px\] {
  top: 92px;
}

.top-\[calc\(50\%-10px\)\] {
  top: calc(50% - 10px);
}

.top-full {
  top: 100%;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.-z-\[1\] {
  z-index: -1;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[10000\] {
  z-index: 10000;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[120\] {
  z-index: 120;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2010\] {
  z-index: 2010;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[3\] {
  z-index: 3;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[99999\] {
  z-index: 99999;
}

.z-\[9999\] {
  z-index: 9999;
}

.z-\[999\] {
  z-index: 999;
}

.z-\[99\] {
  z-index: 99;
}

.z-\[9\] {
  z-index: 9;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-8 {
  grid-column: span 8 / span 8;
}

.col-span-9 {
  grid-column: span 9 / span 9;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.float-right {
  float: right;
}

.-m-2 {
  margin: -0.5rem;
}

.-m-4 {
  margin: -1rem;
}

.m-0 {
  margin: 0px;
}

.m-10 {
  margin: 2.5rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-4 {
  margin: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.m-6 {
  margin: 1.5rem;
}

.m-8 {
  margin: 2rem;
}

.m-auto {
  margin: auto;
}

.\!mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.\!mx-6 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.\!my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.\!my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.\!my-6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-1\.5 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-2\.5 {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}

.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.-my-1\.5 {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.-my-\[100px\] {
  margin-top: -100px;
  margin-bottom: -100px;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-\[1px\] {
  margin-left: 1px;
  margin-right: 1px;
}

.mx-\[30px\] {
  margin-left: 30px;
  margin-right: 30px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-2\.5 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.my-28 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.\!-mb-4 {
  margin-bottom: -1rem !important;
}

.\!-mt-6 {
  margin-top: -1.5rem !important;
}

.\!mb-0 {
  margin-bottom: 0px !important;
}

.\!mb-4 {
  margin-bottom: 1rem !important;
}

.\!mr-1 {
  margin-right: 0.25rem !important;
}

.\!mt-0 {
  margin-top: 0px !important;
}

.\!mt-10 {
  margin-top: 2.5rem !important;
}

.\!mt-2 {
  margin-top: 0.5rem !important;
}

.\!mt-5 {
  margin-top: 1.25rem !important;
}

.-mb-1 {
  margin-bottom: -0.25rem;
}

.-mb-1\.5 {
  margin-bottom: -0.375rem;
}

.-mb-4 {
  margin-bottom: -1rem;
}

.-mb-5 {
  margin-bottom: -1.25rem;
}

.-mb-6 {
  margin-bottom: -1.5rem;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.-ml-10 {
  margin-left: -2.5rem;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-ml-3 {
  margin-left: -0.75rem;
}

.-ml-4 {
  margin-left: -1rem;
}

.-ml-5 {
  margin-left: -1.25rem;
}

.-ml-6 {
  margin-left: -1.5rem;
}

.-mr-1\.5 {
  margin-right: -0.375rem;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.-mr-4 {
  margin-right: -1rem;
}

.-mr-\[1\.5px\] {
  margin-right: -1.5px;
}

.-mr-\[1px\] {
  margin-right: -1px;
}

.-mt-0\.5 {
  margin-top: -0.125rem;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mt-10 {
  margin-top: -2.5rem;
}

.-mt-2 {
  margin-top: -0.5rem;
}

.-mt-3 {
  margin-top: -0.75rem;
}

.-mt-4 {
  margin-top: -1rem;
}

.-mt-5 {
  margin-top: -1.25rem;
}

.-mt-6 {
  margin-top: -1.5rem;
}

.-mt-7 {
  margin-top: -1.75rem;
}

.-mt-\[1px\] {
  margin-top: -1px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-24 {
  margin-bottom: 6rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-\[84px\] {
  margin-bottom: 84px;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-0 {
  margin-left: 0px;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.ml-12 {
  margin-left: 3rem;
}

.ml-16 {
  margin-left: 4rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-2\.5 {
  margin-left: 0.625rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-7 {
  margin-left: 1.75rem;
}

.ml-8 {
  margin-left: 2rem;
}

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

.mr-0 {
  margin-right: 0px;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-10 {
  margin-right: 2.5rem;
}

.mr-12 {
  margin-right: 3rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-2\.5 {
  margin-right: 0.625rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mr-\[1px\] {
  margin-right: 1px;
}

.mr-auto {
  margin-right: auto;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-\[10px\] {
  margin-top: 10px;
}

.mt-\[1em\] {
  margin-top: 1em;
}

.mt-\[22px\] {
  margin-top: 22px;
}

.mt-\[70px\] {
  margin-top: 70px;
}

.mt-auto {
  margin-top: auto;
}

.mt-px {
  margin-top: 1px;
}

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

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.\!flex {
  display: flex !important;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.\!hidden {
  display: none !important;
}

.hidden {
  display: none;
}

.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}

.aspect-\[380\/230\] {
  aspect-ratio: 380/230;
}

.aspect-\[9\/16\] {
  aspect-ratio: 9/16;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.\!size-10 {
  width: 2.5rem !important;
  height: 2.5rem !important;
}

.\!size-6 {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

.\!size-7 {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

.\!size-8 {
  width: 2rem !important;
  height: 2rem !important;
}

.\!size-9 {
  width: 2.25rem !important;
  height: 2.25rem !important;
}

.size-0\.5 {
  width: 0.125rem;
  height: 0.125rem;
}

.size-1 {
  width: 0.25rem;
  height: 0.25rem;
}

.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}

.size-12 {
  width: 3rem;
  height: 3rem;
}

.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}

.size-16 {
  width: 4rem;
  height: 4rem;
}

.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}

.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}

.size-20 {
  width: 5rem;
  height: 5rem;
}

.size-22 {
  width: 5.5rem;
  height: 5.5rem;
}

.size-24 {
  width: 6rem;
  height: 6rem;
}

.size-28 {
  width: 7rem;
  height: 7rem;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}

.size-32 {
  width: 8rem;
  height: 8rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}

.size-8 {
  width: 2rem;
  height: 2rem;
}

.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

.size-\[104px\] {
  width: 104px;
  height: 104px;
}

.size-\[14px\] {
  width: 14px;
  height: 14px;
}

.size-\[18px\] {
  width: 18px;
  height: 18px;
}

.size-\[20px\] {
  width: 20px;
  height: 20px;
}

.size-\[2px\] {
  width: 2px;
  height: 2px;
}

.size-\[34px\] {
  width: 34px;
  height: 34px;
}

.size-\[3px\] {
  width: 3px;
  height: 3px;
}

.size-\[40px\] {
  width: 40px;
  height: 40px;
}

.size-\[42px\] {
  width: 42px;
  height: 42px;
}

.size-\[54px\] {
  width: 54px;
  height: 54px;
}

.size-\[62px\] {
  width: 62px;
  height: 62px;
}

.size-\[88px\] {
  width: 88px;
  height: 88px;
}

.size-full {
  width: 100%;
  height: 100%;
}

.\!h-10 {
  height: 2.5rem !important;
}

.\!h-11 {
  height: 2.75rem !important;
}

.\!h-3 {
  height: 0.75rem !important;
}

.\!h-3\.5 {
  height: 0.875rem !important;
}

.\!h-40 {
  height: 10rem !important;
}

.\!h-8 {
  height: 2rem !important;
}

.\!h-9 {
  height: 2.25rem !important;
}

.\!h-\[380px\] {
  height: 380px !important;
}

.\!h-\[700px\] {
  height: 700px !important;
}

.\!h-auto {
  height: auto !important;
}

.\!h-dvh {
  height: 100dvh !important;
}

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-1\/2 {
  height: 50%;
}

.h-1\/4 {
  height: 25%;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-2\/3 {
  height: 66.666667%;
}

.h-20 {
  height: 5rem;
}

.h-22 {
  height: 5.5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-3\/4 {
  height: 75%;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-56 {
  height: 14rem;
}

.h-6 {
  height: 1.5rem;
}

.h-60 {
  height: 15rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[0\.75rem\] {
  height: 0.75rem;
}

.h-\[1\.25rem\] {
  height: 1.25rem;
}

.h-\[1\.5rem\] {
  height: 1.5rem;
}

.h-\[100dvh\] {
  height: 100dvh;
}

.h-\[100px\] {
  height: 100px;
}

.h-\[104px\] {
  height: 104px;
}

.h-\[110px\] {
  height: 110px;
}

.h-\[120px\] {
  height: 120px;
}

.h-\[128px\] {
  height: 128px;
}

.h-\[170px\] {
  height: 170px;
}

.h-\[180px\] {
  height: 180px;
}

.h-\[184px\] {
  height: 184px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[1lh\] {
  height: 1lh;
}

.h-\[1rem\] {
  height: 1rem;
}

.h-\[200px\] {
  height: 200px;
}

.h-\[207px\] {
  height: 207px;
}

.h-\[212px\] {
  height: 212px;
}

.h-\[21px\] {
  height: 21px;
}

.h-\[24px\] {
  height: 24px;
}

.h-\[266px\] {
  height: 266px;
}

.h-\[26px\] {
  height: 26px;
}

.h-\[306px\] {
  height: 306px;
}

.h-\[320px\] {
  height: 320px;
}

.h-\[32px\] {
  height: 32px;
}

.h-\[34px\] {
  height: 34px;
}

.h-\[3px\] {
  height: 3px;
}

.h-\[4\.5rem\] {
  height: 4.5rem;
}

.h-\[400px\] {
  height: 400px;
}

.h-\[40dvh\] {
  height: 40dvh;
}

.h-\[40px\] {
  height: 40px;
}

.h-\[44px\] {
  height: 44px;
}

.h-\[45px\] {
  height: 45px;
}

.h-\[470px\] {
  height: 470px;
}

.h-\[4px\] {
  height: 4px;
}

.h-\[500px\] {
  height: 500px;
}

.h-\[50px\] {
  height: 50px;
}

.h-\[52px\] {
  height: 52px;
}

.h-\[53px\] {
  height: 53px;
}

.h-\[54px\] {
  height: 54px;
}

.h-\[56px\] {
  height: 56px;
}

.h-\[58px\] {
  height: 58px;
}

.h-\[60px\] {
  height: 60px;
}

.h-\[64px\] {
  height: 64px;
}

.h-\[6px\] {
  height: 6px;
}

.h-\[75px\] {
  height: 75px;
}

.h-\[812px\] {
  height: 812px;
}

.h-\[943px\] {
  height: 943px;
}

.h-\[calc\(100\%\+8rem\)\] {
  height: calc(100% + 8rem);
}

.h-\[calc\(100dvh\)\] {
  height: calc(100dvh);
}

.h-\[calc\(100dvh-11rem\)\] {
  height: calc(100dvh - 11rem);
}

.h-\[calc\(100dvh-16px\)\] {
  height: calc(100dvh - 16px);
}

.h-\[calc\(100dvh-1rem\)\] {
  height: calc(100dvh - 1rem);
}

.h-\[calc\(100dvh-200px\)\] {
  height: calc(100dvh - 200px);
}

.h-\[calc\(100dvh-28rem\)\] {
  height: calc(100dvh - 28rem);
}

.h-\[calc\(100dvh-3rem\)\] {
  height: calc(100dvh - 3rem);
}

.h-\[calc\(100dvh-4rem\)\] {
  height: calc(100dvh - 4rem);
}

.h-\[calc\(100dvh-6rem\)\] {
  height: calc(100dvh - 6rem);
}

.h-\[calc\(100dvh-8px\)\] {
  height: calc(100dvh - 8px);
}

.h-\[calc\(100dvh-9rem\)\] {
  height: calc(100dvh - 9rem);
}

.h-\[calc\(100vh-10rem\)\] {
  height: calc(100vh - 10rem);
}

.h-\[calc\(100vh-130px\)\] {
  height: calc(100vh - 130px);
}

.h-\[calc\(100vh-88px\)\] {
  height: calc(100vh - 88px);
}

.h-\[calc\(100vh-8rem\)\] {
  height: calc(100vh - 8rem);
}

.h-\[calc\(100vh-90px\)\] {
  height: calc(100vh - 90px);
}

.h-\[calc\(20vh\)\] {
  height: calc(20vh);
}

.h-\[calc\(30dvh\)\] {
  height: calc(30dvh);
}

.h-\[calc\(40dvh\)\] {
  height: calc(40dvh);
}

.h-\[calc\(4rem-1px\)\] {
  height: calc(4rem - 1px);
}

.h-\[calc\(5\.75rem\+var\(--ol-tabbar-safe-strip\)\)\] {
  height: calc(5.75rem + var(--ol-tabbar-safe-strip));
}

.h-\[calc\(50dvh\)\] {
  height: calc(50dvh);
}

.h-\[calc\(55dvh\)\] {
  height: calc(55dvh);
}

.h-\[calc\(70dvh\+2rem\)\] {
  height: calc(70dvh + 2rem);
}

.h-\[calc\(80dvh\)\] {
  height: calc(80dvh);
}

.h-auto {
  height: auto;
}

.h-dvh {
  height: 100dvh;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.\!max-h-\[calc\(100dvh\)\] {
  max-height: calc(100dvh) !important;
}

.max-h-10 {
  max-height: 2.5rem;
}

.max-h-20 {
  max-height: 5rem;
}

.max-h-28 {
  max-height: 7rem;
}

.max-h-5 {
  max-height: 1.25rem;
}

.max-h-52 {
  max-height: 13rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-7 {
  max-height: 1.75rem;
}

.max-h-72 {
  max-height: 18rem;
}

.max-h-8 {
  max-height: 2rem;
}

.max-h-\[124px\] {
  max-height: 124px;
}

.max-h-\[128px\] {
  max-height: 128px;
}

.max-h-\[200px\] {
  max-height: 200px;
}

.max-h-\[336px\] {
  max-height: 336px;
}

.max-h-\[33vh\] {
  max-height: 33vh;
}

.max-h-\[350px\] {
  max-height: 350px;
}

.max-h-\[360px\] {
  max-height: 360px;
}

.max-h-\[50dvh\] {
  max-height: 50dvh;
}

.max-h-\[544px\] {
  max-height: 544px;
}

.max-h-\[5rem\] {
  max-height: 5rem;
}

.max-h-\[600px\] {
  max-height: 600px;
}

.max-h-\[60vh\] {
  max-height: 60vh;
}

.max-h-\[720px\] {
  max-height: 720px;
}

.max-h-\[768px\] {
  max-height: 768px;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-\[90dvh\] {
  max-height: 90dvh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-\[calc\(100vh-4rem\)\] {
  max-height: calc(100vh - 4rem);
}

.max-h-\[calc\(70dvh-88px\)\] {
  max-height: calc(70dvh - 88px);
}

.max-h-\[min\(620px\2c 82vh\)\] {
  max-height: min(620px,82vh);
}

.max-h-dvh {
  max-height: 100dvh;
}

.max-h-full {
  max-height: 100%;
}

.max-h-none {
  max-height: none;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-10 {
  min-height: 2.5rem;
}

.min-h-14 {
  min-height: 3.5rem;
}

.min-h-16 {
  min-height: 4rem;
}

.min-h-20 {
  min-height: 5rem;
}

.min-h-32 {
  min-height: 8rem;
}

.min-h-36 {
  min-height: 9rem;
}

.min-h-40 {
  min-height: 10rem;
}

.min-h-56 {
  min-height: 14rem;
}

.min-h-7 {
  min-height: 1.75rem;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[150px\] {
  min-height: 150px;
}

.min-h-\[160px\] {
  min-height: 160px;
}

.min-h-\[1em\] {
  min-height: 1em;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[2rem\] {
  min-height: 2rem;
}

.min-h-\[36px\] {
  min-height: 36px;
}

.min-h-\[4\.5rem\] {
  min-height: 4.5rem;
}

.min-h-\[400px\] {
  min-height: 400px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[4rem\] {
  min-height: 4rem;
}

.min-h-\[620px\] {
  min-height: 620px;
}

.min-h-\[70vh\] {
  min-height: 70vh;
}

.min-h-\[calc\(100dvh-3\.75rem\)\] {
  min-height: calc(100dvh - 3.75rem);
}

.min-h-\[calc\(100vh-96px\)\] {
  min-height: calc(100vh - 96px);
}

.min-h-dvh {
  min-height: 100dvh;
}

.min-h-full {
  min-height: 100%;
}

.min-h-min {
  min-height: -moz-min-content;
  min-height: min-content;
}

.min-h-screen {
  min-height: 100vh;
}

.\!w-1\/12 {
  width: 8.333333% !important;
}

.\!w-3 {
  width: 0.75rem !important;
}

.\!w-3\.5 {
  width: 0.875rem !important;
}

.\!w-3\/12 {
  width: 25% !important;
}

.\!w-4 {
  width: 1rem !important;
}

.\!w-5 {
  width: 1.25rem !important;
}

.\!w-7\/12 {
  width: 58.333333% !important;
}

.\!w-8 {
  width: 2rem !important;
}

.\!w-8\/12 {
  width: 66.666667% !important;
}

.\!w-9\/12 {
  width: 75% !important;
}

.\!w-\[132px\] {
  width: 132px !important;
}

.\!w-\[200px\] {
  width: 200px !important;
}

.\!w-\[300px\] {
  width: 300px !important;
}

.\!w-\[4\.75rem\] {
  width: 4.75rem !important;
}

.\!w-\[500px\] {
  width: 500px !important;
}

.\!w-auto {
  width: auto !important;
}

.\!w-full {
  width: 100% !important;
}

.w-0 {
  width: 0px;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-1\/4 {
  width: 25%;
}

.w-1\/5 {
  width: 20%;
}

.w-1\/6 {
  width: 16.666667%;
}

.w-10 {
  width: 2.5rem;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-128 {
  width: 30rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-2\/5 {
  width: 40%;
}

.w-2\/6 {
  width: 33.333333%;
}

.w-20 {
  width: 5rem;
}

.w-22 {
  width: 5.5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/12 {
  width: 33.333333%;
}

.w-4\/5 {
  width: 80%;
}

.w-40 {
  width: 10rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-52 {
  width: 13rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-60 {
  width: 15rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-8\/12 {
  width: 66.666667%;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

.w-\[0\.75rem\] {
  width: 0.75rem;
}

.w-\[1\.25rem\] {
  width: 1.25rem;
}

.w-\[1\.5rem\] {
  width: 1.5rem;
}

.w-\[10\%\] {
  width: 10%;
}

.w-\[100px\] {
  width: 100px;
}

.w-\[104px\] {
  width: 104px;
}

.w-\[112px\] {
  width: 112px;
}

.w-\[12\%\] {
  width: 12%;
}

.w-\[120px\] {
  width: 120px;
}

.w-\[128px\] {
  width: 128px;
}

.w-\[130px\] {
  width: 130px;
}

.w-\[14\%\] {
  width: 14%;
}

.w-\[16\%\] {
  width: 16%;
}

.w-\[160px\] {
  width: 160px;
}

.w-\[175px\] {
  width: 175px;
}

.w-\[180px\] {
  width: 180px;
}

.w-\[183px\] {
  width: 183px;
}

.w-\[185px\] {
  width: 185px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[2\.375rem\] {
  width: 2.375rem;
}

.w-\[200px\] {
  width: 200px;
}

.w-\[22\%\] {
  width: 22%;
}

.w-\[220px\] {
  width: 220px;
}

.w-\[224px\] {
  width: 224px;
}

.w-\[232px\] {
  width: 232px;
}

.w-\[240px\] {
  width: 240px;
}

.w-\[244px\] {
  width: 244px;
}

.w-\[252px\] {
  width: 252px;
}

.w-\[260px\] {
  width: 260px;
}

.w-\[264px\] {
  width: 264px;
}

.w-\[26px\] {
  width: 26px;
}

.w-\[280px\] {
  width: 280px;
}

.w-\[30px\] {
  width: 30px;
}

.w-\[320px\] {
  width: 320px;
}

.w-\[32px\] {
  width: 32px;
}

.w-\[33px\] {
  width: 33px;
}

.w-\[370px\] {
  width: 370px;
}

.w-\[375px\] {
  width: 375px;
}

.w-\[38\%\] {
  width: 38%;
}

.w-\[380px\] {
  width: 380px;
}

.w-\[38px\] {
  width: 38px;
}

.w-\[390px\] {
  width: 390px;
}

.w-\[3px\] {
  width: 3px;
}

.w-\[4\.5rem\] {
  width: 4.5rem;
}

.w-\[40px\] {
  width: 40px;
}

.w-\[432px\] {
  width: 432px;
}

.w-\[44\] {
  width: 44;
}

.w-\[44px\] {
  width: 44px;
}

.w-\[45px\] {
  width: 45px;
}

.w-\[470px\] {
  width: 470px;
}

.w-\[50\%\] {
  width: 50%;
}

.w-\[500px\] {
  width: 500px;
}

.w-\[50px\] {
  width: 50px;
}

.w-\[512px\] {
  width: 512px;
}

.w-\[53px\] {
  width: 53px;
}

.w-\[548px\] {
  width: 548px;
}

.w-\[560px\] {
  width: 560px;
}

.w-\[570px\] {
  width: 570px;
}

.w-\[580px\] {
  width: 580px;
}

.w-\[600px\] {
  width: 600px;
}

.w-\[60px\] {
  width: 60px;
}

.w-\[62px\] {
  width: 62px;
}

.w-\[640px\] {
  width: 640px;
}

.w-\[64px\] {
  width: 64px;
}

.w-\[660px\] {
  width: 660px;
}

.w-\[678px\] {
  width: 678px;
}

.w-\[6px\] {
  width: 6px;
}

.w-\[70\%\] {
  width: 70%;
}

.w-\[75\%\] {
  width: 75%;
}

.w-\[75px\] {
  width: 75px;
}

.w-\[768px\] {
  width: 768px;
}

.w-\[80\%\] {
  width: 80%;
}

.w-\[88px\] {
  width: 88px;
}

.w-\[90\%\] {
  width: 90%;
}

.w-\[943px\] {
  width: 943px;
}

.w-\[calc\(100\%-32px\)\] {
  width: calc(100% - 32px);
}

.w-\[calc\(100\%-3rem\)\] {
  width: calc(100% - 3rem);
}

.w-\[calc\(100dvw-16px\)\] {
  width: calc(100dvw - 16px);
}

.w-\[var\(--content-normal-width\2c auto\)\] {
  width: var(--content-normal-width,auto);
}

.w-\[var\(--ol-picker-width\)\] {
  width: var(--ol-picker-width);
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-min {
  width: -moz-min-content;
  width: min-content;
}

.w-px {
  width: 1px;
}

.w-screen {
  width: 100vw;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-10 {
  min-width: 2.5rem;
}

.min-w-12 {
  min-width: 3rem;
}

.min-w-22 {
  min-width: 5.5rem;
}

.min-w-36 {
  min-width: 9rem;
}

.min-w-4 {
  min-width: 1rem;
}

.min-w-44 {
  min-width: 11rem;
}

.min-w-5 {
  min-width: 1.25rem;
}

.min-w-6 {
  min-width: 1.5rem;
}

.min-w-\[1\.5rem\] {
  min-width: 1.5rem;
}

.min-w-\[10em\] {
  min-width: 10em;
}

.min-w-\[10rem\] {
  min-width: 10rem;
}

.min-w-\[112px\] {
  min-width: 112px;
}

.min-w-\[136px\] {
  min-width: 136px;
}

.min-w-\[140px\] {
  min-width: 140px;
}

.min-w-\[160px\] {
  min-width: 160px;
}

.min-w-\[16px\] {
  min-width: 16px;
}

.min-w-\[188px\] {
  min-width: 188px;
}

.min-w-\[18px\] {
  min-width: 18px;
}

.min-w-\[2\.375rem\] {
  min-width: 2.375rem;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[208px\] {
  min-width: 208px;
}

.min-w-\[240px\] {
  min-width: 240px;
}

.min-w-\[248px\] {
  min-width: 248px;
}

.min-w-\[260px\] {
  min-width: 260px;
}

.min-w-\[280px\] {
  min-width: 280px;
}

.min-w-\[300px\] {
  min-width: 300px;
}

.min-w-\[312px\] {
  min-width: 312px;
}

.min-w-\[3em\] {
  min-width: 3em;
}

.min-w-\[72px\] {
  min-width: 72px;
}

.min-w-\[84px\] {
  min-width: 84px;
}

.min-w-\[94px\] {
  min-width: 94px;
}

.min-w-\[calc\(320px\+32px\)\] {
  min-width: calc(320px + 32px);
}

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

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

.\!max-w-\[400px\] {
  max-width: 400px !important;
}

.\!max-w-full {
  max-width: 100% !important;
}

.\!max-w-none {
  max-width: none !important;
}

.max-w-0 {
  max-width: 0px;
}

.max-w-20 {
  max-width: 5rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-40 {
  max-width: 10rem;
}

.max-w-48 {
  max-width: 12rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-60 {
  max-width: 15rem;
}

.max-w-64 {
  max-width: 16rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-72 {
  max-width: 18rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-80 {
  max-width: 20rem;
}

.max-w-96 {
  max-width: 24rem;
}

.max-w-\[1024px\] {
  max-width: 1024px;
}

.max-w-\[10rem\] {
  max-width: 10rem;
}

.max-w-\[1264px\] {
  max-width: 1264px;
}

.max-w-\[1280px\] {
  max-width: 1280px;
}

.max-w-\[12rem\] {
  max-width: 12rem;
}

.max-w-\[1680px\] {
  max-width: 1680px;
}

.max-w-\[180px\] {
  max-width: 180px;
}

.max-w-\[188px\] {
  max-width: 188px;
}

.max-w-\[190px\] {
  max-width: 190px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[20px\] {
  max-width: 20px;
}

.max-w-\[21ch\] {
  max-width: 21ch;
}

.max-w-\[240px\] {
  max-width: 240px;
}

.max-w-\[250px\] {
  max-width: 250px;
}

.max-w-\[280px\] {
  max-width: 280px;
}

.max-w-\[300px\] {
  max-width: 300px;
}

.max-w-\[320px\] {
  max-width: 320px;
}

.max-w-\[360px\] {
  max-width: 360px;
}

.max-w-\[375px\] {
  max-width: 375px;
}

.max-w-\[380px\] {
  max-width: 380px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[416px\] {
  max-width: 416px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[432px\] {
  max-width: 432px;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[448px\] {
  max-width: 448px;
}

.max-w-\[468px\] {
  max-width: 468px;
}

.max-w-\[472px\] {
  max-width: 472px;
}

.max-w-\[480px\] {
  max-width: 480px;
}

.max-w-\[50\%\] {
  max-width: 50%;
}

.max-w-\[520px\] {
  max-width: 520px;
}

.max-w-\[540px\] {
  max-width: 540px;
}

.max-w-\[560px\] {
  max-width: 560px;
}

.max-w-\[600px\] {
  max-width: 600px;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[64px\] {
  max-width: 64px;
}

.max-w-\[700px\] {
  max-width: 700px;
}

.max-w-\[704px\] {
  max-width: 704px;
}

.max-w-\[768px\] {
  max-width: 768px;
}

.max-w-\[800px\] {
  max-width: 800px;
}

.max-w-\[840px\] {
  max-width: 840px;
}

.max-w-\[90vw\] {
  max-width: 90vw;
}

.max-w-\[960px\] {
  max-width: 960px;
}

.max-w-\[calc\(100dvw-2rem\)\] {
  max-width: calc(100dvw - 2rem);
}

.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}

.max-w-\[calc\(100vw-3rem\)\] {
  max-width: calc(100vw - 3rem);
}

.max-w-\[calc\(1280px\+64px\)\] {
  max-width: calc(1280px + 64px);
}

.max-w-\[\2026\] {
  max-width: …;
}

.max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

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

.max-w-layout-1000 {
  max-width: 1000px;
}

.max-w-layout-1600 {
  max-width: 1600px;
}

.max-w-layout-540 {
  max-width: 540px;
}

.max-w-layout-640 {
  max-width: 640px;
}

.max-w-layout-880 {
  max-width: 880px;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-min {
  max-width: -moz-min-content;
  max-width: min-content;
}

.max-w-none {
  max-width: none;
}

.max-w-prose {
  max-width: 65ch;
}

.max-w-screen-2lg {
  max-width: 1160px;
}

.max-w-screen-lg {
  max-width: 1024px;
}

.max-w-screen-md {
  max-width: 768px;
}

.max-w-screen-sm {
  max-width: 640px;
}

.max-w-screen-xl {
  max-width: 1264px;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

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

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

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

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

.shrink {
  flex-shrink: 1;
}

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

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

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

.grow {
  flex-grow: 1;
}

.basis-0 {
  flex-basis: 0px;
}

.basis-3\/5 {
  flex-basis: 60%;
}

.basis-\[248px\] {
  flex-basis: 248px;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.origin-center {
  transform-origin: center;
}

.origin-top-left {
  transform-origin: top left;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-20 {
  --tw-translate-x: -5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[100\%\] {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[calc\(100\%-16px\)\] {
  --tw-translate-x: calc(calc(100% - 16px) * -1);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1 {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-px {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2 {
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-2 {
  --tw-translate-x: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[0\.5rem\] {
  --tw-translate-x: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[0\.875rem\] {
  --tw-translate-x: 0.875rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1\/2 {
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-5 {
  --tw-translate-y: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[2px\] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[calc\(100\%\+2rem\)\] {
  --tw-translate-y: calc(100% + 2rem);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-2 {
  --tw-rotate: -2deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-3 {
  --tw-rotate: -3deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-45 {
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-0 {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-1 {
  --tw-rotate: 1deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-2 {
  --tw-rotate: 2deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-3 {
  --tw-rotate: 3deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-3deg\] {
  --tw-rotate: -3deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-6deg\] {
  --tw-rotate: -6deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-8deg\] {
  --tw-rotate: -8deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[10deg\] {
  --tw-rotate: 10deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[16deg\] {
  --tw-rotate: 16deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[4deg\] {
  --tw-rotate: 4deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[5deg\] {
  --tw-rotate: 5deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[8deg\] {
  --tw-rotate: 8deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[\2026\] {
  --tw-rotate: …;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[0\.58\] {
  --tw-scale-x: 0.58;
  --tw-scale-y: 0.58;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[0\.8\] {
  --tw-scale-x: 0.8;
  --tw-scale-y: 0.8;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-scale-x-100 {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform-none {
  transform: none;
}

@keyframes appear-then-fade {
  0% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.animate-appear-then-fade {
  animation: appear-then-fade 3s ease-in-out;
}

@keyframes dialog-avatar-pop {
  0% {
    opacity: 0;
    transform: translateX(calc(-100% + 16px)) rotate(-3deg) scale(0.3);
  }

  70% {
    opacity: 1;
    transform: translateX(calc(-100% + 16px)) rotate(-3deg) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translateX(calc(-100% + 16px)) rotate(-3deg) scale(1);
  }
}

.animate-dialog-avatar-pop {
  animation: dialog-avatar-pop 350ms ease-out 300ms backwards;
}

@keyframes dialog-thumb-pop {
  0% {
    opacity: 0;
    transform: translateX(100%) rotate(4deg) scale(0.3);
  }

  70% {
    opacity: 1;
    transform: translateX(100%) rotate(4deg) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translateX(100%) rotate(4deg) scale(1);
  }
}

.animate-dialog-thumb-pop {
  animation: dialog-thumb-pop 350ms ease-out 430ms backwards;
}

@keyframes otp-shake {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

.animate-otp-shake {
  animation: otp-shake 0.4s ease-in-out;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes toast-end-animation {
  0% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }

  100% {
    --tw-translate-y: 0;
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
  }
}

.animate-toast-end-animation {
  animation: toast-end-animation var(--animation-duration, 0.3s) ease-in-out;
}

@keyframes toast-full-animation {
  0% {
    --tw-translate-y: 0;
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
  }

  5% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }

  95% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }

  100% {
    --tw-translate-y: 0;
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
  }
}

.animate-toast-full-animation {
  animation: toast-full-animation var(--animation-duration, 4s) ease-in-out;
}

@keyframes toast-partial-animation {
  0% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }

  90% {
    --tw-translate-y: calc(var(--slide-distance, 2rem) * var(--initial-direction, 1));
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }

  100% {
    --tw-translate-y: 0;
    --tw-translate-x: inherit;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
  }
}

.animate-toast-partial-animation {
  animation: toast-partial-animation var(--animation-duration, 2s) ease-in-out;
}

.\!cursor-not-allowed {
  cursor: not-allowed !important;
}

.\!cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

.cursor-grab {
  cursor: grab;
}

.cursor-help {
  cursor: help;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

.touch-none {
  touch-action: none;
}

.touch-manipulation {
  touch-action: manipulation;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.scroll-my-4 {
  scroll-margin-top: 1rem;
  scroll-margin-bottom: 1rem;
}

.list-inside {
  list-style-position: inside;
}

.list-outside {
  list-style-position: outside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.columns-\[var\(--column-width\2c _15ch\)_3\] {
  -moz-columns: var(--column-width, 15ch) 3;
       columns: var(--column-width, 15ch) 3;
}

.auto-cols-\[150px\] {
  grid-auto-columns: 150px;
}

.auto-cols-\[168px\] {
  grid-auto-columns: 168px;
}

.auto-cols-\[calc\(100\%-32px\)\] {
  grid-auto-columns: calc(100% - 32px);
}

.auto-cols-\[var\(--carousel-item\)\] {
  grid-auto-columns: var(--carousel-item);
}

.auto-cols-fr {
  grid-auto-columns: minmax(0, 1fr);
}

.auto-cols-max {
  grid-auto-columns: max-content;
}

.grid-flow-col {
  grid-auto-flow: column;
}

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

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

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

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

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
  grid-template-columns: minmax(0,1fr) auto;
}

.grid-cols-\[minmax\(0\2c 2fr\)_1fr_1fr_auto\] {
  grid-template-columns: minmax(0,2fr) 1fr 1fr auto;
}

.grid-cols-\[minmax\(160px\2c 1\.6fr\)_minmax\(140px\2c 1\.4fr\)_110px_150px_120px_140px\] {
  grid-template-columns: minmax(160px,1.6fr) minmax(140px,1.4fr) 110px 150px 120px 140px;
}

.grid-cols-\[repeat\(auto-fill\2c minmax\(calc\(50\%-\.5rem\)\2c 0\.4fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(calc(50% - .5rem),0.4fr));
}

.grid-cols-\[repeat\(auto-fill\2c minmax\(var\(--large-button-min-width\2c 15rem\)\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(var(--large-button-min-width,15rem),1fr));
}

.grid-cols-\[\2026\] {
  grid-template-columns: …;
}

.grid-cols-subgrid {
  grid-template-columns: subgrid;
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

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

.flex-col-reverse {
  flex-direction: column-reverse;
}

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

.place-content-center {
  place-content: center;
}

.place-items-center {
  place-items: center;
}

.\!items-start {
  align-items: flex-start !important;
}

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

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

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

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.\!justify-start {
  justify-content: flex-start !important;
}

.justify-start {
  justify-content: flex-start;
}

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

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

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

.justify-evenly {
  justify-content: space-evenly;
}

.justify-stretch {
  justify-content: stretch;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.\!gap-2 {
  gap: 0.5rem !important;
}

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-20 {
  gap: 5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-48 {
  gap: 12rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[0\.5rem\] {
  gap: 0.5rem;
}

.gap-\[1\.5px\] {
  gap: 1.5px;
}

.gap-\[10px\] {
  gap: 10px;
}

.gap-\[18px\] {
  gap: 18px;
}

.gap-\[3px\] {
  gap: 3px;
}

.gap-\[8px\] {
  gap: 8px;
}

.gap-\[9px\] {
  gap: 9px;
}

.gap-\[var\(--carousel-gap\)\] {
  gap: var(--carousel-gap);
}

.gap-px {
  gap: 1px;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-32 {
  -moz-column-gap: 8rem;
       column-gap: 8rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

.-space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.-space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.625rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.625rem * calc(1 - var(--tw-space-x-reverse)));
}

.-space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-1rem * var(--tw-space-x-reverse));
  margin-left: calc(-1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2.5rem * var(--tw-space-x-reverse));
  margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-7 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.space-y-\[11px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(11px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(11px * var(--tw-space-y-reverse));
}

.space-y-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1px * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
}

.divide-dashed > :not([hidden]) ~ :not([hidden]) {
  border-style: dashed;
}

.divide-dotted > :not([hidden]) ~ :not([hidden]) {
  border-style: dotted;
}

.divide-background-base > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--background-base);
}

.divide-content-border-neutral > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--content-border-neutral);
}

.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-divide-opacity, 1));
}

.divide-gray-900 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-divide-opacity, 1));
}

.divide-inherit > :not([hidden]) ~ :not([hidden]) {
  border-color: inherit;
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}

.divide-slate-900 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
}

.divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 0.05;
}

.place-self-end {
  place-self: end;
}

.place-self-center {
  place-self: center;
}

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

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center {
  justify-self: center;
}

.overflow-auto {
  overflow: auto;
}

.\!overflow-hidden {
  overflow: hidden !important;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-clip {
  overflow: clip;
}

.\!overflow-visible {
  overflow: visible !important;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

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

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.text-clip {
  text-overflow: clip;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

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

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

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

.break-words {
  overflow-wrap: break-word;
}

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

.\!rounded-full {
  border-radius: 9999px !important;
}

.\!rounded-none {
  border-radius: 0 !important;
}

.\!rounded-radius-12 {
  border-radius: 0.75rem !important;
}

.\!rounded-radius-16 {
  border-radius: 1rem !important;
}

.\!rounded-radius-24 {
  border-radius: 1.5rem !important;
}

.\!rounded-radius-32 {
  border-radius: 2rem !important;
}

.\!rounded-radius-4 {
  border-radius: 0.25rem !important;
}

.\!rounded-radius-8 {
  border-radius: 0.5rem !important;
}

.rounded-\[10\.5px\] {
  border-radius: 10.5px;
}

.rounded-\[28px\] {
  border-radius: 28px;
}

.rounded-\[4px\] {
  border-radius: 4px;
}

.rounded-\[6px\] {
  border-radius: 6px;
}

.rounded-\[9px\] {
  border-radius: 9px;
}

.rounded-\[inherit\] {
  border-radius: inherit;
}

.rounded-\[var\(--button-border-radius\)\] {
  border-radius: var(--button-border-radius);
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-none {
  border-radius: 0;
}

.rounded-radius-10 {
  border-radius: 0.625rem;
}

.rounded-radius-12 {
  border-radius: 0.75rem;
}

.rounded-radius-16 {
  border-radius: 1rem;
}

.rounded-radius-18 {
  border-radius: 1.125rem;
}

.rounded-radius-2 {
  border-radius: 0.125rem;
}

.rounded-radius-20 {
  border-radius: 1.25rem;
}

.rounded-radius-24 {
  border-radius: 1.5rem;
}

.rounded-radius-28 {
  border-radius: 1.75rem;
}

.rounded-radius-3 {
  border-radius: 0.1875rem;
}

.rounded-radius-30 {
  border-radius: 1.875rem;
}

.rounded-radius-32 {
  border-radius: 2rem;
}

.rounded-radius-36 {
  border-radius: 2.25rem;
}

.rounded-radius-4 {
  border-radius: 0.25rem;
}

.rounded-radius-40 {
  border-radius: 2.5rem;
}

.rounded-radius-5 {
  border-radius: 0.3125rem;
}

.rounded-radius-6 {
  border-radius: 0.375rem;
}

.rounded-radius-60 {
  border-radius: 3.75rem;
}

.rounded-radius-8 {
  border-radius: 0.5rem;
}

.rounded-radius-9 {
  border-radius: 0.5625rem;
}

.\!rounded-b-none {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.\!rounded-t-none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-b-\[12px\] {
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.rounded-b-none {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rounded-b-radius-12 {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-b-radius-16 {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-b-radius-24 {
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

.rounded-b-radius-32 {
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
}

.rounded-b-radius-6 {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-b-radius-8 {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-l-\[10\.5px\] {
  border-top-left-radius: 10.5px;
  border-bottom-left-radius: 10.5px;
}

.rounded-l-radius-12 {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-l-radius-18 {
  border-top-left-radius: 1.125rem;
  border-bottom-left-radius: 1.125rem;
}

.rounded-l-radius-6 {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-l-radius-8 {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-r-\[10\.5px\] {
  border-top-right-radius: 10.5px;
  border-bottom-right-radius: 10.5px;
}

.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.rounded-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rounded-r-radius-12 {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.rounded-r-radius-18 {
  border-top-right-radius: 1.125rem;
  border-bottom-right-radius: 1.125rem;
}

.rounded-r-radius-6 {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-r-radius-8 {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded-t-radius-12 {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-t-radius-16 {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-radius-24 {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.rounded-t-radius-28 {
  border-top-left-radius: 1.75rem;
  border-top-right-radius: 1.75rem;
}

.rounded-t-radius-32 {
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.rounded-t-radius-4 {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-radius-6 {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-t-radius-8 {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.\!rounded-bl-none {
  border-bottom-left-radius: 0 !important;
}

.rounded-bl-\[10\.5px\] {
  border-bottom-left-radius: 10.5px;
}

.rounded-bl-full {
  border-bottom-left-radius: 9999px;
}

.rounded-bl-none {
  border-bottom-left-radius: 0;
}

.rounded-bl-radius-24 {
  border-bottom-left-radius: 1.5rem;
}

.rounded-bl-radius-8 {
  border-bottom-left-radius: 0.5rem;
}

.rounded-br-\[10\.5px\] {
  border-bottom-right-radius: 10.5px;
}

.rounded-br-full {
  border-bottom-right-radius: 9999px;
}

.rounded-br-none {
  border-bottom-right-radius: 0;
}

.rounded-br-radius-18 {
  border-bottom-right-radius: 1.125rem;
}

.rounded-br-radius-24 {
  border-bottom-right-radius: 1.5rem;
}

.rounded-tl-\[10\.5px\] {
  border-top-left-radius: 10.5px;
}

.rounded-tl-full {
  border-top-left-radius: 9999px;
}

.rounded-tl-none {
  border-top-left-radius: 0;
}

.rounded-tl-radius-16 {
  border-top-left-radius: 1rem;
}

.rounded-tl-radius-18 {
  border-top-left-radius: 1.125rem;
}

.rounded-tl-radius-24 {
  border-top-left-radius: 1.5rem;
}

.rounded-tl-radius-32 {
  border-top-left-radius: 2rem;
}

.rounded-tl-radius-8 {
  border-top-left-radius: 0.5rem;
}

.rounded-tr-\[10\.5px\] {
  border-top-right-radius: 10.5px;
}

.rounded-tr-full {
  border-top-right-radius: 9999px;
}

.rounded-tr-radius-16 {
  border-top-right-radius: 1rem;
}

.rounded-tr-radius-18 {
  border-top-right-radius: 1.125rem;
}

.rounded-tr-radius-32 {
  border-top-right-radius: 2rem;
}

.rounded-tr-radius-8 {
  border-top-right-radius: 0.5rem;
}

.\!border {
  border-width: 1px !important;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-8 {
  border-width: 8px;
}

.border-\[0\.50px\] {
  border-width: 0.50px;
}

.border-\[0\.5px\] {
  border-width: 0.5px;
}

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-\[12px\] {
  border-width: 12px;
}

.border-\[2\.5px\] {
  border-width: 2.5px;
}

.border-\[3px\] {
  border-width: 3px;
}

.\!border-r {
  border-right-width: 1px !important;
}

.\!border-t {
  border-top-width: 1px !important;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-0 {
  border-bottom-width: 0px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b-4 {
  border-bottom-width: 4px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-r {
  border-right-width: 1px;
}

.border-r-2 {
  border-right-width: 2px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-0 {
  border-top-width: 0px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.\!border-none {
  border-style: none !important;
}

.border-none {
  border-style: none;
}

.\!border-brand-secondary-moola {
  border-color: var(--brand-secondary-moola) !important;
}

.\!border-content-border-neutral {
  border-color: var(--content-border-neutral) !important;
}

.\!border-gray-200 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
}

.\!border-red-500 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(232 59 71 / var(--tw-border-opacity, 1)) !important;
}

.border-\[\#342e26\] {
  --tw-border-opacity: 1;
  border-color: rgb(52 46 38 / var(--tw-border-opacity, 1));
}

.border-\[\#757178\] {
  --tw-border-opacity: 1;
  border-color: rgb(117 113 120 / var(--tw-border-opacity, 1));
}

.border-\[\#e6e6e6\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 230 230 / var(--tw-border-opacity, 1));
}

.border-\[rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  border-color: rgba(0,0,0,0.08);
}

.border-\[rgba\(var\(--base-color-rgb\)\2c 1\)\] {
  border-color: rgba(var(--base-color-rgb),1);
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-background-base {
  border-color: var(--background-base);
}

.border-background-card-bg {
  border-color: var(--background-card);
}

.border-background-disabled {
  border-color: var(--background-disabled);
}

.border-background-elevated {
  border-color: var(--background-elevated);
}

.border-background-neutral {
  border-color: var(--background-neutral);
}

.border-background-overlay {
  border-color: var(--background-overlay);
}

.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}

.border-black\/\[0\.04\] {
  border-color: rgb(0 0 0 / 0.04);
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}

.border-brand-primary-shine {
  border-color: var(--brand-primary-shine);
}

.border-brand-primary-shine-light {
  --tw-border-opacity: 1;
  border-color: rgb(255 237 132 / var(--tw-border-opacity, 1));
}

.border-brand-secondary-moola {
  border-color: var(--brand-secondary-moola);
}

.border-content-border-card {
  border-color: var(--content-border-card);
}

.border-content-border-dark {
  border-color: var(--content-border-dark);
}

.border-content-border-input {
  border-color: var(--content-border-input);
}

.border-content-border-light {
  border-color: var(--content-border-light);
}

.border-content-border-neutral {
  border-color: var(--content-border-neutral);
}

.border-content-focus-outline {
  border-color: var(--content-focus-outline);
}

.border-content-primary {
  border-color: var(--content-primary);
}

.border-content-tertiary {
  border-color: var(--content-tertiary);
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.border-gray-500\/10 {
  border-color: rgb(107 114 128 / 0.1);
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(17 214 129 / var(--tw-border-opacity, 1));
}

.border-green-800 {
  --tw-border-opacity: 1;
  border-color: rgb(14 109 69 / var(--tw-border-opacity, 1));
}

.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.border-inherit {
  border-color: inherit;
}

.border-mint-200 {
  border-color: var(--mint-200);
}

.border-neutral-200\/75 {
  border-color: rgb(229 229 229 / 0.75);
}

.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}

.border-orange-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 239 213 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 220 170 / var(--tw-border-opacity, 1));
}

.border-primary-300 {
  border-color: var(--primary-300);
}

.border-primary-500 {
  border-color: var(--primary-500);
}

.border-primary-600 {
  border-color: var(--primary-600);
}

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(253 227 229 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(252 204 207 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(232 59 71 / var(--tw-border-opacity, 1));
}

.border-richBlack {
  --tw-border-opacity: 1;
  border-color: rgb(11 5 29 / var(--tw-border-opacity, 1));
}

.border-richBlack\/08 {
  border-color: rgb(11 5 29 / .08);
}

.border-richBlack\/12 {
  border-color: rgb(11 5 29 / .12);
}

.border-seafoam-100 {
  --tw-border-opacity: 1;
  border-color: rgb(213 246 227 / var(--tw-border-opacity, 1));
}

.border-sentiment-negative {
  --tw-border-opacity: 1;
  border-color: rgb(149 31 39 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.border-slate-500 {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}

.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}

.border-stone-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1));
}

.border-stone-200 {
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-violet-100 {
  --tw-border-opacity: 1;
  border-color: rgb(237 233 254 / var(--tw-border-opacity, 1));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}

.border-yellow-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 247 194 / var(--tw-border-opacity, 1));
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(247 223 174 / var(--tw-border-opacity, 1));
}

.border-l-primary-500 {
  border-left-color: var(--primary-500);
}

.border-t-content-border-neutral {
  border-top-color: var(--content-border-neutral);
}

.border-t-content-primary {
  border-top-color: var(--content-primary);
}

.border-t-transparent {
  border-top-color: transparent;
}

.\!bg-\[\#342E26\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(52 46 38 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-\[\#999999\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(153 153 153 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-\[color-mix\(in_srgb\2c var\(--dominant-color\)_15\%\2c _white\)\] {
  background-color: color-mix(in srgb,var(--dominant-color) 15%, white) !important;
}

.\!bg-\[color\:var\(--base-color\)\] {
  background-color: var(--base-color) !important;
}

.\!bg-\[color\:var\(--button-color\)\] {
  background-color: var(--button-color) !important;
}

.\!bg-\[var\(--background-screen\)\] {
  background-color: var(--background-screen) !important;
}

.\!bg-background-base {
  background-color: var(--background-base) !important;
}

.\!bg-background-disabled {
  background-color: var(--background-disabled) !important;
}

.\!bg-background-elevated {
  background-color: var(--background-elevated) !important;
}

.\!bg-background-neutral {
  background-color: var(--background-neutral) !important;
}

.\!bg-background-overlay {
  background-color: var(--background-overlay) !important;
}

.\!bg-background-screen {
  background-color: var(--background-screen) !important;
}

.\!bg-brand-primary-shine {
  background-color: var(--brand-primary-shine) !important;
}

.\!bg-brand-secondary-mint {
  background-color: var(--brand-secondary-mint) !important;
}

.\!bg-brand-secondary-moola {
  background-color: var(--brand-secondary-moola) !important;
}

.\!bg-brand-secondary-spice {
  background-color: var(--brand-secondary-spice) !important;
}

.\!bg-content-primary {
  background-color: var(--content-primary) !important;
}

.\!bg-green-100 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(217 255 238 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-red-50 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 242 243 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-sentiment-negative {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-transparent {
  background-color: transparent !important;
}

.\!bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.bg-\[\#342E26\] {
  --tw-bg-opacity: 1;
  background-color: rgb(52 46 38 / var(--tw-bg-opacity, 1));
}

.bg-\[\#342e26\] {
  --tw-bg-opacity: 1;
  background-color: rgb(52 46 38 / var(--tw-bg-opacity, 1));
}

.bg-\[\#342e26\]\/\[0\.48\] {
  background-color: rgb(52 46 38 / 0.48);
}

.bg-\[\#3D62D1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(61 98 209 / var(--tw-bg-opacity, 1));
}

.bg-\[\#5338f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(83 56 247 / var(--tw-bg-opacity, 1));
}

.bg-\[\#655AF9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(101 90 249 / var(--tw-bg-opacity, 1));
}

.bg-\[\#8AAE99\] {
  --tw-bg-opacity: 1;
  background-color: rgb(138 174 153 / var(--tw-bg-opacity, 1));
}

.bg-\[\#969696\] {
  --tw-bg-opacity: 1;
  background-color: rgb(150 150 150 / var(--tw-bg-opacity, 1));
}

.bg-\[\#B6C9C1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(182 201 193 / var(--tw-bg-opacity, 1));
}

.bg-\[\#C2A86E\] {
  --tw-bg-opacity: 1;
  background-color: rgb(194 168 110 / var(--tw-bg-opacity, 1));
}

.bg-\[\#DCE7DD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 231 221 / var(--tw-bg-opacity, 1));
}

.bg-\[\#DCE8DD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 232 221 / var(--tw-bg-opacity, 1));
}

.bg-\[\#EFEBFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 235 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F8F5F4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FEEDE4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 237 228 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fde3e5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 227 229 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ffed84\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 132 / var(--tw-bg-opacity, 1));
}

.bg-\[color-mix\(in_srgb\2c var\(--background-base\)_70\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--background-base) 70%,transparent);
}

.bg-\[color\:--code-editor-background\] {
  background-color: var(--code-editor-background);
}

.bg-\[color\:var\(--base-color\)\] {
  background-color: var(--base-color);
}

.bg-\[color\:var\(--button-color\)\] {
  background-color: var(--button-color);
}

.bg-\[color\:var\(--content-background-base\2c \#F7F5F0\)\] {
  background-color: var(--content-background-base,#F7F5F0);
}

.bg-\[color\:var\(--content-sentiment-warning\2c \#D96326\)\] {
  background-color: var(--content-sentiment-warning,#D96326);
}

.bg-\[rgb\(118\2c 176\2c 183\)\]\/\[0\.12\] {
  background-color: rgb(118 176 183 / 0.12);
}

.bg-\[rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  background-color: rgba(0,0,0,0.04);
}

.bg-\[rgba\(243\2c 240\2c 232\2c 0\.12\)\] {
  background-color: rgba(243,240,232,0.12);
}

.bg-\[rgba\(255\2c 255\2c 255\2c 0\.08\)\] {
  background-color: rgba(255,255,255,0.08);
}

.bg-\[rgba\(255\2c 255\2c 255\2c 0\.8\)\] {
  background-color: rgba(255,255,255,0.8);
}

.bg-\[rgba\(52\2c 46\2c 38\2c 0\.08\)\] {
  background-color: rgba(52,46,38,0.08);
}

.bg-\[rgba\(var\(--base-color-rgb\)\2c 0\.12\)\] {
  background-color: rgba(var(--base-color-rgb),0.12);
}

.bg-\[rgba\(var\(--base-color-rgb\)\2c 0\.15\)\] {
  background-color: rgba(var(--base-color-rgb),0.15);
}

.bg-\[var\(--bg-fill-danger-hover\)\] {
  background-color: var(--bg-fill-danger-hover);
}

.bg-\[var\(--brand-primary-chocolate\)\] {
  background-color: var(--brand-primary-chocolate);
}

.bg-\[var\(--grayscale-3\)\] {
  background-color: var(--grayscale-3);
}

.bg-\[var\(--image-new-color\)\] {
  background-color: var(--image-new-color);
}

.bg-\[var\(--orange-50\2c \#FEEDE4\)\] {
  background-color: var(--orange-50,#FEEDE4);
}

.bg-\[var\(--yellow-200\)\] {
  background-color: var(--yellow-200);
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.bg-background-base {
  background-color: var(--background-base);
}

.bg-background-dark {
  background-color: var(--background-dark);
}

.bg-background-disabled {
  background-color: var(--background-disabled);
}

.bg-background-elevated {
  background-color: var(--background-elevated);
}

.bg-background-neutral {
  background-color: var(--background-neutral);
}

.bg-background-overlay {
  background-color: var(--background-overlay);
}

.bg-background-screen {
  background-color: var(--background-screen);
}

.bg-bg-media-overlay-04 {
  background-color: var(--bg-media-overlay-04);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-brand-primary-brew {
  background-color: var(--brand-primary-brew);
}

.bg-brand-primary-crisp {
  background-color: var(--brand-primary-crisp);
}

.bg-brand-primary-shine {
  background-color: var(--brand-primary-shine);
}

.bg-brand-primary-shine-light {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 132 / var(--tw-bg-opacity, 1));
}

.bg-brand-secondary-mint {
  background-color: var(--brand-secondary-mint);
}

.bg-brand-secondary-moola {
  background-color: var(--brand-secondary-moola);
}

.bg-brand-secondary-moola-light {
  --tw-bg-opacity: 1;
  background-color: rgb(38 67 57 / var(--tw-bg-opacity, 1));
}

.bg-brand-secondary-piggy {
  background-color: var(--brand-secondary-piggy);
}

.bg-brand-secondary-spice {
  background-color: var(--brand-secondary-spice);
}

.bg-content-background-modal-overlay {
  background-color: var(--content-background-modal-overlay);
}

.bg-content-border-dark {
  background-color: var(--content-border-dark);
}

.bg-content-border-light {
  background-color: var(--content-border-light);
}

.bg-content-border-neutral {
  background-color: var(--content-border-neutral);
}

.bg-content-focus-outline {
  background-color: var(--content-focus-outline);
}

.bg-content-primary {
  background-color: var(--content-primary);
}

.bg-content-secondary {
  background-color: var(--content-secondary);
}

.bg-content-tertiary {
  background-color: var(--content-tertiary);
}

.bg-current {
  background-color: currentColor;
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-grayscale-1 {
  background-color: var(--grayscale-1);
}

.bg-grayscale-10 {
  background-color: var(--grayscale-10);
}

.bg-grayscale-2 {
  background-color: var(--grayscale-2);
}

.bg-grayscale-3 {
  background-color: var(--grayscale-3);
}

.bg-grayscale-4 {
  background-color: var(--grayscale-4);
}

.bg-grayscale-5 {
  background-color: var(--grayscale-5);
}

.bg-grayscale-6 {
  background-color: var(--grayscale-6);
}

.bg-grayscale-7 {
  background-color: var(--grayscale-7);
}

.bg-grayscale-8 {
  background-color: var(--grayscale-8);
}

.bg-grayscale-9 {
  background-color: var(--grayscale-9);
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 255 238 / var(--tw-bg-opacity, 1));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(181 253 220 / var(--tw-bg-opacity, 1));
}

.bg-green-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(123 250 194 / var(--tw-bg-opacity, 1));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 237 159 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 254 246 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 214 129 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 170 113 / var(--tw-bg-opacity, 1));
}

.bg-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 139 84 / var(--tw-bg-opacity, 1));
}

.bg-green-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 109 69 / var(--tw-bg-opacity, 1));
}

.bg-green-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 89 59 / var(--tw-bg-opacity, 1));
}

.bg-green-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(1 50 31 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-inherit {
  background-color: inherit;
}

.bg-interactive-control {
  background-color: var(--interactive-control);
}

.bg-interactive-primary {
  background-color: var(--interactive-primary);
}

.bg-interactive-secondary {
  background-color: var(--interactive-secondary);
}

.bg-interactive-tertiary {
  background-color: var(--interactive-tertiary);
}

.bg-isabelline {
  --tw-bg-opacity: 1;
  background-color: rgb(241 237 234 / var(--tw-bg-opacity, 1));
}

.bg-mint-100 {
  background-color: var(--mint-100);
}

.bg-mint-200 {
  background-color: var(--mint-200);
}

.bg-mint-300 {
  background-color: var(--mint-300);
}

.bg-mint-400 {
  background-color: var(--mint-400);
}

.bg-mint-50 {
  background-color: var(--mint-50);
}

.bg-mint-500 {
  background-color: var(--mint-500);
}

.bg-mint-600 {
  background-color: var(--mint-600);
}

.bg-mint-700 {
  background-color: var(--mint-700);
}

.bg-mint-800 {
  background-color: var(--mint-800);
}

.bg-mint-900 {
  background-color: var(--mint-900);
}

.bg-mint-950 {
  background-color: var(--mint-950);
}

.bg-neutral-100\/80 {
  background-color: rgb(245 245 245 / 0.8);
}

.bg-neutral-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}

.bg-neutral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(163 163 163 / var(--tw-bg-opacity, 1));
}

.bg-offWhite {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 239 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 220 170 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 102 13 / var(--tw-bg-opacity, 1));
}

.bg-orange-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(153 60 19 / var(--tw-bg-opacity, 1));
}

.bg-powderBlue\/30 {
  background-color: rgb(220 229 240 / 0.3);
}

.bg-primary-200 {
  background-color: var(--primary-200);
}

.bg-primary-400 {
  background-color: var(--primary-400);
}

.bg-primary-500 {
  background-color: var(--primary-500);
}

.bg-primary-600 {
  background-color: var(--primary-600);
}

.bg-primary-700 {
  background-color: var(--primary-700);
}

.bg-primary-800 {
  background-color: var(--primary-800);
}

.bg-primary-900 {
  background-color: var(--primary-900);
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 227 229 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 243 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(232 59 71 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(214 44 56 / var(--tw-bg-opacity, 1));
}

.bg-richBlack {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
}

.bg-richBlack\/04 {
  background-color: rgb(11 5 29 / .04);
}

.bg-richBlack\/10 {
  background-color: rgb(11 5 29 / 0.1);
}

.bg-richBlack\/12 {
  background-color: rgb(11 5 29 / .12);
}

.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.bg-seafoam-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 231 193 / var(--tw-bg-opacity, 1));
}

.bg-seafoam-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 251 244 / var(--tw-bg-opacity, 1));
}

.bg-seafoam-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(33 168 117 / var(--tw-bg-opacity, 1));
}

.bg-seafoam-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(19 136 95 / var(--tw-bg-opacity, 1));
}

.bg-sentiment-negative {
  --tw-bg-opacity: 1;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1));
}

.bg-sentiment-positive {
  --tw-bg-opacity: 1;
  background-color: rgb(14 109 69 / var(--tw-bg-opacity, 1));
}

.bg-sentiment-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(217 99 38 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.bg-spice-100 {
  background-color: var(--spice-100);
}

.bg-spice-200 {
  background-color: var(--spice-200);
}

.bg-spice-300 {
  background-color: var(--spice-300);
}

.bg-spice-400 {
  background-color: var(--spice-400);
}

.bg-spice-500 {
  background-color: var(--spice-500);
}

.bg-spice-600 {
  background-color: var(--spice-600);
}

.bg-spice-700 {
  background-color: var(--spice-700);
}

.bg-spice-800 {
  background-color: var(--spice-800);
}

.bg-spice-900 {
  background-color: var(--spice-900);
}

.bg-spice-950 {
  background-color: var(--spice-950);
}

.bg-stone-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
}

.bg-stone-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
}

.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}

.bg-stone-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-violet-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
}

.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}

.bg-violet-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}

.bg-violet-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}

.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

.bg-whiteSmoke {
  --tw-bg-opacity: 1;
  background-color: rgb(238 232 229 / var(--tw-bg-opacity, 1));
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 194 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 244 228 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 157 32 / var(--tw-bg-opacity, 1));
}

.bg-yellow-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(145 89 23 / var(--tw-bg-opacity, 1));
}

.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}

.bg-opacity-25 {
  --tw-bg-opacity: 0.25;
}

.bg-opacity-60 {
  --tw-bg-opacity: 0.6;
}

.\!bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}

.bg-\[linear-gradient\(180deg\2c \#3c3c3e_0\%\2c \#202022_16\%\2c \#171718_50\%\2c \#202022_84\%\2c \#343436_100\%\)\] {
  background-image: linear-gradient(180deg,#3c3c3e 0%,#202022 16%,#171718 50%,#202022 84%,#343436 100%);
}

.bg-\[linear-gradient\(180deg\2c _\#F3FCF1_0\%\2c _\#EEFBF4_100\%\)\] {
  background-image: linear-gradient(180deg, #F3FCF1 0%, #EEFBF4 100%);
}

.bg-\[linear-gradient\(180deg\2c rgba\(245\2c 245\2c 245\2c 1\)_0\%\2c rgba\(255\2c 255\2c 255\2c 1\)_31\.02\%\)\] {
  background-image: linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(255,255,255,1) 31.02%);
}

.bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c 0\.12\)\2c transparent\)\] {
  background-image: linear-gradient(180deg,rgba(255,255,255,0.12),transparent);
}

.bg-\[linear-gradient\(to_bottom\2c rgba\(0\2c 0\2c 0\2c 0\.16\)_0\%\2c rgba\(255\2c 255\2c 255\2c 0\)_40\%\2c rgba\(0\2c 0\2c 0\2c 0\.2\)_100\%\)\] {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.16) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,0.2) 100%);
}

.bg-\[linear-gradient\(to_bottom\2c rgba\(255\2c 255\2c 255\2c 0\.16\)_0\%\2c rgba\(255\2c 255\2c 255\2c 0\)_40\%\2c rgba\(0\2c 0\2c 0\2c 0\.2\)_100\%\)\] {
  background-image: linear-gradient(to bottom,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,0.2) 100%);
}

.bg-\[radial-gradient\(circle_at_top_left\2c transparent_12px\2c var\(--background-base\)_12px\)\] {
  background-image: radial-gradient(circle at top left,transparent 12px,var(--background-base) 12px);
}

.bg-\[radial-gradient\(circle_at_top_left\2c transparent_24px\2c var\(--background-base\)_24px\)\] {
  background-image: radial-gradient(circle at top left,transparent 24px,var(--background-base) 24px);
}

.bg-\[radial-gradient\(circle_at_top_right\2c transparent_12px\2c var\(--background-base\)_12px\)\] {
  background-image: radial-gradient(circle at top right,transparent 12px,var(--background-base) 12px);
}

.bg-\[radial-gradient\(circle_at_top_right\2c transparent_24px\2c var\(--background-base\)_24px\)\] {
  background-image: radial-gradient(circle at top right,transparent 24px,var(--background-base) 24px);
}

.bg-\[repeating-linear-gradient\(45deg\2c \#f4f1ea_0px\2c \#f4f1ea_7px\2c \#e6e1d4_7px\2c \#e6e1d4_14px\)\] {
  background-image: repeating-linear-gradient(45deg,#f4f1ea 0px,#f4f1ea 7px,#e6e1d4 7px,#e6e1d4 14px);
}

.bg-\[repeating-linear-gradient\(90deg\2c rgba\(255\2c 255\2c 255\2c 0\.05\)_0px\2c rgba\(255\2c 255\2c 255\2c 0\.05\)_1px\2c transparent_1px\2c transparent_4px\)\] {
  background-image: repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0px,rgba(255,255,255,0.05) 1px,transparent 1px,transparent 4px);
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-none {
  background-image: none;
}

.\!from-yellow-200 {
  --tw-gradient-from: #f7dfae var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 223 174 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-\[\#5FB694\] {
  --tw-gradient-from: #5FB694 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(95 182 148 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#8BA85C\] {
  --tw-gradient-from: #8BA85C var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 168 92 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#8FB8C9\] {
  --tw-gradient-from: #8FB8C9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(143 184 201 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#B6A2C6\] {
  --tw-gradient-from: #B6A2C6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(182 162 198 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#BED1C9\] {
  --tw-gradient-from: #BED1C9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(190 209 201 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#C7C07E\] {
  --tw-gradient-from: #C7C07E var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(199 192 126 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#D7F0D1\] {
  --tw-gradient-from: #D7F0D1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(215 240 209 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#DED6FF\] {
  --tw-gradient-from: #DED6FF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(222 214 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#E08C7E\] {
  --tw-gradient-from: #E08C7E var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(224 140 126 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#E6A55C\] {
  --tw-gradient-from: #E6A55C var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(230 165 92 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#EEFBF4\] {
  --tw-gradient-from: #EEFBF4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 251 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#EFF9FB\] {
  --tw-gradient-from: #EFF9FB var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 249 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#F8712B\] {
  --tw-gradient-from: #F8712B var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#FFED84\] {
  --tw-gradient-from: #FFED84 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 237 132 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[rgba\(var\(--base-color-rgb\)\2c 0\.2\)\] {
  --tw-gradient-from: rgba(var(--base-color-rgb),0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(var(--base-color-rgb), 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-brand-primary-shine {
  --tw-gradient-from: var(--brand-primary-shine) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-brand-secondary-moola {
  --tw-gradient-from: var(--brand-secondary-moola) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-content-tertiary {
  --tw-gradient-from: var(--content-tertiary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-500 {
  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-700 {
  --tw-gradient-from: var(--primary-700) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-900 {
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-richBlack\/0 {
  --tw-gradient-from: rgb(11 5 29 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 5 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary-200 {
  --tw-gradient-from: var(--secondary-200) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-200 {
  --tw-gradient-from: #f7dfae var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 223 174 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-20\% {
  --tw-gradient-from-position: 20%;
}

.from-\[0\.71\%\] {
  --tw-gradient-from-position: 0.71%;
}

.via-\[\#FEF3F2\] {
  --tw-gradient-to: rgb(254 243 242 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #FEF3F2 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-content-primary {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--content-primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-\[6\.15\%\] {
  --tw-gradient-via-position: 6.15%;
}

.\!to-neutral-300 {
  --tw-gradient-to: #d4d4d4 var(--tw-gradient-to-position) !important;
}

.to-\[\#2E8A6C\] {
  --tw-gradient-to: #2E8A6C var(--tw-gradient-to-position);
}

.to-\[\#4A6B2E\] {
  --tw-gradient-to: #4A6B2E var(--tw-gradient-to-position);
}

.to-\[\#5C8A9C\] {
  --tw-gradient-to: #5C8A9C var(--tw-gradient-to-position);
}

.to-\[\#709186\] {
  --tw-gradient-to: #709186 var(--tw-gradient-to-position);
}

.to-\[\#8A789C\] {
  --tw-gradient-to: #8A789C var(--tw-gradient-to-position);
}

.to-\[\#937DF2\] {
  --tw-gradient-to: #937DF2 var(--tw-gradient-to-position);
}

.to-\[\#969150\] {
  --tw-gradient-to: #969150 var(--tw-gradient-to-position);
}

.to-\[\#C87B2E\] {
  --tw-gradient-to: #C87B2E var(--tw-gradient-to-position);
}

.to-\[\#CB5F4F\] {
  --tw-gradient-to: #CB5F4F var(--tw-gradient-to-position);
}

.to-\[\#D5F6E3\] {
  --tw-gradient-to: #D5F6E3 var(--tw-gradient-to-position);
}

.to-\[\#E4F5E0\] {
  --tw-gradient-to: #E4F5E0 var(--tw-gradient-to-position);
}

.to-\[\#F8F5F4\] {
  --tw-gradient-to: #F8F5F4 var(--tw-gradient-to-position);
}

.to-\[\#FBA67A\] {
  --tw-gradient-to: #FBA67A var(--tw-gradient-to-position);
}

.to-\[\#FCC713\] {
  --tw-gradient-to: #FCC713 var(--tw-gradient-to-position);
}

.to-brand-secondary-mint {
  --tw-gradient-to: var(--brand-secondary-mint) var(--tw-gradient-to-position);
}

.to-content-tertiary {
  --tw-gradient-to: var(--content-tertiary) var(--tw-gradient-to-position);
}

.to-neutral-300 {
  --tw-gradient-to: #d4d4d4 var(--tw-gradient-to-position);
}

.to-orange-800 {
  --tw-gradient-to: #993c13 var(--tw-gradient-to-position);
}

.to-primary-400 {
  --tw-gradient-to: var(--primary-400) var(--tw-gradient-to-position);
}

.to-primary-600 {
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}

.to-primary-800 {
  --tw-gradient-to: var(--primary-800) var(--tw-gradient-to-position);
}

.to-richBlack\/\[0\.04\] {
  --tw-gradient-to: rgb(11 5 29 / 0.04) var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-white\/0 {
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
}

.to-\[15\.02\%\] {
  --tw-gradient-to-position: 15.02%;
}

.bg-cover {
  background-size: cover;
}

.bg-clip-padding {
  background-clip: padding-box;
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.fill-content-primary {
  fill: var(--content-primary);
}

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}

.\!stroke-\[4px\] {
  stroke-width: 4px !important;
}

.stroke-2 {
  stroke-width: 2;
}

.\!object-contain {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-left {
  -o-object-position: left;
     object-position: left;
}

.\!p-0 {
  padding: 0px !important;
}

.\!p-1 {
  padding: 0.25rem !important;
}

.\!p-2 {
  padding: 0.5rem !important;
}

.\!p-2\.5 {
  padding: 0.625rem !important;
}

.\!p-4 {
  padding: 1rem !important;
}

.\!p-6 {
  padding: 1.5rem !important;
}

.p-0 {
  padding: 0px;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-16 {
  padding: 4rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-20 {
  padding: 5rem;
}

.p-24 {
  padding: 6rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-3\.5 {
  padding: 0.875rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-9 {
  padding: 2.25rem;
}

.p-\[0\.15rem\] {
  padding: 0.15rem;
}

.p-\[18px\] {
  padding: 18px;
}

.p-\[3px\] {
  padding: 3px;
}

.p-\[4px_3px\] {
  padding: 4px 3px;
}

.p-\[9px\] {
  padding: 9px;
}

.p-px {
  padding: 1px;
}

.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.\!px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.\!px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.\!px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.\!py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.\!py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-11 {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-20 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}

.px-\[4\.5px\] {
  padding-left: 4.5px;
  padding-right: 4.5px;
}

.px-\[5px\] {
  padding-left: 5px;
  padding-right: 5px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[104px\] {
  padding-top: 104px;
  padding-bottom: 104px;
}

.py-\[30px\] {
  padding-top: 30px;
  padding-bottom: 30px;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[5\.5px\] {
  padding-top: 5.5px;
  padding-bottom: 5.5px;
}

.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.\!pb-0 {
  padding-bottom: 0px !important;
}

.\!pb-5 {
  padding-bottom: 1.25rem !important;
}

.\!pb-8 {
  padding-bottom: 2rem !important;
}

.\!pl-1\.5 {
  padding-left: 0.375rem !important;
}

.\!pl-2 {
  padding-left: 0.5rem !important;
}

.\!pr-6 {
  padding-right: 1.5rem !important;
}

.\!pt-12 {
  padding-top: 3rem !important;
}

.\!pt-6 {
  padding-top: 1.5rem !important;
}

.\!pt-8 {
  padding-top: 2rem !important;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-0\.5 {
  padding-bottom: 0.125rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-1\.5 {
  padding-bottom: 0.375rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-28 {
  padding-bottom: 7rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-32 {
  padding-bottom: 8rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-7 {
  padding-bottom: 1.75rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-9 {
  padding-bottom: 2.25rem;
}

.pb-\[104px\] {
  padding-bottom: 104px;
}

.pb-\[10px\] {
  padding-bottom: 10px;
}

.pb-\[40px\] {
  padding-bottom: 40px;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-1\.5 {
  padding-left: 0.375rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-11 {
  padding-left: 2.75rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-16 {
  padding-left: 4rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-2\.5 {
  padding-left: 0.625rem;
}

.pl-20 {
  padding-left: 5rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-3\.5 {
  padding-left: 0.875rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-7 {
  padding-left: 1.75rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pl-\[34px\] {
  padding-left: 34px;
}

.pl-\[3px\] {
  padding-left: 3px;
}

.pr-0 {
  padding-right: 0px;
}

.pr-0\.5 {
  padding-right: 0.125rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-1\.5 {
  padding-right: 0.375rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-11 {
  padding-right: 2.75rem;
}

.pr-16 {
  padding-right: 4rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-2\.5 {
  padding-right: 0.625rem;
}

.pr-20 {
  padding-right: 5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-3\.5 {
  padding-right: 0.875rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-7 {
  padding-right: 1.75rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pr-9 {
  padding-right: 2.25rem;
}

.pr-\[16px\] {
  padding-right: 16px;
}

.pr-\[22px\] {
  padding-right: 22px;
}

.pr-\[58px\] {
  padding-right: 58px;
}

.pr-\[64px\] {
  padding-right: 64px;
}

.pt-0 {
  padding-top: 0px;
}

.pt-0\.5 {
  padding-top: 0.125rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-7 {
  padding-top: 1.75rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-\[4\.5rem\] {
  padding-top: 4.5rem;
}

.pt-\[52px\] {
  padding-top: 52px;
}

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

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

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

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.\!font-sans {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-\[\'Media_Sans\'\] {
  font-family: 'Media Sans';
}

.font-\[\'Media_Sans_Semi-Condensed\'\] {
  font-family: 'Media Sans Semi-Condensed';
}

.font-\[\'aktiv-grotesk\'\] {
  font-family: 'aktiv-grotesk';
}

.font-\[system-ui\2c -apple-system\2c \'Segoe_UI\'\2c Roboto\2c sans-serif\] {
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

.font-display {
  font-family: Media Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-display-semi-condensed {
  font-family: Media Sans Semi-Condensed, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-inter {
  font-family: Inter;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-northwell_alt {
  font-family: Northwell Alt;
}

.font-sans {
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.\!text-\[32px\] {
  font-size: 32px !important;
}

.\!text-base {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: 0 !important;
}

.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  letter-spacing: 0 !important;
}

.text-13 {
  font-size: 0.8125rem;
  line-height: 1.33;
  letter-spacing: 0;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.0294rem;
}

.text-2xs {
  font-size: 0.6875rem;
  line-height: 1.33;
  letter-spacing: 0;
}

.text-3xl {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.0431rem;
}

.text-3xs {
  font-size: 0.5rem;
  line-height: 1.33;
  letter-spacing: 0;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.0375rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: -0.06rem;
}

.text-6xl {
  font-size: 3.5rem;
  line-height: 1.2;
  letter-spacing: -0.1138rem;
}

.text-7xl {
  font-size: 5rem;
  line-height: 1.2;
  letter-spacing: -0.1625rem;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: -0.195rem;
}

.text-\[0\.65rem\] {
  font-size: 0.65rem;
}

.text-\[0\.75rem\] {
  font-size: 0.75rem;
}

.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[21px\] {
  font-size: 21px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[34px\] {
  font-size: 34px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[48px\] {
  font-size: 48px;
}

.text-\[72px\] {
  font-size: 72px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.0113rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.text-sm\/\[18px\] {
  font-size: 0.875rem;
  line-height: 18px;
}

.text-xl {
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.02rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
}

.\!font-bold {
  font-weight: 700 !important;
}

.\!font-normal {
  font-weight: 400 !important;
}

.font-\[400\] {
  font-weight: 400;
}

.font-\[600\] {
  font-weight: 600;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.lining-nums {
  --tw-numeric-figure: lining-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.proportional-nums {
  --tw-numeric-spacing: proportional-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.\!leading-4 {
  line-height: 1rem !important;
}

.\!leading-\[1\.125\] {
  line-height: 1.125 !important;
}

.leading-10 {
  line-height: 2.5rem;
}

.leading-110 {
  line-height: 1.1;
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-9 {
  line-height: 2.25rem;
}

.leading-\[1\.14\] {
  line-height: 1.14;
}

.leading-\[1\.15\] {
  line-height: 1.15;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.33\] {
  line-height: 1.33;
}

.leading-\[1\.3\] {
  line-height: 1.3;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.leading-\[110\%\] {
  line-height: 110%;
}

.leading-\[120\%\] {
  line-height: 120%;
}

.leading-\[12px\] {
  line-height: 12px;
}

.leading-\[130\%\] {
  line-height: 130%;
}

.leading-\[133\%\] {
  line-height: 133%;
}

.leading-\[13px\] {
  line-height: 13px;
}

.leading-\[140\%\] {
  line-height: 140%;
}

.leading-\[150\%\] {
  line-height: 150%;
}

.leading-\[18px\] {
  line-height: 18px;
}

.leading-\[2\.5rem\] {
  line-height: 2.5rem;
}

.leading-\[21px\] {
  line-height: 21px;
}

.leading-\[24px\] {
  line-height: 24px;
}

.leading-\[30px\] {
  line-height: 30px;
}

.leading-\[48px\] {
  line-height: 48px;
}

.leading-\[normal\] {
  line-height: normal;
}

.leading-loose {
  line-height: 2;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.33;
}

.leading-tight {
  line-height: 1.2;
}

.\!tracking-normal {
  letter-spacing: 0em !important;
}

.\!tracking-tight-1 {
  letter-spacing: -0.01rem !important;
}

.\!tracking-tight-4 {
  letter-spacing: -0.04rem !important;
}

.tracking-\[-0\.16px\] {
  letter-spacing: -0.16px;
}

.tracking-\[-0\.2px\] {
  letter-spacing: -0.2px;
}

.tracking-\[-0\.32px\] {
  letter-spacing: -0.32px;
}

.tracking-\[-0\.4px\] {
  letter-spacing: -0.4px;
}

.tracking-\[-0\.64px\] {
  letter-spacing: -0.64px;
}

.tracking-\[-0\.96px\] {
  letter-spacing: -0.96px;
}

.tracking-\[-1\.5px\] {
  letter-spacing: -1.5px;
}

.tracking-\[-1px\] {
  letter-spacing: -1px;
}

.tracking-\[-2px\] {
  letter-spacing: -2px;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-\[0\.3px\] {
  letter-spacing: 0.3px;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-tight-1 {
  letter-spacing: -0.01rem;
}

.tracking-tight-10 {
  letter-spacing: -0.1625rem;
}

.tracking-tight-2 {
  letter-spacing: -0.02rem;
}

.tracking-tight-3 {
  letter-spacing: -0.03rem;
}

.tracking-tight-4 {
  letter-spacing: -0.04rem;
}

.tracking-tight-5 {
  letter-spacing: -0.06rem;
}

.tracking-tight-8 {
  letter-spacing: -0.125rem;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.\!text-\[color\:var\(--brand-primary\)\] {
  color: var(--brand-primary) !important;
}

.\!text-\[color\:var\(--main-text-color\)\] {
  color: var(--main-text-color) !important;
}

.\!text-\[color\:var\(--secondary-brand-color\)\] {
  color: var(--secondary-brand-color) !important;
}

.\!text-background-base {
  color: var(--background-base) !important;
}

.\!text-background-elevated {
  color: var(--background-elevated) !important;
}

.\!text-black {
  --tw-text-opacity: 1 !important;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}

.\!text-brand-primary-brew {
  color: var(--brand-primary-brew) !important;
}

.\!text-brand-secondary-moola {
  color: var(--brand-secondary-moola) !important;
}

.\!text-content-primary {
  color: var(--content-primary) !important;
}

.\!text-content-tertiary {
  color: var(--content-tertiary) !important;
}

.\!text-red-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(232 59 71 / var(--tw-text-opacity, 1)) !important;
}

.\!text-sentiment-negative {
  --tw-text-opacity: 1 !important;
  color: rgb(149 31 39 / var(--tw-text-opacity, 1)) !important;
}

.\!text-sentiment-positive {
  --tw-text-opacity: 1 !important;
  color: rgb(14 109 69 / var(--tw-text-opacity, 1)) !important;
}

.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.text-\[\#0F6D4E\] {
  --tw-text-opacity: 1;
  color: rgb(15 109 78 / var(--tw-text-opacity, 1));
}

.text-\[\#22601b\] {
  --tw-text-opacity: 1;
  color: rgb(34 96 27 / var(--tw-text-opacity, 1));
}

.text-\[\#254f1a\] {
  --tw-text-opacity: 1;
  color: rgb(37 79 26 / var(--tw-text-opacity, 1));
}

.text-\[\#30313d\] {
  --tw-text-opacity: 1;
  color: rgb(48 49 61 / var(--tw-text-opacity, 1));
}

.text-\[\#342e26\] {
  --tw-text-opacity: 1;
  color: rgb(52 46 38 / var(--tw-text-opacity, 1));
}

.text-\[\#6F7071\] {
  --tw-text-opacity: 1;
  color: rgb(111 112 113 / var(--tw-text-opacity, 1));
}

.text-\[\#6d181a\] {
  --tw-text-opacity: 1;
  color: rgb(109 24 26 / var(--tw-text-opacity, 1));
}

.text-\[\#6d6e78\] {
  --tw-text-opacity: 1;
  color: rgb(109 110 120 / var(--tw-text-opacity, 1));
}

.text-\[\#76B0B7\] {
  --tw-text-opacity: 1;
  color: rgb(118 176 183 / var(--tw-text-opacity, 1));
}

.text-\[\#993c13\] {
  --tw-text-opacity: 1;
  color: rgb(153 60 19 / var(--tw-text-opacity, 1));
}

.text-\[\#D19D20\] {
  --tw-text-opacity: 1;
  color: rgb(209 157 32 / var(--tw-text-opacity, 1));
}

.text-\[color\:var\(--base-color\)\] {
  color: var(--base-color);
}

.text-\[color\:var\(--bg-fill-moola\)\] {
  color: var(--bg-fill-moola);
}

.text-\[color\:var\(--button-color\)\] {
  color: var(--button-color);
}

.text-\[color\:var\(--content-sentiment-warning\2c \#D96326\)\] {
  color: var(--content-sentiment-warning,#D96326);
}

.text-\[rgba\(var\(--base-color-rgb\)\2c 0\.85\)\] {
  color: rgba(var(--base-color-rgb),0.85);
}

.text-\[var\(--brand-primary-chocolate\)\] {
  color: var(--brand-primary-chocolate);
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-background-base {
  color: var(--background-base);
}

.text-background-elevated {
  color: var(--background-elevated);
}

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

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-brand-primary-brew-light\/40 {
  color: rgb(52 46 38 / 0.4);
}

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

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

.text-brand-secondary-mint {
  color: var(--brand-secondary-mint);
}

.text-brand-secondary-moola {
  color: var(--brand-secondary-moola);
}

.text-brand-secondary-moola-light {
  --tw-text-opacity: 1;
  color: rgb(38 67 57 / var(--tw-text-opacity, 1));
}

.text-brand-secondary-spice {
  color: var(--brand-secondary-spice);
}

.text-content-border-dark {
  color: var(--content-border-dark);
}

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

.text-content-danger {
  color: var(--content-danger);
}

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

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

.text-content-secondary {
  color: var(--content-secondary);
}

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

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-grayscale-7 {
  color: var(--grayscale-7);
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(17 214 129 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(79 170 113 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(10 139 84 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(14 109 69 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-interactive-control {
  color: var(--interactive-control);
}

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

.text-interactive-secondary {
  color: var(--interactive-secondary);
}

.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}

.text-offWhite {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(248 128 23 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(236 102 13 / var(--tw-text-opacity, 1));
}

.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

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

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

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

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(232 59 71 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(214 44 56 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(180 33 43 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(149 31 39 / var(--tw-text-opacity, 1));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(124 32 38 / var(--tw-text-opacity, 1));
}

.text-richBlack {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.text-richBlack\/32 {
  color: rgb(11 5 29 / .32);
}

.text-richBlack\/36 {
  color: rgb(11 5 29 / .36);
}

.text-richBlack\/64 {
  color: rgb(11 5 29 / .64);
}

.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.text-rose-900 {
  --tw-text-opacity: 1;
  color: rgb(136 19 55 / var(--tw-text-opacity, 1));
}

.text-seafoam-500 {
  --tw-text-opacity: 1;
  color: rgb(33 168 117 / var(--tw-text-opacity, 1));
}

.text-seafoam-600 {
  --tw-text-opacity: 1;
  color: rgb(19 136 95 / var(--tw-text-opacity, 1));
}

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

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

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

.text-sentiment-negative {
  --tw-text-opacity: 1;
  color: rgb(149 31 39 / var(--tw-text-opacity, 1));
}

.text-sentiment-positive {
  --tw-text-opacity: 1;
  color: rgb(14 109 69 / var(--tw-text-opacity, 1));
}

.text-sentiment-warning {
  --tw-text-opacity: 1;
  color: rgb(217 99 38 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-50 {
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.text-stone-300 {
  --tw-text-opacity: 1;
  color: rgb(214 211 209 / var(--tw-text-opacity, 1));
}

.text-stone-400 {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.text-stone-500 {
  --tw-text-opacity: 1;
  color: rgb(120 113 108 / var(--tw-text-opacity, 1));
}

.text-stone-600 {
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1));
}

.text-stone-700 {
  --tw-text-opacity: 1;
  color: rgb(68 64 60 / var(--tw-text-opacity, 1));
}

.text-stone-900 {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/64 {
  color: rgb(255 255 255 / .64);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(181 123 25 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(145 89 23 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(120 71 27 / var(--tw-text-opacity, 1));
}

.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}

.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}

.\!underline {
  text-decoration-line: underline !important;
}

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

.overline {
  text-decoration-line: overline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.decoration-\[\#9CE7C1\] {
  text-decoration-color: #9CE7C1;
}

.decoration-background-elevated {
  text-decoration-color: var(--background-elevated);
}

.decoration-content-focus-outline {
  text-decoration-color: var(--content-focus-outline);
}

.decoration-content-secondary {
  text-decoration-color: var(--content-secondary);
}

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

.decoration-green-600 {
  text-decoration-color: #4FAA71;
}

.decoration-solid {
  text-decoration-style: solid;
}

.decoration-dotted {
  text-decoration-style: dotted;
}

.decoration-1 {
  text-decoration-thickness: 1px;
}

.decoration-2 {
  text-decoration-thickness: 2px;
}

.decoration-\[1\.5px\] {
  text-decoration-thickness: 1.5px;
}

.underline-offset-1 {
  text-underline-offset: 1px;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.underline-offset-\[10px\] {
  text-underline-offset: 10px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-red-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(232 59 71 / var(--tw-placeholder-opacity, 1));
}

.placeholder-red-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(232 59 71 / var(--tw-placeholder-opacity, 1));
}

.accent-content-primary {
  accent-color: var(--content-primary);
}

.\!opacity-0 {
  opacity: 0 !important;
}

.\!opacity-20 {
  opacity: 0.2 !important;
}

.opacity-0 {
  opacity: 0;
}

.opacity-08 {
  opacity: .08;
}

.opacity-100 {
  opacity: 1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-\[\.24\] {
  opacity: .24;
}

.opacity-\[0\.64\] {
  opacity: 0.64;
}

.opacity-\[0\.72\] {
  opacity: 0.72;
}

.mix-blend-overlay {
  mix-blend-mode: overlay;
}

.\!shadow-none {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.\!shadow-sm {
  --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06) !important;
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[-6px_8px_0px_0px_rgba\(var\(--base-color-rgb\)\2c 1\)\] {
  --tw-shadow: -6px 8px 0px 0px rgba(var(--base-color-rgb),1);
  --tw-shadow-colored: -6px 8px 0px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_12px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
  --tw-shadow: 0 4px 12px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_8px_0_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
  --tw-shadow-colored: 0 4px 8px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_24px_0_rgba\(0\2c 0\2c 0\2c 0\.10\)\2c _0_0_0_1px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
  --tw-shadow: 0 8px 24px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.02);
  --tw-shadow-colored: 0 8px 24px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_-1px_15px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\2c 0px_2px_4px_0px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c inset_0px_0px_0px_1px_rgba\(52\2c 46\2c 38\2c 0\.08\)\] {
  --tw-shadow: 0px -1px 15px 0px rgba(0,0,0,0.04),0px 2px 4px 0px rgba(0,0,0,0.06),inset 0px 0px 0px 1px rgba(52,46,38,0.08);
  --tw-shadow-colored: 0px -1px 15px 0px var(--tw-shadow-color), 0px 2px 4px 0px var(--tw-shadow-color), inset 0px 0px 0px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_-1px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\2c 0px_2px_8px_0px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px -1px 30px 0px rgba(0,0,0,0.04),0px 2px 8px 0px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px -1px 30px 0px var(--tw-shadow-color), 0px 2px 8px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0\.5px_0\.5px_0px_rgba\(255\2c 255\2c 255\2c 0\.25\)_inset\2c 0px_-0\.5px_0\.5px_0px_rgba\(0\2c 0\2c 0\2c 0\.25\)_inset\] {
  --tw-shadow: 0px 0.5px 0.5px 0px rgba(255,255,255,0.25) inset,0px -0.5px 0.5px 0px rgba(0,0,0,0.25) inset;
  --tw-shadow-colored: inset 0px 0.5px 0.5px 0px var(--tw-shadow-color), inset 0px -0.5px 0.5px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0px_0px_0px_rgba\(0\2c 0\2c 0\2c 0\.00\)\2c 0px_0px_0px_0px_rgba\(0\2c 0\2c 0\2c 0\.00\)\2c 0px_0px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\2c 0px_8px_28px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0px 0px 0px 0px rgba(0,0,0,0.00),0px 0px 0px 0px rgba(0,0,0,0.00),0px 0px 6px 0px rgba(0,0,0,0.05),0px 8px 28px 0px rgba(0,0,0,0.05);
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 6px 0px var(--tw-shadow-color), 0px 8px 28px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0px_0px_1px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
  --tw-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0px_0px_1px_rgba\(52\2c 46\2c 38\2c 0\.44\)\2c 0px_0px_0px_4px_rgba\(11\2c 5\2c 29\2c 0\.16\)\] {
  --tw-shadow: 0px 0px 0px 1px rgba(52,46,38,0.44),0px 0px 0px 4px rgba(11,5,29,0.16);
  --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 0px 0px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0px_0px_4px_rgba\(136\2c 168\2c 156\2c 0\.32\)\] {
  --tw-shadow: 0px 0px 0px 4px rgba(136,168,156,0.32);
  --tw-shadow-colored: 0px 0px 0px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0px_1px_rgba\(0\2c 0\2c 0\2c 0\.12\)\2c 0px_2px_2px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px 0px 1px rgba(0,0,0,0.12),0px 2px 2px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 0px 1px var(--tw-shadow-color), 0px 2px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_0px_2px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0px 0px 2px 0px rgba(0,0,0,0.05);
  --tw-shadow-colored: 0px 0px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_1px_2px_0px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_1px_2px_0px_rgba\(11\2c 5\2c 29\2c 0\.12\)\] {
  --tw-shadow: 0px 1px 2px 0px rgba(11,5,29,0.12);
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_1px_4px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0px 1px 4px 0px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px 1px 4px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_2px_4px_0px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0px 2px 4px 0px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_2px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: 0px 2px 6px 0px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0px 2px 6px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_4px_6px_0px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
  --tw-shadow: 0px 4px 6px 0px rgba(0,0,0,0.02);
  --tw-shadow-colored: 0px 4px 6px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_4px_8px_0px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: 0px 4px 8px 0px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_4px_8px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 4px 8px 0px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_8px_24px_0px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: 0px 8px 24px 0px rgba(0,0,0,0.1);
  --tw-shadow-colored: 0px 8px 24px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_8px_24px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 8px 24px 0px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 8px 24px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_8px_28px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 8px 28px 0px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 8px 28px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_0_0_0\.5px_var\(--content-border-neutral\)\] {
  --tw-shadow: inset 0 0 0 0.5px var(--content-border-neutral);
  --tw-shadow-colored: inset 0 0 0 0.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_0_0_1px\] {
  --tw-shadow: inset 0 0 0 1px;
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0px_0px_0px_2px_rgba\(52\2c 46\2c 38\2c 1\.00\)\] {
  --tw-shadow: inset 0px 0px 0px 2px rgba(52,46,38,1.00);
  --tw-shadow-colored: inset 0px 0px 0px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0px_0px_0px_2px_var\(--content-primary\2c rgba\(52\2c 46\2c 38\2c 1\.00\)\)\] {
  --tw-shadow: inset 0px 0px 0px 2px var(--content-primary,rgba(52,46,38,1.00));
  --tw-shadow-colored: inset 0px 0px 0px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0px_2px_0px_0px_rgba\(255\2c 255\2c 255\2c 0\.2\)\] {
  --tw-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.2);
  --tw-shadow-colored: inset 0px 2px 0px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 8px 28px 0px rgba(0,0,0, 0.16);;
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 8px 28px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-main-container {
  --tw-shadow: var(--shadow-main-container);
  --tw-shadow-colored: var(--shadow-main-container);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-menu {
  --tw-shadow: 0px 20px 80px 0px rgba(52, 46, 38, 0.08), 0px 7.3px 29.2px 0px rgba(52, 46, 38, 0.05), 0px 3.5px 14.2px 0px rgba(52, 46, 38, 0.04), 0px 1.7px 6.9px 0px rgba(52, 46, 38, 0.03), 0px 0.7px 2.7px 0px rgba(52, 46, 38, 0.02);
  --tw-shadow-colored: 0px 20px 80px 0px var(--tw-shadow-color), 0px 7.3px 29.2px 0px var(--tw-shadow-color), 0px 3.5px 14.2px 0px var(--tw-shadow-color), 0px 1.7px 6.9px 0px var(--tw-shadow-color), 0px 0.7px 2.7px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-modal {
  --tw-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
  --tw-shadow-colored: 0px 4px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-toast {
  --tw-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 10px 15px -3px rgba(0, 0, 0, 0.08), 0px 4px 6px -4px rgba(0, 0, 0, 0.08);
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 10px 15px -3px var(--tw-shadow-color), 0px 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 16px 30px 0 rgba(0, 0, 0, 0.00);
  --tw-shadow-colored: 0 16px 30px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-content-border-dark {
  --tw-shadow-color: var(--content-border-dark);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-slate-900 {
  --tw-shadow-color: #0f172a;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-white {
  --tw-shadow-color: #fff;
  --tw-shadow: var(--tw-shadow-colored);
}

.\!outline-none {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.outline-1 {
  outline-width: 1px;
}

.outline-2 {
  outline-width: 2px;
}

.outline-4 {
  outline-width: 4px;
}

.outline-\[3px\] {
  outline-width: 3px;
}

.-outline-offset-1 {
  outline-offset: -1px;
}

.outline-offset-\[-1px\] {
  outline-offset: -1px;
}

.outline-offset-\[-2px\] {
  outline-offset: -2px;
}

.outline-offset-\[-4px\] {
  outline-offset: -4px;
}

.outline-\[rgba\(52\2c 46\2c 38\2c 0\.12\)\] {
  outline-color: rgba(52,46,38,0.12);
}

.outline-background-base {
  outline-color: var(--background-base);
}

.outline-background-elevated {
  outline-color: var(--background-elevated);
}

.outline-background-overlay {
  outline-color: var(--background-overlay);
}

.outline-brand-secondary-moola {
  outline-color: var(--brand-secondary-moola);
}

.outline-content-border-neutral {
  outline-color: var(--content-border-neutral);
}

.outline-content-primary {
  outline-color: var(--content-primary);
}

.outline-current {
  outline-color: currentColor;
}

.outline-gray-300 {
  outline-color: #d1d5db;
}

.outline-mint-100 {
  outline-color: var(--mint-100);
}

.outline-mint-400 {
  outline-color: var(--mint-400);
}

.outline-white\/20 {
  outline-color: rgb(255 255 255 / 0.2);
}

.\!ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset {
  --tw-ring-inset: inset;
}

.ring-background-elevated {
  --tw-ring-color: var(--background-elevated);
}

.ring-content-border-neutral {
  --tw-ring-color: var(--content-border-neutral);
}

.ring-green-600\/20 {
  --tw-ring-color: rgb(79 170 113 / 0.2);
}

.ring-rose-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity, 1));
}

.ring-stone-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(231 229 228 / var(--tw-ring-opacity, 1));
}

.ring-stone-200\/50 {
  --tw-ring-color: rgb(231 229 228 / 0.5);
}

.ring-stone-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity, 1));
}

.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.ring-white\/50 {
  --tw-ring-color: rgb(255 255 255 / 0.5);
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-\[10px\] {
  --tw-backdrop-blur: blur(10px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xs {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[font-size\] {
  transition-property: font-size;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[grid-template-columns\] {
  transition-property: grid-template-columns;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[grid-template-rows\] {
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[max-width\] {
  transition-property: max-width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[opacity\2c max-width\2c visibility\] {
  transition-property: opacity,max-width,visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[opacity\2c transform\] {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[opacity_0ms\2c width_300ms\] {
  transition-property: opacity 0ms,width 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[transform\2c width\] {
  transition-property: transform,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.delay-0 {
  transition-delay: 0s;
}

.delay-1000 {
  transition-delay: 1000ms;
}

.delay-\[inherit\] {
  transition-delay: inherit;
}

.duration-0 {
  transition-duration: 0s;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-\[160ms\] {
  transition-duration: 160ms;
}

.duration-\[400ms\] {
  transition-duration: 400ms;
}

.ease-\[cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\@container {
  container-type: inline-size;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-auto::-webkit-scrollbar {
  display: block;
}

.scrollbar-auto {
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}

/* A 4px background-base bar with 16px vertical margin: a reusable thick separator/spacer
     between drawer or detail sections, used in place of a bare <hr>. */

/* shrink-0 is load-bearing: inside the drawer's overflow-y-auto flex column, an empty spacer
     (min-height 0) would otherwise be shrunk to nothing when content overflows on short viewports,
     making the separator vanish. It must always hold its 4px. */

.spacer {
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 0.25rem;
  flex-shrink: 0;
  background-color: var(--background-base);
}

.masked-by-image {
  -webkit-mask-image: var(--mask-image-url);
          mask-image: var(--mask-image-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}

/* Soft fade at the top + bottom edges (28px each) of a vertical scroll area, so content
     dissolves into the container instead of stopping on a hard line. Pair with scrollbar-hide. */

.mask-fade-y {
  -webkit-mask-image: linear-gradient(transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
}

/* Top-only variant: fade just the top 28px (content dissolves under a fixed header as it scrolls
     up), opaque all the way down. Pair with scrollbar-hide. */

.mask-fade-top {
  -webkit-mask-image: linear-gradient(transparent 0%, black 28px);
  mask-image: linear-gradient(transparent 0%, black 28px);
}

/* Right-edge fade (32px): softly dissolves a single line of text that overflows on the right
     instead of a hard clip. Horizontal sibling of mask-fade-y, tuned shorter for narrow containers.
     Pair with overflow-hidden + whitespace-nowrap on a left-aligned line (e.g. a long URL). */

.mask-fade-right {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
}

.background-fade-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  z-index: -1;
}

.background-fade:before {
  content: "";
  position: absolute;
  z-index: 1;
  background-color: var(--primary-200);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.background-fade {
  position: absolute;
  top: 0px;
  transform: translate(-360px, 0px) rotate(-45deg);
  z-index: -1;
  background-color: var(--primary-400);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.medium-fade:before {
  right: -40px;
  top: -200px;
  width: 1000px;
  height: 600px;
}

.medium-fade {
  right: -800px;
  width: 800px;
  height: 600px;
}

.large-fade:before {
  right: -0px;
  top: -200px;
  width: 1500px;
  height: 800px;
}

.large-fade {
  right: -700px;
  width: 1000px;
  height: 800px;
}

.reveal {
  transition-property: opacity, transform;
  --tw-translate-y: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.reveal-from-left {
  --tw-translate-y: 0px;
  --tw-translate-x: -5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.reveal.in {
  transform: none;
  opacity: 1;
  transition-duration: 1000ms;
}

/* Builder canvas: a tiled SVG dot pattern on the light surface. The dots live on a
     ::before LAYER (not the element's own background) so they can fade independently of
     the surface colour — letting the canvas cross-fade to the plain elevated background
     when the builder leaves Edit mode (Design / Assets / Insights tabs). `isolation`
     scopes the dot layer's negative z-index to this container, so it paints above the
     surface colour but behind the content. A single 2px dot (border-input #dfdedc, r=1)
     per 16px tile → 14px gap between dots; a true vector pattern, crisp at any zoom/DPI. */

.bg-dot-grid {
  position: relative;
  isolation: isolate;
  background-color: var(--background-light, #fbfaf7);
  transition: background-color 0.3s ease;
}

.bg-dot-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Ccircle%20cx='1'%20cy='1'%20r='1'%20fill='%23dfdedc'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 16px 16px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Plain light surface — the non-Edit builder tabs (Assets + Insights). The dots fade out but the
     surface keeps the same light Edit-canvas colour (no cross-fade to white). */

.bg-dot-grid--plain {
  background-color: var(--background-light, #fbfaf7);
}

.bg-dot-grid--plain::before {
  opacity: 0;
}

/* Mobile builder canvas sheet. Below lg the dot-grid stops being the full-bleed card
     background (which sits behind the square header bar) and instead becomes a sheet that
     BEGINS just under the header with a 32px rounded top — so the canvas reads as a card.
     The card drops its own dots on mobile (max-lg:before:!opacity-0 in layouts/account/stack)
     so this sheet's rounded corners sit on a plain surface. It fills the scroll region
     (min-height:100%) so the dots reach the bottom under the floating tab bar. Shares the
     --plain dot fade: builder-tabs#show toggles bg-dot-grid--plain here too, so Assets /
     Insights still drop the dots. Mirror of .bg-dot-grid, scoped to the mobile breakpoint. */

@media (max-width: 1023px) {
  /* The sheet is the FIXED rounded surface: it owns the light fill + 32px rounded top + dot grid and
       does NOT scroll, so its corners never move. The scroll + the rubber-band live on the nested,
       transparent .builder-canvas-scroll inside it — so an overscroll bounces the CONTENT within the
       fixed rounded sheet (revealing the sheet's own rounded fill above it) instead of dragging the fill
       past the corners and flattening them. flex column so the inner scroller fills the height; flex:1
       fills whatever the header + any eyebrow banner leave; min-height:0 lets the inner overflow engage. */

  .builder-canvas-sheet {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    background-color: var(--background-light, #fbfaf7);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }

  /* The actual scroller: fills the fixed sheet and owns the overflow + bounce. Transparent, so the
       bounce reveals the sheet's rounded fill (not a square one). overscroll-behavior:contain keeps the
       bounce here and stops it chaining to the outer region. It carries the SAME 32px rounded top as the
       sheet so its overflow clips the scrolling content to the curve — without this the scroller's SQUARE
       top corners let content paint over the sheet's rounded frame as you scroll (the corners "exceed"
       the radius). Only the TOP is rounded and the bottom stays open, so offer-card menus + the drag
       mirror (which live mid-list, never in the top corners) are unaffected — same as the old single-sheet
       behaviour. lg:contents (markup) makes this inert on desktop, where the card owns the scroll. The
       floating tab bar's clearance is a spacer child inside here. */

  .builder-canvas-scroll {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }

  /* Round the dot layer itself (not the parent via overflow:hidden) so the corners curve
       without clipping descendant overlays — the offer-card menus and the drag mirror. */

  .builder-canvas-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Ccircle%20cx='1'%20cy='1'%20r='1'%20fill='%23dfdedc'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 16px 16px;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  /* Higher-specificity than .builder-canvas-sheet::before so the --plain fade wins on mobile. */

  .builder-canvas-sheet.bg-dot-grid--plain::before {
    opacity: 0;
  }
}

/* A 1px hairline frame drawn ON TOP of media. An inset ring/border would be hidden
     behind opaque artwork, so this rides above it via ::after. Apply to a `relative`
     element with rounding (the frame inherits its radius) — e.g. an image tile.
     Colour = --content-border-neutral. */

.media-hairline::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  pointer-events: none;
}

.space-y > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-x > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.gap-y {
  row-gap: 1.25rem;
}

.gap-x {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

[hidden] {
  display: none !important;
}

.font-size-inherit {
  font-size: inherit;
}

.left-inherit {
  left: inherit;
}

.right-inherit {
  right: inherit;
}

.top-inherit {
  top: inherit;
}

.bottom-inherit {
  bottom: inherit;
}

.translate-x-inherit {
  --tw-translate-x: inherit;
  transform: inherit;
}

.slide-direction-down {
  --initial-direction: 1;
}

.slide-direction-up {
  --initial-direction: -1;
}

.animation-paused {
  animation-play-state: paused;
}

.\[--code-editor-background\:theme\(\'colors\.white\'\)\] {
  --code-editor-background: #fff;
}

.\[--dropdown-max-height\:300px\] {
  --dropdown-max-height: 300px;
}

.\[--dropdown-max-height\:none\] {
  --dropdown-max-height: none;
}

.\[--dropdown-max-width\:300px\] {
  --dropdown-max-width: 300px;
}

.\[--dropdown-max-width\:none\] {
  --dropdown-max-width: none;
}

.\[--dropdown-min-width\:240px\] {
  --dropdown-min-width: 240px;
}

.\[--dropdown-width\:265px\] {
  --dropdown-width: 265px;
}

.\[--dropdown-width\:max-content\] {
  --dropdown-width: max-content;
}

.\[--large-button-min-width\:100\%\] {
  --large-button-min-width: 100%;
}

.\[--large-button-min-width\:48\%\] {
  --large-button-min-width: 48%;
}

.\[--scrim-end\:60\%\] {
  --scrim-end: 60%;
}

.\[--scrim-rgb\:251_250_247\] {
  --scrim-rgb: 251 250 247;
}

.\[--scrim-start\:44\%\] {
  --scrim-start: 44%;
}

.\[--tuck-color\:var\(--content-primary\)\] {
  --tuck-color: var(--content-primary);
}

.\[--tuck-color\:var\(--sentiment-negative\)\] {
  --tuck-color: var(--sentiment-negative);
}

.\[--tw-ring-color\:var\(--tw-ring-color-dark\)\] {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.\[--tw-ring-color\:var\(--tw-ring-color-light\)\] {
  --tw-ring-color: var(--tw-ring-color-light);
}

.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

.\[border-color\:var\(--base-color\)\] {
  border-color: var(--base-color);
}

.\[border-radius\:12px\] {
  border-radius: 12px;
}

.\[border-radius\:20px\] {
  border-radius: 20px;
}

.\[border-radius\:4px\] {
  border-radius: 4px;
}

.\[border-radius\:5px\] {
  border-radius: 5px;
}

.\[border-radius\:6px\] {
  border-radius: 6px;
}

.\[box-shadow\:0px_1px_3px_0px_rgba\(37\2c _122\2c _27\2c _0\.06\)\2c _0px_7px_29px_0px_rgba\(37\2c _122\2c _27\2c _0\.12\)\2c _0px_2px_8px_0px_rgba\(37\2c _122\2c _27\2c _0\.04\)\2c _0px_2px_7px_0px_rgba\(37\2c _122\2c _27\2c _0\.07\)\] {
  box-shadow: 0px 1px 3px 0px rgba(37, 122, 27, 0.06), 0px 7px 29px 0px rgba(37, 122, 27, 0.12), 0px 2px 8px 0px rgba(37, 122, 27, 0.04), 0px 2px 7px 0px rgba(37, 122, 27, 0.07);
}

.\[field-sizing\:content\] {
  field-sizing: content;
}

.\[grid-area\:1\/1\] {
  grid-area: 1/1;
}

.\[grid-template-columns\:0fr\] {
  grid-template-columns: 0fr;
}

.\[grid-template-columns\:1fr\] {
  grid-template-columns: 1fr;
}

.\[text-decoration-skip-ink\:none\] {
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.\[transform\:translateZ\(0\)\] {
  transform: translateZ(0);
}

/* not in @layer components */

[data-select-all-target='wrapper']form.button_to {
  display: block;
}

form.button_to {
  display: inline-block;
}

.btn-toggle input[type='checkbox']:checked + buttonform.button-secondary.button_to input[type='submit'], .btn-toggle input[type='radio']:checked + buttonform.button-secondary.button_to input[type='submit'] {
  background-color: var(--background-overlay);
}

form.button_to input[type='submit'] {
  background-color: transparent;
}

form.button_to input[type='submit'].button {
  background-color: var(--primary-800);
}

form.button_to input[type='submit'].button:hover {
  background-color: var(--primary-900);
}

svg:where(.icon) {
  /* still beats tailwind's default of block */
}

[data-select-all-target='wrapper']svg:where(.icon) {
  display: block;
}

svg:where(.icon) {
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: text-bottom;
}

/* Smooth accordion — fluidly animate a <details>'s disclosed content open/close (height 0 ↔ auto).
   Modern CSS: interpolate-size lets the browser anticipate the auto-height interpolation; the
   ::details-content pseudo is the disclosed content; the content-visibility transition (allow-
   discrete) keeps it rendered through the close; will-change:height hints the toggle ahead of time.
   Degrades to an instant toggle where unsupported. Reusable: add `accordion-smooth` to any <details>. */

.accordion-smooth {
  interpolate-size: allow-keywords;
}

.accordion-smooth::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.3s ease, content-visibility 0.3s ease;
  transition-behavior: allow-discrete;
  will-change: height;
}

.accordion-smooth[open]::details-content {
  height: auto;
}

/******************************
  Box modifications
******************************/

.box-inset-left {
  box-shadow: 5px 0px 0px 0px var(--inset-color) inset,
    0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
}

/******************************
  Main area
******************************/

.is-main-area {
  border-radius: 0.75rem;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #EFF9FB var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 249 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-from-position: 0.71%;
  --tw-gradient-to: rgb(254 243 242 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #FEF3F2 var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-via-position: 6.15%;
  --tw-gradient-to: #F8F5F4 var(--tw-gradient-to-position);
  --tw-gradient-to-position: 15.02%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .is-main-area {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.text-placeholder {
  color: var(--grayscale-4);
}

.bg-placeholder {
  background-color: var(--background-overlay);
}

.bg-placeholder:where(.dark, .dark *) {
  background-color: rgba(255,255,255,0.10);
}

/* OL-3343: `.primary/.secondary/.small-screen-width` removed — replaced app-wide by the
   `.layout` root (gutter + centering + outer cap) plus the `max-w-layout-*` width tokens.
   See app/assets/stylesheets/layout.css and tailwind.config.js. */

/* Select-field chevron: render the chevron-bottom icon at a 2px stroke. CSS stroke-width
   beats the SVG's stroke-width="1.5" presentation attribute, and Tailwind's stroke-width
   utilities aren't enabled in this build — so it's a component-level class used by the
   native_select field (and any other select chevron that opts in). */

.select-chevron path {
  stroke-width: 2;
}

/* Avatar hairline: a subtle 1px inset border (content-border-light) so an avatar
   with a light background keeps contrast against a light surface. box-shadow (an
   inset overlay) rather than ::after — ::after doesn't render on <img> replaced
   elements, so this works on real avatar images AND the initials fallback,
   follows the avatar's rounded-full shape, and never shifts layout. */

.avatar-hairline {
  box-shadow: inset 0 0 0 1px var(--content-border-light);
}

/* 
 * Refer to the stimulus-scroll-reveal documentation for details.
 * https://www.stimulus-components.com/docs/stimulus-scroll-reveal/
 */

/* carousel for listing page */

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* @import "./tailwind/dark-mode"; */

:root, .theme-blue {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --secondary-50: #eff6ff;
  --secondary-100: #dbeafe;
  --secondary-200: #bfdbfe;
  --secondary-300: #93c5fd;
  --secondary-400: #60a5fa;
  --secondary-500: #3b82f6;
  --secondary-600: #2563eb;
  --secondary-700: #1d4ed8;
  --secondary-800: #1e40af;
  --secondary-900: #1e3a8a;
}

.theme-slate {
  --primary-50: #f8fafc;
  --primary-100: #f1f5f9;
  --primary-200: #e2e8f0;
  --primary-300: #cbd5e1;
  --primary-400: #94a3b8;
  --primary-500: #64748b;
  --primary-600: #475569;
  --primary-700: #334155;
  --primary-800: #1e293b;
  --primary-900: #0f172a;
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}

.theme-gray {
  --primary-50: #f8fafc;
  --primary-100: #f1f5f9;
  --primary-200: #e2e8f0;
  --primary-300: #cbd5e1;
  --primary-400: #94a3b8;
  --primary-500: #64748b;
  --primary-600: #475569;
  --primary-700: #334155;
  --primary-800: #1e293b;
  --primary-900: #0f172a;
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}

.theme-zinc {
  --primary-50: #fafafa;
  --primary-100: #f4f4f5;
  --primary-200: #e4e4e7;
  --primary-300: #d4d4d8;
  --primary-400: #a1a1aa;
  --primary-500: #71717a;
  --primary-600: #52525b;
  --primary-700: #3f3f46;
  --primary-800: #27272a;
  --primary-900: #18181b;
  --secondary-50: #fafafa;
  --secondary-100: #f4f4f5;
  --secondary-200: #e4e4e7;
  --secondary-300: #d4d4d8;
  --secondary-400: #a1a1aa;
  --secondary-500: #71717a;
  --secondary-600: #52525b;
  --secondary-700: #3f3f46;
  --secondary-800: #27272a;
  --secondary-900: #18181b;
}

.theme-neutral {
  --primary-50: #fafafa;
  --primary-100: #f5f5f5;
  --primary-200: #e5e5e5;
  --primary-300: #d4d4d4;
  --primary-400: #a3a3a3;
  --primary-500: #737373;
  --primary-600: #525252;
  --primary-700: #404040;
  --primary-800: #262626;
  --primary-900: #171717;
  --secondary-50: #fafafa;
  --secondary-100: #f5f5f5;
  --secondary-200: #e5e5e5;
  --secondary-300: #d4d4d4;
  --secondary-400: #a3a3a3;
  --secondary-500: #737373;
  --secondary-600: #525252;
  --secondary-700: #404040;
  --secondary-800: #262626;
  --secondary-900: #171717;
}

.theme-stone {
  --primary-50: #fafaf9;
  --primary-100: #f5f5f4;
  --primary-200: #e7e5e4;
  --primary-300: #d6d3d1;
  --primary-400: #a8a29e;
  --primary-500: #78716c;
  --primary-600: #57534e;
  --primary-700: #44403c;
  --primary-800: #292524;
  --primary-900: #1c1917;
  --secondary-50: #fafaf9;
  --secondary-100: #f5f5f4;
  --secondary-200: #e7e5e4;
  --secondary-300: #d6d3d1;
  --secondary-400: #a8a29e;
  --secondary-500: #78716c;
  --secondary-600: #57534e;
  --secondary-700: #44403c;
  --secondary-800: #292524;
  --secondary-900: #1c1917;
}

.theme-red {
  --primary-50: #fef2f3;
  --primary-100: #fde3e5;
  --primary-200: #fccccf;
  --primary-300: #f9a8ae;
  --primary-400: #f4757e;
  --primary-500: #e83b47;
  --primary-600: #d62c38;
  --primary-700: #b4212b;
  --primary-800: #951f27;
  --primary-900: #7c2026;
  --secondary-50: #fef2f3;
  --secondary-100: #fde3e5;
  --secondary-200: #fccccf;
  --secondary-300: #f9a8ae;
  --secondary-400: #f4757e;
  --secondary-500: #e83b47;
  --secondary-600: #d62c38;
  --secondary-700: #b4212b;
  --secondary-800: #951f27;
  --secondary-900: #7c2026;
}

.theme-orange {
  --primary-50: #fff8ed;
  --primary-100: #ffefd5;
  --primary-200: #fedcaa;
  --primary-300: #fcc275;
  --primary-400: #fa9d3d;
  --primary-500: #f88017;
  --primary-600: #ec660d;
  --primary-700: #c14b0d;
  --primary-800: #993c13;
  --primary-900: #7c3312;
  --secondary-50: #fff8ed;
  --secondary-100: #ffefd5;
  --secondary-200: #fedcaa;
  --secondary-300: #fcc275;
  --secondary-400: #fa9d3d;
  --secondary-500: #f88017;
  --secondary-600: #ec660d;
  --secondary-700: #c14b0d;
  --secondary-800: #993c13;
  --secondary-900: #7c3312;
}

.theme-amber {
  --primary-50: #fffbeb;
  --primary-100: #fef3c7;
  --primary-200: #fde68a;
  --primary-300: #fcd34d;
  --primary-400: #fbbf24;
  --primary-500: #f59e0b;
  --primary-600: #d97706;
  --primary-700: #b45309;
  --primary-800: #92400e;
  --primary-900: #78350f;
  --secondary-50: #fffbeb;
  --secondary-100: #fef3c7;
  --secondary-200: #fde68a;
  --secondary-300: #fcd34d;
  --secondary-400: #fbbf24;
  --secondary-500: #f59e0b;
  --secondary-600: #d97706;
  --secondary-700: #b45309;
  --secondary-800: #92400e;
  --secondary-900: #78350f;
}

.theme-yellow {
  --primary-50: #FCF4E4;
  --primary-100: #FFF7C2;
  --primary-200: #f7dfae;
  --primary-300: #f2ca77;
  --primary-400: #e2b42d;
  --primary-500: #d19d20;
  --primary-600: #b57b19;
  --primary-700: #915917;
  --primary-800: #78471b;
  --primary-900: #673c1c;
  --secondary-50: #FCF4E4;
  --secondary-100: #FFF7C2;
  --secondary-200: #f7dfae;
  --secondary-300: #f2ca77;
  --secondary-400: #e2b42d;
  --secondary-500: #d19d20;
  --secondary-600: #b57b19;
  --secondary-700: #915917;
  --secondary-800: #78471b;
  --secondary-900: #673c1c;
}

.theme-lime {
  --primary-50: #f7fee7;
  --primary-100: #ecfccb;
  --primary-200: #d9f99d;
  --primary-300: #bef264;
  --primary-400: #a3e635;
  --primary-500: #84cc16;
  --primary-600: #65a30d;
  --primary-700: #4d7c0f;
  --primary-800: #3f6212;
  --primary-900: #365314;
  --secondary-50: #f7fee7;
  --secondary-100: #ecfccb;
  --secondary-200: #d9f99d;
  --secondary-300: #bef264;
  --secondary-400: #a3e635;
  --secondary-500: #84cc16;
  --secondary-600: #65a30d;
  --secondary-700: #4d7c0f;
  --secondary-800: #3f6212;
  --secondary-900: #365314;
}

.theme-green {
  --primary-50: #effef6;
  --primary-100: #d9ffee;
  --primary-200: #b5fddc;
  --primary-300: #7bfac2;
  --primary-400: #3bed9f;
  --primary-500: #11d681;
  --primary-600: #4FAA71;
  --primary-700: #0a8b54;
  --primary-800: #0e6d45;
  --primary-900: #0e593b;
  --secondary-50: #effef6;
  --secondary-100: #d9ffee;
  --secondary-200: #b5fddc;
  --secondary-300: #7bfac2;
  --secondary-400: #3bed9f;
  --secondary-500: #11d681;
  --secondary-600: #4FAA71;
  --secondary-700: #0a8b54;
  --secondary-800: #0e6d45;
  --secondary-900: #0e593b;
}

.theme-emerald {
  --primary-50: #ecfdf5;
  --primary-100: #d1fae5;
  --primary-200: #a7f3d0;
  --primary-300: #6ee7b7;
  --primary-400: #34d399;
  --primary-500: #10b981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-800: #065f46;
  --primary-900: #064e3b;
  --secondary-50: #ecfdf5;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-300: #6ee7b7;
  --secondary-400: #34d399;
  --secondary-500: #10b981;
  --secondary-600: #059669;
  --secondary-700: #047857;
  --secondary-800: #065f46;
  --secondary-900: #064e3b;
}

.theme-teal {
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-200: #99f6e4;
  --primary-300: #5eead4;
  --primary-400: #2dd4bf;
  --primary-500: #14b8a6;
  --primary-600: #0d9488;
  --primary-700: #0f766e;
  --primary-800: #115e59;
  --primary-900: #134e4a;
  --secondary-50: #f0fdfa;
  --secondary-100: #ccfbf1;
  --secondary-200: #99f6e4;
  --secondary-300: #5eead4;
  --secondary-400: #2dd4bf;
  --secondary-500: #14b8a6;
  --secondary-600: #0d9488;
  --secondary-700: #0f766e;
  --secondary-800: #115e59;
  --secondary-900: #134e4a;
}

.theme-cyan {
  --primary-50: #ecfeff;
  --primary-100: #cffafe;
  --primary-200: #a5f3fc;
  --primary-300: #67e8f9;
  --primary-400: #22d3ee;
  --primary-500: #06b6d4;
  --primary-600: #0891b2;
  --primary-700: #0e7490;
  --primary-800: #155e75;
  --primary-900: #164e63;
  --secondary-50: #ecfeff;
  --secondary-100: #cffafe;
  --secondary-200: #a5f3fc;
  --secondary-300: #67e8f9;
  --secondary-400: #22d3ee;
  --secondary-500: #06b6d4;
  --secondary-600: #0891b2;
  --secondary-700: #0e7490;
  --secondary-800: #155e75;
  --secondary-900: #164e63;
}

.theme-sky {
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;
  --secondary-50: #f0f9ff;
  --secondary-100: #e0f2fe;
  --secondary-200: #bae6fd;
  --secondary-300: #7dd3fc;
  --secondary-400: #38bdf8;
  --secondary-500: #0ea5e9;
  --secondary-600: #0284c7;
  --secondary-700: #0369a1;
  --secondary-800: #075985;
  --secondary-900: #0c4a6e;
}

.theme-indigo {
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;
  --secondary-50: #eef2ff;
  --secondary-100: #e0e7ff;
  --secondary-200: #c7d2fe;
  --secondary-300: #a5b4fc;
  --secondary-400: #818cf8;
  --secondary-500: #6366f1;
  --secondary-600: #4f46e5;
  --secondary-700: #4338ca;
  --secondary-800: #3730a3;
  --secondary-900: #312e81;
}

.theme-violet {
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;
  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6;
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;
}

.theme-purple {
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7e22ce;
  --primary-800: #6b21a8;
  --primary-900: #581c87;
  --secondary-50: #faf5ff;
  --secondary-100: #f3e8ff;
  --secondary-200: #e9d5ff;
  --secondary-300: #d8b4fe;
  --secondary-400: #c084fc;
  --secondary-500: #a855f7;
  --secondary-600: #9333ea;
  --secondary-700: #7e22ce;
  --secondary-800: #6b21a8;
  --secondary-900: #581c87;
}

.theme-fuchsia {
  --primary-50: #fdf4ff;
  --primary-100: #fae8ff;
  --primary-200: #f5d0fe;
  --primary-300: #f0abfc;
  --primary-400: #e879f9;
  --primary-500: #d946ef;
  --primary-600: #c026d3;
  --primary-700: #a21caf;
  --primary-800: #86198f;
  --primary-900: #701a75;
  --secondary-50: #fdf4ff;
  --secondary-100: #fae8ff;
  --secondary-200: #f5d0fe;
  --secondary-300: #f0abfc;
  --secondary-400: #e879f9;
  --secondary-500: #d946ef;
  --secondary-600: #c026d3;
  --secondary-700: #a21caf;
  --secondary-800: #86198f;
  --secondary-900: #701a75;
}

.theme-pink {
  --primary-50: #fdf2f8;
  --primary-100: #fce7f3;
  --primary-200: #fbcfe8;
  --primary-300: #f9a8d4;
  --primary-400: #f472b6;
  --primary-500: #ec4899;
  --primary-600: #db2777;
  --primary-700: #be185d;
  --primary-800: #9d174d;
  --primary-900: #831843;
  --secondary-50: #fdf2f8;
  --secondary-100: #fce7f3;
  --secondary-200: #fbcfe8;
  --secondary-300: #f9a8d4;
  --secondary-400: #f472b6;
  --secondary-500: #ec4899;
  --secondary-600: #db2777;
  --secondary-700: #be185d;
  --secondary-800: #9d174d;
  --secondary-900: #831843;
}

.theme-rose {
  --primary-50: #fff1f2;
  --primary-100: #ffe4e6;
  --primary-200: #fecdd3;
  --primary-300: #fda4af;
  --primary-400: #fb7185;
  --primary-500: #f43f5e;
  --primary-600: #e11d48;
  --primary-700: #be123c;
  --primary-800: #9f1239;
  --primary-900: #881337;
  --secondary-50: #fff1f2;
  --secondary-100: #ffe4e6;
  --secondary-200: #fecdd3;
  --secondary-300: #fda4af;
  --secondary-400: #fb7185;
  --secondary-500: #f43f5e;
  --secondary-600: #e11d48;
  --secondary-700: #be123c;
  --secondary-800: #9f1239;
  --secondary-900: #881337;
}

.theme-salmon {
  --primary-50: #fef3f2;
  --primary-100: #fee5e2;
  --primary-200: #fed0ca;
  --primary-300: #fba89d;
  --primary-400: #f78272;
  --primary-500: #ee5945;
  --primary-600: #db3c27;
  --primary-700: #b82f1d;
  --primary-800: #982b1c;
  --primary-900: #7e291e;
  --primary-950: #45110a;
  --secondary-50: #fef3f2;
  --secondary-100: #fee5e2;
  --secondary-200: #fed0ca;
  --secondary-300: #fba89d;
  --secondary-400: #f78272;
  --secondary-500: #ee5945;
  --secondary-600: #db3c27;
  --secondary-700: #b82f1d;
  --secondary-800: #982b1c;
  --secondary-900: #7e291e;
  --secondary-950: #45110a;
}

.theme-seafoam {
  --primary-50: #eefbf4;
  --primary-100: #d5f6e3;
  --primary-200: #9ce7c1;
  --primary-300: #7adbb1;
  --primary-400: #44c38f;
  --primary-500: #21a875;
  --primary-600: #13885f;
  --primary-700: #0f6d4e;
  --primary-800: #0f563f;
  --primary-900: #0d4735;
  --primary-950: #06281e;
  --secondary-50: #eefbf4;
  --secondary-100: #d5f6e3;
  --secondary-200: #9ce7c1;
  --secondary-300: #7adbb1;
  --secondary-400: #44c38f;
  --secondary-500: #21a875;
  --secondary-600: #13885f;
  --secondary-700: #0f6d4e;
  --secondary-800: #0f563f;
  --secondary-900: #0d4735;
  --secondary-950: #06281e;
}

.theme-secondary-blue {
  --secondary-50: #eff6ff;
  --secondary-100: #dbeafe;
  --secondary-200: #bfdbfe;
  --secondary-300: #93c5fd;
  --secondary-400: #60a5fa;
  --secondary-500: #3b82f6;
  --secondary-600: #2563eb;
  --secondary-700: #1d4ed8;
  --secondary-800: #1e40af;
  --secondary-900: #1e3a8a;
}

.theme-secondary-slate {
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}

.theme-secondary-gray {
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
}

.theme-secondary-zinc {
  --secondary-50: #fafafa;
  --secondary-100: #f4f4f5;
  --secondary-200: #e4e4e7;
  --secondary-300: #d4d4d8;
  --secondary-400: #a1a1aa;
  --secondary-500: #71717a;
  --secondary-600: #52525b;
  --secondary-700: #3f3f46;
  --secondary-800: #27272a;
  --secondary-900: #18181b;
}

.theme-secondary-neutral {
  --secondary-50: #fafafa;
  --secondary-100: #f5f5f5;
  --secondary-200: #e5e5e5;
  --secondary-300: #d4d4d4;
  --secondary-400: #a3a3a3;
  --secondary-500: #737373;
  --secondary-600: #525252;
  --secondary-700: #404040;
  --secondary-800: #262626;
  --secondary-900: #171717;
}

.theme-secondary-stone {
  --secondary-50: #fafaf9;
  --secondary-100: #f5f5f4;
  --secondary-200: #e7e5e4;
  --secondary-300: #d6d3d1;
  --secondary-400: #a8a29e;
  --secondary-500: #78716c;
  --secondary-600: #57534e;
  --secondary-700: #44403c;
  --secondary-800: #292524;
  --secondary-900: #1c1917;
}

.theme-secondary-red {
  --secondary-50: #fef2f3;
  --secondary-100: #fde3e5;
  --secondary-200: #fccccf;
  --secondary-300: #f9a8ae;
  --secondary-400: #f4757e;
  --secondary-500: #e83b47;
  --secondary-600: #d62c38;
  --secondary-700: #b4212b;
  --secondary-800: #951f27;
  --secondary-900: #7c2026;
}

.theme-secondary-orange {
  --secondary-50: #fff8ed;
  --secondary-100: #ffefd5;
  --secondary-200: #fedcaa;
  --secondary-300: #fcc275;
  --secondary-400: #fa9d3d;
  --secondary-500: #f88017;
  --secondary-600: #ec660d;
  --secondary-700: #c14b0d;
  --secondary-800: #993c13;
  --secondary-900: #7c3312;
}

.theme-secondary-amber {
  --secondary-50: #fffbeb;
  --secondary-100: #fef3c7;
  --secondary-200: #fde68a;
  --secondary-300: #fcd34d;
  --secondary-400: #fbbf24;
  --secondary-500: #f59e0b;
  --secondary-600: #d97706;
  --secondary-700: #b45309;
  --secondary-800: #92400e;
  --secondary-900: #78350f;
}

.theme-secondary-yellow {
  --secondary-50: #FCF4E4;
  --secondary-100: #FFF7C2;
  --secondary-200: #f7dfae;
  --secondary-300: #f2ca77;
  --secondary-400: #e2b42d;
  --secondary-500: #d19d20;
  --secondary-600: #b57b19;
  --secondary-700: #915917;
  --secondary-800: #78471b;
  --secondary-900: #673c1c;
}

.theme-secondary-lime {
  --secondary-50: #f7fee7;
  --secondary-100: #ecfccb;
  --secondary-200: #d9f99d;
  --secondary-300: #bef264;
  --secondary-400: #a3e635;
  --secondary-500: #84cc16;
  --secondary-600: #65a30d;
  --secondary-700: #4d7c0f;
  --secondary-800: #3f6212;
  --secondary-900: #365314;
}

.theme-secondary-green {
  --secondary-50: #effef6;
  --secondary-100: #d9ffee;
  --secondary-200: #b5fddc;
  --secondary-300: #7bfac2;
  --secondary-400: #3bed9f;
  --secondary-500: #11d681;
  --secondary-600: #4FAA71;
  --secondary-700: #0a8b54;
  --secondary-800: #0e6d45;
  --secondary-900: #0e593b;
}

.theme-secondary-emerald {
  --secondary-50: #ecfdf5;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-300: #6ee7b7;
  --secondary-400: #34d399;
  --secondary-500: #10b981;
  --secondary-600: #059669;
  --secondary-700: #047857;
  --secondary-800: #065f46;
  --secondary-900: #064e3b;
}

.theme-secondary-teal {
  --secondary-50: #f0fdfa;
  --secondary-100: #ccfbf1;
  --secondary-200: #99f6e4;
  --secondary-300: #5eead4;
  --secondary-400: #2dd4bf;
  --secondary-500: #14b8a6;
  --secondary-600: #0d9488;
  --secondary-700: #0f766e;
  --secondary-800: #115e59;
  --secondary-900: #134e4a;
}

.theme-secondary-cyan {
  --secondary-50: #ecfeff;
  --secondary-100: #cffafe;
  --secondary-200: #a5f3fc;
  --secondary-300: #67e8f9;
  --secondary-400: #22d3ee;
  --secondary-500: #06b6d4;
  --secondary-600: #0891b2;
  --secondary-700: #0e7490;
  --secondary-800: #155e75;
  --secondary-900: #164e63;
}

.theme-secondary-sky {
  --secondary-50: #f0f9ff;
  --secondary-100: #e0f2fe;
  --secondary-200: #bae6fd;
  --secondary-300: #7dd3fc;
  --secondary-400: #38bdf8;
  --secondary-500: #0ea5e9;
  --secondary-600: #0284c7;
  --secondary-700: #0369a1;
  --secondary-800: #075985;
  --secondary-900: #0c4a6e;
}

.theme-secondary-indigo {
  --secondary-50: #eef2ff;
  --secondary-100: #e0e7ff;
  --secondary-200: #c7d2fe;
  --secondary-300: #a5b4fc;
  --secondary-400: #818cf8;
  --secondary-500: #6366f1;
  --secondary-600: #4f46e5;
  --secondary-700: #4338ca;
  --secondary-800: #3730a3;
  --secondary-900: #312e81;
}

.theme-secondary-violet {
  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6;
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;
}

.theme-secondary-purple {
  --secondary-50: #faf5ff;
  --secondary-100: #f3e8ff;
  --secondary-200: #e9d5ff;
  --secondary-300: #d8b4fe;
  --secondary-400: #c084fc;
  --secondary-500: #a855f7;
  --secondary-600: #9333ea;
  --secondary-700: #7e22ce;
  --secondary-800: #6b21a8;
  --secondary-900: #581c87;
}

.theme-secondary-fuchsia {
  --secondary-50: #fdf4ff;
  --secondary-100: #fae8ff;
  --secondary-200: #f5d0fe;
  --secondary-300: #f0abfc;
  --secondary-400: #e879f9;
  --secondary-500: #d946ef;
  --secondary-600: #c026d3;
  --secondary-700: #a21caf;
  --secondary-800: #86198f;
  --secondary-900: #701a75;
}

.theme-secondary-pink {
  --secondary-50: #fdf2f8;
  --secondary-100: #fce7f3;
  --secondary-200: #fbcfe8;
  --secondary-300: #f9a8d4;
  --secondary-400: #f472b6;
  --secondary-500: #ec4899;
  --secondary-600: #db2777;
  --secondary-700: #be185d;
  --secondary-800: #9d174d;
  --secondary-900: #831843;
}

.theme-secondary-rose {
  --secondary-50: #fff1f2;
  --secondary-100: #ffe4e6;
  --secondary-200: #fecdd3;
  --secondary-300: #fda4af;
  --secondary-400: #fb7185;
  --secondary-500: #f43f5e;
  --secondary-600: #e11d48;
  --secondary-700: #be123c;
  --secondary-800: #9f1239;
  --secondary-900: #881337;
}

.theme-secondary-salmon {
  --secondary-50: #fef3f2;
  --secondary-100: #fee5e2;
  --secondary-200: #fed0ca;
  --secondary-300: #fba89d;
  --secondary-400: #f78272;
  --secondary-500: #ee5945;
  --secondary-600: #db3c27;
  --secondary-700: #b82f1d;
  --secondary-800: #982b1c;
  --secondary-900: #7e291e;
  --secondary-950: #45110a;
}

.theme-secondary-seafoam {
  --secondary-50: #eefbf4;
  --secondary-100: #d5f6e3;
  --secondary-200: #9ce7c1;
  --secondary-300: #7adbb1;
  --secondary-400: #44c38f;
  --secondary-500: #21a875;
  --secondary-600: #13885f;
  --secondary-700: #0f6d4e;
  --secondary-800: #0f563f;
  --secondary-900: #0d4735;
  --secondary-950: #06281e;
}

:root {
  /* Base colors */
  --white: #ffffff;
  --black: #000000;
  /* Grayscale */
  --grayscale-1: #faf8f5;
  --grayscale-2: #efebe3;
  --grayscale-3: #e5dfd3;
  --grayscale-4: #bdb6a8;
  --grayscale-5: #a49c8e;
  --grayscale-6: #706a62;
  --grayscale-7: #706a62;
  --grayscale-8: #706a62;
  --grayscale-9: #38342d;
  --grayscale-10: #38342d;
  /* Spice */
  --spice-50: #faf6f6;
  --spice-100: #f4ecec;
  --spice-200: #ebdddd;
  --spice-300: #dcc5c6;
  --spice-400: #c7a2a3;
  --spice-500: #b18283;
  --spice-600: #9a6869;
  --spice-700: #973e3e;
  --spice-800: #7d3737;
  --spice-900: #713636;
  --spice-950: #381717;
  /* Mint */
  --mint-50: #f5f8f6;
  --mint-100: #dfe8e4;
  --mint-200: #bed1c9;
  --mint-300: #88a89c;
  --mint-400: #709186;
  --mint-500: #55776c;
  --mint-600: #435e56;
  --mint-700: #2e5749;
  --mint-800: #264339;
  --mint-900: #253c35;
  --mint-950: #11221d;
  /* Brand */
  --brand-primary-shine: #ffed84;
  /* Raw Figma yellow scale (bundle-preview disclaimer banner uses --yellow-200). */
  --yellow-100: #FFF7C2;
  --yellow-200: #FFF4AD;
  --brand-primary-crisp: #f3f0e8;
  --brand-primary-brew: #342e26;
  --brand-primary-chocolate: #4d2f06;
  --brand-secondary-spice: #713636;
  --brand-secondary-piggy: #6D181A;
  --brand-secondary-moola: #254f1a;
  --brand-secondary-mint: #88a89c;
  /* Background fills — interactive hover states */
  /* Branded button fill + hover. Prefer these over the raw --brand-secondary-moola
     color token for buttons and other branded interactive surfaces. */
  --bg-fill-moola-hover: #1d3d14;
  --bg-fill-brand-hover: #314c43;
  --bg-fill-dark-hover: var(--brand-primary-chocolate);
  --bg-fill-secondary-hover: rgba(104, 67, 0, 0.12);
  --bg-fill-danger-hover: #d62c38;
  --bg-fill-moola: #254f1a;
  /* Sentiment — semantic status fills. Mirrors the Tailwind aliases in tailwind.figma.js
     (sentiment.negative -> red.800), exposed here as CSS vars so components can reference the
     SEMANTIC name directly. Without these, anything needing the colour inside an arbitrary value
     had to hand-write `theme(colors.red.800)` and keep it in sync by hand, because the figma-mapped
     `sentiment-negative` alias doesn't resolve there. Prefer var(--sentiment-*) over the raw palette. */
  --sentiment-negative: #951f27;
  --sentiment-warning: #d96326;
  /* Content */
  --content-primary: var(--brand-primary-brew);
  --content-secondary: rgba(52, 46, 38, 0.64);
  /* Inverse (on-dark) content — light text/icons for dark surfaces (e.g. the
     publish generating backdrop). Mirrors the inverse naming convention. */
  --content-secondary-inverse: rgba(255, 255, 255, 0.56);
  --content-tertiary: rgba(52, 46, 38, 0.44);
  /* Foreground "danger" red — the alert accent for status glyphs (Figma 5185-3281, the Orders
     "Unpaid" state). The content-layer counterpart to the destructive --bg-fill-danger-hover
     background, and brighter than the maroon `sentiment-negative` (#951f27) so it still reads at
     icon scale (12px). No .dark variant — OfferLab is light-mode only. */
  --content-danger: #e83b47;
  /* Inverse content — light text for elements placed ON dark, saturated, or brand-colored
     surfaces (solid badges, dark banners, colored CTAs, etc.). Reach for these instead of
     pressing a background token (e.g. --background-elevated) into service as a text color,
     which is a semantic mismatch. --content-primary-inverse mirrors --content-primary;
     add --content-secondary-inverse / --content-tertiary-inverse here (and register them in
     tailwind.figma.js) when a placement needs them. */
  --content-primary-inverse: #ffffff;
  --content-focus-outline: rgba(52, 46, 38, 0.2);
  --content-background-modal-overlay: rgba(0, 0, 0, 0.2);
  --content-border-light: rgba(52, 46, 38, 0.04);
  --content-border-neutral: rgba(52, 46, 38, 0.08);
  --content-border-dark: rgba(52, 46, 38, 0.12);
  /* ~24% (not 20%): #342E26 is lighter than black, so it needs more opacity to read like
     rgba(0,0,0,0.2) — 20% black — over white (rgb(206,205,203) vs 204,204,204). */
  --content-border-input: rgba(52, 46, 38, 0.24);
  --content-border-card: var(--white);
  --content-border-tertiary: var(--content-tertiary);
  /* Background */
  --background-base: #f7f5f0;
  --background-light: #fbfaf7;
  --background-screen: rgba(255, 255, 255, 0.8);
  --background-elevated: #ffffff;
  /* Dark surface — a super dark espresso brown, one shade darker than --brand-primary-brew (#342e26)
     on the same warm-brown ramp (hue ~33°, ×0.7 brightness). Deliberately NOT pushed to black: brew is
     brown, not black, so the deeper surface stays brown. This is the canonical dark / "inverse mode"
     SURFACE (the mobile collab-builder body + header, the publish generating backdrop); the content
     placed ON it uses the inverse content tokens (--content-primary-inverse, etc.). i.e. the surface
     is "dark", the content on it is "inverse" — which is why this replaced the old --background-inverse
     (a misnomer for a surface, and only ever brew). Gives bg-background-dark. */
  --background-dark: #24201b;
  --background-neutral: var(--brand-primary-crisp);
  --background-overlay: rgba(104, 67, 0, 0.08);
  --background-overlay-hover: rgba(104, 67, 0, 0.16);
  /* --background-overlay's colour at half the opacity (4%) — the subtler hover fill for
     interactive grid cells (the pill on Customer etc., see shared/grid/_cell_popover). */
  --hover-background-04: rgba(104, 67, 0, 0.04);
  --background-card: rgba(255, 255, 255, 0.8);
  /* Subtle black wash laid over media (product thumbnails, etc.) for contrast. */
  --bg-media-overlay-04: rgba(0, 0, 0, 0.04);
  /* Disabled-control fill: the flat surface for disabled buttons, checkboxes, and
     other inert inputs (e.g. a validation dialog's Save button before it's eligible). */
  --background-disabled: #eeeae4;
  /* Interactive */
  --interactive-primary: var(--brand-primary-brew);
  --interactive-link-underline: var(--content-tertiary);
  --interactive-secondary: var(--content-secondary);
  --interactive-control: var(--brand-primary-brew);
  --interactive-tertiary: rgba(52, 46, 38, 0.36);
  /* Shadows */
  --shadow-main-container: 0px 2px 8px 0px rgba(0, 0, 0, 0.06),
    0px -1px 30px 0px rgba(0, 0, 0, 0.04);
}

.dark {
  /* Base colors remain the same */
  /* Spice - Dark mode */
  --spice-50: #fef3f2;
  --spice-100: #fee5e2;
  --spice-200: #fed0ca;
  --spice-300: #fba89d;
  --spice-400: #f78272;
  --spice-500: #ee5945;
  --spice-600: #db3c27;
  --spice-700: #b82f1d;
  --spice-800: #982b1c;
  --spice-900: #7e291e;
  --spice-950: #45110a;
  /* Mint - Dark mode */
  --mint-50: #eefbf4;
  --mint-100: #d5f6e3;
  --mint-200: #9ce7c1;
  --mint-300: #7adbb1;
  --mint-400: #44c38f;
  --mint-500: #21a875;
  --mint-600: #13885f;
  --mint-700: #0f6d4e;
  --mint-800: #0f563f;
  --mint-900: #0d4735;
  --mint-950: #06281e;
  /* Brand - Dark mode */
  --brand-primary-shine: var(--spice-300);
  --brand-primary-crisp: #eee8e5;
  --brand-primary-brew: #0b051d;
  --brand-secondary-spice: #ffffff;
  --brand-secondary-piggy: #ffffff;
  --brand-secondary-moola: #ffffff;
  --brand-secondary-mint: #ffffff;
  /* Content - Dark mode */
  --content-primary: rgba(248, 245, 244, 1);
  --content-secondary: rgba(248, 245, 244, 0.79);
  --content-tertiary: rgba(248, 245, 244, 0.5);
  --content-focus-outline: rgba(52, 46, 38, 0.2);
  --content-background-modal-overlay: rgba(0, 0, 0, 0.2);
  --content-border-light: rgba(11, 5, 29, 0.04);
  --content-border-neutral: rgba(248, 245, 244, 0.08);
  --content-border-dark: rgba(248, 245, 244, 0.12);
  --content-border-input: #333537;
  --content-border-card: rgba(248, 245, 244, 0.04);
  /* Background - Dark mode */
  --background-base: var(--brand-primary-brew);
  --background-screen: rgba(255, 255, 255, 0.04);
  --background-elevated: var(--brand-primary-brew);
  --background-neutral: rgba(248, 245, 244, 0.04);
  --background-overlay: rgba(248, 245, 244, 0.04);
  --background-card: rgba(255, 255, 255, 0.04);
  /* Interactive - Dark mode */
  --interactive-primary: var(--brand-primary-shine);
  --interactive-link-underline: var(--mint-50);
  --interactive-secondary: var(--content-secondary);
  --interactive-tertiary: var(--content-tertiary);
}

.table-alternative {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1264px;
  text-align: left;
}

.table-alternative thead th {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--content-secondary);
}

.table-alternative thead th.with-icon {
  padding-left: 0.75rem;
}

.table-alternative tbody td {
  height: 3rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.table-alternative tbody td:first-child {
  position: relative;
}

.table-alternative tbody td:first-child > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 0.75rem;
}

.table-alternative:not(.contained-table) tbody td:first-child * {
  position: relative;
  z-index: 20;
}

.table-alternative:not(.contained-table) tbody td:first-child::before {
  content: '';
  pointer-events: none;
  position: absolute;
  left: -0.5rem;
  display: block;
  height: 100%;
  width: 30px;
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  background-color: inherit;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.table-alternative:not(.contained-table) tbody td:first-child:hover::before,
      .table-alternative:not(.contained-table) tbody td:first-child:focus::before,
      .table-alternative:not(.contained-table) tbody td:first-child:active::before,
      .table-alternative:not(.contained-table) tbody td:first-child:focus-within::before,
      .table-alternative:not(.contained-table) tbody td:first-child:focus-visible::before {
  opacity: 1;
}

.table-alternative:not(.contained-table) tbody td:last-child {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

/* additional styles for contained tables */

.contained-table tbody {
  background-color: var(--background-elevated);
}

.contained-table tbody tr {
  position: relative;
}

.contained-table tbody tr:first-child td {
  padding-top: 1rem;
}

.contained-table tbody tr:first-child td:first-child {
  border-top-left-radius: 0.75rem;
}

.contained-table tbody tr:first-child td:last-child {
  border-top-right-radius: 0.75rem;
}

.contained-table tbody tr:last-child td {
  padding-bottom: 1rem;
}

.contained-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.75rem;
}

.contained-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.75rem;
}

.contained-table tbody tr:last-child:after {
  display: none;
}

.date-range-calendar .flatpickr-day.contained-table tbody tr:last-child:after {
  display: block;
  visibility: hidden;
}

.contained-table tbody tr:hover td {
  position: relative;
}

.contained-table tbody tr:hover td:before {
  pointer-events: none;
  position: absolute;
  left: 0px;
  width: 100%;
  background-color: var(--background-base);
  content: ' ';
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 8px) !important;
}

.contained-table tbody tr:hover td:first-child:before {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  transform: translateY(-50%) translateX(0.25em);
}

.contained-table tbody tr:hover td:last-child:before {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  transform: translateY(-50%) translateX(-0.25em);
}

.contained-table tbody tr:hover td.no-hover:before {
  display: none;
}

.contained-table tbody tr:hover td > * {
  position: relative;
  z-index: 20;
}

.contained-table tbody tr:first-child td:before {
  /* @apply top-1; */
  /* height: calc(100% - 5px); */
}

.contained-table tbody tr:last-child td:before {
  /* height: calc(100% - 3px); */
}

@keyframes bounceRight {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(20%);
  }
}

.bounce-right {
  display: inline-block;
  animation: bounceRight 1.5s cubic-bezier(0.25, 1.5, 0.5, 1) infinite;
}

/* ─── Modal / wizard step transitions (reusable) ─────────────────────────
   Drop-in classes for any multi-step modal flow (publish flow today; other
   wizards later). Pair them:

   • .modal-fluid-resize — on the dialog/container. As steps of different
     heights swap in, the container eases to the new size instead of jumping.
     interpolate-size lets height:auto animate (Chrome 129+); everywhere else
     it degrades to an instant resize. Harmless either way.

   • .modal-step-enter — on each step's content root (e.g. a Turbo Frame's
     swapped partial). The incoming step fades + slides in from the top, so
     forward/back navigation feels continuous. */

.modal-fluid-resize {
  interpolate-size: allow-keywords;
  transition:
    height 0.3s cubic-bezier(0.2, 0, 0, 1),
    max-width 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.modal-step-enter {
  /* Split timing: opacity eases evenly so the fade is actually perceptible
     (a strong ease-out finishes the fade in ~60ms — reads as instant); the
     slide keeps a snappy ease-out so it still feels responsive. */
  animation:
    modalStepFadeIn 0.4s ease both,
    modalStepRiseIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modalStepFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalStepRiseIn {
  from {
    transform: translateY(-10px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes flash {
  0% {
    background-color: #ffffff20;
    box-shadow: 32px 0 #ffffff20, -32px 0 #fff;
  }

  50% {
    background-color: #fff;
    box-shadow: 32px 0 #ffffff20, -32px 0 #ffffff20;
  }

  100% {
    background-color: #ffffff20;
    box-shadow: 32px 0 #fff, -32px 0 #ffffff20;
  }
}

/* Sweep right-to-left, then HOLD off-screen for the rest of the cycle — a built-in
   pause so the loop breathes instead of restarting back-to-back (a CSS animation
   can't pause *between* iterations via animation-delay, so the rest is baked into
   the keyframe: the band sweeps over 0–66% and parks off-screen 66–100%). With a
   3s duration that's a ~2s sweep + ~1s pause, reading as a natural infinite loop. */

@keyframes shimmer-slide {
  0% {
    background-position: 100% center, 0% center;
  }

  66% {
    background-position: 0% center, 0% center;
  }

  100% {
    background-position: 0% center, 0% center;
  }
}

/* App-wide AI "thinking" shimmer. Mirrors Vercel's AI-SDK Shimmer
   (motion-primitives TextShimmer): a sheen sweeps across text painted in the
   inherited font color (currentColor) — we keep our own colors, only the sheen
   + motion come from the reference.
     --spread: width of the highlight band. Vercel multiplies spread × text
       length (px) so the band is a constant FRACTION of the text width; we get
       the same length-independent proportion for free by expressing it as a %
       of the 250%-wide background box, so the look stays consistent everywhere
       this utility is used regardless of label length. ~16% ≈ Vercel spread=3.
     --base-gradient-color: the sheen's PEAK color, composited over the text.
       OfferLab is a light UI (dark text on light surfaces), so the default peak
       is white at 72% alpha: it lightens the dark text toward white and back —
       a visible-but-legible light-mode shimmer (à la Claude). A full #fff peak
       would turn dark text invisible mid-sweep, leaving only its outlines. For
       the rare light-text-on-dark surface, .text-shimmer-on-dark
       restores the full-white peak for a brighter, higher-contrast pass.
       (Band edges are transparent WHITE, not `transparent` — i.e. transparent
       black — so the low-alpha gradient doesn't muddy toward gray.)
     --animation-duration: 2s, the standard speed.
   All three are CSS vars — override per-use for a faster/slower, tighter, or
   stronger/weaker sheen. */

.text-shimmer {
  --spread: 16%;
  --base-gradient-color: rgba(255, 255, 255, 0.72);
  /* 3s = ~2s sweep + ~1s pause (see the shimmer-slide keyframe hold). */
  --animation-duration: 3s;
  position: relative;
  display: inline-block;
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-image: linear-gradient(
      var(--text-shimmer-angle, 100deg),
      rgba(255, 255, 255, 0) calc(50% - var(--spread)),
      var(--base-gradient-color),
      rgba(255, 255, 255, 0) calc(50% + var(--spread))
    ),
    linear-gradient(currentColor, currentColor);
  animation: shimmer-slide var(--animation-duration) linear infinite;
}

/* Light text on a DARK surface: let the sheen reach full white for a bright,
   high-contrast pass (the original effect). Pair with a light base text color. */

.text-shimmer-on-dark {
  --base-gradient-color: #ffffff;
}

/* Register the custom property for modern browsers only */

@property --angle {
  syntax: '<angle>';

  inherits: false;

  initial-value: 0deg;
}

.glow-card {
  position: relative;
  border-radius: var(--rounded-radius-12, 12px);
  background: var(--content-background-elevated, #fff);
  width: 368px;
  /* shadows/sm */
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0),
    0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
    0px 4px 6px 0px rgba(0, 0, 0, 0.02);
  z-index: 1;
  /* Remove overflow hidden to allow glow effect */
}

.glow-card::before {
  content: '';
  position: absolute;
  opacity: 0.75;
  /* Extend beyond card for proper glow effect */
  inset: -1px;
  border-radius: 0.5rem;
  box-sizing: border-box;
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    #ffed84 0deg,
    #bed1c9 72deg,
    #a8c4bc 108deg,
    #d6e8e0 144deg,
    #bed1c9 180deg,
    #9bb8ad 216deg,
    #e6f2df 252deg,
    #d4e6a3 288deg,
    #ffed84 324deg
  );
  filter: blur(0.375rem);
  -webkit-filter: blur(0.375rem);
  z-index: -1;
}

.glow-card.active::before {
  animation: rotate-glow-safari 5s linear infinite;
  -webkit-animation: rotate-glow-safari 5s linear infinite;
}

/* Modern browsers that support CSS custom properties in conic-gradient */

@supports (background: conic-gradient(from var(--angle), red, blue)) {
  .glow-card::before {
    /* Keep extended inset for modern browsers too for consistent glow */
    inset: -1px;
    background-image: conic-gradient(
      from var(--angle) at 50% 50%,
      #ffed84 0deg,
      #bed1c9 72deg,
      #a8c4bc 108deg,
      #d6e8e0 144deg,
      #bed1c9 180deg,
      #9bb8ad 216deg,
      #e6f2df 252deg,
      #d4e6a3 288deg,
      #ffed84 324deg
    );
    border-radius: 20px;
  }

  .glow-card.active::before {
    animation: rotate-glow-modern 5s linear infinite;
    -webkit-animation: rotate-glow-modern 5s linear infinite;
  }
}

.glow-card::after {
  opacity: 1;
  inset: 0.0625rem;
  content: '';
  border-radius: 12px;
  position: absolute;
  background-color: #fff;
  z-index: 0;
}

.content {
  color: #254f1a;
  font-size: 14px;
  line-height: normal;
  font-weight: 600;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
}

/* Safari/WebKit animation using transform (works in all browsers) */

@keyframes rotate-glow-safari {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

/* Modern browser animation using CSS custom properties */

@keyframes rotate-glow-modern {
  0% {
    --angle: 0deg;
  }

  100% {
    --angle: 360deg;
  }
}

/* Demo content */

.demo-content {
  text-align: left;
}

.demo-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: #254f1a;
}

/* Connection animation dots — used between two app icons in confirm dialogs */

@keyframes connection-dot-pulse {
  0%, 100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

.connection-dot {
  animation: connection-dot-pulse 1.5s ease-in-out infinite;
}

.connection-dot:nth-child(1) {
  animation-delay: 0s;
}

.connection-dot:nth-child(2) {
  animation-delay: 0.18s;
}

.connection-dot:nth-child(3) {
  animation-delay: 0.36s;
}

.connection-dot:nth-child(4) {
  animation-delay: 0.54s;
}

@media (prefers-reduced-motion: reduce) {
  .connection-dot {
    animation: none;
    opacity: 0.6;
  }
}

/* ── AI-feature accent: conic "glow" ────────────────────────────────────────
   A soft, blurred conic gradient behind an element to set AI features apart from
   regular UI (e.g. the Sidekick "Copy prompt" button), reusable anywhere. Add
   `.ai-glow` to any element: it establishes the stacking context and paints the
   glow via ::before — z-index:-1 so it sits over the element's background but
   under its content, blurred so it also bleeds a soft halo past the edges.
   Colours are our blur-border yellow (#ffed84) + pink (#efa3f6), dialled to a
   light pastel at ~0.32 alpha to match the soft reference tone. */

@property --ai-glow-angle {
  syntax: "<angle>";

  initial-value: 0deg;

  inherits: false;
}

@property --ai-glow-x {
  syntax: "<percentage>";

  initial-value: 50%;

  inherits: false;
}

@property --ai-glow-y {
  syntax: "<percentage>";

  initial-value: 50%;

  inherits: false;
}

.ai-glow {
  position: relative;
  isolation: isolate;
}

.ai-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  filter: blur(0.75rem);
  opacity: 1;
  pointer-events: none;
  /* The conic rotates (--ai-glow-angle) while its centre drifts an elliptical
     loop (--ai-glow-x/y) — the two run at different periods (9s vs 14s) so the
     yellow/pink lobes wander organically and never visibly repeat. */
  background: conic-gradient(
    from var(--ai-glow-angle) at var(--ai-glow-x) var(--ai-glow-y),
    rgba(255, 244, 181, 0.32) 54deg,
    rgba(245, 195, 249, 0.32),
    rgba(245, 195, 249, 0.32) 126deg,
    rgba(255, 244, 181, 0.2),
    rgba(245, 195, 249, 0.32) 234deg,
    rgba(245, 195, 249, 0.32),
    rgba(255, 244, 181, 0.32) 306deg,
    rgba(245, 195, 249, 0.32) 360deg
  );
  /* Idle: the glow is present but frozen. The motion only runs on hover/active
     (play-state flipped below), so it reads as a static aura until interacted
     with — then springs to life, picking up from wherever it was paused. */
  animation:
    aiGlowSpin 9s linear infinite,
    aiGlowDrift 14s ease-in-out infinite;
  animation-play-state: paused;
}

.ai-glow:hover::before,
.ai-glow:focus-visible::before,
.ai-glow:active::before {
  animation-play-state: running;
}

@keyframes aiGlowSpin {
  to {
    --ai-glow-angle: 360deg;
  }
}

@keyframes aiGlowDrift {
  0% {
    --ai-glow-x: 32%;
    --ai-glow-y: 36%;
  }

  25% {
    --ai-glow-x: 68%;
    --ai-glow-y: 30%;
  }

  50% {
    --ai-glow-x: 64%;
    --ai-glow-y: 68%;
  }

  75% {
    --ai-glow-x: 34%;
    --ai-glow-y: 64%;
  }

  100% {
    --ai-glow-x: 32%;
    --ai-glow-y: 36%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-glow::before {
    animation: none;
  }
}

/* Hover-only variant — the aura stays hidden at rest and blooms in on hover/focus
   (base .ai-glow shows a frozen aura at rest). Pair with .ai-glow, e.g. the bundle
   gallery's "Create variations" pill, which reads as a plain pill until hovered, then
   lights up with the same conic glow as the Sidekick button. */

.ai-glow--hover-only::before {
  opacity: 0;
  transition: opacity 200ms ease;
}

.ai-glow--hover-only:hover::before,
.ai-glow--hover-only:focus-visible::before {
  opacity: 1;
}

/* ── Generated-media preloader shimmer ─────────────────────────────────────────
   The standard loader for AI-generated media placeholders: a moola-green field
   with three soft radial blobs (shine yellow → lime → green-400) drifting on
   independent loops, so the glow shifts organically rather than a flat sweep.
   Three layers means it can't be pseudo-elements — apply `.media-shimmer` to a
   positioned container holding three empty <div>s:
     <div class="media-shimmer"><div></div><div></div><div></div></div>
   Modelled on Pomelli's image-generation loader. Tune the blob tints per use via
   the --ms-* vars. */

.media-shimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--brand-secondary-moola, #254f1a);
  /* Subtle glints over the dark field — low alpha so they read as soft light. */
  --ms-a: color-mix(in srgb, var(--brand-primary-shine, #ffed84) 30%, transparent);
  /* shine yellow */
  --ms-b: color-mix(in srgb, #b6e85a 26%, transparent);
  /* lime (shine yellow × green) */
  --ms-c: color-mix(in srgb, #3bed9f 22%, transparent);
  /* green-400 */
}

.media-shimmer > div {
  position: absolute;
  inset: 0;
  filter: blur(6px);
  will-change: transform;
}

.media-shimmer > div:nth-child(1) {
  background: radial-gradient(circle at 50% 50%, var(--ms-a) 0%, transparent 42%) no-repeat;
  animation: mediaShimmerA 6s ease-in-out infinite;
}

.media-shimmer > div:nth-child(2) {
  background: radial-gradient(circle at 50% 50%, var(--ms-b) 0%, transparent 40%) no-repeat;
  animation: mediaShimmerB 7.5s ease-in-out infinite;
}

.media-shimmer > div:nth-child(3) {
  background: radial-gradient(circle at 50% 50%, var(--ms-c) 0%, transparent 44%) no-repeat;
  animation: mediaShimmerC 5.2s ease-in-out infinite;
}

@keyframes mediaShimmerA {
  0% {
    transform: translate(-22%, -16%);
  }

  30% {
    transform: translate(18%, -6%);
  }

  60% {
    transform: translate(8%, 22%);
  }

  100% {
    transform: translate(-22%, -16%);
  }
}

@keyframes mediaShimmerB {
  0% {
    transform: translate(20%, 14%);
  }

  35% {
    transform: translate(-14%, 18%);
  }

  70% {
    transform: translate(-20%, -12%);
  }

  100% {
    transform: translate(20%, 14%);
  }
}

@keyframes mediaShimmerC {
  0% {
    transform: translate(6%, -20%);
  }

  40% {
    transform: translate(22%, 16%);
  }

  75% {
    transform: translate(-18%, 6%);
  }

  100% {
    transform: translate(6%, -20%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-shimmer > div {
    animation: none;
  }
}

/* Earn Back modal card — a two-sided 3D flip that reveals on open (Web Animations API, in the
   earn-back-card Stimulus controller) and then responds to the pointer with a 3D tilt + a
   cursor-tracking light glare. Here we set up the 3D scene, the tilt transform (driven by CSS custom
   properties the controller writes) and the glare layer. */

.earn-back-flip-scene {
  /* Tuned in the flip playground (OL-2479). */
  perspective: 1200px;
  /* Clamp the 3D layer beneath the sticky header (OL-4418).
     The card is preserve-3d inside this perspective, so it gets its own composited 3D layer. With the
     scene left at `z-index: auto` nothing ever pins that layer BELOW the header — it just relies on the
     header's z-20 outranking it, which Safari does not honour: it hoists composited 3D content above a
     sticky sibling. The card then sat over the close button, and because its pointerdown handler calls
     setPointerCapture, tapping the X tilted the card instead of closing the sheet.
     An explicit stacking context is the guarantee: a descendant can never paint above the ancestor
     stacking context that contains it, so the card is now confined to level 0 and the z-20 header is
     unambiguously on top. Do not drop the z-index/isolation back to auto. */
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Earn Back activity list — each row/header fades up from below on modal open, staggered via an inline
   animation-delay so the list reveals top-down alongside the card flip (first item starts at 0ms). */

@keyframes earn-back-activity-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.earn-back-activity-item {
  animation: earn-back-activity-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .earn-back-activity-item {
    animation: none;
  }
}

.earn-back-flip {
  position: relative;
  transform-style: preserve-3d;
  /* The controller writes --card-rx/ry/scale on pointer move; this is the resting transform + the
     ease-back-to-flat when the pointer leaves. */
  transform: rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) scale(var(--card-scale, 1));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* Touch: a hold-drag on the card rotates it rather than scrolling the modal. */
  touch-action: none;
}

/* While actively tracking the pointer, follow it with only a hair of smoothing (not the slow
   return ease), and promote the card to its own layer. */

.earn-back-flip.is-tilting {
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* Cursor-tracking specular glare — a soft white radial the controller positions via --glare-x/y and
   fades in via --glare-opacity. soft-light keeps it reading as light catching the metal, not a white
   blob. Lives inside the front face (which clips it to the card's rounded corners). */

.earn-back-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--glare-opacity, 0);
  transition: opacity 0.4s ease;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.35) 18%,
    rgba(255, 255, 255, 0) 55%
  );
}

@media (prefers-reduced-motion: reduce) {
  .earn-back-flip {
    transition: none;
  }
}

/* Withdraw success — the 3D checkmark reveals on insert (turbo_stream-replaced into the dialog):
   scale up from small with a slight overshoot as it fades in. */

@keyframes withdraw-check-reveal {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  60% {
    opacity: 1;
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.withdraw-check-reveal {
  animation: withdraw-check-reveal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.earn-back-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.earn-back-flip-face--back {
  transform: rotateY(180deg);
}

/* Copy-button (shared/_copy_button + copy_button_controller): on copy, the copy glyph cross-fades
   to a checkmark that DRAWS itself in (animated stroke-dashoffset — the controller measures the
   path and toggles `.is-copied`), holds, then reverts. Both glyphs share the button's single grid
   cell so the swap happens in place with no layout shift. */

.copy-button__glyph {
  grid-area: 1 / 1;
  /* Center the icon in the cell. Without this the SVG is an inline child whose line-box
     leaves it ~3px baseline-low — invisible on the bare plain variant but obvious once the
     glyph sits inside a sized .button-icon. grid blockifies the SVG (no line-box) + centers it. */
  display: grid;
  place-items: center;
  transition: opacity 150ms ease;
}

.copy-button__check {
  opacity: 0;
}

.copy-button__check path {
  transition: stroke-dashoffset 360ms ease-out 60ms;
}

.copy-button.is-copied .copy-button__copy {
  opacity: 0;
}

.copy-button.is-copied .copy-button__check {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* Skip the draw + cross-fade; the checkmark just appears/disappears. */

  .copy-button__glyph,
  .copy-button__check path {
    transition: none;
  }
}

/* Orders infinite scroll: fade each appended batch in. orders--infinite-scroll adds .orders-row-enter to
   the new desktop grid rows + mobile cards as they're appended. Opacity-only (composites cleanly); `both`
   holds the 0 start frame until the animation runs so there's no flash of the row at full opacity first. */

@keyframes orders-row-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.orders-row-enter {
  animation: orders-row-enter 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .orders-row-enter {
    animation: none;
  }
}

/* Rotating connector logos in the Direct-sales "Import products" CTA (OL-4418). Five brand marks are
   stacked in one 20px slot on a single 15s loop, each offset by 3s, so exactly one is featured at a
   time. Each pulses in (scale + fade, ~0.75s), holds ~1.65s, then pulses out; the out/in windows
   overlap ~0.6s at the seam for a crossfade. Starts on Shopify (first child, no delay) and loops. */

.connector-cycle {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.connector-cycle-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
  animation: connector-cycle 15s infinite both;
}

.connector-cycle-icon:nth-child(1) {
  animation-delay: 0s;
}

.connector-cycle-icon:nth-child(2) {
  animation-delay: 3s;
}

.connector-cycle-icon:nth-child(3) {
  animation-delay: 6s;
}

.connector-cycle-icon:nth-child(4) {
  animation-delay: 9s;
}

.connector-cycle-icon:nth-child(5) {
  animation-delay: 12s;
}

@keyframes connector-cycle {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }

  2.33% {
    opacity: 1;
    transform: scale(1);
  }

  19% {
    opacity: 1;
    transform: scale(1);
  }

  22% {
    opacity: 0;
    transform: scale(0.65);
  }

  100% {
    opacity: 0;
    transform: scale(0.65);
  }
}

/* Reduced motion: no rotation — hold the first (Shopify) mark and hide the rest. */

@media (prefers-reduced-motion: reduce) {
  .connector-cycle-icon {
    animation: none;
  }

  .connector-cycle-icon:nth-child(1) {
    opacity: 1;
  }

  .connector-cycle-icon:nth-child(n + 2) {
    display: none;
  }
}

/*
 * This takes care of the window's contents shifting when the
 * scrollbar appears and disappears during the turn.css animation
 */

/* Chrome, Safari and Opera */

.devise_layout::-webkit-scrollbar {
  display: none;
}

/* Firefox and Edge */

.devise_layout {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Prevent scrolling while dialog is open */

body:has(dialog[data-dialog-target='dialog'][open]) {
  overflow: hidden;
}

dialog {
  width: 560px;
}

/* Full-screen Share modal — the bundle share experience is a full-viewport
   builder (Figma 4890-9190), not a centered card. On desktop the dialog fills
   the whole viewport (its inner panes scroll, not the dialog). Mobile keeps the
   bottom-sheet behavior from the @media block below. */

@media (min-width: 1024px) {
  dialog.share-modal-fullscreen[open] {
    width: 100dvw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    inset: 0;
    border-radius: 0;
  }
}

/* No `forwards` on the entrance animations below: the final keyframe is identical
   to the dialog's natural resting state, so letting the animation revert lets the
   leftover `transform` settle back to `none`. A pinned identity transform
   (matrix(1,0,0,1,0,0)) keeps the dialog on its own composited layer; centered
   dialogs land on half-pixel boundaries, so the rasterized text gets interpolated
   and looks fuzzy. Reverting to no transform restores crisp text. */

dialog[open] {
  display: flex;
}

/* Reusable enter/exit motion. Apply `.animation-dialog-enter` / `.animation-dialog-exit`
   to any element to match the modal transition exactly. The dialog itself opts in via its
   [open]/.closing states below. NOTE: this pair is responsive — on mobile it slides as a
   bottom sheet (see the @media block). Popover dropdowns that stay popovers on mobile must
   use `.animation-dropdown-enter`/`-exit` instead (defined below), NOT this. */

.animation-dialog-enter,
dialog[open] {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animation-dialog-exit,
dialog.closing:not(.noslide) {
  animation: slideDown 0.2s forwards;
}

/* Popover dropdowns (dropdown_controller) stay popovers on every viewport, so they keep the
   desktop slideUp/slideDown motion on mobile too — they must NOT inherit the bottom-sheet
   slide from the @media block below (that's only for components that are actually sheets).
   Deliberately defined outside that media query so there is no responsive override. */

.animation-dropdown-enter {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animation-dropdown-exit {
  animation: slideDown 0.2s forwards;
}

dialog.noslide[open] {
  animation: appear 0s forwards;
}

dialog.noslide.closing {
  animation: disappear 0s forwards;
}

/* Popover dropdowns (dropdown_controller) stay popovers on every viewport, so they keep the
   desktop slideUp/slideDown motion on mobile too — they must NOT inherit the bottom-sheet
   slide from the @media blocks below (that's only for components that are actually sheets).
   Deliberately defined outside those media queries so there is no responsive override. */

.animation-dropdown-enter {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animation-dropdown-exit {
  animation: slideDown 0.2s forwards;
}

/* The Orders advanced-filter popover (.filter-popover-menu) nests position:fixed submenus (the
   per-property filter lists) that must escape this menu's box to open beside their row. An element
   with a TRANSFORM animation establishes a containing block for fixed descendants, so the shared
   slideUp entrance (which animates transform + scale) traps those submenus inside this menu — they
   render offset, even off-screen. Give just this one popover a transform-free, opacity-only entrance
   so it never becomes a containing block and the submenus position against the viewport instead.
   (Exit/slideDown is untouched — it only plays while closing, with no submenu open.) */

@keyframes filter-popover-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.filter-popover-menu.animation-dropdown-enter {
  animation: filter-popover-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Nested filter popovers (.nested-popover — the per-property submenus inside the filter popover) get a
   DISTINCT, near-instant entrance/exit instead of the shared slideUp/slideDown. The default's scale +
   slide reads as a heavy "delay" when you sweep down the filter list: the outgoing menu is still
   sliding out while the next is still scaling in, so you see both mid-animation. A quick opacity-only
   fade — faster out (0.06s) than in (0.1s) so the previous menu clears as the next appears — makes the
   switch feel instant and crisp. Scoped to .nested-popover, so the default popover keyframes (and the
   outer .filter-popover-menu entrance) are untouched. */

@keyframes nested-popover-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes nested-popover-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.nested-popover.animation-dropdown-enter {
  animation: nested-popover-in 0.1s ease-out forwards !important;
}

.nested-popover.animation-dropdown-exit {
  animation: nested-popover-out 0.06s ease-in forwards !important;
}

/* ── Orders advanced-filter popover → bottom sheet on mobile (< lg) ─────────────────────────────
   On desktop .filter-popover-menu is a 320px floating popover whose nested per-property menus
   (.nested-popover, position:fixed) escape to the viewport beside each row — which is exactly why
   its entrance is opacity-only above (a transform would trap those fixed submenus). On mobile we
   WANT that trapping: the menu becomes a bottom sheet, and the slide-up TRANSFORM makes it a
   containing block, so each nested menu lands inside it as a full-screen "screen" sliding in over
   the sheet. Every screen carries its own header (see _filter_popover / _filter_select); the root
   header's button closes the sheet, a nested screen's button is Back (dropdown#hide pops it). */

@media (max-width: 1023px) {
  .filter-popover-menu {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88dvh !important;
    border-radius: 2rem 2rem 0 0 !important;
    /* Dimming scrim with no extra element: a viewport-filling outset shadow that fades in with the
       sheet (it inherits the slide-up's opacity). The dropdown's own transparent modal backdrop
       still sits above it to catch outside taps and dismiss. */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45) !important;
    /* Recycled-sheet height animation: orders--filter-popover sets an explicit height when entering /
       leaving a nested filter view (then releases to auto), and this eases the bottom sheet's top edge
       up/down to fit. Separate from the slide-up entrance (a transform animation), so they don't fight. */
    transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Slide up as a sheet (overrides the opacity-only desktop entrance). The transform is also what
     makes the sheet a containing block for the nested fixed screens. */

  .filter-popover-menu.animation-dropdown-enter {
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  .filter-popover-menu.animation-dropdown-exit {
    animation: slideDownSheet 0.2s forwards !important;
  }

  /* The sheet is trapped in the page's z-0 content column, so it can't paint over the app's fixed
     bottom tab bar (.ol-bottom-nav, z-2000 in the root) — the bar would cover the Reset/Done footer.
     orders--filter-popover toggles `orders-filter-sheet-open` on <body> while the sheet is open, so we
     hide the bar (footer reachable, scrim covers the viewport). NB: a :has(.filter-popover-menu:not(.hidden))
     version got mangled by the Tailwind build — `.hidden` (a utility name) expanded into bogus, always-true
     :not()s that hid the bar unconditionally — so this is JS-driven on a plain selector instead. */

  body.orders-filter-sheet-open .ol-bottom-nav {
    display: none !important;
  }

  /* Same, for the bundle builder's Publish popover (nested-sheet toggles this flag): hide the floating
     builder tab bar so the open sheet + its footer aren't covered. */

  body.builder-nested-sheet-open .builder-bar {
    display: none !important;
  }

  /* Lock the page behind the open sheet so the background can't scroll under it (same body flags). */

  body.orders-filter-sheet-open,
  body.builder-nested-sheet-open {
    overflow: hidden !important;
  }

  /* Nested per-property menus (Payment / Fulfillment / Delivery / Merchant / Date) → IN-PLACE views in
     the RECYCLED sheet. Each is a position:fixed overlay covering only the BODY region — between the
     persistent header and footer, via the --fs-*-h heights orders--filter-popover measures — so the
     shell header (retitled) + footer stay put. It cross-fades in over the root list (opaque bg) while
     orders--filter-popover animates the sheet height to fit it (see the height transition below). Fixed
     against the transformed sheet (its containing block), so it's not clipped by the body's scroll. The
     Sort menu (.nested-popover-float) is excluded — it stays a small floating popover (rules below). */

  .nested-popover:not(.nested-popover-float) {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--fs-header-h, 60px) !important;
    bottom: var(--fs-footer-h, 88px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* Cross-fade in/out over the root list (opacity only — the overlay's opaque bg hides the root). */

  .nested-popover:not(.nested-popover-float).animation-dropdown-enter {
    animation: nested-popover-in 0.22s ease-out forwards !important;
  }

  .nested-popover:not(.nested-popover-float).animation-dropdown-exit {
    animation: nested-popover-out 0.16s ease-in forwards !important;
  }

  /* The options list fills the view and scrolls. */

  .nested-popover:not(.nested-popover-float) > ul {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* The Sort menu stays a small floating popover on mobile (not a full-screen screen): an absolute
     dropdown anchored under its trigger, INSIDE the sheet. Absolute — not the desktop's position:fixed
     — sidesteps the sheet's slide-up transform, which makes the sheet a containing block and would
     otherwise mis-anchor a fixed popover (the very trap the desktop opacity-only entrance avoids). It
     keeps the base .nested-popover chrome (border/radius/shadow/bg) and the opacity-fade entrance (from
     the non-@media .nested-popover rules), being excluded from the full-sheet resets above; its
     `.relative` filter-row wrapper is the positioning context. */

  .nested-popover-float {
    position: absolute !important;
    inset: auto 0 auto auto !important;
    top: calc(100% + 0.25rem) !important;
    max-width: calc(100vw - 2rem) !important;
    transform: none !important;
  }
}

/* Mobile sheet motion: slide up from the bottom edge + fade (instead of scaling — scaling
   a full-width sheet visibly insets it from the viewport edges mid-animation). This is the
   responsive half of `.animation-dialog-enter`/`-exit`: on mobile they slide as a sheet, on
   desktop they keep the scale motion (rules above). Bottom-sheet and full-sheet dialogs opt
   in via their `max-lg:dialog-*-sheet` classes. */

@media (max-width: 1023px) {
  .animation-dialog-enter,
  dialog.max-lg\:dialog-bottom-sheet[open],
  dialog.max-lg\:dialog-full-sheet[open],
  dialog.max-lg\:dialog-full-screen[open] {
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .animation-dialog-exit,
  dialog.max-lg\:dialog-bottom-sheet.closing:not(.noslide),
  dialog.max-lg\:dialog-full-sheet.closing:not(.noslide),
  dialog.max-lg\:dialog-full-screen.closing:not(.noslide) {
    animation: slideDownSheet 0.2s forwards;
  }
}

/* Same bottom-sheet slide, scoped to mobile only — used by modals that stay a
   centered 2-column dialog at tablet and only become a sheet below md. */

@media (max-width: 767px) {
  dialog.max-md\:dialog-bottom-sheet[open] {
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  dialog.max-md\:dialog-bottom-sheet.closing:not(.noslide) {
    animation: slideDownSheet 0.2s forwards;
  }
}

/* modal_full_height dropdown sheets (render "shared/dropdown", modal_full_height: true). Opt-in
   full-SCREEN overlay for a dropdown's mobile bottom sheet: a clean, edge-to-edge takeover — full
   height, square corners, flush to every edge — instead of the default rounded-top bottom sheet that
   floats up from the bottom. The cloned dialog keeps its .dialog-bottom-sheet class, so the slide-up
   open / slide-down close animation still applies; this only overrides the resting geometry. The
   `.class dialog[open]` selector (0,2,1) outranks the bottom-sheet height/rounding/margin without
   !important. The header pins; the menu list scrolls inside the sheet. */

@media (max-width: 1023px) {
  .dropdown-modal-full-height dialog[open] {
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  /* The body wrapper (the dialog child holding the activeModalBody — no stable class of its own, so
     matched via :has) becomes the flex-growing scroll region under the pinned header. */

  .dropdown-modal-full-height dialog[open] > :has(> [data-dropdown-modal-target="activeModalBody"]) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* Full-screen sheet → a MEDIUM (40px box / 20px glyph) header close button, matching the mobile
     mobile_full_sheet treatment in _dialog: a more reachable target on a full-height surface. Keyed on the
     close action + `button.button-icon` so it only hits the header close (not body icon buttons) and its
     (0,3,2) specificity outranks the `.builder-header-inverse dialog .button-icon` 32px reset (0,2,1) that
     the builder's bundle switcher also matches. */

  .dropdown-modal-full-height dialog button.button-icon[data-action*="dialog#close"] {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0.625rem !important;
  }

  .dropdown-modal-full-height dialog button.button-icon[data-action*="dialog#close"] svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

@keyframes slideUp {
  from {
    scale: 0.9;
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    scale: 1;
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    scale: 1;
    transform: translateY(0);
    opacity: 1;
  }

  to {
    scale: 0.95;
    transform: translateY(4%);
    opacity: 0;
  }
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownSheet {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* Right-slide for desktop modal drawers — the horizontal counterpart of slideUpSheet /
   slideDownSheet (identical 0.3s-in / 0.2s-out timing + easing). Drawers enter from and exit
   to the right edge on desktop; mobile drawers remain bottom sheets. Apply
   `.animation-slide-in-right` to the sliding panel; the drawer controller swaps in
   `.animation-slide-out-right` (and adds `.drawer-closing` to the scrim) on close. */

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Drawer body scroll region: a soft fade mask at the top + bottom edges so content dissolves
   (rather than hard-cutting) as it scrolls under the fixed header / footer. 28px matches the app's
   .mask-fade-y standard; the old 80px ramp was long enough that content at its normal top/bottom
   padding (e.g. the amount) was already dissolving at rest, forcing it to sit far inward. */

.drawer-body-scroll {
  /* The mask paints on THIS element's box, so the fade only lands on the scroll edges if this element is
     genuinely the scroller. As a column-flex child its default `min-height: auto` stops it shrinking below
     its content: it grows past the panel, the overflow escapes to #inner-content, and that scrolls instead —
     leaving the mask riding a box whose edges are nowhere near the visible ones. (That is why the bottom fade
     never appeared at all, and the top one only seemed to work on desktop, where the geometry happened to
     drop it just under the header.) min-height: 0 lets it shrink to the panel and own its scroll, so the
     bands sit exactly on the top and bottom scroll edges, on every breakpoint. Callers must still give the
     element a height to fill — grow/flex-1 — and not wrap it in an unconstrained (min-height: auto) parent. */
  min-height: 0;
  -webkit-mask-image: linear-gradient(transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
}

/* Backdrop scrim for desktop drawers — paired with the panel slide. A horizontal gradient
   that's DARKEST behind the drawer panel and fades to transparent away from it, so the dim
   visually anchors to wherever the drawer lives. Default `--drawer-scrim-angle` is 90deg
   (right-slide drawers → dark stop on the right); a future left-slide variant overrides it
   to -90deg on the drawer wrapper to flip the gradient.
   Animates `background` between two same-shaped gradients (only the dark stop's alpha
   changes) so the sliding panel — a child — is unaffected. */

@keyframes drawerScrimIn {
  from {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 69.75%);
  }

  to   {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 69.75%);
  }
}

@keyframes drawerScrimOut {
  from {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 69.75%);
  }

  to   {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 69.75%);
  }
}

@media (min-width: 1024px) {
  .animation-slide-in-right {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .animation-slide-out-right {
    animation: slideOutRight 0.2s forwards;
  }

  /* Scrim fades in with the panel on open; .drawer-closing fades it out on close. */

  [data-drawer-target="drawer"] {
    background: linear-gradient(var(--drawer-scrim-angle, 90deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 69.75%);
    animation: drawerScrimIn 0.3s ease;
  }

  [data-drawer-target="drawer"].drawer-closing {
    animation: drawerScrimOut 0.2s ease forwards;
  }
}

/* Drawer-to-drawer navigation (prev/next pagination, back links): the drawer is already on
   screen, so re-running the entrance reads as a close-and-reopen. drawer_controller adds
   `.drawer-nav` for these opens — swap the incoming panel in INSTANTLY (no slide, no fade) and
   keep the scrim put, so only the content changes with no transition. The content rule is scoped
   to .animation-slide-in-right so the close slide-out (which swaps that class off) still plays
   normally; :not(.drawer-closing) likewise keeps the scrim's close fade-out. */

[data-drawer-target="drawer"].drawer-nav:not(.drawer-closing) {
  animation: none;
}

[data-drawer-target="drawer"].drawer-nav [data-drawer-target="content"].animation-slide-in-right {
  animation: none;
}

/* Mobile full-screen drawers (.full-screen-drawer) are full-screen sheets: they reuse the
   bottom-sheet slide-up/down (slideUpSheet / slideDownSheet) below the lg breakpoint, just at
   full height. The controller still toggles the shared animation-slide-in/out-right classes;
   here those map to the vertical sheet motion instead of the desktop horizontal push. */

@media (max-width: 1023px) {
  .full-screen-drawer.animation-slide-in-right {
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .full-screen-drawer.animation-slide-out-right {
    animation: slideDownSheet 0.2s forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animation-slide-in-right,
  .animation-slide-out-right,
  .full-screen-drawer.animation-slide-in-right,
  .full-screen-drawer.animation-slide-out-right,
  [data-drawer-target="drawer"],
  [data-drawer-target="drawer"].drawer-closing {
    animation: none;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes disappear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Orders advanced-filter "Custom date" modal (account/orders/invoices/index/_filter_date). A
   self-contained centered modal that sizes to its two-month Flatpickr, overriding the global
   560px width + `display:flex` so the content lays out (those collapse a block-content dialog). */

.filter-date-dialog {
  width: auto;
  max-width: min(94vw, 680px);
  margin: auto;
}

.filter-date-dialog[open] {
  display: block;
}

/* Flatpickr → atelier, scoped to the orders date modal (replaces the library's default blue with
   brand content-primary for the selected day + range; softens hover/inRange/today/nav). */

.filter-date-dialog .flatpickr-calendar {
  box-shadow: none;
  width: auto;
}

.filter-date-dialog .flatpickr-day {
  border-radius: 0.5rem;
  color: var(--content-primary);
}

.filter-date-dialog .flatpickr-day:hover,
.filter-date-dialog .flatpickr-day.prevMonthDay:hover,
.filter-date-dialog .flatpickr-day.nextMonthDay:hover {
  background-color: var(--hover-background-04);
  border-color: transparent;
}

.filter-date-dialog .flatpickr-day.today {
  border-color: var(--content-border-neutral);
}

.filter-date-dialog .flatpickr-day.selected,
.filter-date-dialog .flatpickr-day.startRange,
.filter-date-dialog .flatpickr-day.endRange,
.filter-date-dialog .flatpickr-day.selected:hover,
.filter-date-dialog .flatpickr-day.startRange:hover,
.filter-date-dialog .flatpickr-day.endRange:hover {
  border-color: var(--content-primary);
  background-color: var(--content-primary);
  color: var(--content-primary-inverse);
}

.filter-date-dialog .flatpickr-day.inRange {
  background-color: var(--background-base);
  border-color: transparent;
  box-shadow: none;
}

.filter-date-dialog .flatpickr-weekday,
.filter-date-dialog .flatpickr-current-month .cur-month,
.filter-date-dialog .flatpickr-current-month input.cur-year,
.filter-date-dialog span.flatpickr-weekday {
  color: var(--content-primary);
}

.filter-date-dialog .flatpickr-months .flatpickr-prev-month svg,
.filter-date-dialog .flatpickr-months .flatpickr-next-month svg {
  fill: var(--content-secondary);
}

.filter-date-dialog .flatpickr-day.flatpickr-disabled {
  color: var(--content-secondary);
  opacity: 0.4;
}

/* Embed preview transparency indicator — embed_preview_controller toggles
   .preview-checkerboard on the preview frame when background opacity < 100, so a
   reduced-opacity background reads as transparent (the host page would show through). */

.preview-checkerboard {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e6e3dd 25%, transparent 25%),
    linear-gradient(-45deg, #e6e3dd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e6e3dd 75%),
    linear-gradient(-45deg, transparent 75%, #e6e3dd 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

#bt-docs-content h1,
#bt-docs-content h2,
#bt-docs-content h3,
#bt-docs-content h4,
#bt-docs-content h5,
#bt-docs-content h6{
  position: relative;
  margin-left: -1.2em;
  padding-left: 1.2em;
}

#bt-docs-content h1 a,
#bt-docs-content h2 a,
#bt-docs-content h3 a,
#bt-docs-content h4 a,
#bt-docs-content h5 a,
#bt-docs-content h6 a{
  text-decoration: none;
  display: none;
  position: absolute;
  float:left;
  margin-left:-1.2em;
  line-height: 1;
  width: 1em;
  height: 100%;
}

#bt-docs-content h1 a::before,
#bt-docs-content h2 a::before,
#bt-docs-content h3 a::before,
#bt-docs-content h4 a::before,
#bt-docs-content h5 a::before,
#bt-docs-content h6 a::before{
  content: "🔗";
}

#bt-docs-content h1:hover a,
#bt-docs-content h2:hover a,
#bt-docs-content h3:hover a,
#bt-docs-content h4:hover a,
#bt-docs-content h5:hover a,
#bt-docs-content h6:hover a{
  display: flex;
  justify-content: center;
  /* Align horizontal */
  align-items: center;
  /* Align vertical */
}

/* Import Electron utilities shared across all Tailwind-based themes. */

/* @import "../tailwind/electron.scss"; */

.electron a, .todesktop a {
  outline-color: var(--tw-ring-color);
  --tw-ring-color: rgba(3, 98, 198, var(--tw-ring-opacity));
  --tw-ring-opacity: 1;
}

.electron .electron-mobile-only, .todesktop .electron-mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .electron .electron-mobile-only, .todesktop .electron-mobile-only {
    display: none;
  }
}

.electron .electron-title-bar, .todesktop .electron-title-bar {
  /* override `md:rounded-radius-8` */
  border-top-left-radius: 0;
}

/* hide logo because it doesn't fit into the ui well. */

.electron .electron-title-bar img, .todesktop .electron-title-bar img {
  display: none;
}

.electron .electron-title-bar, .todesktop .electron-title-bar {
  min-height: 36px;
}

.electron .main-container-padding, .todesktop .main-container-padding {
  padding: 0;
}

.electron .main-container, .todesktop .main-container {
  /* override `md:rounded-radius-8` */
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* `height: 100vh` is for the desktop Electron app shell where the window IS
     the viewport. Scoping this to lg+ stops it from clamping the mobile
     layout to viewport height — that was clipping the marketplace listing's
     ~3550px of content to 812px and breaking page scrolling on every mobile
     viewport (web preview / Chrome devtools mobile mode). Desktop electron
     behavior is unchanged. */

@media (min-width: 1024px) {
  .electron .main-container, .todesktop .main-container {
    /* override `md:h-auto` */
    height: 100vh;
  }
}

/* hide profiler results because they don't fit into the ui well. */

.electron .profiler-results, .todesktop .profiler-results {
  display: none;
}

/* touch up the padding of the breadcrumbs. */

.electron ol.breadcrumb, .todesktop ol.breadcrumb {
  padding-top: 3px;
}

.cloudinary-field button.upload {
  margin: 0;
  border-radius: 4px;
  padding: 0;
  border: 2px solid #dde2ec;
  background: transparent;
  position: relative;
  min-height: 50px;
  min-width: 50px;
}

.cloudinary-field button.upload:not(.present) {
  min-height: 100px;
  min-width: 100px;
}

.cloudinary-field button.upload i {
  display: block;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  line-height: 50px;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  top: 50%;
  left: 50%;
  font-size: 32px;
  color: #dde2ec;
}

.cloudinary-field button.upload + button.clear {
  display: none;
  font-size: 32px;
  color: #dde2ec;
  background: transparent;
  border: 0;
  overflow: visible;
}

.cloudinary-field button.upload + button.clear:focus i, .cloudinary-field button.upload + button.clear:active i {
  color: var(--primary-500);
}

.cloudinary-field button.upload.present i {
  display: none;
}

.cloudinary-field button.upload.present + button.clear {
  display: inline-block;
}

.cloudinary-field button.upload:focus, .cloudinary-field button.upload:active {
  border-color: var(--primary-500);
}

.cloudinary-field button.upload:focus i, .cloudinary-field button.upload:active i {
  color: var(--primary-500);
}

input[type=tel] {
  line-height: 21px;
}

input[type=tel]::-moz-placeholder {
  color: #9ca3af;
}

input[type=tel]::placeholder {
  color: #9ca3af;
}

.select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple {
  border-style: none;
  --border-width: 1px;
  --border-color: #DCD8DA;
  --ring-width: 4px;
  --ring-color: transparent;
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: box-shadow, color;
}

.select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple,
  .select2-container--default .select2-selection--single:hover,
  .select2-container--default .select2-selection--multiple:hover,
  .select2-container--default .select2-selection--single:focus,
  .select2-container--default .select2-selection--multiple:focus,
  .select2-container--default .select2-selection--single:focus-within,
  .select2-container--default .select2-selection--multiple:focus-within {
  box-shadow: 0px 0px 0px var(--border-width) var(--border-color),
        0px 0px 0px var(--ring-width) var(--ring-color);
}

.select2-container--default .select2-selection--single:disabled,
  .select2-container--default .select2-selection--multiple:disabled,
  .select2-container--default .select2-selection--single:disabled:hover,
  .select2-container--default .select2-selection--multiple:disabled:hover,
  .select2-container--default .select2-selection--single:disabled:focus,
  .select2-container--default .select2-selection--multiple:disabled:focus,
  .select2-container--default .select2-selection--single:disabled:focus-within,
  .select2-container--default .select2-selection--multiple:disabled:focus-within {
  --border-color: #DCD8DA;
}

.select2-container--default:not(.select2-container--disabled) .select2-selection--single:hover, .select2-container--default:not(.select2-container--disabled) .select2-selection--multiple:hover {
  --border-color: rgb(11 5 29 / 36%);
}

.no-edges .select2-container--default .select2-selection--single,
    .no-edges .select2-container--default .select2-selection--multiple {
  border-style: none !important;
  --border-width: 1px;
  --border-color: transparent;
  --ring-width: 4px;
}

.no-edges .select2-container--default .select2-selection--single:hover, .no-edges .select2-container--default .select2-selection--multiple:hover {
  --border-color: transparent;
}

.has-error .select2-container--default .select2-selection--single,
    .has-error .select2-container--default .select2-selection--multiple,
    .has-error .select2-container--default .select2-selection--single:hover,
    .has-error .select2-container--default .select2-selection--multiple:hover,
    .has-error .select2-container--default .select2-selection--single:focus,
    .has-error .select2-container--default .select2-selection--multiple:focus {
  --border-color: #e83b47;
  --ring-color: #fde3e5;
}

.select2-selection.select2-selection--single {
  min-height: auto;
  height: auto;
}

.select2-selection.select2-selection--single .select2-selection__rendered {
  padding-left: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  overflow: auto;
  white-space: normal;
  text-overflow: unset;
}

.select2-selection.select2-selection--single .select2-selection__rendered .super-select--option-label {
  display: flex;
  width: 100%;
  justify-content: space-between;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.select2-selection.select2-selection--single .select2-selection__arrow {
  padding-top: 35px;
}

.select2-container .select2-search--inline {
  border-radius: 0 !important;
  display: flex;
  margin-top: 0.25rem;
  height: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .select2-container .select2-search--inline {
    height: 1.75rem;
  }
}

.select2-container .select2-search--inline .select2-search__field {
  font-weight: 300;
  margin-top: 0;
  border-radius: 0 !important;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .select2-container .select2-search--inline .select2-search__field {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.select2 {
  display: block;
}

.select2 img {
  display: none;
}

.select2-results img {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  margin-right: 8px;
}

/* Hide chips inside the property values list wrapper —
   the values list controller renders them as a richer list below */

.property-values-select-wrapper .select2-selection--multiple .select2-selection__choice {
  display: none !important;
}

.date-range-calendar .flatpickr-day.property-values-select-wrapper .select2-selection--multiple .select2-selection__choice {
  display: block !important;
  visibility: hidden !important;
}

/* @import './trix_editor'; */

.code-editor .monaco-editor, .code-editor .monaco-editor .overflow-guard {
  border-radius: inherit;
}

.code-editor .monaco-editor, .code-editor .monaco-editor-background, .code-editor .monaco-editor .margin {
  background-color: var(--code-editor-background);
}

.rhino-editor::part(base) {
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
  overflow: hidden;
}

.rhino-editor, .trix-content {
  --role-background-hover-color: red;
  --role-border-focus-color: red;
  --rhino-text-color: unset;
  --rhino-dark-text-color: unset;
  --rhino-border-radius: 12px;
  --rhino-button-active-border-color: unset;
}

.rhino-editor::part(toolbar) {
  border-radius: 0.75rem !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-width: 1px;
  border-color: var(--content-border-input);
  font-weight: 400 !important;
  border-bottom: none !important;
}

.rhino-editor::part(toolbar__base) {
  border-radius: 0.75rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rhino-editor::part(bubble-menu__toolbar) {
  border-radius: 0.75rem;
  background-color: var(--background-elevated);
}

.rhino-editor::part(bubble-menu__toolbar__base) {
  border-radius: 0.75rem;
  background: var(--content-background-elevated, #fff);
  box-shadow: none !important;
}

.rhino-editor::part(bubble-menu__toolbar__base):focus-within {
  border-color: var(--content-border-input);
}

.rhino-editor::part(toolbar__base):focus-within {
  border-radius: 0.75rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-color: var(--content-border-input);
  border-bottom-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.rhino-editor .trix-content.field-border-for-error, .rhino-editor .trix-content.field-border-for-error:hover, .rhino-editor .trix-content.field-border-for-error:focus {
  --border-color: #e83b47;
  --ring-color: #fde3e5;
}

.rhino-editor[data-toolbar-hidden='true'] .trix-content {
  border-radius: 0.75rem;
}

.rhino-editor.single-line .trix-content {
  border-radius: 0.75rem;
  min-height: auto !important;
}

.rhino-editor
  .trix-content
  > *:not(ul, ol, table, media-element).is-empty::before {
  color: var(--rhino-placeholder-text-color);
  color: light-dark(
    var(--rhino-placeholder-text-color),
    var(--rhino-dark-placeholder-text-color)
  );
  content: attr(data-placeholder);
  pointer-events: none;
  height: 0;
  float: left;
}

/* Applies to all toolbar buttons */

.btn-toggle input[type='checkbox']:checked + button.button-secondary.rhino-editor::part(toolbar__button), .btn-toggle input[type='radio']:checked + button.button-secondary.rhino-editor::part(toolbar__button),.btn-toggle input[type='checkbox']:checked + button.button-secondary
.rhino-editor .rhino-toolbar-button, .btn-toggle input[type='radio']:checked + button.button-secondary
.rhino-editor .rhino-toolbar-button {
  background-color: var(--background-overlay);
}

.rhino-editor::part(toolbar__button),
.rhino-editor .rhino-toolbar-button {
  border-radius: 0.5rem;
  border-style: none;
  background-color: transparent;
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.rhino-editor::part(toolbar__button):hover,
.rhino-editor .rhino-toolbar-button:hover {
  border-radius: 0.5rem;
  background-color: var(--background-overlay);
}

/* Applies to &quot;active&quot; buttons which in practical terms is any button highlighted blue due to it being active in the editor. */

.rhino-editor::part(toolbar__button--active) {
  border-style: none;
  background-color: var(--background-overlay);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Applies to &quot;disabled&quot; buttons (buttons which are not currently usable) */

.rhino-editor::part(toolbar__button--disable) {
}

/* Only applies to undo button */

.rhino-editor::part(toolbar__button--undo) {
}

.rhino-editor table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

.rhino-editor table td,
.rhino-editor table th {
  border: 2px solid #ced4da;
  box-sizing: border-box;
  min-width: 1em;
  padding: 3px 5px;
  position: relative;
  vertical-align: top;
}

.rhino-editor table td > *,
.rhino-editor table th > * {
  margin-bottom: 0;
}

.rhino-editor table th {
  background-color: #f1f3f5;
  font-weight: bold;
  text-align: left;
}

.rhino-editor table .selectedCell:after {
  background: rgba(200, 200, 255, 0.4);
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.rhino-editor table .column-resize-handle {
  background-color: #adf;
  bottom: -2px;
  position: absolute;
  right: -2px;
  pointer-events: none;
  top: 0;
  width: 4px;
}

.rhino-editor table p {
  margin: 0;
}

.rhino-editor .tableWrapper {
  padding: 1rem 0;
  overflow-x: auto;
}

.rhino-editor .resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

rich-text-editor.inplace {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

rich-text-editor.inplace .trix-content {
  border: none !important;
  min-height: auto !important;
  padding: 0 !important;
}

rich-text-editor.inplace.rhino-editor {
  display: block !important;
}

/* @apply text-base md:text-sm; */

.trix-content div, .trix-content p {
  margin-bottom: 1rem;
}

.trix-content div:last-child, .trix-content p:last-child {
  margin-bottom: 0px;
}

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

/* Restore numbers for all ordered lists */

.rhino-editor .trix-content ol {
  list-style-type: decimal !important;
  padding-left: 2em;
  margin-left: 0;
}

/* Consistent left padding for all lists */

.rhino-editor .trix-content ul,
.rhino-editor .trix-content ol {
  padding-left: 1.5em;
  margin-left: 0;
}

.rhino-editor
  .trix-content
  ul.checked-list:not([data-section] *):not([data-section]) {
  padding-left: 0;
}

.rhino-editor .trix-content ul.checked-list:not([data-section] *) li,
.rhino-editor .trix-content ul.checked-list:not([data-section] *) ul li {
  position: relative;
  padding-left: 1.5em;
  list-style: none;
}

.rhino-editor .trix-content ul.checked-list:not([data-section] *) li::before,
.rhino-editor
  .trix-content
  ul.checked-list:not([data-section] *)
  ul
  li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1em;
  height: 1em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" > <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="%230B051D" fill-opacity="0.64" /> <path d="M15.0714 9.23381C15.3666 9.04876 15.761 9.09057 16.0112 9.35217C16.2972 9.65179 16.2862 10.1267 15.9866 10.4127L10.8983 15.2701C10.7423 15.419 10.5296 15.4942 10.3147 15.4752C10.0999 15.4561 9.90317 15.3445 9.77567 15.1705L7.92528 12.6451L8.53596 12.2068L9.13466 11.758L10.48 13.5944L14.9518 9.32756L15.0714 9.23381Z" fill="white" /> <path d="M8.087 11.5963C8.42089 11.352 8.88982 11.4246 9.13466 11.758L8.53596 12.2068L7.92528 12.6451C7.6807 12.3111 7.75314 11.8411 8.087 11.5963Z" fill="white" /> </svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.editor-container[data-theme='offerlab'] {
  overflow-x: hidden;
}

.editor-container[data-theme='offerlab'] .form-control {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  display: block;
  width: 100%;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .editor-container[data-theme='offerlab'] .form-control input[type='text'] {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  /* default to 16px on mobile to prevent zooming */
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']::placeholder {
  color: rgb(11 5 29 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  /* OL-3343: keep textarea text + placeholder at 16px on desktop too — text-input-base
       shrinks to 14px at md, but the text-field component (.floating-input-field) is a flat 16px. */
}

@media (min-width: 768px) {
  .editor-container[data-theme='offerlab'] .form-control input[type='text'] {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  /* OL-3343: match the text-field component (.floating-input-field) box exactly — 12px radius,
       1px inset border (content-border-dark), 1px inset content-primary on hover, 2px inset
       content-primary on focus (no outer ring). Token vars (--content-*) are always defined in
       figma.css, so no hardcoded hex fallbacks (they'd only go stale). --rounded-radius-12 is
       not a CSS var, so its 12px fallback is load-bearing — keep it. */
  border: none;
  border-radius: var(--rounded-radius-12, 12px);
  box-shadow: 0 0 0 1px inset var(--content-border-dark);
  transition-property: box-shadow, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:disabled,.editor-container[data-theme='offerlab'] .form-control input[type='text'].disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:disabled:where(.dark, .dark *),.editor-container[data-theme='offerlab'] .form-control input[type='text'].disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:disabled,.editor-container[data-theme='offerlab'] .form-control input[type='text'].disabled {
  background-color: rgb(11 5 29 / .04);
  color: rgb(11 5 29 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text']:disabled:where(.dark, .dark *),.editor-container[data-theme='offerlab'] .form-control input[type='text'].disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
  color: rgb(248 245 244 / .32);
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'].field-border-for-error,.editor-container[data-theme='offerlab'] .form-control input[type='text'].field-border-for-error:hover,.editor-container[data-theme='offerlab'] .form-control input[type='text'].field-border-for-error:focus {
  box-shadow: 0 0 0 2px inset #e83b47;
}

.editor-container[data-theme='offerlab'] .form-control input[type='text'] {
  border-radius: 0.5rem;
}

.date-range-inputs .editor-container[data-theme='offerlab'] .form-control input[type='text']:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

.date-range-inputs .editor-container[data-theme='offerlab'] .form-control input[type='text']:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
}

.editor-container[data-theme='offerlab'] > [data-schemaid='root'] {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
  padding-bottom: 1rem !important;
}

.editor-container[data-theme='offerlab'] [data-schemaid='root'] > .je-header.je-object__title {
  display: none !important;
}

.editor-container[data-theme='offerlab'] [data-schemaid='root'] > p {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  padding-bottom: 1rem;
}

.editor-container[data-theme='offerlab'] [data-schemaid='root'] > .je-header {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 400;
}

.editor-container[data-theme='offerlab'] .je-object__container .je-object__controls {
  display: none !important;
}

.editor-container[data-theme='offerlab'] .je-object__container p {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  color: var(--content-secondary);
}

.editor-container[data-theme='offerlab'] .je-header.je-object__title {
  display: none !important;
}

.editor-container[data-theme='offerlab'] .je-object__container > .je-indented-panel,
  .editor-container[data-theme='offerlab'] > [data-schemapath='root'] > .je-indented-panel {
  margin: 0px !important;
  border-style: none !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.editor-container[data-theme='offerlab'] .je-object__container > .je-indented-panel .je-indented-panel {
  margin: 0px !important;
  padding: 0px !important;
}

.editor-container[data-theme='offerlab'] .je-header {
  margin-bottom: 0.25rem;
  display: flex !important;
  justify-content: space-between;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder {
  display: flex;
  gap: 0.5rem;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  cursor: pointer;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* for styled links */
  --button-bg-color: transparent;
  /* replaced below, used in compound backgrounds using linear-gradient */
  background: var(--button-bg-color);
  /* medium button defaults */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 0.625rem;
  /* 10px */
  /* prepare defaults for focus ring */
  --tw-ring-color: transparent;
  --tw-ring-color-light: rgb(11 5 29 / 40%);
  --tw-ring-color-dark: rgb(248 245 244 / 40%);
  --tw-ring-color: var(--tw-ring-color-light);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* unless :focus, hide the ring by zero-ing out the widths */
  --tw-ring-width: 0px;
  --tw-ring-offset-width: 0px;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:focus:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--content-border-dark);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* set a default "press down" effect for small buttons */
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button svg {
  display: inline-block;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: background-color, background-image color, box-shadow,
      opacity, filter, transform;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.01), 0px 3px 2px rgba(0, 0, 0, 0.04),
      0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 1px rgba(0, 0, 0, 0.08),
      inset 0px -1px 1px rgba(255, 255, 255, 0.2),
      inset 0px 6px 12px rgba(255, 255, 255, 0.2);
  --blend-mode-normal: normal;
  --blend-mode-soft-light-normal: soft-light, normal;
  --blend-mode-multiply-normal: multiply, normal;
  --blend-mode: var(--blend-mode-normal);
  background-blend-mode: var(--blend-mode);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:disabled:active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):active {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button.\!disabled:not(.no-disabled-style):active:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-toggle input[type='checkbox']:checked + button.editor-container[data-theme='offerlab'] .je-header .button-holder button.bg-transparent, .btn-toggle input[type='radio']:checked + button.editor-container[data-theme='offerlab'] .je-header .button-holder button.bg-transparent {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + button.editor-container[data-theme='offerlab'] .je-header .button-holder button span span, .btn-toggle input[type='radio']:checked + button.editor-container[data-theme='offerlab'] .je-header .button-holder button span span {
  color: var(--content-primary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--background-overlay);
  text-align: center;
  font-weight: 600;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  /* no inner shadow on any buttons! */
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  background-color: var(--bg-fill-secondary-hover) !important;
  transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 0.15s !important;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--background-overlay);
  color: var(--content-primary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  color: var(--content-primary);
  background-color: var(--bg-fill-secondary-hover) !important;
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button:active,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *),
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  @extend .button-primary-dark;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
}

.box-footer .editor-container[data-theme='offerlab'] .je-header .button-holder button,
  .box-actions .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}


  .buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  border-width: 1px;
  border-color: var(--content-border-neutral);
  background-color: var(--background-elevated);
  color: var(--content-primary);
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  color: var(--content-primary);
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: transparent !important;
}

.buttons .editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  background-color: var(--background-overlay);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled]:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled]:not(.no-disabled-style) {
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button[disabled]:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  text-decoration-line: none;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.editor-container[data-theme='offerlab'] .je-header .button-holder button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0px !important;
}

form.button_to input[type='submit'].editor-container[data-theme='offerlab'] .je-header .button-holder button {
  background-color: var(--primary-800);
}

form.button_to input[type='submit'].editor-container[data-theme='offerlab'] .je-header .button-holder button:hover {
  background-color: var(--primary-900);
}

.publish-flow__footer-actions > .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  transition: opacity 0.2s ease !important;
}

.publish-flow__footer-actions:has([data-spinner-shown="true"]) > .editor-container[data-theme='offerlab'] .je-header .button-holder button {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 1023px) {
  .publish-flow__footer-actions > .editor-container[data-theme='offerlab'] .je-header .button-holder button {
    transition: opacity 0.2s ease, flex-grow 0.25s ease, padding 0.25s ease, margin 0.25s ease !important;
  }

  .publish-flow__footer-actions:has([data-spinner-shown="true"]) > .editor-container[data-theme='offerlab'] .je-header .button-holder button {
    flex-grow: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: -12px !important;
    overflow: hidden !important;
  }
}

.editor-container[data-theme='offerlab'] [data-schemapath='root'] .form-control {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.editor-container[data-theme='offerlab'] .je-object__container .je-indented-panel .row {
  margin-bottom: 1rem !important;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* &:after {
      content: '';
      @apply block -ml-6 border-b border-content-border-neutral;
      width: calc(100% + 4rem);
      height: 1px;
    } */
  /* &:last-child {
      &:after {
        display: none;
      }
    } */
}

.editor-container[data-theme='offerlab'] .je-object__container .je-indented-panel .row .row {
  all: unset;
}

/* .je-object__container button[class*='json-editor-btn'],
  button[class*='json-editor-btn'] {
    @apply button-tertiary !button-small !mr-1 font-normal;
  }

  .je-object__container button.json-editor-btn-delete,
  button[class*='json-editor-btn-delete'] {
    @apply button-secondary text-sentiment-negative button-small;
  } */

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox'] {
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:last-child {
  margin-bottom: 0px;
}

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox'] {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--background-elevated);
}

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:checked {
  border-color: var(--content-border-dark);
  background-color: var(--content-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8334 3.25L4.87504 9.20833L2.16671 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  color: var(--background-elevated);
}

.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus,
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-color: transparent !important;
}

.floating-input-field.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus,
.floating-input-field.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus:focus,
.floating-input-field.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus:hover,
.floating-input-field.editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:focus:active,.floating-input-field
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active,
.floating-input-field
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active:focus,
.floating-input-field
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active:hover,
.floating-input-field
  .editor-container[data-theme='offerlab'] .je-object__container input[type='checkbox']:active:active {
  box-shadow: none;
}

.editor-container[data-theme='offerlab'] .je-form-input-label {
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--content-primary);
}

.editor-container[data-theme='offerlab'] .je-object__container > p,
  .editor-container[data-theme='offerlab'] .je-header > span {
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--content-primary);
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] .je-header {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] > .je-indented-panel {
  border-style: none !important;
}

[data-select-all-target='wrapper'].editor-container[data-theme='offerlab'] .row [data-schematype='array'] > .je-indented-panel .je-child-editor-holder {
  border-color: var(--content-border-dark);
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] > .je-indented-panel .je-child-editor-holder {
  margin-bottom: 1rem !important;
  border-top-width: 1px !important;
  border-color: var(--content-border-neutral);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.editor-container[data-theme='offerlab'] .row [data-schematype='array'] > .je-indented-panel .je-child-editor-holder:first-child {
  border-top-width: 0px !important;
}

.editor-container[data-theme='offerlab'] .je-object__container .je-object__title > span,
  .editor-container[data-theme='offerlab'] .form-control label.je-form-input-label {
  display: flex !important;
  align-items: center !important;
}

/* Presets */

.preset-panel {
  width: 100%;
  overflow-y: auto;
  padding: 0.25rem;
}

.preset-btn {
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.preset-btn:hover {
  background: #f3f4f6;
}

.preset-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.preset-category-heading {
  font-weight: 600;
}

.preset-heading {
  font-weight: 700;
}

/* Native Color picker */

.editor-container[data-theme='offerlab'] input[type='color' i] {
  border-radius: 50%;
  inline-size: 30px;
  block-size: 30px;
  /* Can set padding between outer circle and color swatch for Firefox here;
   * it doesn't support a color-swarch-wrapper pseudoclass
   */
  padding: 1px !important;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(153, 153, 153);
}

/* Affects area between outer circle and color swatch. Firefox doesn't have an equivalent. */

.editor-container[data-theme='offerlab'] input[type='color' i]::-webkit-color-swatch-wrapper {
  padding: 1px;
}

/* Affects the inner circle, i.e. the current color selection */

.editor-container[data-theme='offerlab'] input[type='color' i]::-webkit-color-swatch {
  border-radius: 50%;
}

.editor-container[data-theme='offerlab'] input[type='color' i]::-moz-color-swatch {
  border-radius: 50%;
}

/*  section menu overrides */

[data-controller='sections--section-menu'] .editor-container[data-theme='offerlab'] {
  margin-top: 0px !important;
}

[data-controller='sections--section-menu'] .editor-container[data-theme='offerlab'] .form-control {
  margin: 0px !important;
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0px !important;
}

[data-controller='sections--section-menu'] .editor-container[data-theme='offerlab'] .je-form-input-label {
  margin-bottom: 0px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* headless */

form.headless {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.editor-container[data-theme='barebones'] label {
  display: none !important;
}

.editor-container[data-theme='barebones'] rich-text-editor {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.editor-container[data-theme='barebones'] rich-text-editor .trix-content {
  border: none !important;
  min-height: auto !important;
}

/* Pickr color-picker popover — restyled to match our popover/dropdown component
   (app/views/themes/atelier/_dropdown.html.erb: shadow-modal + border + rounded-radius-16) and to
   host the controls in-popover (hex input + swatch, eyedropper + copy footer, no Reset).

   Padding lives on the body + actions (not .pcr-app) so the divider between them spans full width. */

.pcr-app {
  border-radius: 1rem !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  --tw-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12) !important;
  --tw-shadow-colored: 0px 4px 24px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  border: 1px solid var(--content-border-neutral) !important;
  padding: 0 !important;
  /* Slide-up + fade matching our dropdown popovers. Transition-based (not the keyframe classes)
     because Pickr toggles `.visible` itself — transitions give us the close animation for free. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s !important;
}

.pcr-app.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Everything above the divider (palette/hue + hex input): top/left/right padding, gap owns the
   vertical rhythm. */

.pcr-app .pcr-ol-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0 0.75rem;
}

.pcr-app .pcr-ol-body > .pcr-interaction {
  margin: 0 !important;
}

.pcr-app .pcr-swatches:empty {
  display: none !important;
}

.pcr-color-palette {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Hide Pickr's default current/last-color bar — the swatch sits inside the hex input instead. */

.pcr-app .pcr-color-preview {
  display: none !important;
}

/* Hex input row → reads like our .text-input, with the swatch pinned to the right. */

.pcr-app .pcr-interaction {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
}

.pcr-app .pcr-interaction .pcr-result {
  display: block !important;
  width: 100% !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  --tw-numeric-spacing: tabular-nums !important;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction) !important;
  height: 2.5rem !important;
  margin: 0 !important;
  padding: 0 2.25rem 0 0.875rem !important;
  /* px-3.5, plus room on the right for the swatch */
  border: none !important;
  border-radius: var(--rounded-radius-12, 12px) !important;
  box-shadow: 0 0 0 1px inset var(--content-border-dark) !important;
  color: var(--content-primary) !important;
  background: transparent !important;
  transition: box-shadow 0.15s !important;
}

.pcr-app .pcr-interaction .pcr-result:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px inset var(--content-primary) !important;
}

.pcr-ol-swatch {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 1px solid var(--content-border-dark);
  pointer-events: none;
}

/* Utility bar: a full-width divider then the eyedropper/copy actions. The divider is a direct child
   with no horizontal padding (so it spans edge-to-edge); the actions row carries the left/right/
   bottom padding. The footer's gap is the space between the divider and the actions. */

.pcr-app .pcr-ol-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  /* space between the hex input above and the divider */
}

.pcr-app .pcr-ol-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--content-border-neutral);
}

.pcr-app .pcr-ol-actions {
  display: flex;
  align-items: center;
  padding: 0 0.75rem 0.75rem 0.75rem;
}

.pcr-app .pcr-ol-copy-wrap {
  position: relative;
  display: inline-flex;
  margin-left: auto;
  /* keep copy at the right even if the eyedropper is absent */
}

/* Copy button: cross-fade between the copy icon and the sentiment-positive checkmark. */

.pcr-app .pcr-ol-copy {
  position: relative;
}

.pcr-app .pcr-ol-copy-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pcr-app .pcr-ol-copy-icon[data-copy-icon="success"] {
  opacity: 0;
  transform: scale(0.6);
}

.pcr-app .pcr-ol-copy.is-copied .pcr-ol-copy-icon[data-copy-icon="default"] {
  opacity: 0;
  transform: scale(0.6);
}

.pcr-app .pcr-ol-copy.is-copied .pcr-ol-copy-icon[data-copy-icon="success"] {
  opacity: 1;
  transform: scale(1);
}

/* "Copied" confirmation — the dark .tooltip, above the copy button, desktop only. */

.pcr-app .pcr-ol-copy-tooltip {
  top: auto;
  left: auto;
  right: 0;
  bottom: calc(100% + 8px);
}

@media (max-width: 1023px) {
  .pcr-app .pcr-ol-copy-tooltip {
    display: none !important;
  }
}

/* Google Places Autocomplete - Custom Dropdown */

.address-autocomplete-wrapper {
  position: relative;
}

.address-autocomplete-wrapper.dropdown-open .floating-input-field {
  box-shadow: 0 0 0 2px inset var(--content-primary, #342E26);
}

.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--content-background-elevated, #FFF);
  border-radius: var(--rounded-radius-16, 16px);
  box-shadow: var(--shadow-modal, 0 20px 80px 0 rgba(0, 0, 0, 0.06), 0 7.3px 29.2px 0 rgba(0, 0, 0, 0.05), 0 3.5px 14.2px 0 rgba(0, 0, 0, 0.04), 0 1.7px 6.9px 0 rgba(0, 0, 0, 0.03), 0 0.7px 2.7px 0 rgba(0, 0, 0, 0.02));
  overflow: hidden;
  margin-top: 4px;
}

.autocomplete-dropdown.visible {
  display: block;
}

.autocomplete-dropdown-item {
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-dropdown-item:hover,
.autocomplete-dropdown-item.active {
  background: var(--content-background-base, #F7F5F0);
}

.autocomplete-dropdown-item-line {
  font-size: var(--size-base, 16px);
  font-weight: 400;
  line-height: 150%;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

.autocomplete-dropdown-item-line .matched {
  font-weight: 600;
  color: var(--content-primary, #342E26);
}

.autocomplete-dropdown-subtitle {
  padding: 12px 14px 4px 14px;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  font-size: var(--size-xs, 12px);
  font-weight: 400;
  line-height: 150%;
}

/* Floating Input Container */

.floating-input {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Floating Input Field Styles */

.floating-input-field {
  padding: 22px 14px 8px 14px;
  font-size: 16px;
  line-height: 1.5;
  background: var(--content-background-elevated, #fff);
  border: none;
  box-shadow: 0 0 0 1px inset var(--content-border-dark, rgba(52, 46, 38, 0.12));
  border-radius: var(--rounded-radius-12, 12px);
  color: var(--content-primary, #342e26);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  width: 100%;
}

.floating-input-field::-moz-placeholder {
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

.floating-input-field::placeholder {
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

/* Add extra left padding when icon is inside */

.floating-input.has-icon .floating-input-field {
  padding-left: 2.5rem;
  /* 40px - matches pl-10 */
}

.floating-input-field:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
}

.floating-input-field:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

/* Error state: reuse the focus treatment (2px inset outline) but in sentiment-negative,
   and turn the entered text red. Higher specificity than :focus/:hover so it persists
   even while the field is focused. */

.floating-input-field.field-border-for-error,
.floating-input-field.field-border-for-error:hover,
.floating-input-field.field-border-for-error:focus {
  box-shadow: 0 0 0 2px inset #e83b47;
  color: #951f27;
}

/* Remove all borders/shadows when hide_border is used (including focus and active states) */

.floating-input-field.shadow-none,
.floating-input-field.shadow-none:focus,
.floating-input-field.shadow-none:hover,
.floating-input-field.shadow-none:active {
  box-shadow: none !important;
}

/* Floating Label Styles - CSS-only using :placeholder-shown and :focus-within */

.floating-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  font-size: 16px;
  font-weight: normal;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  pointer-events: none;
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: top 0.2s ease-out, transform 0.2s ease-out;
}

/* Float label when input is focused, has value, or has a placeholder */

.floating-input .floating-input-field:not(:-moz-placeholder-shown)+.floating-label {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

.floating-input:focus-within .floating-label,
.floating-input .floating-input-field:not(:placeholder-shown)+.floating-label,
.floating-input .floating-input-field[placeholder]:not([placeholder=' '])+.floating-label {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

/* JavaScript-controlled float state for super_select and other dynamic fields */

.floating-label.float {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

/* Account for icon-inside variant: nudge label to the right */

.floating-input.has-icon .floating-label {
  left: 2.5rem;
}

/* Account for phone field country selector: intlTelInput adds .iti wrapper */

/* Target phone inputs specifically - intlTelInput wraps the input in .iti */

.floating-input input[type='tel'].floating-input-field {
  padding-left: 4rem;
  /* Account for country selector width (flag + dropdown arrow) */
}

.floating-input input[type='tel'].floating-input-field+.floating-label,
.floating-input:has(input[type='tel']) .floating-label {
  left: 4rem;
  /* Match input padding */
}

/* Keep phone field label floating when input has value (intlTelInput may modify placeholder) */

/* Use :has() to check if phone input is not showing placeholder - works even when wrapped in .iti */

.floating-input:has(input[type='tel'].floating-input-field:not(:-moz-placeholder-shown)) .floating-label, .floating-input:has(.iti input[type='tel'].floating-input-field:not(:-moz-placeholder-shown)) .floating-label {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

.floating-input:has(input[type='tel'].floating-input-field:not(:placeholder-shown)) .floating-label,
.floating-input:has(.iti input[type='tel'].floating-input-field:not(:placeholder-shown)) .floating-label {
  top: 8px;
  transform: translateY(0) scale(0.75);
  line-height: 16px;
  letter-spacing: normal;
}

[data-select-all-target='wrapper'].required > label::after {
  display: block;
}

.required > label::after {
  display: inline-block;
  padding-left: 0.25rem;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(232 59 71 / var(--tw-text-opacity, 1));
  content: '*';
}

/* A label-left / asset-picker-right field row (e.g. the team Logo row) whose alignment + layout
   depend on whether an asset is set. The row itself is items-center (empty state: the compact
   upload button centers against the label). Once a logo is set we key off the filled preview image
   (data-fields--asset-picker-target="filePreviewImage") — which reacts live on upload without a
   re-render, and excludes the asset-picker gallery thumbnails that share the row's DOM:
     • any width → top-align the label beside the tall preview card.
     • mobile (<lg) → stack the preview full-width below the text. */

.field-row-stack-when-filled:has(img[data-fields--asset-picker-target="filePreviewImage"]) {
  align-items: flex-start;
}

@media (max-width: 1023px) {
  .field-row-stack-when-filled:has(img[data-fields--asset-picker-target="filePreviewImage"]) {
    flex-direction: column;
    align-items: stretch;
  }
}

.filter-select.select2-container,
.filter-select .select2-selection.select2-selection--single {
  height: 32px !important;
}

.filter-select .select2-selection.select2-selection--single {
  box-shadow: 0px 0px 0px 1px var(--content-border-neutral);
}

.filter-select
  .select2-selection.select2-selection--single
  .select2-selection__rendered
  .super-select--option-label {
  color: var(--interactive-primary);
}

html .filter-select .select2-selection__rendered {
  padding-top: 5px !important;
}

html .filter-select b[role='presentation'] {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none" class="w-6 h-6 stroke-width-1.5 icon"><path d="M8 10.7393L12 14.7393L16 10.7393" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>') !important;
  background-size: auto !important;
  width: 17px;
  top: 1rem !important;
  opacity: 0.5;
  transform: translateY(-50%) translateX(5px) !important;
}

.select-label-nowrap .super-select--option-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root {
  --icon-fill: transparent;
  --icon-fill-opacity: 0;
}

#sidebar-more .menu form.button_to {
  width: 100%;
}

#sidebar-more .menu a,
#sidebar-more .menu button {
  display: flex;
  width: 100%;
  flex-grow: 1;
  cursor: pointer;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  text-decoration-line: none;
}

#sidebar-more .menu a:hover,
#sidebar-more .menu button:hover {
  background-color: var(--background-base);
  text-decoration-line: none;
}

#sidebar-more .menu a:focus,
#sidebar-more .menu button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Sidebar toggle (drawer) icon. The drawer SVG is an outlined panel + a stroked
   vertical line (its second path). One icon, two states — we animate the LINE:
     - Expanded (no state class): the SVG as authored — a SHORT line on the LEFT
       (the "drawer open" look).
     - Collapsed / peek: the line slides right + grows to full height (the "open
       sidebar" look).
   Values are SVG user units (viewBox 0 0 24 24). The authored line spans y 7.5–16.5
   (length 9), centred at (6.757, 12); the target is x 9.088, y 3.75–20.243 (length
   ~16.5). So translateX 2.331 = the x shift and scaleY 1.833 = 16.5/9, grown about the
   line's OWN centre (transform-box: fill-box). The transition animates it on click. */

.drawer-toggle-icon path:last-of-type {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-box: fill-box;
  transform-origin: center;
}

.sidebar-collapsed .drawer-toggle-icon path:last-of-type,
.sidebar-peeking .drawer-toggle-icon path:last-of-type {
  transform: translateX(2.331px) scaleY(1.833);
}

/* Menu rows fill the sidebar width. Most items already carry `w-full` in their
   own class; this also covers `button_to` form wrappers (which Rails renders
   without a width class) and dialog/popover rows that don't set their own.
   Intentionally NOT `!important` so individual buttons can opt out below with a
   higher-specificity selector — no `!important` arms race. */

#menu-wrapper a,
#menu-wrapper button,
#menu-wrapper form.button_to {
  width: 100%;
}

/* Icon buttons (dialog close, etc.) size to their content instead of stretching
   to the full menu width. `#menu-wrapper .x` (1,1,0) outranks the element rule
   above (1,0,1), so plain `width: auto` wins — no `!important`. The bottom
   account pill is intentionally NOT listed here: in the expanded nav it now
   spans the full width (the gift shortcut moved to the collapsed view only). */

#menu-wrapper .button-icon {
  width: auto;
}

/* Expanded nav-item icons are 24px (per Figma). The collapsed state bumps them
     back to 28px below, where they're the only content in a 48px tab. */

#menu-wrapper .item .icon {
  display: none;
}

.date-range-calendar .flatpickr-day#menu-wrapper .item .icon {
  display: block;
  visibility: hidden;
}

@media (min-width: 1024px) {
  #menu-wrapper .item .icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
  }
}

#menu-wrapper .item .icon img {
  width: 1.5rem;
  height: 1.5rem;
}

#menu-wrapper .item .icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Every collapsed nav tab is a fixed 44×44 box with centered content (matching
       the expanded item height: p-2.5 + 24px icon), so a larger inner element
       (e.g. the 32px account avatar) can't change the tab's footprint. Padding is
       dropped since the fixed size + centering handles spacing. Icons inherit the
       24px base size — no collapsed override — so they match the expanded view. */

@media (min-width: 1024px) {
  .sidebar-collapsed #menu-wrapper .item {
    width: 2.75rem;
    height: 2.75rem;
    max-width: none;
    justify-content: center;
    padding: 0px;
  }

  .sidebar-collapsed #menu-wrapper .item .label {
    margin: 0px;
    max-width: 0px;
    opacity: 0;
  }
}

.sidebar-collapsed #menu-wrapper .item .tooltip {
  /* inline-flex (not inline-block) so the tooltip stays a flex container and
         its `items-center` actually vertically centers the label text. */
}

@media (min-width: 1024px) {
  .sidebar-collapsed #menu-wrapper .item .tooltip {
    display: inline-flex;
  }

  .sidebar-collapsed #menu-wrapper .item .secondary-label {
    display: none;
  }
}

/* Earnings sidebar submenu (OL-4418): the Commissions / Direct sales sub-items collapse under the
   Earnings parent and reveal when the section is active. grid-template-rows 0fr↔1fr animates the
   height so the nav items below slide down to make room. The EXPANDED state is the base style (so the
   sub-items are always shown without depending on JS timing); the keyframe only adds the entrance
   motion when landing on the section. The inner wrapper is min-h-0 overflow-hidden so the row clips. */

.earnings-nav-sub {
  grid-template-rows: 0fr;
}

.earnings-nav-group.expanded .earnings-nav-sub {
  grid-template-rows: 1fr;
  animation: sidebar-submenu-reveal 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sidebar-submenu-reveal {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }

  to {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

/* Subscriptions submenu reveal (OL-3491): the same grid-rows reveal the Earnings group uses, applied
   when you land on an Orders page so the submenu opens with motion. The partial omits this wrapper on
   /subscriptions itself, so drilling into the sub-item doesn't re-play the reveal. The inner child is
   min-h-0 overflow-hidden so it clips through the 0fr→1fr grow. */

.sidebar-subnav-reveal {
  display: grid;
  grid-template-rows: 1fr;
  animation: sidebar-submenu-reveal 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed sidebar (OL-4418): the icon-only rail has no room for the sub-items, so hide them entirely
   and mark the parent Earnings tab as the selected one instead. `.sidebar-collapsed` is present only
   while collapsed AND not peeking (a hover peek drops it — see sidebar_preferences_controller), so on
   peek/expand this rule stops matching: the sub-items reappear with their active row highlighted and the
   parent reverts to its normal inactive state. Gated on .expanded so it only fires while you're actually
   in the Earnings section. */

.sidebar-collapsed .earnings-nav-group.expanded .earnings-nav-sub {
  grid-template-rows: 0fr;
  animation: none;
}

.sidebar-collapsed .earnings-nav-group.expanded .earnings-nav-parent {
  background-color: var(--background-overlay);
  color: var(--content-primary);
}

@keyframes nil-animation {
  0% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

[data-turn-exit],
[data-turn-enter] {
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);
  animation-fill-mode: forwards;
}

/* Dumb - but any elements with data-tun will force the page to wait until the animation is complete */

/* so we need a dummy animation as a fallback case */

html.turn-exit [data-turn-exit],
html.turn-enter [data-turn-enter] {
  animation-name: nil-animation;
  animation-duration: 0.1;
}

html.turn-exit [data-turn-exit="fade-out"] {
  animation-name: fade-out-left;
  animation-duration: 0.25s;
}

html.turn-exit [data-turn-enter="fade-in"] {
  animation-name: fade-out-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit [data-turn-exit] {
  animation-name: fade-out-up;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit.turn-reverse [data-turn-exit] {
  animation-name: fade-in-up;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter [data-turn-enter] {
  animation-name: fade-in-up;
  animation-duration: 0.6s;
}

html.turn-enabled.turn-enter.turn-reverse [data-turn-enter] {
  animation-name: fade-out-up;
  animation-duration: 0.6s;
}

html.turn-enabled.turn-exit [data-turn-exit="left"] {
  animation-name: fade-out-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit.turn-reverse [data-turn-exit="left"],
html.turn-enabled.turn-exit[data-turbo-visit-direction="back"]
  [data-turn-exit="left"] {
  animation-name: fade-out-right;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit [data-turn-exit="right"] {
  animation-name: fade-out-right;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-exit.turn-reverse [data-turn-exit="right"],
html.turn-enabled.turn-exit[data-turbo-visit-direction="forward"]
  [data-turn-exit="right"] {
  animation-name: fade-out-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter [data-turn-enter="left"] {
  animation-name: fade-in-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter.turn-reverse [data-turn-enter="left"],
html.turn-enabled.turn-enter[data-turbo-visit-direction="forward"]
  [data-turn-exit="left"] {
  animation-name: fade-in-right;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter [data-turn-enter="right"] {
  animation-name: fade-in-right;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-enter.turn-reverse [data-turn-enter="right"],
html.turn-enabled.turn-enter[data-turbo-visit-direction="back"]
  [data-turn-enter="right"] {
  animation-name: fade-in-left;
  animation-duration: 0.25s;
}

html.turn-enabled.turn-before-exit [data-turn-exit],
html.turn-enabled.turn-exit [data-turn-exit] {
  will-change: transform, opacity;
}

@keyframes fade-out-up {
  0% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -2rem, 0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fade-out-left {
  0% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(-20rem, 0, 0);
  }
}

@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(20rem, 0, 0);
  }
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translate3d(20rem, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translate3d(-20rem, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

/* The global text-link reset `a { no-underline; hover:no-underline }` in
   application.css is UNLAYERED, so by cascade-layer precedence it beats the
   .link-* underline declared inside @layer components above — regardless of
   specificity — and the line silently never renders on an <a>. Re-assert it
   here, also unlayered, so specificity decides instead: `a.link-*` (0,1,1)
   clears the global `a` (0,0,1) at rest, and `a.link-*:hover` (0,2,1) clears
   the global `a:hover` (0,1,1) so the underline persists on hover. This is the
   load-bearing rule that makes the canonical text link actually paint on links. */

a.link-base,
a.link-medium,
a.link-large,
a.link-base:hover,
a.link-medium:hover,
a.link-large:hover {
  text-decoration-line: underline;
}

/* Main-nav popover variant.
   Applied to the dropdown surface via `menu_class:` on themes/atelier/dropdown,
   and to the cascading "Learn more" sub-popover (a nested dropdown). Overrides
   the default popover's border + width/spacing so the global nav menu can
   match its own spec without affecting the base popover.

   Note: no `overflow-hidden` on the surface — cascading submenus need to extend
   beyond the parent's bounding box. Inner items have their own padding so
   they don't visually reach the rounded corners. */

.main-nav-popover {
  max-width: 320px;
  border-width: 0px;
}

.main-nav-popover [data-behavior="menu-items"] {
  gap: 0px;
  min-width: 0;
}

/* Items inside the main-nav popover read at full primary color (not dimmed
   like the sidebar nav rows), use the spec's tighter vertical padding, and
   target the 36px row min-height from Figma. */

.main-nav-popover [data-desktop-menu-target="menuItemLink"] {
  min-height: 2.25rem;
  gap: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  color: var(--content-primary);
}

/* Icon-only buttons (back arrow, swap teams) need to stay square — `#menu-wrapper
   a, button, form.button_to { width: 100% !important }` would otherwise stretch
   them full-width. We re-scope under `#menu-wrapper` to beat the id-selector
   specificity. */

#menu-wrapper .main-nav-popover button.popover-icon-button {
  width: 2rem !important;
}

/* Flat variant — no resting elevation and no selected inset ring, for radio-cards
   dropped into a denser form where the default emphasis would compete with the other
   inputs. Selection still reads via the border-color + fill change. Callers also omit
   the `shadow-sm` markup utility so the resting state is flat too. Kept OUTSIDE the
   @layer so it's never purged (its only caller lives in a `.erb`, not `.html.erb`,
   partial that Tailwind's content scan misses) and so it outranks the layered base ring. */

.radio-card--flat:has(input:checked),
.radio-card--flat:has(input:focus-visible) {
  box-shadow: none;
}

/* Compact layout — stacks the icon above the label in a centered column and drops the
   label to text-sm, so the cards can sit side-by-side in a row instead of stacked.
   column-reverse keeps the standard markup order (label then icon) but renders the icon
   on top. Targets the text span (the only direct <span> child; the icon is an <svg>).
   Outside @layer for the same reason as --flat. */

.radio-card--compact {
  flex-direction: column-reverse;
  justify-content: center;
  padding: 16px;
}

.radio-card--compact > span {
  flex: none;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
}

.conversation-input-shadow {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0),
    0px 9px 9px 0px rgba(0, 0, 0, 0.01), 0px 2px 5px 0px rgba(0, 0, 0, 0.06);
}

.message {
  /* why were we doing this? */
  /* @apply !break-all; */
}

.message .bg-brand-primary-brew .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.tool_call {
  /* display: none; */
}

/* Show any .tool_call that is not immediately followed by another .tool_call */

.tool_call:not(:has(+ .tool_call)) {
  /* display: block; */
}

.swiper-slide-thumb-active {
  border-color: var(--content-primary);
}

/* Marketplace listing media gallery — Swiper + mux-player native chrome.
   See app/views/public/offers/partials/_gallery.html.erb +
   app/javascript/controllers/gallery_controller.js. Swiper owns the slider
   layout, transitions, and a11y; this file is the OfferLab-specific surface
   on top of that — the 4% media overlay on image slides, the rounded slide
   container, the thumb rail's responsive scroll-snap rail, edge-bleed on the
   mobile strip, and a couple of mux-player CSS-variable overrides so its
   native chrome matches the listing palette. */

[data-controller~="gallery"] {
  --gallery-radius: 24px;
}

.gallery-container {
  max-width: 667px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* No `gap` here: the lightbox <dialog>'s wrapper is a zero-height flex child, so
     a column gap would render as dead space BELOW the strip (most visible on mobile,
     where the thumbnail rail is hidden). The only real spacing — main ↔ desktop
     thumbnail rail — lives on .thumbnail-nav-wrapper instead. */
}

/* ──────────────────────────────────────────────────────────────────────────
   Main slider — Swiper-driven.
   ──────────────────────────────────────────────────────────────────────── */

.gallery-main {
  width: 100%;
  /* Fixed 5:4 viewport drives the slide height from the column width so the
     gallery scales with the layout. Desktop fade-effect needs the wrapper to
     have a deterministic height; mobile's free-mode strip just respects its
     slides' intrinsic dimensions inside the same box. */
  aspect-ratio: 5 / 4;
}

.gallery-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Image slide. The button wrap centers the image, hosts the 4% media overlay,
   and is the click target the controller wires to `gallery#openLightbox`. */

.gallery-slide .image-slide-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  border-radius: var(--gallery-radius);
  overflow: hidden;
}

.gallery-slide .image-slide-wrap img {
  /* Inline gallery images COVER the 5:4 slide (crop non-5:4 sources) for a
     stable landscape shape, matching the original design. The fullscreen
     lightbox keeps `contain` (see .lightbox-slide img) so the full uncropped
     image is viewable there. */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Video slide (inline gallery). The inline player is a muted autoplay-loop
   TEASER: mux's native chrome is hidden (`--controls: none`) and the custom
   `.gallery-play-overlay` "Play" pill sits on top. It cover-fills a uniform 5:4
   box (matching the image slides — fixed height, no black bars). Tapping the pill
   opens the lightbox and autoplays the video there (gallery_controller.js). */

.gallery-slide .video-slide-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--gallery-radius);
  overflow: hidden;
}

.gallery-slide .video-slide-wrap mux-player {
  width: 100%;
  height: 100%;
  --media-object-fit: cover;
  --media-object-position: center;
  --controls: none;
  --media-primary-color: var(--content-primary, #342e26);
  --media-secondary-color: rgba(255, 255, 255, 0.7);
}

/* Custom "Play" pill overlay on video slides (restored from the pre-Swiper
   gallery): a glass surface (translucent white + 16px blur) with a play glyph +
   "Play" label, centered; the whole overlay is the click target wired to
   gallery#playVideoFullscreen. */

.gallery-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.gallery-play-overlay .play-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid var(--background-elevated, #fffdf9);
  border-radius: var(--rounded-full, 9999px);
  color: var(--background-elevated, #fffdf9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.gallery-play-overlay:hover .play-icon {
  transform: scale(1.06);
}

.gallery-play-overlay svg {
  width: 16px;
  height: 16px;
  fill: var(--background-elevated, #fffdf9);
}

.gallery-play-overlay .play-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--background-elevated, #fffdf9);
}

/* Icon-only variant — the lightbox CENTER play button. Same glass surface as the
   inline pill, but a CIRCLE with no label, centered over the video (not a full-cover
   target, so mux's bottom controls + tap-to-pause still work). Shown only while the
   video is paused; hidden once it plays (the controller toggles `.is-playing` on the
   wrap). Replaces mux's own center play button (hidden via --center-play-button). */

.gallery-play-overlay-icon {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}

.gallery-play-overlay-icon .play-icon {
  /* Fixed circle: 48px on mobile, 56px on desktop (below). */
  width: 48px;
  height: 48px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

.gallery-play-overlay-icon svg {
  width: 20px;
  height: 20px;
}

/* Smooth scale-up on hover (the .play-icon already transitions transform/ease). */

.gallery-play-overlay-icon:hover .play-icon {
  transform: scale(1.1);
}

.video-slide-wrap.is-playing .gallery-play-overlay-icon {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .gallery-play-overlay-icon .play-icon {
    width: 56px;
    height: 56px;
  }

  .gallery-play-overlay-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile: native CSS scroll-snap strip (NO Swiper on this breakpoint — see
   gallery_controller.js). The `.swiper` container becomes the horizontal
   scroller and `.swiper-wrapper` its flex track. Native scrolling is the only
   thing that reliably pans over the inline <mux-player> on iOS Safari, where the
   JS drag (Swiper free-mode) got swallowed by the player / touch-action gating.
   Edge-bleeds past the page gutter so media scrolls off both screen edges.
   Mirrors the pricing-payout carousel pattern.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .gallery-container {
    max-width: none;
    padding: 0;
  }

  .gallery-main.swiper {
    /* Override Swiper's bundled `overflow: hidden` — this is a real scroller now. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Edge-bleed (mirrors the shared `.edge-bleed` utility): negative margins
       bleed past the page gutter, equal padding keeps the first slide at the
       content edge, and scroll-padding snaps it back to that edge — so media
       scrolls off both screen edges while slide 1 still starts inset. */
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
    /* Track height follows the slides; drop the desktop 5:4 box. */
    aspect-ratio: auto;
  }

  .gallery-main.swiper::-webkit-scrollbar {
    display: none;
  }

  .gallery-main .swiper-wrapper {
    /* Native flex track; the gap replaces Swiper's spaceBetween. */
    display: flex;
    gap: 10px;
  }

  .gallery-main .swiper-slide {
    /* One medium per view with a peek of the next. (Swiper's auto-width free-mode
       left image slides at 0px, so the strip had nothing to scroll.) snap-align
       pins each slide on release. */
    flex: 0 0 calc(100vw - 48px);
    width: calc(100vw - 48px);
    scroll-snap-align: start;
  }

  .gallery-slide .image-slide-wrap {
    /* Uniform 5:4 across the strip so scrolling between media doesn't change the
       gallery height (the video slide is already 5:4 cover via its base rule). */
    aspect-ratio: 5 / 4;
    height: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Thumbnail rail — desktop only.
   ──────────────────────────────────────────────────────────────────────── */

.thumbnail-nav-wrapper {
  display: none;
}

@media (min-width: 1024px) {
  .thumbnail-nav-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* Spacing from the main slider (was the container's flex `gap`). */
    margin-top: 16px;
  }

  .thumbnail-swiper {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Size the chevron glyphs down to 16px (override .button-large's 20px svg) — they
     read optically larger than desired in these buttons. Matches the lightbox arrows. */

  .nav-controls .button-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
}

.thumbnail-slide {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  /* Swiper's `watchSlidesProgress` adds `.swiper-slide-thumb-active` to the
     thumb whose main slide is in view — outline it so the active thumb reads
     against the rail without taking layout space (no border shift). */
  outline: 0 solid transparent;
  outline-offset: -2px;
  transition: outline-color 150ms ease;
}

.thumbnail-slide.swiper-slide-thumb-active {
  outline: 2px solid var(--content-primary, #342e26);
}

.thumbnail-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────────
   Lightbox — uses the shared/dialog component for chrome.
   The dialog itself supplies the modal/sheet behavior; this file just sizes
   the inner Swiper so images letterbox cleanly and videos take the full
   visible area.
   ──────────────────────────────────────────────────────────────────────── */

.lightbox-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.lightbox-stage {
  /* NOT position:relative — the nav controls anchor to `.lightbox-layout` (which
     fills the card) so they sit 24px from the CARD edges, not 24px inside the
     padding-inset stage. */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* The lightbox dialog is the surface behind the media (everything inside it is
   transparent). On MOBILE, video slides show on a DARK (content-primary) background
   (images stay light) and the swap animates as the user swipes between them. DESKTOP
   stays light throughout. The controller toggles `.lightbox-showing-video` per active
   slide (gallery_controller.js). */

[data-gallery-target="lightbox"] {
  transition: background-color 0.3s ease;
}

@media (max-width: 1023px) {
  [data-gallery-target="lightbox"].lightbox-showing-video {
    background-color: var(--content-primary, #342e26);
  }

  /* Close button flips to the on-dark (inverse) treatment over the dark video bg:
     white icon on a translucent-white fill (mirrors .button-icon-inverse). It
     transitions via the button's own `transition`. */

  [data-gallery-target="lightbox"].lightbox-showing-video .button-icon {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
  }

  [data-gallery-target="lightbox"].lightbox-showing-video .button-icon:hover {
    background-color: rgba(255, 255, 255, 0.16);
  }
}

.lightbox-main {
  width: 100%;
  height: 100%;
  min-height: 60vh;
}

/* Swiper's base CSS sets overflow:hidden on .swiper, which clips the active slide image's
   drop shadow (.lightbox-slide img carries shadow-lg). The slides are object-fit:contain and
   centered, so neighbouring images stay off-screen even without the clip — only the active
   image's shadow spills into view. The combined .lightbox-main.swiper selector outranks
   Swiper's bare .swiper. */

.lightbox-main.swiper {
  overflow: visible;
}

.lightbox-main .lightbox-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
}

/* Lightbox image: mirrors the video wrap — sized to the image's SOURCE aspect ratio
   (set inline by the controller from the loaded image's natural dimensions; the blob
   metadata isn't populated) and centered + fit within the padded slide via
   absolute + inset + margin:auto. The wrapper owns the rounding/overflow-clip so the
   media overlay matches the image EXACTLY — without this the overlay extends past a
   non-slide-aspect image (e.g. a square) onto the surrounding letterbox. */

.lightbox-slide .lightbox-image-wrap {
  position: absolute;
  inset: 24px;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--gallery-radius, 24px);
  overflow: hidden;
}

.lightbox-slide .lightbox-image-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Lightbox video: a wrap (so the custom Play button can overlay it) sized + centered
   to the asset's SOURCE aspect ratio (inline `aspect-ratio` style from the ERB; 16/9
   fallback). DESKTOP keeps the image treatment — 80px inset + rounded. MOBILE goes
   FULL-BLEED (no inset, no radius — see the max-width block below) on the dark video
   background. Absolute + inset + margin:auto is the reliable "fit at aspect ratio"
   centering — a plain aspect-ratio flex item collapses to min-content. */

.lightbox-slide .video-slide-wrap {
  position: absolute;
  inset: 24px;
  margin: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--gallery-radius, 24px);
  overflow: hidden;
}

.lightbox-slide mux-player {
  /* Fill the (source-aspect) wrap; cover is an exact fill with no letterbox, and
     the wrap's overflow:hidden rounds the corners. */
  width: 100%;
  height: 100%;
  --media-object-fit: cover;
  /* Minimal, all-WHITE control theme (no color). Non-essential controls are
     dropped, leaving play/pause, scrubber, time, volume + fullscreen. mux's own
     center (paused-state) play button is hidden — our custom glass circle
     (.gallery-play-overlay) overlays it. */
  --media-primary-color: #fff;
  --media-secondary-color: rgba(255, 255, 255, 0.16);
  --media-accent-color: #fff;
  --center-play-button: none;
  --airplay-button: none;
  --cast-button: none;
  --pip-button: none;
  --captions-button: none;
  --captions-menu-button: none;
  --playback-rate-button: none;
  --audio-track-menu-button: none;
  --rendition-menu-button: none;
  --seek-backward-button: none;
  --seek-forward-button: none;
}

/* When the user takes the lightbox video to actual (browser) fullscreen via mux's
   fullscreen button, show the whole frame (contain) rather than the cover crop. */

.lightbox-slide mux-player:fullscreen {
  --media-object-fit: contain;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile lightbox = native CSS scroll-snap (NO Swiper — see gallery_controller.js),
   same reason as the inline strip: native scroll is the only thing that reliably
   pans over a <mux-player> on iOS Safari. Each slide is one full-screen medium.
   Desktop keeps the Swiper (thumbnail rail + prev/next pagination, below).
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .lightbox-main.swiper {
    /* Override Swiper's bundled `overflow: hidden` — this is a real scroller now. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .lightbox-main.swiper::-webkit-scrollbar {
    display: none;
  }

  .lightbox-main .swiper-wrapper {
    display: flex;
  }

  .lightbox-main .lightbox-slide {
    /* One full-viewport medium per view (the mobile lightbox is full-bleed). */
    flex: 0 0 100vw;
    width: 100vw;
    scroll-snap-align: center;
  }

  /* Mobile video is FULL-BLEED (no inset) with NO rounding — unlike images, which
     keep their inset + rounded corners — sitting on the dark video background. */

  .lightbox-slide .video-slide-wrap {
    inset: 0;
    border-radius: 0;
  }
}

/* Thumbnail rail + nav arrows are desktop-only (mobile swipes the strip). */

.lightbox-thumbs,
.lightbox-nav-controls {
  display: none;
}

@media (min-width: 1024px) {
  .lightbox-layout {
    position: relative;
    flex-direction: row;
    gap: 16px;
    padding: 12px;
  }

  .lightbox-main .lightbox-slide {
    /* Generous breathing room around the media (matches the original lightbox);
       the image is rounded via the base .lightbox-slide img rule. */
    padding: 80px;
  }

  /* Image + video wraps are absolutely positioned, so they can't use the slide's
     padding — match it with `inset` for the desktop breathing room. */

  .lightbox-slide .video-slide-wrap,
  .lightbox-slide .lightbox-image-wrap {
    inset: 80px;
  }

  /* Vertical thumbnail rail (left), vertically CENTERED in the column (Swiper's
     wrapper is content-height; justify-content centers it when the thumbs don't
     fill the column, and it scrolls via free-mode when they overflow). The Swiper
     runs `direction: vertical`; each thumb outlines when its main slide is active. */

  .lightbox-thumbs {
    display: block;
    /* 48px thumb + 8px padding-x each side = 64px column. */
    flex: 0 0 64px;
    width: 64px;
    height: 100%;
    padding: 4px 8px;
  }

  /* Center the thumbs vertically without touching the .swiper container's display
     (a flex .swiper breaks Swiper's slide click/positioning): the wrapper fills the
     column height and centers its slides; it scrolls via free-mode when they overflow. */

  .lightbox-thumbs .swiper-wrapper {
    min-height: 100%;
    justify-content: center;
  }

  .lightbox-thumbs .swiper-slide {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    outline: 0 solid transparent;
    outline-offset: -2px;
    transition: opacity 150ms ease, outline-color 150ms ease;
  }

  .lightbox-thumbs .swiper-slide:hover {
    opacity: 1;
  }

  .lightbox-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid var(--content-primary, #342e26);
  }

  .lightbox-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }

  /* Prev/next overlaid bottom-right of the image stage; 16px glyph to match the
     inline gallery arrows. */

  .lightbox-nav-controls {
    display: flex;
    gap: 8px;
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 5;
  }

  .lightbox-nav-controls .button-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ── Assets-view lightbox — vertical LEFT thumbnail rail (desktop) ─────────────
   Reuses the gallery controller, but the rail is responsive: a centred horizontal strip under the
   image on mobile (the max-width rules further down), a vertical rail on the LEFT here on desktop
   (gallery_controller flips the Swiper direction at the 1024 breakpoint via lightboxThumbsResponsive).
   Laid out as a grid so the toolbar spans the top while the rail + stage share the row beneath. Keyed
   off `.lightbox-layout--bottom-thumbs`, so the listing's `.lightbox-layout` is untouched. */

@media (min-width: 1024px) {
  .lightbox-layout--bottom-thumbs {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* rail | stage */
    grid-template-rows: auto minmax(0, 1fr);
    /* toolbar | content */
    grid-template-areas:
      "toolbar toolbar"
      "thumbs  stage";
    gap: 0;
  }

  .lightbox-layout--bottom-thumbs > .lightbox-toolbar {
    grid-area: toolbar;
  }

  /* Stage fills the space to the right of the rail. min-height:0 drops the shared 60vh floor so it's
     exactly the leftover height. The slide can be wider than the media (it sizes to the slide, so
     future non-1:1 ratios letterbox cleanly) — which is why the actions live in fixed chrome.
     overflow:hidden CONTAINS the swiper here: .lightbox-main runs overflow:visible (so the active
     image's shadow isn't clipped), but that also lets the OFF-SCREEN neighbour slides — full-width
     divs — overhang LEFT across the thumbnail rail beside the stage and swallow every click (after a
     navigation the whole rail went dead, "stuck until I close"). Clipping at the stage edge stops
     that: the active image sits ~48px inside the stage so its shadow is untouched, and slides now
     slide in cleanly at the stage boundary instead of tracking over the rail mid-transition. */

  .lightbox-layout--bottom-thumbs .lightbox-stage {
    grid-area: stage;
    padding: 24px;
    min-height: 0;
    overflow: hidden;
  }

  .lightbox-layout--bottom-thumbs .lightbox-main {
    min-height: 0;
  }

  /* Generated images fill the stage height at their (square) source aspect — height:100% drives the
     fill, width:auto hugs the box so the radius + shadow stay on the image (not a letterbox). */

  .lightbox-layout--bottom-thumbs .lightbox-slide img {
    height: 100%;
    width: auto;
    max-width: 100%;
  }

  /* Left rail — 12px L/R inset, no vertical padding, fills the row height. The Swiper runs vertical
     free-mode here, so a long set scrolls (drag / wheel / auto-scroll to the active thumb); the
     mask-fade-y gradient (28px) dissolves the thumbnails at the top + bottom edges instead of clipping. */

  .lightbox-layout--bottom-thumbs .lightbox-thumb-row {
    grid-area: thumbs;
    height: 100%;
    min-height: 0;
    padding: 0 12px;
    display: block;
  }

  .lightbox-layout--bottom-thumbs .lightbox-thumbs {
    width: 60px;
    height: 100%;
    min-height: 0;
    padding: 0;
    -webkit-mask-image: linear-gradient(transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
  }

  /* 24px scroll inset (the "py" of the rail): the wrapper carries it so the first/last thumb sits clear of
     the 28px fade mask at rest, while the mask still fades thumbs that scroll past. Counterbalances the
     mask spread so the rail doesn't look pre-faded when everything fits.
     box-sizing:border-box is load-bearing: Swiper's own `.swiper-wrapper { height: 100% }` is content-box
     by default, so this 48px of vertical padding was ADDED on top of the 100% column height — the wrapper
     came out taller than its container (826 vs 778px), which made Swiper treat a set that fits as
     overflowing: it freeMode-scrolled + translated the thumbs down (anchored to flex-end, last thumb cut
     off) and never settled (a ResizeObserver feedback loop). Folding the padding INTO the 100% height
     keeps the wrapper exactly column-height, so the inherited `justify-content: center` (from the base
     .lightbox-thumbs rule) centres a short set and free-mode only engages once the thumbs truly overflow. */

  .lightbox-layout--bottom-thumbs .lightbox-thumbs .swiper-wrapper {
    box-sizing: border-box;
    padding-block: 24px;
  }

  /* 60px thumbnails (vs the listing's 48px rail). */

  .lightbox-layout--bottom-thumbs .lightbox-thumbs .swiper-slide {
    width: 60px !important;
    height: 60px !important;
  }
}

/* Mobile bundle lightbox — a full-bleed viewer. Bottom-up the overlay stack is: the AI-actions row
   (pinned to the bottom edge), then the thumbnail strip just above it, both over the edge-to-edge image
   (the listing's vertical rail and the desktop bottom strip are both lg-gated above). The thumb Swiper
   (horizontal + centerInsufficientSlides) centers a short set and scrolls a long one; tapping a thumb
   jumps to that image (Swiper Thumbs module). */

@media (max-width: 1023px) {
  /* The swiper fills the ENTIRE viewer (absolute inset-0 = 100vw x 100vh of the full-sheet dialog), so the
     image centers in the WHOLE screen instead of the leftover space below the header — which made it sit
     low. z-index:0 keeps it above the layout's white background but below the chrome: the header (made
     relative + z-10 in the markup) and the thumbnail strip (z-5) float over it. The actions row is
     position:fixed (below) so it stays anchored to the viewport bottom rather than to the now-positioned
     header. The image is square + shorter than the screen, so it clears the overlays. */

  .lightbox-layout--bottom-thumbs .lightbox-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* Sits above the AI-actions row (72px: chip 48px + 24px bottom padding); bottom:96px keeps the strip clear above it. */

  .lightbox-layout--bottom-thumbs .lightbox-thumb-row {
    position: absolute;
    bottom: 96px;
    left: 0;
    right: 0;
    z-index: 5;
  }

  .lightbox-layout--bottom-thumbs .lightbox-thumbs {
    display: block;
    width: 100%;
    padding: 0 16px;
  }

  .lightbox-layout--bottom-thumbs .lightbox-thumbs .swiper-slide {
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    outline: 0 solid transparent;
    outline-offset: -2px;
    transition: opacity 150ms ease, outline-color 150ms ease;
  }

  .lightbox-layout--bottom-thumbs .lightbox-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid var(--content-primary, #342e26);
  }

  .lightbox-layout--bottom-thumbs .lightbox-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }

  /* AI actions row — relocated out of the header (markup wraps the chips in .lightbox-ai-actions) to a
     full-width row pinned to the bottom edge of the viewer, below the thumbnails. 16px L/R + 24px bottom,
     no top pad (chips are bottom-anchored by the padding, so the top is dead space); the two chips split
     the width 50/50 (each chip max-lg:flex-1) with the 6px gap, each elevated with a small shadow. */

  .lightbox-layout--bottom-thumbs .lightbox-ai-actions {
    /* fixed, not absolute: it lives inside the toolbar markup, which is now relative (to overlay the
       full-viewport swiper). Absolute would anchor it to that header; fixed pins it to the viewport bottom. */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    gap: 6px;
    padding: 0 16px 24px;
  }

  /* Full-bleed image — edge to edge, sized to the source aspect (width 100%, height auto); the rounding
     and shadow are lg-only in the markup. Drop the slide's horizontal padding so the image reaches both
     edges (vertical padding stays as breathing room for the centered, shorter-than-stage square). */

  .lightbox-layout--bottom-thumbs .lightbox-main .lightbox-slide {
    padding-left: 0;
    padding-right: 0;
  }

  .lightbox-layout--bottom-thumbs .lightbox-slide img {
    width: 100%;
    height: auto;
  }

  /* The generating shimmer mirrors the full-bleed image it stands in for: full width + 1:1 (a
     width-driven square), NOT the base rule's stage-height square — which on mobile fills the whole
     viewer height. No rounding, to match the edge-to-edge image. */

  .lightbox-layout--bottom-thumbs .lightbox-slide .lightbox-shimmer {
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
  }
}

/* Chevron glyphs read visually larger than other icons, so the lightbox pagination arrows
   trim to 14px (vs the md icon default of 20px). Higher specificity than
   `.button-icon.button-medium svg`, so it wins as an isolated override without touching the
   global md icon size. */

.button-icon.button-medium.lightbox-pagination svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── Create-variations / aspect-ratio generation state ───────────────────────────────────
   While images regenerate, the AI chips are replaced by a "Generating" chip whose leading
   element is the publish-flow stop spinner (publish_flow.css), INVERTED + shrunk to sit in a
   chip: on the light toolbar the circle is content-primary and the stop square + the rotating
   comet are white. Clicking the chip stops the run. */

.gen-spinner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--content-primary, #342e26);
  color: #fff;
}

.gen-spinner::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  /* White conic comet (transparent → white → transparent) masked to a ~2px ring band. */
  background: conic-gradient(from 0deg, transparent 0deg, #fff 270deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: genSpinnerSpin 1s linear infinite;
}

.gen-spinner__square {
  position: relative;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
}

@keyframes genSpinnerSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gen-spinner::before {
    animation: none;
  }
}

/* Generating placeholders: the .media-shimmer green-blur loader (animations.css) needs a
   sized, positioned, clipped host. Main slide → a rounded square that fills the stage height
   (matches the 1:1 image it stands in for); thumb → fills the 60px thumb. */

.lightbox-slide .lightbox-shimmer {
  position: relative;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  border-radius: var(--rounded-radius-28, 28px);
  overflow: hidden;
}

.lightbox-thumbs .swiper-slide .thumb-shimmer {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

/* The active-thumb selection ring lives on .swiper-slide (an inset outline), but the absolutely-
   positioned .media-shimmer loader paints OVER it on a generating slot, so the focused one
   wouldn't read as selected. Re-draw the ring as a pseudo-element layered above the shimmer —
   matching the 2px content-primary outline the real thumbnails show. */

.lightbox-thumbs .swiper-slide-thumb-active .thumb-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--content-primary, #342e26);
  pointer-events: none;
}

/* Bundle builder — drag-to-reorder (dragula) polish.

   Dragula's defaults leave a dimmed 0.2-opacity copy of the card at the drop slot
   (.gu-transit) and drag a 0.8-opacity clone (.gu-mirror). For the bundle reorder we
   want neither ghost: the placeholder is invisible (its empty slot still reserves the
   drop gap) and the actively-dragged card stays solid, lifted with a medium shadow.
   Scoped to .bundle-reorder-item (carried by both the transit element and the mirror
   clone) so every other sortable list keeps dragula's defaults. */

.bundle-reorder-item.gu-transit {
  opacity: 0;
}

/* Design-form accordion cards: a collapsed card reads as a pill (rounded-full), expanded keeps its
   radius-28 corners. The radius is SNAPPED, not tweened — tweening it showed the pill radius while
   the card was tall (huge ~200px corners morphing in), which looked broken. Instead:
     • expand  → corners drop to 28px instantly, before the height starts growing;
     • collapse → corners hold at 28px through the 0.3s height animation (matching .accordion-smooth)
                  and only snap to the pill once the card is short.
   On a short (~pill-height) card 28px and 9999px render almost identically, so the snap is invisible
   — the pill radius only ever exists while the card is short, never while it's tall. Scoped to the
   design accordion (.accordion-item is shared, and the form's .erb is outside the Tailwind scan). */

.bundle-design-accordion > details {
  /* overflow:hidden clips the summary's hover wash (below) to the rounded / collapsed-pill corners.
     Safe: the only thing that needs to escape the card — the color-picker popover — is position:fixed. */
  overflow: hidden;
  transition: border-radius 0s;
}

.bundle-design-accordion > details:not([open]) {
  border-radius: 9999px;
  transition: border-radius 0s 0.3s;
}

/* Header hover: a subtle --background-light wash on the clickable summary. */

.bundle-design-accordion > details > summary {
  transition: background-color 0.15s ease;
}

.bundle-design-accordion > details > summary:hover {
  background-color: var(--background-light);
}

.bundle-reorder-item.gu-mirror {
  opacity: 1;
}

/* The offer card is the reorder item's first child — while it's the one being dragged it
   lifts to a modal shadow and becomes a frosted-glass tile: a translucent --background-screen
   fill over a 16px backdrop blur, so the dot-grid canvas and the cards beneath show through
   softly. (Higher specificity than the card's resting bg-background-elevated / hover fill.) */

.bundle-reorder-item.gu-mirror > div:first-child {
  --tw-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
  --tw-shadow-colored: 0px 4px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background: var(--background-screen, rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(16px);
}

/* Mobile: the dragged tile stays scaled up (1.1) — continuing the press-and-hold arm below — so the
   card reads as lifted off the page while it moves, then eases back to 1 on drop via the card's own
   .transition. Desktop drags straight from the handle at 1:1 (no press-and-hold), so it's not scaled. */

@media (max-width: 1023px) {
  .bundle-reorder-item.gu-mirror > div:first-child {
    transform: scale(1.1);
  }
}

/* Press-and-hold arm (mobile): once the ~300ms hold registers, bundle_sortable_controller adds
   .drag-armed and the card lifts slightly before the drag begins — cueing that the hold took. The
   actual drag then swaps to the .gu-mirror frosted tile above. Desktop never arms (it drags
   straight from the .reorder-handle column), so this only ever shows on touch. */

.bundle-reorder-item.drag-armed > div:first-child {
  transform: scale(1.1);
  box-shadow: 0 10px 28px rgba(52, 46, 38, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Popover layering. Each card carries z-[1] (for the undercard nesting), which makes it its
   own stacking context and traps its ⋯ menu beneath the next card. dropdown#show adds .active
   to its wrapper while open, so lift the whole item above its siblings then — the popover sits
   over all surrounding cards.
   The lift must also survive the EXIT: dropdown#hide strips .active synchronously at the START of
   the close, but the popover stays visible for the ~0.2s exit animation. Without the second selector
   the card snapped back to z-[1] the instant you clicked away, dropping the still-fading popover under
   the next card before it finished animating out. The menu carries .animation-dropdown-exit for
   exactly that window, so match it too — holding the lift until the popover is fully hidden, then
   releasing. (Matching .active / the exit class rather than the menu's :not(.hidden) avoids a cssnano
   :has(:not()) rewrite bug.) */

.bundle-reorder-item:has([data-controller~="dropdown"].active),
.bundle-reorder-item:has([data-dropdown-target="menu"].animation-dropdown-exit) {
  z-index: 30;
}

/* Design-tab Layout control: the card fill + border colors only apply to the Card layout, so
   the Minimal radio-card (transparent + borderless + flush) hides that whole color group. */

.bundle-style-group:has(input[value="minimal"]:checked) .bundle-frame-colors {
  display: none;
}

/* Heading section: the title text field only applies when the heading is shown, so it's hidden
   when the Show-heading switch is off. The switch is the group's only checkbox. */

.bundle-header-group:not(:has(input[type="checkbox"]:checked)) .bundle-header-text {
  display: none;
}

/* Checkbox section: the Enable-checkboxes switch gates the helper copy and the detail
   controls (colors + shape). The switch is the section's only checkbox — the shape selector
   uses radios — so :has keys off the checked checkbox. */

.checkbox-toggle-group:has(input[type="checkbox"]:checked) .checkbox-desc-off {
  display: none;
}

.checkbox-toggle-group:not(:has(input[type="checkbox"]:checked)) .checkbox-desc-on {
  display: none;
}

.checkbox-toggle-group:not(:has(input[type="checkbox"]:checked)) .checkbox-detail {
  display: none;
}

/* Edit-tab header row (bundle name + status) collapses smoothly on non-Edit tabs instead of toggling
   display:none, so the canvas sheet eases up to reclaim the height rather than jumping. The
   grid-template-rows 1fr→0fr tween animates the height (the modern smooth-height technique); the inner
   child clips (overflow:hidden + min-height:0) so 0fr fully collapses, and opacity fades it out.
   data-collapsed is server-rendered for non-Edit views on load and toggled by builder-bottom-bar on tab
   change. <lg only — the row is lg:hidden on desktop. */

@media (max-width: 1023px) {
  [data-builder-edit-header] {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }

  [data-builder-edit-header] > * {
    overflow: hidden;
    min-height: 0;
  }

  [data-builder-view-value]:not([data-builder-view-value="edit"]) [data-builder-edit-header] {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

/* Mobile builder header (inverse). The header bar goes dark (--content-primary) below lg, so its
   icon buttons (exit / ⋯) and the dark Save/Publish button must flip to on-dark colours. Scoped to
   .builder-header-inverse (layouts/account/stack) so other page-header-toolbars stay light; <lg only,
   since desktop keeps the white floating pill. */

@media (max-width: 1023px) {
  .builder-header-inverse .button-icon {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
  }

  .builder-header-inverse .button-icon:hover,
  .builder-header-inverse .button-icon:active {
    background-color: rgba(255, 255, 255, 0.16) !important;
  }

  /* Save / Publish / Republish (.button-primary-dark) become a white pill with dark text. */

  .builder-header-inverse .button-primary-dark {
    color: var(--content-primary, #342e26) !important;
    background-color: #ffffff !important;
  }

  /* The dropdown-modal sheets (⋯ menu, bundle switcher) are spawned INSIDE this inverse header — the
     dropdown-modal appends the dialog next to its trigger — so the header's own scoped rules leak onto
     the sheet's buttons: the inverse rule above paints them white-on-white (the ⋯ close button literally
     vanished), and `.page-header-toolbar` forces them to a 40px tap target. The sheet is a normal white
     surface, so reset any button-icon inside the dialog to the on-light treatment AND back to the
     size-small (32px / size-8) close box that `shared/dialog` sets for every sheet.
     The Publish popover's nested-sheet is a `.filter-popover-menu` (NOT a <dialog>), so it needs the same
     reset — otherwise its header close X inherits the same white-on-white and vanishes. */

  .builder-header-inverse dialog .button-icon,
  .builder-header-inverse .filter-popover-menu .button-icon {
    color: var(--content-primary, #342e26) !important;
    background-color: var(--background-overlay) !important;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.5rem !important;
  }

  .builder-header-inverse dialog .button-icon:hover,
  .builder-header-inverse dialog .button-icon:active,
  .builder-header-inverse .filter-popover-menu .button-icon:hover,
  .builder-header-inverse .filter-popover-menu .button-icon:active {
    background-color: var(--background-overlay-hover) !important;
  }

  /* Same leak, the sheet's primary CTA (Save / Publish updates / Republish): the toolbar inverse rule
     above repaints .button-primary-dark into a white-on-white pill that vanishes on the light sheet.
     Restore its normal dark fill + crisp text inside the dialog. */

  .builder-header-inverse dialog .button-primary-dark {
    color: var(--brand-primary-crisp, #f3f0e8) !important;
    background-color: var(--brand-primary-brew) !important;
  }

  .builder-header-inverse dialog .button-primary-dark:hover {
    background-color: var(--bg-fill-dark-hover) !important;
  }
}

/* The bundle ⋯ menu's mobile sheet leads with its OWN header row (thumbnail + name + a close button on
   the right), so it passes no modal_label — which would otherwise leave the shared dropdown-modal heading
   bar as an empty band above that header. Hide it; the custom header re-adds the close button itself (so
   dismiss is preserved — a backdrop tap on a modal <dialog> counts as "inside", so the button is needed).
   Keyed off the empty <h2> (the dropdown-modal JS swaps {{ title }} → "" when there's no title) so titled
   sheets — Bundle switcher, etc. — keep their heading + close button untouched. */

@media (max-width: 1023px) {
  dialog.with-items > div:first-child:has(> h2:empty) {
    display: none;
  }
}

/* Mobile builder bottom bar — the morph between the 4-tab main nav and the Design-mode 2-tab control.
   builder_bottom_bar_controller mirrors the active builder view onto .builder-bar[data-view]; this owns
   the visual morph so it reads as one bar reshaping (recycling the pill + FAB), not two bars swapping.
   Both segment sets share one grid cell ([grid-area:1/1]) and CROSS-FADE (opacity); the inactive one
   stays in the DOM at opacity 0 so the fade is symmetric and both stay measurable. The slot's WIDTH is
   tweened between the two layouts — the controller measures the active pill and pins it as an explicit
   width, and `transition: width` animates the change — so the bar smoothly narrows/widens (the FAB slides
   along with it) instead of snapping. The main tab count is dynamic (2 unpublished, 4 once Assets/Insights
   exist), so the width MUST be measured, not hardcoded. will-change hints the browser to expect it. */

.builder-bar-pills {
  /* The JS-set width sizes the BOX, but a default `grid` column auto-sizes to the widest child (the
     4-tab pill) and overflows the box — which shoved the visible pill + the FAB out of place and made
     the × un-tappable. minmax(0,1fr) pins the track to the box width, so the active pill centres
     correctly and the inactive (wider) pill just overflows invisibly behind it (opacity 0 / no pointer).
     width:fit-content is the pre-JS fallback: without an explicit width the 1fr column would stretch the
     slot to fill the whole bar, and the first measurement on a direct Design load would then pin the slot
     far too wide. fit-content keeps it sized to its content until the controller pins the real width. */
  grid-template-columns: minmax(0, 1fr);
  width: -moz-fit-content;
  width: fit-content;
  /* Snappy — the width narrowing IS the morph, so keep it quick + responsive (not the 0.45s the colour
     restyle uses). */
  transition: width 0.2s ease-out;
  will-change: width;
}

/* No cross-fade between the two segment sets — that read as two overlapping bars dissolving. The
   inactive set swaps out instantly (opacity, no transition) so the eye only ever sees ONE bar; the
   width tween above is what animates, so it reads as the same bar narrowing/widening. */

.builder-bar-pill--design {
  opacity: 0;
  pointer-events: none;
}

[data-builder-view-value="design"] .builder-bar .builder-bar-pill--main {
  opacity: 0;
  pointer-events: none;
}

[data-builder-view-value="design"] .builder-bar .builder-bar-pill--design {
  opacity: 1;
  pointer-events: auto;
}

/* The FAB restyles IN PLACE rather than swapping: moola Add (+) on Edit, the elevated base-tab look with
   a Close (×) on Design, faded out on Assets / Insights (it's Edit's add-offer affordance). Same element,
   so background / colour / icon all transition. */

.builder-bar-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Position is owned by the markup utility — `absolute left-full top-1/2 -translate-y-1/2` pins the
     FAB as a satellite 6px off the pill slot's right edge. Do NOT set `position` here: a `position:
     relative` outranks that `absolute` utility (equal specificity, this sheet loads later), which drops
     the FAB into normal flow — below the bar. The FAB being absolute also serves as the containing block
     for its inset-0 __icon children. */
  background-color: var(--bg-fill-moola, #254f1a);
  box-shadow: 0px -1px 15px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.06),
    inset 0px 0px 0px 1px rgba(52, 46, 38, 0.08);
  /* Only the BACKGROUND restyles (moola ⇄ elevated) — slowed + ease-OUT so it starts immediately and
     decelerates, no front-loaded lag. The icons own their colours (below) instead of animating the FAB's
     shared `color`: Chrome won't repaint a freshly-revealed icon's currentColor mid-transition, which
     left the + dark on the way back from Design. opacity/transform are the Assets/Insights fade-out. */
  transition: background-color 0.45s ease-out, opacity 0.3s ease, transform 0.3s ease;
}

.builder-bar-fab__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Longer than the original 0.2s but ease-out, so the +↔× rotation/cross-fade starts immediately when
     the view flips and settles smoothly — no perceived start delay. */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Each icon owns its colour (white + on the moola Edit FAB · dark × on the elevated Design FAB) so the
   icon colour never rides the FAB's transitioning `color` — see the FAB note above. */

.builder-bar-fab__icon--add {
  color: #fff;
}

.builder-bar-fab__icon--close {
  color: var(--content-primary, #342e26);
  opacity: 0;
  transform: rotate(-90deg);
}

[data-builder-view-value="design"] .builder-bar .builder-bar-fab {
  background-color: var(--background-elevated, #ffffff);
}

[data-builder-view-value="design"] .builder-bar .builder-bar-fab__icon--add {
  opacity: 0;
  transform: rotate(90deg);
}

[data-builder-view-value="design"] .builder-bar .builder-bar-fab__icon--close {
  opacity: 1;
  transform: none;
}

[data-builder-view-value="assets"] .builder-bar .builder-bar-fab,
[data-builder-view-value="insights"] .builder-bar .builder-bar-fab {
  opacity: 0;
  /* Keep the markup's -translate-y-1/2 centering INSIDE the transform so the FAB scales down + fades
     IN PLACE (a pure scale around its own centre). `scale(0.7)` alone would wipe the translateY, letting
     the FAB drop ~28px toward the viewport edge as it leaves (and climb back up on the way in) — the
     heavy "tucked under the viewport / comes up from the bottom" motion. */
  transform: translateY(-50%) scale(0.7);
  pointer-events: none;
}

/* Revealing the FAB as Close straight from a faded-out (Assets/Insights) state: the user never saw the
   Add (+) there, so DON'T morph Add→Close on the way in. `is-revealing` (set by builder_bottom_bar only
   for the assets|insights→design step, cleared on the next view change so Edit↔Design still recycles)
   drops ONLY the background + icon transitions, so the Close (×/elevated) styling SNAPS in while the FAB
   is still invisible; opacity + transform alone scale/fade it into view. */

.builder-bar-fab.is-revealing {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.builder-bar-fab.is-revealing .builder-bar-fab__icon {
  transition: none;
}

/* ── Bundle empty state: sticker-cluster reveal ────────────────────────────────
   The four overlapping mock-product tiles pop into view once, back → front (DOM
   order = z-order), each with the springy ease-out-back scale the app uses for
   its other "pop" entrances (checkbox tick, promote-bar thumb). The standalone
   `scale` property composes with each tile's Tailwind rotate-[…] transform, so
   the rotation holds while the tile scales up from its centre. `backwards` keeps
   each tile invisible through its stagger delay so the layering reads clearly. */

@keyframes bundleEmptyPop {
  from {
    scale: 0;
    opacity: 0;
  }

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

.bundle-empty-cluster img {
  animation: bundleEmptyPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bundle-empty-cluster img:nth-child(1) {
  animation-delay: 0.05s;
}

.bundle-empty-cluster img:nth-child(2) {
  animation-delay: 0.17s;
}

.bundle-empty-cluster img:nth-child(3) {
  animation-delay: 0.29s;
}

.bundle-empty-cluster img:nth-child(4) {
  animation-delay: 0.41s;
}

/* Skip the pop on a page reload — the bundle-empty-pop controller adds .pop-disabled (only on a browser
   refresh, not on a fresh land), so the tiles render statically. */

.bundle-empty-cluster.pop-disabled img {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .bundle-empty-cluster img {
    animation: none;
  }
}

/* ── Builder view state, driven declaratively off the `builder` controller ──────
   The controller owns the active view + design sub-panel as data-builder-view-value /
   data-builder-design-panel-value on a display:contents wrapper; everything below reacts to those,
   so switching tabs is pure CSS (no JS class toggling). Replaces builder-tabs / design-panels. */

/* Tab panels: the active view's panel stays (with its own display); the rest collapse. */

[data-builder-view-value="edit"] [data-builder-panel]:not([data-builder-panel="edit"]),
[data-builder-view-value="design"] [data-builder-panel]:not([data-builder-panel="design"]),
[data-builder-view-value="assets"] [data-builder-panel]:not([data-builder-panel="assets"]),
[data-builder-view-value="insights"] [data-builder-panel]:not([data-builder-panel="insights"]) {
  display: none;
}

/* Canvas dots fade out on Assets / Insights (plain surface, dots off). */

[data-builder-view-value="assets"] .bg-dot-grid::before,
[data-builder-view-value="insights"] .bg-dot-grid::before {
  opacity: 0;
}

/* Design locks the desktop scroll region (its Bundle-settings column manages its own scroll);
   every other view scrolls it (the index partial's default). */

@media (min-width: 1024px) {
  [data-builder-view-value="design"] [data-main-scroll-region] {
    overflow: hidden;
  }
}

@media (max-width: 1023px) {
  /* Mobile canvas sheet dots: off on Assets / Insights, and on Design they track the sub-panel
     (plain on the Form, dots on the Preview). */

  [data-builder-view-value="assets"] .builder-canvas-sheet::before,
  [data-builder-view-value="insights"] .builder-canvas-sheet::before,
  [data-builder-view-value="design"][data-builder-design-panel-value="form"] .builder-canvas-sheet::before {
    opacity: 0;
  }

  /* Design sub-panels: show one at a time per the sub-tab. Desktop shows both columns (untouched). */

  [data-builder-design-panel-value="form"] [data-design-panels-target="preview"],
  [data-builder-design-panel-value="preview"] [data-design-panels-target="form"] {
    display: none;
  }
}

.markdown-content {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.markdown-content :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.markdown-content :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.markdown-content :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.markdown-content :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.markdown-content :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.markdown-content :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.markdown-content :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.markdown-content :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.markdown-content :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.markdown-content :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.markdown-content :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.markdown-content :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.markdown-content :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.markdown-content :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.markdown-content :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.markdown-content :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.markdown-content :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.markdown-content :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.markdown-content :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.markdown-content :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.markdown-content :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.markdown-content :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.markdown-content :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.markdown-content :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.markdown-content :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.markdown-content :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.markdown-content :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.markdown-content :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.markdown-content :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.markdown-content :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.markdown-content :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.markdown-content :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.markdown-content :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.markdown-content :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.markdown-content :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.markdown-content :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.markdown-content :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.markdown-content :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.markdown-content :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.markdown-content :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.markdown-content :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.markdown-content :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.markdown-content :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.markdown-content :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.markdown-content :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.markdown-content :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.markdown-content :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.markdown-content :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.markdown-content :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.markdown-content :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.markdown-content :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.markdown-content :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.markdown-content :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.markdown-content :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-content :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.markdown-content {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.markdown-content :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-content :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.markdown-content :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.markdown-content :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.markdown-content :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.markdown-content :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.markdown-content :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.markdown-content :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.markdown-content :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.markdown-content :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.markdown-content :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.markdown-content :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.markdown-content :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.markdown-content :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.markdown-content :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.markdown-content :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.markdown-content :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.markdown-content :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.markdown-content :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.markdown-content :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.markdown-content p:first-child {
  margin-top: 0px !important;
}

.markdown-content p:last-child {
  margin-bottom: 0px !important;
}

/* Responsive table that displays as cards on mobile and table on desktop */

.table-responsive {
  container-type: inline-size;
}

/* Regular tables should be horizontally scrollable */

.table-responsive:not(.table-cards) {
  overflow-x: auto;
}

.table-responsive table {
  width: 100%;
}

/* OK hide header on mobile - only when table-cards class is present */

.table-responsive.table-cards thead {
  display: none;
}

.date-range-calendar .flatpickr-day.table-responsive.table-cards thead {
  display: block;
  visibility: hidden;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards thead {
    display: table-header-group;
  }
}

.table-responsive thead th {
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--content-secondary);
  /* Unified opacities */
}

@container (min-width: 42rem) {
  .table-responsive thead th {
    position: relative;
  }

  .table-responsive thead th:first-child::before {
    position: absolute;
    bottom: 0px;
    left: 1rem;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive thead th:last-child::before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 1rem;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive thead th:not(:first-child):not(:last-child)::before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }
}

.table-responsive.table-cards tbody {
  display: block;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards tbody {
    display: table-row-group;
  }
}

/* Base tbody styling for regular tables */

.table-responsive tbody {
  display: table-row-group;
}

.table-responsive.table-cards tr {
  margin-bottom: 0.75rem;
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--background-elevated);
}

@container (min-width: 42rem) {
  .table-responsive.table-cards tr {
    margin-bottom: 0px;
    display: table-row;
    border-radius: 0;
  }
}

.table-responsive.table-cards tr {
  /* Unified border opacity */
  border-width: 2px;
  border-color: var(--content-border-neutral);
}

@container (min-width: 42rem) {
  .table-responsive.table-cards tr {
    border-style: none;
  }
}

.table-responsive.table-cards tr {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@container (min-width: 42rem) {
  .btn-toggle input[type='checkbox']:checked + .table-responsive.table-cards tr:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .table-responsive.table-cards tr:hoverbutton.button-secondary {
    background-color: var(--background-overlay);
  }
}

.table-responsive.table-cards tr:hover {
  background-color: var(--background-base);
}

@container (min-width: 42rem) {
  .table-responsive.table-cards tr:hover {
    background-color: transparent;
  }
}

.table-responsive.table-cards tr {
  /* Added mobile hover */
}

/* Base tr styling for regular tables */

.table-responsive tr {
  display: table-row;
}

.table-responsive.table-cards td {
  display: block;
  padding: 0.75rem;
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td {
    display: table-cell;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
    flex: none;
  }
}

.table-responsive.table-cards td {
  /* Ensure flex is not applied on larger screens if set below */
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td::before {
    --tw-content: none;
    content: var(--tw-content);
  }

  .table-responsive.table-cards td {
    position: relative;
  }
}

.table-responsive.table-cards td {
  /* On mobile, treat td as a flex container to align label and value */
  display: flex;
  flex-direction: row;
  align-items: center;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td {
    display: table-cell;
  }
}

/* Base td styling for regular tables */

.table-responsive td {
  display: table-cell;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  position: relative;
}

@container (min-width: 42rem) {
  .table-responsive td:first-child::before {
    position: absolute;
    bottom: 0px;
    left: 1rem;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive td:last-child::before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 1rem;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive td:not(:first-child):not(:last-child)::before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }
}

/* OK Only apply data-label styling when the attribute exists - only for table-cards */

.table-responsive.table-cards td[data-label]:not([data-label=''])::before {
  margin-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-secondary);
  --tw-content: attr(data-label);
  content: var(--tw-content);
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td[data-label]:not([data-label=''])::before {
    content: var(--tw-content);
    margin-bottom: 0px;
  }
}

.table-responsive.table-cards td[data-label]:not([data-label='']) {
  /* Increased opacity for data-label */
}

/* OK Adjust the ::before pseudo-element for flex alignment on mobile - only for table-cards */

.table-responsive.table-cards td[data-label]:not([data-label=''])::before {
  width: 6rem;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container (min-width: 42rem) {
  .table-responsive.table-cards td[data-label]:not([data-label=''])::before {
    display: none;
  }
}

/* OK Add bottom border for data-label cells on desktop using ::after - only for table-cards */

@container (min-width: 42rem) {
  .table-responsive.table-cards
  td[data-label]:not([data-label='']):first-child::after {
    position: absolute;
    bottom: 0px;
    left: 1rem;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive.table-cards
  td[data-label]:not([data-label='']):last-child::after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 1rem;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }

  .table-responsive.table-cards
  td[data-label]:not([data-label='']):not(:first-child):not(
    :last-child
  )::after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-color: var(--content-border-neutral);
    --tw-content: '';
    content: var(--tw-content);
  }
}

/* OK hover - only for table-cards */

@container (min-width: 42rem) {
  .table-responsive.table-cards tr:hover td {
    background-color: var(--background-base);
  }
}

/* OK rounded-radius-4 table rows - only for table-cards */

@container (min-width: 42rem) {
  .table-responsive.table-cards tr:hover td:first-child {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
  }

  .table-responsive.table-cards tr:hover td:last-child {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
  }
}

/* Base hover styling for regular tables */

.table-responsive tr:hover td {
  background-color: var(--background-base);
}

@media (min-width: 1024px) {
  main .page:first-of-type {
    margin-right: 9px;
    margin-top: 9px;
    height: calc(100dvh - 1rem);
    overflow: auto;
    border-width: 1px;
  }
}

@media not all and (min-width: 1024px) {
  main .page:first-of-type {
    border-style: none;
  }
}

[data-select-all-target='wrapper']main .page:first-of-type >.title {
  border-color: var(--content-border-dark);
}

main .page:first-of-type >.title {
  display: flex;
  height: 4rem;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  border-color: var(--content-border-neutral);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.02rem;
  font-weight: 700;
  color: var(--content-primary);
}

/* Flatpickr theme for the shared date-range picker, scoped to .date-range-calendar
   so it never leaks to other instances. The day grid is forced to a real 7-column CSS
   grid (flatpickr's flex + space-around lets short rows drift). The in-range band is
   each cell's own background so neighbours tile seamlessly; the selected circle is a
   radial-gradient layered on top — no extra element, so no compositing seams. */

/* Desktop: non-modal popover (Popover API) in the top layer, placed by floating-ui.
   Clear the UA centering so the inline left/top win, and pin a width — fit-content
   under-sizes (the w-full child resolves before the flex row's intrinsic width). */

@media (min-width: 1024px) {
  .date-range-popover:popover-open {
    display: flex;
    /* --background-light isn't in main yet; #FBFAF7 fallback until it lands. */
    background: var(--background-light, #FBFAF7);
    position: fixed;
    inset: auto;
    margin: 0;
    width: 720px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: auto;
    transition: opacity 0.12s ease;
  }

  /* Hidden until floating-ui places it, so it never flashes at the centered default. */

  .date-range-popover:popover-open:not(.positioned) {
    opacity: 0;
  }

  /* Fixed-width preset column; the calendar pane (lg:grow) takes the rest. */

  .date-range-preset-sidebar {
    width: 188px;
  }
}

/* Mobile: modal sheet as a viewport-capped flex column; the scroll region grows so
   the header + footer stay pinned. [open] only matches showModal() (desktop uses
   :popover-open). */

@media (max-width: 1023px) {
  .date-range-popover[open] {
    display: flex;
    flex-direction: column;
    max-height: 92dvh;
    /* Eases the FLIP height swap between the preset list and the custom view. */
    transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .date-range-sheet,
  .date-range-sheet-body,
  .date-range-sheet-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .date-range-sheet-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* Custom view floats over the preset list, inset between the persistent header +
     footer (controller-set vars), cross-dissolving in. The dialog's transform is the
     containing block, so fixed anchors to the sheet, not the viewport. */

  .date-range-custom-view {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--date-range-sheet-header-h, 64px);
    bottom: var(--date-range-sheet-footer-h, 88px);
    z-index: 5;
    overflow-y: auto;
    background: var(--background-elevated, #ffffff);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .date-range-custom-view.date-range-custom-view-active {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---- Inline calendar shell ---- */

.date-range-calendar {
  text-align: center;
}

.date-range-calendar .flatpickr-calendar {
  box-shadow: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
}

.date-range-calendar .flatpickr-calendar.inline {
  display: inline-block;
  top: 0;
  max-width: 100%;
}

/* Flatpickr hard-codes inline widths and clips with overflow:hidden; force auto so
   both months show in full. */

.date-range-calendar .flatpickr-calendar.inline,
.date-range-calendar .flatpickr-rContainer,
.date-range-calendar .flatpickr-days,
.date-range-calendar .flatpickr-weekdays {
  width: auto !important;
}

.date-range-calendar .flatpickr-days {
  overflow: visible;
}

/* ---- Month header row ---- */

.date-range-calendar .flatpickr-months {
  position: relative;
  display: flex;
  align-items: center;
  /* No top margin (the pane padding handles it); keep the bottom as the header→grid gap. */
  margin: 0 0 20px;
  padding-top: 0;
}

/* ---- Month title (single medium weight for month + year) ---- */

.date-range-calendar .flatpickr-months .flatpickr-month,
.date-range-calendar .flatpickr-current-month .cur-month,
.date-range-calendar .flatpickr-current-month input.cur-year {
  color: var(--content-primary, #342e26);
  font-weight: 500;
}

/* Flatpickr absolutely-positions the title at the top of the month box; flex-centre it. */

.date-range-calendar .flatpickr-months .flatpickr-month {
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-range-calendar .flatpickr-current-month {
  position: static;
  /* Flex-centre the title against the nav arrows (it otherwise sits at the box top). */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  padding-top: 0;
  /* Display only — no click-to-edit month or year stepping. */
  pointer-events: none;
}

/* Hide the year stepper arrows (the month arrows still change the year). */

.date-range-calendar .numInputWrapper span {
  display: none;
}

/* Prev / next arrows: ghost 32px icon-button, nudged so the glyph (not the box) sits
   on the calendar edge. */

.date-range-calendar .flatpickr-months .flatpickr-prev-month,
.date-range-calendar .flatpickr-months .flatpickr-next-month {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: transparent;
  color: var(--content-primary, #342e26);
  transition: background-color 0.15s ease;
}

.date-range-calendar .flatpickr-months .flatpickr-prev-month {
  left: -8px;
}

.date-range-calendar .flatpickr-months .flatpickr-next-month {
  right: -8px;
}

.date-range-calendar .flatpickr-months .flatpickr-prev-month:hover,
.date-range-calendar .flatpickr-months .flatpickr-next-month:hover {
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
}

.date-range-calendar .flatpickr-months .flatpickr-prev-month svg,
.date-range-calendar .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.date-range-calendar .flatpickr-months .flatpickr-prev-month svg path,
.date-range-calendar .flatpickr-months .flatpickr-next-month svg path {
  fill: none;
  stroke: currentColor;
}

/* ---- Weekday labels (2-letter, set via the controller locale) ---- */

.date-range-calendar .flatpickr-weekdaycontainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Match the dayContainer seed so the headers align with the columns. */
  width: 224px;
  min-width: 224px;
  max-width: 224px;
}

.date-range-calendar span.flatpickr-weekday {
  width: auto;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  font-weight: 500;
}

/* Drop flatpickr's two-month divider; separate the months with side margins instead. */

.date-range-calendar .dayContainer + .dayContainer {
  box-shadow: none;
}

/* Desktop two-month: side margins separate the months; arrows shift out to the grid
   edge. Mobile is single-month and skips the margins. */

@media (min-width: 1024px) {
  .date-range-calendar .dayContainer,
  .date-range-calendar .flatpickr-weekdaycontainer {
    margin: 0 8px;
  }

  /* Push the box past the grid edge so the inset glyph lands on the calendar edge. */

  .date-range-calendar .flatpickr-months .flatpickr-prev-month {
    left: -5px;
  }

  .date-range-calendar .flatpickr-months .flatpickr-next-month {
    right: -5px;
  }
}

/* ---- Day grid: real 7-column grid so every date aligns to its column ---- */

.date-range-calendar .dayContainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
  padding: 0;
  /* Override flatpickr's hard-coded ~307px so each month is 7×32 = 224px — the seed
     width the whole calendar sizes from. */
  width: 224px;
  min-width: 224px;
  max-width: 224px;
  /* Reserve the tallest month (6 rows = 202px) and top-align, so paging between
     months doesn't resize the popover. */
  min-height: 202px;
  align-content: start;
}

/* Flatpickr's "hidden" class collides with Tailwind's .hidden (display:none), dropping
   the multi-month padding days out of the grid and misaligning columns. Keep them
   in-cell, just invisible. */

.date-range-calendar .flatpickr-day.hidden {
  display: block !important;
  visibility: hidden;
}

/* ---- Day cells ---- */

.date-range-calendar .flatpickr-day {
  position: relative;
  width: auto;
  max-width: none;
  height: 32px;
  line-height: 32px;
  margin: 0;
  border: none;
  border-radius: 0;
  font-weight: 500;
  color: var(--content-primary, #342e26);
  background: transparent;
}

/* Day cells are <span>s, so the app-wide focus-visible rule (a/button/input) misses
   them; own the focus state here. */

.date-range-calendar .flatpickr-day:focus {
  outline: none;
}

/* Hover / keyboard focus ring, drawn as a border-only ::after circle (not a background)
   so the in-range band and selected fill show through, with no stacking context that
   would seam the band. :focus-visible only, so a mouse click leaves no ring. */

.date-range-calendar .flatpickr-day:hover:not(.flatpickr-disabled)::after,
.date-range-calendar .flatpickr-day:focus-visible:not(.flatpickr-disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--content-primary, #342e26);
  border-radius: 50%;
  pointer-events: none;
}

/* Keyboard focus steps the ring up to 2px; hover stays at 1.5px. */

.date-range-calendar .flatpickr-day:focus-visible:not(.flatpickr-disabled)::after {
  border-width: 2px;
}

/* On a filled endpoint the dark-on-dark ring would vanish — flip it to the light surface. */

.date-range-calendar .flatpickr-day.selected:focus-visible::after,
.date-range-calendar .flatpickr-day.startRange:focus-visible::after,
.date-range-calendar .flatpickr-day.endRange:focus-visible::after {
  border-color: var(--background-base, #f7f5f0);
}

.date-range-calendar .flatpickr-day.flatpickr-disabled,
.date-range-calendar .flatpickr-day.flatpickr-disabled:hover {
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
  background: transparent;
}

/* Hide adjacent-month padding days (single-month mobile shows them grey); keep their
   grid cell so the current month's columns stay aligned. */

.date-range-calendar .flatpickr-day.prevMonthDay,
.date-range-calendar .flatpickr-day.nextMonthDay {
  visibility: hidden;
}

/* In-range band: each cell's own background tiles into one bar, rounded at week-row
   edges and the range's own start/end. */

.date-range-calendar .flatpickr-day.inRange,
.date-range-calendar .flatpickr-day.startRange,
.date-range-calendar .flatpickr-day.endRange {
  background: var(--background-base, #f7f5f0);
  /* 1px same-colour side shadows bridge the sub-pixel seams between fractional cells;
     dropped at each row/range edge below to keep the corners clean. */
  box-shadow: -1px 0 0 var(--background-base, #f7f5f0), 1px 0 0 var(--background-base, #f7f5f0);
}

.date-range-calendar .flatpickr-day.inRange:nth-child(7n + 1) {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 1px 0 0 var(--background-base, #f7f5f0);
}

.date-range-calendar .flatpickr-day.inRange:nth-child(7n + 7) {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: -1px 0 0 var(--background-base, #f7f5f0);
}

/* Endpoints: round the band's outer edge fully so it tucks behind the circle; the
   inner edge stays square to connect into the band. */

.date-range-calendar .flatpickr-day.startRange {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  box-shadow: 1px 0 0 var(--background-base, #f7f5f0);
}

.date-range-calendar .flatpickr-day.endRange {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  box-shadow: -1px 0 0 var(--background-base, #f7f5f0);
}

/* Flatpickr's multi-month CSS paints the 2nd month's first column grey and outranks
   the rule above; re-assert our band colour on the right side. */

.date-range-calendar .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n + 2) .flatpickr-day.inRange:nth-child(7n + 1) {
  box-shadow: 1px 0 0 var(--background-base, #f7f5f0);
}

/* Selected endpoint: dark circle layered over the band so the band still reads through. */

.date-range-calendar .flatpickr-day.selected,
.date-range-calendar .flatpickr-day.startRange,
.date-range-calendar .flatpickr-day.endRange {
  color: var(--content-primary-inverse, #ffffff);
  background:
    radial-gradient(circle at center, var(--content-primary, #342e26) 14px, transparent 15px),
    var(--background-base, #f7f5f0);
}

/* Single-day range: just the circle, no band. */

.date-range-calendar .flatpickr-day.startRange.endRange {
  background: radial-gradient(circle at center, var(--content-primary, #342e26) 14px, transparent 15px);
  box-shadow: none;
}

/* Close the band cleanly where it meets a hidden adjacent-month cell (round it, drop
   the seam shadow on that side). */

.date-range-calendar .flatpickr-day.prevMonthDay + .flatpickr-day.inRange,
.date-range-calendar .flatpickr-day.prevMonthDay + .flatpickr-day.startRange,
.date-range-calendar .flatpickr-day.prevMonthDay + .flatpickr-day.endRange {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 1px 0 0 var(--background-base, #f7f5f0);
}

.date-range-calendar .flatpickr-day.inRange:has(+ .flatpickr-day.nextMonthDay),
.date-range-calendar .flatpickr-day.startRange:has(+ .flatpickr-day.nextMonthDay),
.date-range-calendar .flatpickr-day.endRange:has(+ .flatpickr-day.nextMonthDay) {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: -1px 0 0 var(--background-base, #f7f5f0);
}

/* Mobile: single month scaled to 48px cells with a wider grid to fill the sheet
   (desktop two-month 32px sizing untouched). */

@media (max-width: 1023px) {
  .date-range-calendar .dayContainer,
  .date-range-calendar .flatpickr-weekdaycontainer {
    width: 336px;
    min-width: 336px;
    max-width: 336px;
  }

  /* 6 rows at 48px = 298px. */

  .date-range-calendar .dayContainer {
    min-height: 298px;
  }

  .date-range-calendar .flatpickr-day {
    height: 48px;
    line-height: 48px;
    font-size: 1rem;
  }

  /* Selected circle + hover ring scaled to the 48px cell. */

  .date-range-calendar .flatpickr-day:hover:not(.flatpickr-disabled)::after,
  .date-range-calendar .flatpickr-day:focus-visible:not(.flatpickr-disabled)::after {
    width: 44px;
    height: 44px;
  }

  .date-range-calendar .flatpickr-day.selected,
  .date-range-calendar .flatpickr-day.startRange,
  .date-range-calendar .flatpickr-day.endRange {
    background:
      radial-gradient(circle at center, var(--content-primary, #342e26) 22px, transparent 23px),
      var(--background-base, #f7f5f0);
  }

  .date-range-calendar .flatpickr-day.startRange.endRange {
    background: radial-gradient(circle at center, var(--content-primary, #342e26) 22px, transparent 23px);
  }
}

/* ---- Preset options (shared list UI) ---- */

.preset-option,
.preset-option-desktop {
  /* Mobile: full-bleed sheet row; desktop overrides padding + rounding below. */
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  border-radius: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--content-primary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background: none;
  border: none;
  cursor: pointer;
}

/* Label grows so the radio / custom-row chevron sits at the far right. */

.preset-option > span:not(.preset-radio),
.preset-option-desktop > span:not(.preset-radio) {
  flex: 1 1 auto;
}

/* Mobile rows: subtle base-fill on hover / press. */

.preset-option:hover,
.preset-option:active {
  background: var(--background-base, #f7f5f0);
}

/* Desktop pills: overlay-fill on hover. */

.preset-option-desktop:hover {
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
}

.preset-option-desktop {
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

/* Selected: medium weight on both; desktop fills a pill, mobile shows the radio below. */

.preset-option.active,
.preset-option-desktop.active {
  font-weight: 500;
}

.preset-option-desktop.active {
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
}

/* Mobile radio — sits at the right of each row, fills when selected. */

.preset-radio {
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--content-border-input, #e5dfd3);
}

.preset-option.active .preset-radio {
  border-color: var(--content-primary, #342e26);
}

.preset-option.active .preset-radio::after {
  content: "";
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
  background: var(--content-primary, #342e26);
}

/* ---- Date-range inputs ----
   .text-input gives the ring-free border, but its own hover/focus box-shadow loses the
   cascade in here — restate them scoped (darken on hover, 2px inset on focus). */

.date-range-inputs .text-input:hover:not(:focus) {
  box-shadow: 0 0 0 1px inset var(--content-primary, #342e26);
}

.date-range-inputs .text-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px inset var(--content-primary, #342e26);
}

/* Integration Help Video - Minimal Mux video player */

.integration-help-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.integration-help-video--loaded {
  opacity: 1;
}

/* Hide all mux-player default controls */

.integration-help-video mux-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --controls: none;
  --media-object-fit: cover;
  --media-object-position: center;
}

.integration-help-video mux-player::part(gesture-layer) {
  display: none;
}

/* Play/pause button */

.integration-help-video__play-button {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, background-color 0.15s ease-in-out;
  z-index: 10;
  pointer-events: auto;
}

.integration-help-video__play-button:hover {
  background-color: rgba(255, 255, 255, 1);
}

.integration-help-video__play-button svg {
  width: 1rem;
  height: 1rem;
  color: #1a1a1a;
}

/* Show play button on hover or when paused */

.integration-help-video:hover .integration-help-video__play-button,
.integration-help-video--paused .integration-help-video__play-button {
  opacity: 1;
}

/* Icon visibility based on pause state */

.integration-help-video__play-button .icon-play {
  display: block;
}

.integration-help-video__play-button .icon-pause {
  display: none;
}

.integration-help-video--playing .integration-help-video__play-button .icon-play {
  display: none;
}

.integration-help-video--playing .integration-help-video__play-button .icon-pause {
  display: block;
}

/* Styles for the multi-step Publish 2.0 modal.
   Markup lives in `app/views/account/stacks/publish_flow/`. The flow renders
   inside the global `turbo_dialog` frame; `.publish-flow-dialog` is applied
   to the surrounding <dialog> so we can override its width. */

.publish-flow-dialog {
  width: 100%;
  max-width: 640px;
  border-radius: 24px;
  background-color: var(--background-elevated, #ffffff);
  box-shadow:
    0 20px 80px 0 rgba(0, 0, 0, 0.06),
    0 7.3px 29.2px 0 rgba(0, 0, 0, 0.05),
    0 3.5px 14.2px 0 rgba(0, 0, 0, 0.04),
    0 1.7px 6.9px 0 rgba(0, 0, 0, 0.03),
    0 0.7px 2.7px 0 rgba(0, 0, 0, 0.02);
}

.publish-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  width: 100%;
}

/* ── Mobile: full-height bottom sheet ────────────────────────────────────
   The setup steps render as ONE full-height sheet (same geometry as
   .dialog-full-sheet: 100dvh minus an 8px backdrop peek) instead of resizing
   to each step's content — no height jumps between steps, the footer stays
   anchored to the sheet's bottom edge, and the content scrolls between the
   header and footer. Generating/success keep their full-screen takeover (the
   higher-specificity :has rules further down). */

@media (max-width: 1023px) {
  .publish-flow-dialog {
    height: calc(100dvh - 8px);
    max-height: none;
  }

  .publish-flow {
    height: 100%;
    max-height: none;
  }

  .publish-flow__body {
    min-height: 0;
  }

  .publish-flow__step {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Per-step wrappers between the step and its content/footer (the plain
     form on destination; the lazy turbo-frame > form on template_picker)
     must stretch too, so the footer lands on the sheet's bottom edge. */

  .publish-flow__step > form,
  .publish-flow__step > turbo-frame,
  .publish-flow__step > turbo-frame > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* NB: the .publish-flow__content counterpart of this block lives AFTER the
     base content rules below — same specificity, so source order decides. */
}

/* Top-right close button. The `turbo_dialog` layout already provides its own
   close affordance, but this lives inside the publish-flow controller so the
   Stimulus action can run cleanup before the dialog closes. */

.publish-flow__close {
  position: absolute;
  /* Centered on the header's control row: 32px = 16px header padding + 16px
     (half the 32px back-icon box). translateY keeps that centerline constant
     whether the button is 40px (mobile) or 32px (desktop), so it always lines up
     with the back arrow and the progress bar. */
  top: 36px;
  /* mobile: 16px header padding + half the 40px control row */
  transform: translateY(-50%);
  right: 16px;
  /* Medium (40px) icon button on mobile, small (32px) on desktop — matching
     the back button, whose flex-centering defines the header's control row. */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  /* Mobile standard: visible overlay fill by default (matching the shared
     turbo_dialog close button's max-lg:bg-background-overlay); desktop trims
     to a ghost button that only fills on hover. */
  background-color: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
  cursor: pointer;
  transition: background-color 0.15s ease;
  z-index: 2;
}

@media (min-width: 1024px) {
  .publish-flow__close {
    width: 32px;
    height: 32px;
    top: 32px;
    /* 16px header padding + half the 32px control row */
    background-color: transparent;
  }
}

.publish-flow__close:hover {
  background-color: var(--background-overlay, rgba(104, 67, 0, 0.08));
}

.publish-flow__close:focus-visible {
  outline: 2px solid var(--content-focus-outline, rgba(52, 46, 38, 0.2));
  outline-offset: 2px;
}

/* Header: back arrow on the left, step indicator centered, close on the right.
   The indicator is absolutely centered so the back button toggling visibility
   doesn't shift it horizontally. Vertical padding is kept symmetric so the
   indicator's `top: 50%` centering coincides with the flex-centered back icon
   (and the close button) — all three controls share one centerline. An
   asymmetric top/bottom would split the absolute (padding-box) and flex
   (content-box) centers apart. */

.publish-flow__header {
  position: relative;
  display: flex;
  align-items: center;
  /* Never squeeze below natural height (16px padding + 32px controls + 16px):
     in the full-height mobile sheet the flex column would otherwise shrink
     this bar to its 56px min-height, clipping the buttons and splitting the
     back/close centerlines apart. */
  flex-shrink: 0;
  /* Ghost icon buttons (the 32px back/close boxes) center a 16px icon, so the
     glyph sits 8px inside the box. The 16px horizontal padding optically aligns
     the icons with the 24px content inset below (box sits 8px less than 24px). */
  padding: 16px;
  min-height: 56px;
}

.publish-flow__back {
  /* Medium (40px) on mobile, small (32px) on desktop — mirrors the close. */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  /* Mirrors the close button: visible overlay fill on mobile, ghost on desktop. */
  background-color: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.3s ease;
  z-index: 1;
}

@media (min-width: 1024px) {
  .publish-flow__back {
    width: 32px;
    height: 32px;
    background-color: transparent;
  }
}

.publish-flow__back:hover {
  background-color: var(--background-overlay, rgba(104, 67, 0, 0.08));
}

/* Hidden on the first step. opacity (not visibility) so it fades in/out, and the
   32px slot is kept either way so the centered progress bar doesn't shift. */

.publish-flow__back.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.publish-flow__step-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
}

.publish-flow__step-indicator-track {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  border-radius: 999px;
  overflow: hidden;
}

.publish-flow__step-indicator-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--content-primary, #342e26);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Body: scrollable content area. */

/* The frame is purely the scroll container — it carries no padding. Every step
   owns its spacing per section: a full-width header bar, a .publish-flow__content
   region, and a sticky footer bar each control their own padding. */

.publish-flow__body {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* The body does NOT scroll — the per-step .publish-flow__content owns the
     scroll (below). If the body scrolled, a tall step would drag its sticky
     footer (the body's last child, with nothing below to pin against) along
     with the content. Pinning the body here + scrolling the content keeps the
     footer fixed on every step.
     `clip`, NOT `hidden`: hidden still leaves the box programmatically
     scrollable, so clicking a radio-card low in the template list (label click
     → sr-only input gets focus → browser scrolls every scrollable ancestor to
     reveal it) shoved this scrollbar-less box out of alignment with no way to
     scroll it back. clip makes it a non-scroll-container entirely. */
  overflow: clip;
  flex: 1 1 auto;
}

/* Individual step. Each step is the swap target inside the turbo frame, so
   the fade-up animation runs every transition. No gap: the header bar,
   .publish-flow__content, and footer bar own their own edges. */

.publish-flow__step {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Fade + slide-in-from-top on every step swap — same timing as the reusable
     .modal-step-enter (atelier/animations.css): opacity eases evenly so the
     fade is perceptible; the slide stays snappy. */
  animation:
    modalStepFadeIn 0.4s ease both,
    modalStepRiseIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Main content region (headline + subtitle + radio cards). Wrapped in its own
   element so its padding/spacing is controlled independently of the full-width
   header bar and the fixed footer action bar, which sit outside it. */

.publish-flow__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 12px 24px 24px;
  /* This region owns the modal's scroll (the body is pinned above). Capped
     viewport-relative so a tall step scrolls inside the modal instead of growing
     it off-screen / dragging the sticky footer. Short steps keep their natural
     height — the cap only engages once content actually exceeds it. overflow-x
     pinned so overflow-y:auto can't trigger a stray horizontal scrollbar;
     overscroll-behavior keeps scroll momentum off the page. */
  max-height: calc(90vh - 180px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Template picker: extra top breathing room, plus a 560px cap so the list
   gets a generous scroll area on tall screens without the modal ballooning
   (the min() defers to the viewport-derived cap on short screens; the shared
   .publish-flow__content rule above provides the scroll + overscroll). */

.publish-flow__step[data-publish-flow-step-name="template_picker"] .publish-flow__content {
  padding-top: 24px;
  max-height: min(560px, calc(90vh - 180px));
}

/* Mobile full-height sheet (see the geometry block near the top of the file):
   the content region grows to fill the sheet and owns the scroll — the height
   caps above (shared 90vh-based, template picker's 420px) are desktop
   concerns. Placed AFTER both cap rules so it wins on source order; the
   doubled selector matches the template-picker cap's specificity.
   Side padding drops to the standard 16px mobile sheet gutter (24px is the
   desktop inset); top padding sets a 16px gap below the stepper header. */

@media (max-width: 1023px) {
  .publish-flow__content,
  .publish-flow__step[data-publish-flow-step-name="template_picker"] .publish-flow__content {
    flex: 1 1 auto;
    max-height: none;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
  }
}

.publish-flow__header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.publish-flow__title {
  font-size: 1.625rem;
  /* 26px */
  line-height: 1.2;
  font-weight: 700;
  color: var(--content-primary, #342e26);
  margin: 0;
  /* Balanced wrapping: multi-line titles break into near-equal lines instead
     of a full first line + short orphan ("Which template do you / want to
     use?" rather than "...do you want / to use?"). No-op on single lines;
     older browsers just fall back to normal wrapping. */
  text-wrap: balance;
}

.publish-flow__subtitle {
  font-size: 0.95rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  margin: 0;
  max-width: 440px;
}

@media (max-width: 1023px) {
  .publish-flow__subtitle {
    font-size: 0.875rem;
    /* text-sm on mobile */
  }
}

/* Destination step: stacked selectable cards (use the shared `.radio-card`
   standard; the connected-store badge uses the shared `shared/badge` component
   with the `:moola` variant). */

.publish-flow__destinations {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

/* Template picker step. */

/* Wrapper for the loaded list. The parent .publish-flow__content owns the scroll
   (see the template_picker content rule), so the header and list scroll together
   rather than the list scrolling inside its own fixed box. */

.publish-flow__template-region {
  min-width: 0;
}

/* Loading / empty variant — a fixed-height (so the modal sits near the loaded
   height), full-width box. The chip sits at the top with 32px of breathing room
   rather than vertically centered. */

.publish-flow__template-region--loading {
  display: flex;
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: center;
  padding-top: 32px;
  overflow: hidden;
}

.publish-flow__template-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Template items are now the ghost radio-card variant (.radio-card
   .radio-card--ghost) with an explicit 20px radio indicator — all the card
   chrome (border, hover/selected fill) lives in radio_card.css. Only the
   text layout below remains step-specific. */

.publish-flow__template-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.publish-flow__template-item-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--content-primary, #342e26);
  /* Template filenames are hyphen/dot runs with no spaces, so the only break
     opportunities are the hyphens — narrow (mobile) rows wrapped at the last
     hyphen that fit, leaving a short first line. break-all lets the line fill
     the full width and break anywhere. */
  word-break: break-all;
}

.publish-flow__template-item-meta {
  font-size: 0.8125rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

/* Bundle block step: numbered instructions for installing the OfferLab block. */

.publish-flow__block-instructions {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Standard body text: text-sm (14px) at 1.5 line-height — not an arbitrary size. */
  font-size: 0.875rem;
  color: var(--content-primary, #342e26);
  line-height: 1.5;
}

.publish-flow__block-instructions li::marker {
  color: var(--content-primary, #342e26);
  font-weight: 400;
}

/* Inline links in the rich-text instructions use our default link style:
   semibold + a 1.5px underline (mirrors .link-base in links.css). Applied to
   every <a> in the block so any future hyperlink picks it up automatically. */

.publish-flow__block-instructions a {
  font-weight: 600;
  color: var(--content-primary, #342e26);
  text-decoration-line: underline;
  text-decoration-color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

/* Keep the underline on hover — the global `a:hover { no-underline }` in
   application.css ties on specificity and would otherwise strip it. */

.publish-flow__block-instructions a:hover {
  text-decoration-line: underline;
}

.publish-flow__block-instructions-wrap {
  margin-bottom: 4px;
}

.publish-flow__block-instructions-title {
  /* Size comes from the text-xl utility in the markup. */
  font-weight: 700;
  color: var(--content-primary, #342e26);
  margin-bottom: 16px;
}

/* Mobile: match the stepper's step titles (.publish-flow__title — 26px/1.2,
   tracking-tight-5, balanced wrap), centered. Desktop keeps the left-aligned
   text-xl instructions heading. */

@media (max-width: 1023px) {
  .publish-flow__block-instructions-title {
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.06rem;
    /* tracking-tight-5 */
    text-align: center;
    text-wrap: balance;
  }
}

/* Two-column layout: instructions + bundle-card on the left, a Rive
   walkthrough on the right (stacks below the lg breakpoint). */

.publish-flow__block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

@media (max-width: 1023px) {
  .publish-flow__block-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Mobile order: title pinned to the very top, then the demo animation,
     then the copyable widget card, then the instructions. The animation
     lives in the RIGHT grid cell and the other three share the LEFT cell,
     so the left cell flattens (display: contents promotes its children to
     grid items) and order does the rest. Desktop keeps the 2-column layout
     untouched. Grid-scoped selectors so the LATER-in-file desktop margin
     rules can't reassert — the grid gap owns the spacing here. */

  .publish-flow__block-grid-left {
    display: contents;
  }

  .publish-flow__block-grid .publish-flow__block-instructions-title {
    order: 1;
    margin-bottom: 0;
  }

  .publish-flow__block-grid-right {
    order: 2;
  }

  .publish-flow__block-grid .publish-flow__bundle-card,
  .publish-flow__block-grid .publish-flow__block-instructions-wrap + .publish-flow__bundle-card {
    order: 3;
    margin-top: 0;
  }

  .publish-flow__block-instructions-wrap {
    order: 4;
    margin-bottom: 0;
  }
}

.publish-flow__block-grid-left {
  min-width: 0;
}

.publish-flow__block-grid-right {
  align-self: stretch;
  display: flex;
}

/* Hosted Rive walkthrough (rive.app embed iframe — no runtime/asset needed). */

.publish-flow__rive-col {
  position: relative;
  width: 100%;
  min-height: 300px;
  border-radius: var(--rounded-radius-28, 28px);
  overflow: hidden;
  /* No placeholder fill — the embedded walkthrough animation paints its own
     background (it used to match the Rive frame's flat colour). Size + radius
     kept; the iframe is absolutely positioned to cover the column. */
}

.publish-flow__rive-col iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Bundle-card preview: copy the <ol-bundle> snippet / open the theme editor. */

.publish-flow__bundle-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  background: var(--background-elevated, #ffffff);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* Wider gap between the instructions and the first action card; the bundle +
   Sidekick cards below stay tightly grouped at the base 16px. */

.publish-flow__block-instructions-wrap + .publish-flow__bundle-card {
  margin-top: 28px;
}

.publish-flow__bundle-card-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--content-primary, #342e26);
}

.publish-flow__bundle-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Sidekick (agent-first) option inside the bundle card, below the action row. */

.publish-flow__sidekick {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* "or" divider: the word sits between two flex-grown 1px rules (signup-page style). */

.publish-flow__or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

.publish-flow__or-divider::before,
.publish-flow__or-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--content-border-neutral, rgba(52, 46, 38, 0.08));
}

/* Toggle-able button icon (copy ⇄ check). Driven by the [hidden] attribute the
   clipboard controller flips — the [hidden] rule is more specific so it wins,
   which a `display` utility on the element wouldn't allow (it'd beat [hidden]). */

.publish-flow__btn-icon {
  display: flex;
  align-items: center;
}

.publish-flow__btn-icon[hidden] {
  display: none;
}

.publish-flow__bundle-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--background-base, #f7f5f0);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
}

/* The bundle-block step is a wider two-column layout — widen the shared dialog
   only while it's the active step (the resize transition animates it). */

.publish-flow-dialog:has([data-publish-flow-step-name="bundle_block"]) {
  max-width: 52rem !important;
}

.publish-flow__polling-status {
  font-size: 0.8125rem;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
  text-align: center;
  margin-top: 4px;
}

/* Escape hatch shown after N unsuccessful verify_block polls. Kept visually
   subtle so it doesn't compete with the primary "I've added the block" path,
   but always reachable for merchants whose detection has gone silent. */

.publish-flow__polling-escape {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.12));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.publish-flow__polling-escape-help {
  font-size: 0.8125rem;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
  text-align: center;
  max-width: 380px;
  line-height: 1.4;
}

/* Rotating status copy shown below a slow form submit so the user always
   sees the work alive instead of staring at a static loader label. */

.publish-flow__rotating-status {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
  text-align: center;
  min-height: 1.2em;
  transition: opacity 200ms ease-out;
}

/* Flash alerts surfaced inside the modal (e.g. clone_template failure).
   Without an in-modal placement, controller-side alerts redirected into the
   publish_flow turbo_frame would never reach the merchant. */

.publish-flow__alert {
  margin: 12px 24px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: rgba(220, 78, 65, 0.08);
  color: var(--content-error, #c53932);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Progress list (publish_progress, content_progress, brand_kit_progress). */

.publish-flow__progress-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 16px;
  background-color: var(--background-neutral, #f3f0e8);
}

.publish-flow__progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  transition: color 0.2s ease;
}

.publish-flow__progress-item--active {
  color: var(--content-primary, #342e26);
  font-weight: 500;
}

.publish-flow__progress-item--done {
  color: var(--content-primary, #342e26);
}

.publish-flow__progress-item--failed {
  color: var(--content-danger, #b42318);
  font-weight: 500;
}

.publish-flow__progress-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.publish-flow__progress-label {
  flex: 1 1 auto;
}

/* Spinner used in active progress rows and elsewhere. */

.publish-flow__spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--content-border-dark, rgba(52, 46, 38, 0.12));
  border-top-color: var(--content-primary, #342e26);
  animation: publishFlowSpin 0.8s linear infinite;
}

.publish-flow__pending-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--content-border-dark, rgba(52, 46, 38, 0.12));
}

@keyframes publishFlowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Success step + share-embed step. The big circular check that fades in. */

.publish-flow__success-icon {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background-color: var(--brand-secondary-moola, #254f1a);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
  animation: publishFlowScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes publishFlowScaleIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* URL box (success step, Shopify path). */

.publish-flow__url-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: var(--background-neutral, #f3f0e8);
}

.publish-flow__url-box-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
}

.publish-flow__url-box-url {
  font-size: 0.9375rem;
  color: var(--content-primary, #342e26);
  word-break: break-all;
  text-decoration: underline;
  text-decoration-color: var(--interactive-link-underline, rgba(52, 46, 38, 0.44));
}

.publish-flow__url-box-url:hover {
  text-decoration-color: var(--content-primary, #342e26);
}

/* Embed block (share_embed step). */

.publish-flow__embed-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background-color: var(--background-neutral, #f3f0e8);
}

.publish-flow__embed-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
}

.publish-flow__embed-code {
  margin: 0;
  padding: 12px 14px;
  background-color: var(--background-elevated, #ffffff);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--content-primary, #342e26);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
}

.publish-flow__embed-input {
  width: 100%;
}

/* Footer (action buttons stacked, 8px gap). */

/* Sticky bottom action bar — the standard footer for every step. Stacked
   full-width buttons (column) by default; Cancel/CTA rows add
   .publish-flow__footer-actions (below). Same chrome either way: pinned to
   the bottom of the scroll area, 16/24 padding, opaque bg so content scrolls
   cleanly behind it. */

.publish-flow__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  bottom: 0;
  padding: 16px 24px;
  background-color: var(--background-elevated, #ffffff);
}

/* Top hairline is desktop-only — mobile bottom-sheet footers are a borderless
   solid-white bar (the standard across our sheets). */

@media (min-width: 1024px) {
  .publish-flow__footer {
    border-top: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  }
}

/* Mobile: match the content's 16px sheet gutter so the buttons align with the
   cards above (also the shared _dialog_actions footer standard). */

@media (max-width: 1023px) {
  .publish-flow__footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* The Cancel + primary-CTA row (combinable with .publish-flow__footer on one
   element, or nested inside it when the footer holds extra rows — see
   bundle_block's escape hatch). Desktop: secondary left, primary right,
   auto-width. Mobile: both buttons full width, 50/50, 12px gap. Both buttons
   are always button-large. */

.publish-flow__footer-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  width: 100%;
}

/* While the primary's spinner is showing (data-spinner-shown, e.g. the
   template clone in flight) the secondary fades out — cancelling mid-clone
   isn't a real option, and the quiet exit keeps focus on the progress. */

.publish-flow__footer-actions > .button-secondary {
  transition: opacity 0.2s ease;
}

.publish-flow__footer-actions:has([data-spinner-shown="true"]) > .button-secondary {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .publish-flow__footer-actions {
    gap: 12px;
  }

  .publish-flow__footer-actions > * {
    flex: 1 1 0;
    min-width: 0;
  }

  /* The primary (last) never shrinks below its content: a long label
     (bundle_block's "I've added the block") takes the width it needs and the
     secondary flexes down to whatever remains; short labels keep the 50/50. */

  .publish-flow__footer-actions > :last-child {
    min-width: -moz-fit-content;
    min-width: fit-content;
  }

  /* While the primary's spinner runs, the fading secondary also COLLAPSES
     (flex-grow + padding → 0; the negative margin eats the container's 12px
     gap) so the primary scales out to full width. Every property is
     animatable, so the expansion tracks the collapse smoothly. */

  .publish-flow__footer-actions > .button-secondary {
    transition: opacity 0.2s ease, flex-grow 0.25s ease, padding 0.25s ease, margin 0.25s ease;
  }

  .publish-flow__footer-actions:has([data-spinner-shown="true"]) > .button-secondary {
    flex-grow: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: -12px;
    overflow: hidden;
  }
}

/* Review step preview card (repeat-shopify → elsewhere flow). */

.publish-flow__preview-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background-color: var(--background-neutral, #f3f0e8);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
}

.publish-flow__preview-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.publish-flow__preview-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--content-tertiary, rgba(52, 46, 38, 0.44));
}

.publish-flow__preview-field-value {
  font-size: 0.9375rem;
  color: var(--content-primary, #342e26);
  line-height: 1.5;
}

/* Error region shown when an action fails inside a progress step. */

.publish-flow__error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: var(--content-primary, #342e26);
  font-size: 0.875rem;
}

.publish-flow__error p {
  margin: 0;
}

/* Empty state (e.g. template picker with no Shopify templates returned). */

.publish-flow__empty {
  padding: 24px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
  border-radius: 12px;
  background-color: var(--background-neutral, #f3f0e8);
}

/* Utility: hide an element while keeping its layout space (used on the
   back button on the first step so the step indicator stays centered). */

.is-hidden {
  visibility: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────
   Generating state (publish_progress) — a compact, glowing modal that holds
   while the AI writes content + imagery, then expands into the draft preview.
   ───────────────────────────────────────────────────────────────────────── */

/* Size the dialog to 526px while generating (modal-fluid-resize on the dialog
   animates the max-width change). !important to beat the dialog's `lg:max-w-2xl`
   utility, which sits in Tailwind's later utilities layer and would otherwise
   win — same override pattern as the bundle_block width rule above. */

.publish-flow-dialog:has([data-publish-flow-step-name="publish_progress"]) {
  max-width: 526px !important;
}

/* Glow behind the card: a heavily-blurred rotating conic gradient (see the
   ::before below). Colors are tunable via --glow-*, the reach via --glow-size. */

/* The generating AND success/preview states take over the whole screen: the
   dialog fills the viewport (transparent — the ::backdrop paints the dark) and
   centers the card, so the result lands in the same immersive frame the merchant
   watched it generate in. Filling the viewport also makes the dialog the
   containing block for generating's fixed back button, so it pins to the TRUE
   viewport corner — a top-layer <dialog> traps fixed children inside its own box,
   so we make that box the whole viewport. */

.publish-flow-dialog:has(.publish-flow__step--generating, .publish-flow__step--success) {
  position: relative;
  overflow: visible;
  /* Snap straight to full-screen — the modal-fluid-resize transition would drift
     the centered card sideways as the box grows from the setup modal, fighting the
     card's clean vertical rise. Let the backdrop fade + card rise carry the motion. */
  transition: none !important;
  width: 100vw;
  max-width: 100vw !important;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  /* No shadow on the overlay itself — it's a transparent full-bleed container;
     the dark ::backdrop is the only surface. (Drops the inherited shadow-modal,
     whose rounded shadow read as a card edge against the backdrop.) */
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* GLOW-BORDER two-tone gradient — the defined arc travelling the card edge.
     (The GLOW halo carries its own palette, inline on the ::before below, so the
     two effects read as distinct colours on opposite sides of the card.) */
  --pf-border-1: #ffed84;
  /* #e258ee dialled lighter still = #e258ee @ 55% on white, baked opaque. */
  --pf-border-2: #efa3f6;
}

/* Keep the layout wrapper from stretching the card to full width — let it sit at
   its natural max width, centered by the dialog's flex. It's transparent and
   sized to the card, so it hosts the animated border glow behind .publish-flow
   (isolate so the ::before's z-index:-1 stays behind the card, not the dialog). */

.publish-flow-dialog:has(.publish-flow__step--generating, .publish-flow__step--success) > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 526px;
  min-height: 0;
  position: relative;
  isolation: isolate;
  /* Entrance: the card (and its glow) rise from +80px while fading in. `backwards`
     fill — NOT `forwards`/`both` — so no transform is pinned at rest; otherwise this
     wrapper would become the containing block for the fixed back button and yank it
     off the viewport corner. (The back button stays hidden until this settles.) */
  animation: pubGenRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards;
}

@keyframes pubGenRise {
  from {
    opacity: 0;
    transform: translateY(80px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* GLOW (Pomelli's soft "glow"): a blurred conic halo sized to ~card size, so a
   soft colored bloom hugs the card's outer edges and rotates. Lives on the
   transparent wrapper, behind the opaque card. (Placeholder colors for now.) */

@property --pf-border-angle {
  syntax: "<angle>";

  initial-value: 0deg;

  inherits: false;
}

.publish-flow-dialog:has(.publish-flow__step--generating) > *::before {
  content: "";
  position: absolute;
  /* Three levers control the glow's size + presence:
     • inset — how far the COLOURED shape reaches past the card edge before any
       blur. More negative = the glow starts further out. (border-radius tracks it
       so the corners stay rounded: ≈ card radius 48px + |inset|.)
     • blur — how far that colour FEATHERS outward into a soft halo. The main
       "spread" dial; bigger = wider + softer.
     • opacity — overall intensity.
     Wide + soft on purpose (NOT a tight halo): the softness is the whole edge
     treatment here — no mask. A mask (an eased alpha ramp clipped to the box)
     read as a hard rounded-rect "container" in real Safari, the opposite of what
     we want. A generous blur over a large inset instead dilutes the opaque conic
     arc long before it reaches any edge, so there's no hard colour for Safari's
     tighter filter-region clip to cut — it just blooms out and fades, same as
     Chrome. (Playwright's WebKit does NOT reproduce Safari's filter compositing,
     so tune this against real Safari, not the headless harness.) */
  inset: -20px;
  z-index: -1;
  border-radius: 68px;
  filter: blur(30px);
  opacity: 1;
  /* GLOW palette — the vibrant placeholders, each pre-composited on white at a
     toned-down opacity (lighter = more subtle), frozen as an OPAQUE hex so this
     blurred + animated layer never alpha-blends per frame. Ends on the brand
     shine yellow so the warm tail resolves into our primary:
       #c5abff = #4e00ff @ 33% on #fff   (violet)
       #f2b8ff = #d000ff @ 28% on #fff   (magenta)
       #ffbc85 = #ff7401 @ 48% on #fff   (orange)
       #fff5b8 = #ffed84 @ 58% on #fff   (shine yellow) */
  /* Fade the arc's head/tail to the ADJACENT colour at 0 alpha, NOT `transparent`.
     `transparent` is transparent-BLACK, so a colour→transparent stop interpolates
     through a grey/dark fringe; Chrome's blur hides it but Safari renders it as a
     harsh dark cutoff at the arc edge. Ramping to rgba(<same colour>, 0) keeps the
     hue constant through the fade, so the bloom dissolves cleanly on both engines. */
  background: conic-gradient(
    from var(--pf-border-angle),
    rgba(197, 171, 255, 0),
    #c5abff,
    #f2b8ff,
    #ffbc85,
    #fff5b8,
    rgba(255, 245, 184, 0) 50%
  );
  animation: publishFlowBorder 6s linear infinite;
}

@keyframes publishFlowBorder {
  to {
    --pf-border-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .publish-flow-dialog:has(.publish-flow__step--generating) > *::before {
    animation: none;
  }
}

/* SAFARI FALLBACK. Safari GPU-composites filter:blur() on this layer against an opaque backdrop —
   a hard dark box that only shows LIVE (screenshots + Chrome render it correctly). Every workaround
   that keeps the filter was tried and failed: z-index (incl. non-negative), isolation:auto, layer
   promotion (translateZ/will-change), and a real element instead of the ::before. Only removing the
   filter removes the box. So Safari drops the blur and gets a FEATHERED conic instead — the arc
   fades in/out over wide transparent transitions and sits just inside the box edge, so it still
   reads as a soft colored bloom rather than a hard wedge. (-webkit-hyphens:none targets Safari and
   not Chrome.) Chrome/Edge keep the blurred halo above. */

@supports (-webkit-hyphens: none) {
  .publish-flow-dialog:has(.publish-flow__step--generating, .publish-flow__step--success) > *::before {
    filter: none;
    inset: -8px;
    border-radius: 56px;
    opacity: 0.9;
    background: conic-gradient(
      from var(--pf-border-angle),
      rgba(197, 171, 255, 0),
      rgba(197, 171, 255, 0.55) 30deg,
      #c5abff 70deg,
      #f2b8ff 115deg,
      #ffbc85 155deg,
      rgba(255, 245, 184, 0.55) 185deg,
      rgba(255, 245, 184, 0) 215deg
    );
  }
}

/* GLOW-BORDER: a defined gradient outline tracing the card's exact perimeter (a
   crisp rounded-rect line, NOT a blurred halo) whose colored arc travels around
   as the angle rotates. Applied to .publish-flow via background-clip — conic in
   the border box, white fill in the padding box. */

@property --pf-line-angle {
  syntax: "<angle>";

  initial-value: 0deg;

  inherits: false;
}

@keyframes publishFlowBorderLine {
  to {
    --pf-line-angle: 360deg;
  }
}

/* The card surface + its animated gradient border (glow-border). White fills the
   padding box; the rotating conic shows only in the 2px border box. Crucially the
   conic is COLORED for just half its sweep and transparent the rest (Pomelli's
   `transparent → colors → transparent 50%`), so the visible border is a single
   coloured arc — roughly a quarter of the perimeter — that travels around as the
   angle rotates, fading to nothing on the other sides. The dialog is transparent
   now, so the card carries its own modal shadow. */

.publish-flow-dialog:has(.publish-flow__step--generating) .publish-flow {
  border: 2px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(var(--background-elevated, #ffffff), var(--background-elevated, #ffffff)) padding-box,
    conic-gradient(
      from var(--pf-line-angle),
      transparent 0%,
      var(--pf-border-1) 6%,
      var(--pf-border-1) 35%,
      var(--pf-border-2) 48%,
      transparent 50%
    ) border-box;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
  /* Offset the border's rotation half a cycle (-3s of 6s = 180°) from the glow
     halo, so the two colour arcs sit on OPPOSITE sides of the card instead of
     stacking — each effect stays distinct and the card reads as balanced. */
  animation: publishFlowBorderLine 6s linear -3s infinite;
}

/* Preview lifts its header out of the card onto the dark stage. The success step
   becomes the centered dark-stage column: an inverse-text header, a 32px gap, then
   the white recap card. .publish-flow itself stays transparent here (the dark
   ::backdrop shows through) — the white surface lives on .publish-flow__draft-card.
   The column hugs its content and centers; when the recap is taller than the
   viewport the card flex-shrinks and scrolls its content internally. */

.publish-flow__step--success {
  gap: 32px;
  flex: 1 1 auto;
  min-height: 0;
  /* The wrapper's rise (pubGenRise) carries the entrance, so suppress the per-step
     swap animation here (as the generating step does) — its `both`-fill leaves a
     translateY(0) transform that would make this the containing block for the fixed
     top-right "Done" button, yanking it off the viewport corner. */
  animation: none;
}

.publish-flow__body:has(.publish-flow__step--success) {
  min-height: 0;
}

/* Desktop: breathing room above the header on the immersive stage. */

@media (min-width: 1024px) {
  .publish-flow__step--success {
    padding-top: 48px;
  }
}

/* Header on the dark backdrop — inverse (light) text, never shrinks. */

.publish-flow__draft-header {
  flex: 0 0 auto;
  padding: 0 32px;
}

.publish-flow__draft-header .publish-flow__title {
  font-size: 2.25rem;
  /* 36px */
  line-height: 1.1;
  /* tighter than the base 1.2, both breakpoints */
  color: var(--content-primary-inverse, #ffffff);
}

.publish-flow__draft-header .publish-flow__subtitle {
  color: var(--content-secondary-inverse, rgba(255, 255, 255, 0.56));
  /* Let it run the full header width (drop the 440px cap the base subtitle uses). */
  max-width: none;
}

/* Inline "Help me" trigger in the subtitle — reads as an interactive link on the
   dark stage: a leading help glyph + brighter (full-inverse) underlined label.
   Tooltip wiring (data-create-tooltip + aria-label) lands once the copy exists. */

.publish-flow__help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: baseline;
  font: inherit;
  color: var(--content-primary-inverse, #ffffff);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.publish-flow__help-trigger:hover {
  opacity: 0.75;
}

.publish-flow__help-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.publish-flow__help-label {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  /* Standard solid underline — don't skip around descenders (the "p" in Help). */
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

/* The white recap card: bento + content + footer. overflow:hidden both rounds the
   card and clips the sticky footer's opaque bg to the rounded corners (so the
   footer can carry a background without managing its own bottom radius). Sizes to
   its content, but shrinks (content scrolls inside) when the column exceeds the
   viewport. Desktop corners 48px; 24px on mobile. */

.publish-flow__draft-card {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  /* anchor the success footer's gradient scrim */
  background: var(--background-elevated, #ffffff);
  border-radius: 24px;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.publish-flow__footer--draft {
  /* Full-bleed scrim PINNED to the card's bottom edge. It's a direct child of the card (which is
     position:relative), positioned absolutely — so it stays fixed to the container bottom no matter
     how tall or short the content is, instead of a sticky footer that rides up mid-card when the
     content doesn't fill the viewport. The scroll content carries bottom padding so its last item
     scrolls up under the gradient rather than being hidden behind the button. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: none;
  padding: 24px;
  /* 24px all sides */
  pointer-events: none;
  /* let the content scroll under the transparent area */
  /* Eased white gradient (smooth white → transparent rather than a hard linear ramp): solid white
     at the BOTTOM fading up to transparent, so the content dissolves into the footer. The base
     .publish-flow__footer fill is overridden to transparent so the gradient's alpha actually shows. */
  background-color: transparent;
  background-image: linear-gradient(
    to top,
    #ffffff 0%,
    rgba(255, 255, 255, 0.987) 8.1%,
    rgba(255, 255, 255, 0.951) 15.5%,
    rgba(255, 255, 255, 0.896) 22.5%,
    rgba(255, 255, 255, 0.825) 29%,
    rgba(255, 255, 255, 0.741) 35.3%,
    rgba(255, 255, 255, 0.648) 41.2%,
    rgba(255, 255, 255, 0.55) 47.1%,
    rgba(255, 255, 255, 0.45) 52.9%,
    rgba(255, 255, 255, 0.352) 58.8%,
    rgba(255, 255, 255, 0.259) 64.7%,
    rgba(255, 255, 255, 0.175) 71%,
    rgba(255, 255, 255, 0.104) 77.5%,
    rgba(255, 255, 255, 0.049) 84.5%,
    rgba(255, 255, 255, 0.013) 91.9%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Only the CTA is interactive; the transparent scrim itself must not eat clicks. */

.publish-flow__footer--draft > * {
  pointer-events: auto;
}

/* "Done" control pinned to the viewport's top-RIGHT over the dark backdrop (the
   mirror of the generating step's back button at top-left). Fixed — pinned to the
   corner of the whole view, not the card. Fades in only after the card's rise
   settles, same as the back button. */

.publish-flow__draft-done {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10;
  animation: pubGenFadeIn 0.3s ease 0.65s backwards;
}

/* Desktop modal corners: 48px. GENERATING is a full-bleed transparent overlay (the
   dark ::backdrop is the only surface) — the dialog stays square (border-radius:0
   on the base rule) so no rounded "card" edge shows against the backdrop; only its
   inner .publish-flow surface is rounded. The SUCCESS card carries it on its own
   .publish-flow__draft-card. */

@media (min-width: 1024px) {
  .publish-flow-dialog:has(.publish-flow__step--generating) .publish-flow {
    border-radius: 48px;
  }

  .publish-flow__draft-card {
    border-radius: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .publish-flow-dialog:has(.publish-flow__step--generating) .publish-flow {
    animation: none;
  }
}

/* Custom backdrop for the generation + preview states (!important to beat the
   dialog's `backdrop:bg-*` / `backdrop:backdrop-blur-xs` utilities; earlier
   stepper steps keep the standard overlay). Both share a solid dark "inverse"
   screen — the dark surface makes the conic glow pop and the light card read
   against it (opaque, so no blur). The preview reuses the generating stage so the
   result lands in the same immersive frame the merchant just watched. */

.publish-flow-dialog:has(.publish-flow__step--generating, .publish-flow__step--success)::backdrop {
  background: var(--background-dark, #24201b) !important;
  /* The dark screen fades in over the view rather than snapping on. */
  animation: pubGenBackdropIn 0.4s ease backwards;
}

@keyframes pubGenBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* The wrapper (the dialog's flex child) now owns the entrance — it rises + fades
   the whole card in — so the step body itself doesn't animate (that would just
   double the fade). */

.publish-flow__step--generating {
  animation: none;
}

/* The stop control sits below the card (position:absolute, top:100%); let it
   escape the generating content's scroll box AND the persistent frame's
   overflow:hidden so it isn't clipped. Generating content is short, so dropping
   the scroll/clip here is harmless. */

.publish-flow__step--generating .publish-flow__content {
  overflow: visible;
}

.publish-flow__body:has(.publish-flow__step--generating) {
  overflow: visible;
}

/* Neither immersive step shows the persistent close button: generating is
   non-dismissable (the stop control is the only way out), and the preview is
   dismissed via its own in-card "Done" button — a corner X would be redundant. */

.publish-flow-dialog:has(.publish-flow__step--generating, .publish-flow__step--success) .publish-flow__close {
  display: none;
}

.publish-flow__generating {
  align-items: center;
  text-align: center;
  padding: 40px;
}

/* Mobile: the generating card must FIT the viewport — it's a locked, no-scroll
   state. Tighter padding (20px all sides), tighter rhythm, a smaller subtitle
   and a shorter animation box together pull the card well under 100dvh. */

@media (max-width: 1023px) {
  .publish-flow__generating {
    padding: 20px;
    gap: 16px;
  }

  /* Softer card corners on a phone: 40px, between the 24px base and the 48px desktop. The rounded
     surface is .publish-flow (the content the merchant clicks has no background of its own), so the
     radius has to live there. Same (0,3,0) selector as the base rule but later + mobile-scoped. */

  .publish-flow-dialog:has(.publish-flow__step--generating) .publish-flow {
    border-radius: 40px;
    /* rounded-radius-40 */
  }

  /* NB: the mobile TITLE + SUBTITLE sizes can't live here — they'd tie the base generating type
     rules on specificity (0,2,0) and lose on source order. They sit immediately after those rules
     instead; see "Generating headline" below. */

  /* 48px product thumbs (down from 64px). The stack is an explicit box for the two absolutely
     positioned thumbs, so it has to track the size: 48px thumb + the 2nd thumb's 8px lateral offset. */

  .publish-flow__generating .publish-flow__gen-stack {
    width: 56px;
    height: 48px;
  }

  .publish-flow__generating .publish-flow__gen-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    /* rounded-radius-10 (down from the base 20px) */
  }

  .publish-flow__generating .publish-flow__gen-name {
    font-size: 0.875rem;
    /* text-sm */
  }

  /* Scoped (0,2,0) so the later-in-file base rules can't win the tie. */

  .publish-flow__generating .publish-flow__gen-media {
    --gen-media-h: 200px;
  }

  /* The stop control anchors to the VIEWPORT bottom (24px up), not below the
     card. Same late fade as the fixed back button: during the card's rise the
     transformed wrapper briefly re-anchors fixed descendants, so it stays
     invisible until the rise settles. */

  .publish-flow__generating .publish-flow__gen-stop-row {
    position: fixed;
    top: auto;
    bottom: 32px;
    margin-top: 0;
    z-index: 10;
    animation: pubGenFadeIn 0.3s ease 0.65s backwards;
  }

  /* Reserve the stop control's zone below the centered card (32px anchor +
     ~44px control + breathing room) so the two can never collide. */

  .publish-flow-dialog:has(.publish-flow__step--generating) {
    padding-bottom: 100px;
  }

  /* No back control on mobile. It's a FIXED button at the viewport's top-left, so it doesn't
     participate in the card's layout — and the card grows through the run (the write scene sprouts
     metafield chips), until on a phone it runs straight under the button and the merchant loses the
     control entirely. Hiding it also buys back that vertical band for the card.
     Nothing is lost: the stop square below the card fires the SAME action (publish-flow-generating#stop)
     behind the SAME confirm, so the two were always redundant. Desktop keeps the back button — there's
     room for it there, and it mirrors the success step's Done control at the top-right. */

  .publish-flow__gen-back {
    display: none;
  }
}

/* Back button overlaid on the dark backdrop at the VIEWPORT's top-left (fixed —
   pinned to the corner of the whole view, not the card). Appearance is the
   on-dark light variant (button-icon-inverse) applied in the markup; this only
   positions it. Fires the same stop action as the donut control (cancel
   generation → back to the interstitial). */

.publish-flow__gen-back {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 10;
  /* Fade in only AFTER the card's rise finishes. During the rise the wrapper is
     transformed, which briefly re-anchors this fixed button to the wrapper instead
     of the viewport — staying invisible until then hides that displacement. */
  animation: pubGenFadeIn 0.3s ease 0.65s backwards;
}

@keyframes pubGenFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Generating headline: a 36px display title (overrides the default step title),
   scoped so other steps keep their default size. */

.publish-flow__generating .publish-flow__title {
  font-size: 2.25rem;
  /* 36px */
  line-height: 1.1;
  /* letter-spacing comes from the tracking-tight-10 utility in the markup. */
}

/* 12px between the headline and subtitle (shared header-wrap default is 6px). */

.publish-flow__generating .publish-flow__header-wrap {
  gap: 12px;
}

/* Generating subtitle: text-base, regular weight, content-secondary. */

.publish-flow__generating .publish-flow__subtitle {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  max-width: none;
}

/* Tighter type on a phone: the 36px display title and 16px/1.5 subtitle above eat most of the card
   before the animation even starts. This has to sit AFTER those two rules — it matches them exactly
   on specificity (0,2,0), so the cascade falls through to source order and an earlier block (like
   the mobile one further up) would silently lose. */

@media (max-width: 1023px) {
  .publish-flow__generating .publish-flow__title {
    font-size: 1.625rem;
    /* 26px */
    line-height: 1.2;
    /* Loosen from the markup's tracking-tight-10 (-0.1625rem) — that spacing was tuned for the 36px
       display size and reads too condensed at 26px. This (0,2,0) rule outranks the utility class. */
    letter-spacing: -0.03rem;
    /* tracking-tight-3 */
  }

  .publish-flow__generating .publish-flow__subtitle {
    font-size: 0.875rem;
    /* text-sm */
    line-height: 18px;
  }
}

/* Shimmering AI status chip (label rotates via rotating-loading-text). 44px
   pill: 10px lead-in (icon side) / 16px trailing, rounded-full. A subtle
   transparent-white sheen sweeps the whole pill via ::after (clipped to the
   rounded corners by overflow:hidden) — separate from, and gentler than, the
   text shimmer on the label itself. */

.publish-flow__gen-chip {
  position: relative;
  /* Own stacking context so the ::after sheen can sit at z-index:-1 — above the
     pill background but BEHIND the icon + text (which paint in the normal-flow /
     positioned layers above negative z). */
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  height: 44px;
  /* Hold the pill height: it's a flex item in the generating column, and once the writing/media
     scene reveals below it the column gets height-constrained — without this the pill shrinks from
     44px to its ~16px content height. */
  flex-shrink: 0;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  /* The pill is tinted per pipeline stage with the matching outer-glow colour
     (--gen-chip-bg, set by the simulate controller); it fades between stages. */
  background: var(--gen-chip-bg, var(--brand-primary-shine, #ffed84));
  transition: background-color 0.6s ease;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  /* Chocolate brown for both the icon (fill: currentColor) and the shimmer text
     (currentColor base), on the shine-yellow pill. */
  color: var(--brand-primary-chocolate, #4d2f06);
}

.publish-flow__gen-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    45deg,
    transparent 28%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 72%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: pill-shimmer-slide var(--animation-duration, 3s) linear infinite;
}

/* The text shimmer inside the shine pill runs at a steeper ~45° diagonal with a
   touch more spread than the default near-vertical streak — reads better over a
   filled-background pill. (Default .text-shimmer elsewhere is unaffected.) */

.publish-flow__gen-chip .text-shimmer {
  --text-shimmer-angle: 45deg;
  --spread: 20%;
}

/* Emoji opt out of the shimmer's background-clip:text fill so colour emoji render
   normally instead of as a gradient silhouette (😍 would otherwise show as a circle). */

.publish-flow__gen-chip-emoji {
  -webkit-text-fill-color: initial;
  text-fill-color: initial;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

@keyframes pill-shimmer-slide {
  0% {
    background-position: 100% 0;
  }

  66% {
    background-position: 0% 0;
  }

  100% {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .publish-flow__gen-chip::after {
    animation: none;
  }
}

/* Bundle card: a stacked deck of offer thumbnails, then name + brands. */

.publish-flow__gen-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px;
  border-radius: 28px;
  /* rounded-radius-28 */
  background: var(--background-elevated, #ffffff);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  /* shadow-sm */
}

/* Success/preview variant — a roomier recap layout, decoupled from the compact
   generating card above. Meta on the left (avatar on its own row, a 32px name,
   brand names beneath); the thumbnail stack is pushed to the right. */

.publish-flow__gen-card--preview {
  flex-direction: row-reverse;
  /* meta left, thumbnail stack right */
  gap: 28px;
  padding: 28px;
  background: var(--background-base, #f7f5f0);
  border: none;
  box-shadow: none;
}

.publish-flow__gen-card--preview .publish-flow__gen-meta {
  gap: 0;
}

.publish-flow__gen-card--preview .publish-flow__gen-brands-avatar {
  margin-bottom: 8px;
  /* avatar → name */
  /* The card itself is now --background-base, which matches the avatar's
     initials-fallback fill — so give the circle an elevated (white) fill here to
     keep it visible (the inverse of its gray-on-white look in the generating
     card). Logo avatars cover this with their image, so it's a fallback-only nudge. */
  background: var(--background-elevated, #ffffff);
}

.publish-flow__gen-card--preview .publish-flow__gen-name {
  font-size: 1.625rem;
  /* 26px; letter-spacing via tracking-tight-5 in the markup */
  line-height: 1.2;
  margin-bottom: 4px;
  /* name → brands */
  /* Single line, ellipsis on overflow. Works because .publish-flow__gen-meta has
     min-width: 0, so it can shrink below the name's nowrap width in the card row. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publish-flow__gen-card--preview .publish-flow__gen-brands {
  font-size: 1rem;
  /* text-base */
  line-height: 16px;
  /* both breakpoints (mobile keeps this; only the font-size drops to text-xs) */
}

/* Larger 88px thumbnails in the recap deck, spread 12px further apart than the
   compact card (2nd-thumb offset 8px → 20px). */

.publish-flow__gen-card--preview .publish-flow__gen-stack {
  width: 108px;
  /* 88px thumb + 20px offset for the 2nd in the deck */
  height: 88px;
}

.publish-flow__gen-card--preview .publish-flow__gen-thumb {
  width: 88px;
  height: 88px;
  border-width: 2.5px;
}

.publish-flow__gen-card--preview .publish-flow__gen-thumb:nth-child(2) {
  left: 20px;
  /* 8px base + 12px further apart */
}

/* ── Generation media: source images → AI photoshoot ────────────────────────
   A FIXED-HEIGHT block between the status chip and the bundle card. It reveals
   ONCE when media generation begins (height 0 → --gen-media-h), then every phase
   morphs the grid INSIDE that fixed box — so the card resizes a single time, not
   on every phase, and the height never shifts as the layout changes. The
   simulate controller drives the phases (builds the layers, toggles classes):
     • source — the included product images in a 3×2 grid, under a glow-border +
       shimmer, held while the AI works.
     • ai — the generated photoshoot images, building up 2 → 3 → 6.
   --gen-media-h is fixed to the TALLEST state (the 3×2 source grid ≈ 297px; the
   6-up AI grid ≈ 292px), so it covers every layout; shorter states centre within. */

.publish-flow__gen-media {
  /* Tallest state's height — see above. Tune here to refine the fixed box. */
  --gen-media-h: 300px;
  position: relative;
  width: 100%;
  display: grid;
  /* Reveal once (height 0 → the fixed tallest-state height), then hold it: the
     container stays that height for every state, so the card never resizes as the
     layout changes — shorter states (2-up, 3-up) just centre within it.
     align-items:center centres each layer vertically; justify-items:stretch keeps
     them full width so the square columns resolve. */
  align-items: center;
  justify-items: stretch;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

.publish-flow__gen-media.is-revealed {
  /* Fixed to the tallest state (the 3×2 grid) — see --gen-media-h. */
  height: var(--gen-media-h, 300px);
  opacity: 1;
}

/* Source + AI layers occupy the SAME grid cell so they stack and cross-fade in
   place; the block (auto height) sizes to whichever is present. */

.publish-flow__gen-source,
.publish-flow__gen-ai {
  grid-area: 1 / 1;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.publish-flow__gen-source.is-out,
.publish-flow__gen-ai.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* SOURCE phase — a glow-border (the card's rotating conic, reused) with an inner
   gap (padding) so the border floats off the images, around a 3×2 product grid. */

.publish-flow__gen-source {
  /* Local override (only this grid): the second tone is a light tint of moola
     green (#254F1A, lightened + nudged yellow-green) so it harmonises with the
     shine yellow. The card's shared --pf-border-2 stays pink. */
  --pf-border-2: #a9e28d;
  border: 2px solid transparent;
  /* rounded-radius-32, ~concentric with the rounded-radius-24 cells across the 8px
     inset (24 + 8 = 32), so the gap stays even round the corners while keeping both
     the radius and the padding on our standard unit scale. */
  border-radius: 2rem;
  padding: 8px;
  background:
    linear-gradient(var(--background-elevated, #fff), var(--background-elevated, #fff)) padding-box,
    conic-gradient(
      from var(--pf-line-angle),
      transparent 0%,
      var(--pf-border-1) 6%,
      var(--pf-border-1) 35%,
      var(--pf-border-2) 48%,
      transparent 50%
    ) border-box;
  animation: publishFlowBorderLine 6s linear infinite;
}

/* Both media grids share the same balanced, centre-distributed layout: flex-wrap
   + justify-content:center so an incomplete last row centres (5 → 3+2 centred,
   not 3+left-2). --cols is set per data-count so the count picks the column run:
   2 cols for 1/2/4 (4 → a centred 2×2), 3 cols for 3/5/6. Square cells via
   aspect-ratio; basis = (100% − inter-col gaps) / cols. */

.publish-flow__gen-source-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  --cols: 3;
}

.publish-flow__gen-source-grid[data-count="1"],
.publish-flow__gen-source-grid[data-count="2"],
.publish-flow__gen-source-grid[data-count="4"] {
  --cols: 2;
}

.publish-flow__gen-source-cell {
  flex: 0 0 calc((100% - (var(--cols) - 1) * 6px) / var(--cols));
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1.5rem;
  /* rounded-radius-24 — matches the AI cells it cross-fades into */
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
}

.publish-flow__gen-source-cell img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* AI phase — the generated grid, revealed 1 → 2 → 6 (3×2). Pending slots show a
   shimmer skeleton; the image fades in over it as each "arrives". Same balanced
   layout as the source grid. */

.publish-flow__gen-ai {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  --cols: 3;
}

.publish-flow__gen-ai[data-count="1"],
.publish-flow__gen-ai[data-count="2"],
.publish-flow__gen-ai[data-count="4"] {
  --cols: 2;
}

.publish-flow__gen-ai-cell {
  position: relative;
  flex: 0 0 calc((100% - (var(--cols) - 1) * 8px) / var(--cols));
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1.5rem;
  /* rounded-radius-24 */
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* Whole-cell fade for the 1 → 2 grow. */

.publish-flow__gen-ai-cell.is-entering {
  opacity: 0;
}

.publish-flow__gen-ai-cell img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  z-index: 2;
  /* above the skeleton shimmer */
  transition: opacity 0.5s ease;
}

/* Per-image fade for the skeleton → photo swap. */

.publish-flow__gen-ai-cell img.is-entering {
  opacity: 0;
}

/* Skeleton placeholder until the generated image arrives: the reusable
   .media-shimmer loader (moola field + drifting glints) is injected as a child;
   the image fades in over it (z-index above), then the loader is removed. */

/* ── Writing scene (copy phase): metafield depth field ──────────────────────────
   The copy phase shows a field of metafield chips at varying depth: small, blurred,
   fixed chips fill the back (gradual blur layers); larger, sharp chips rise through
   the front. Hovering any chip pulls it into focus (scale up, sharpen, glow).
   Server-rendered as a stacked layer in the media box; the controller fades it in
   during the copy chips, then cross-fades it to the image scene. */

.publish-flow__gen-write {
  grid-area: 1 / 1;
  align-self: stretch;
  /* fill the box (not centred like the image grids) */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.45s ease;
  /* 3D scene: the back chips tilt/pull toward the cursor (set per-chip in JS) and
     this perspective gives that rotation depth. */
  perspective: 620px;
}

.publish-flow__gen-write.is-hidden,
.publish-flow__gen-write.is-out {
  opacity: 0;
  pointer-events: none;
}

/* a metafield chip floating in the depth field, positioned by its CENTRE so depth
   scaling stays put. Depth (scale + blur + opacity) is set per tier below. */

.publish-flow__gen-chip-tag {
  position: absolute;
  /* Scatter position — set per chip via --x / --y (front-tier chips omit --y and
     get their top from the gwChipRise animation instead). */
  left: var(--x);
  top: var(--y, auto);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(120, 90, 160, 0.14);
  box-shadow: 0 6px 16px rgba(80, 40, 120, 0.1);
  font-size: 12.5px;
  font-weight: 600;
  color: #5b5168;
  white-space: nowrap;
  /* --pull-* + --tilt-* are set per-chip by the cursor-tracking tilt (back chips
     only); they default to none so unaffected chips render flat. */
  transform: translate(-50%, -50%) translate(var(--pull-x, 0px), var(--pull-y, 0px))
    rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--scale, 1));
  opacity: var(--opacity, 1);
  filter: blur(var(--blur, 0));
  transition: transform 0.25s ease, filter 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  will-change: transform, filter;
  cursor: default;
}

/* leading metafield/metaobject icon (random per chip, currentColor). Sized in px
   so it scales with the chip's transform like the text does. */

.publish-flow__gen-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* depth tiers — back (small/blurred/faint) to mid; all fixed in place */

.publish-flow__gen-chip-tag.is-d1 {
  --scale: 0.8;
  --blur: 5px;
  --opacity: 0.32;
  z-index: 1;
}

.publish-flow__gen-chip-tag.is-d2 {
  --scale: 0.95;
  --blur: 3px;
  --opacity: 0.52;
  z-index: 2;
}

.publish-flow__gen-chip-tag.is-d3 {
  --scale: 1.08;
  --blur: 1.4px;
  --opacity: 0.74;
  z-index: 3;
}

/* front tier — sharp, larger, rising through the field */

.publish-flow__gen-chip-tag.is-front {
  --scale: 1.13;
  --blur: 0;
  --opacity: 1;
  z-index: 4;
  animation: gwChipRise var(--rise-dur, 8s) linear infinite;
  /* Per-chip stagger — set via --delay so the rise loop is offset without inline style. */
  animation-delay: var(--delay, 0s);
}

/* Rise full-opacity across the whole height and let the box overflow CLIP the
   ends (so a chip is "clipped off the top" / "coming in from the bottom" rather
   than fading) — only a quick fade-in as it enters from below. */

@keyframes gwChipRise {
  0% {
    top: 115%;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  100% {
    top: -15%;
    opacity: 1;
  }
}

/* hover: pull any chip into focus — scale up, sharpen, glow, and pause its rise */

.publish-flow__gen-chip-tag:hover {
  --scale: 1.3;
  --blur: 0;
  --opacity: 1;
  z-index: 10;
  animation-play-state: paused;
  box-shadow: 0 10px 34px rgba(197, 171, 255, 0.5), 0 0 0 1px rgba(242, 184, 255, 0.55);
}

/* Description finale — a controller-driven chip that rises to centre (top → 50%),
   then morphs (.is-field) into a text field and types out the real first sentence. */

.publish-flow__gen-chip-tag.is-desc {
  animation: none;
  /* controller-driven, not auto-rising */
  /* Rise at the SAME constant pace as the looping front chips (linear), travelling
     ~65% of the height (115% → 50%) in 4s — then it stops at centre and morphs. */
  transition: top 4s linear, width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.5s ease, padding 0.5s ease, border-radius 0.5s ease, background 0.5s ease,
    box-shadow 0.5s ease, transform 0.45s ease, color 0.3s ease, font-size 0.45s ease,
    opacity 0.45s ease;
}

/* morphed into a text field — matches the app field box (12px radius, inset border)
   plus a clicked-in glow. */

.publish-flow__gen-chip-tag.is-field {
  height: 52px;
  padding: 0 16px;
  border: none;
  border-radius: var(--rounded-radius-12, 12px);
  justify-content: flex-start;
  background: var(--content-background-elevated, #fff);
  font-size: 15px;
  font-weight: 400;
  color: var(--content-primary, #342e26);
  transform: translate(-50%, -50%) scale(1);
  /* Clicked-in glow: shine yellow with a little of the source-grid green mixed in
     (yellow stays prominent). The green lends contrast so the bright pale yellow
     doesn't wash out on the white field. */
  --gw-field-glow: color-mix(in srgb, var(--brand-primary-shine, #ffed84) 66%, #a9e28d);
  box-shadow: 0 0 0 1.5px inset var(--content-border-dark, rgba(52, 46, 38, 0.14)),
    0 0 0 3px color-mix(in srgb, var(--gw-field-glow) 72%, transparent),
    0 0 22px color-mix(in srgb, var(--gw-field-glow) 60%, transparent),
    0 12px 32px rgba(120, 90, 40, 0.12);
}

.publish-flow__gen-chip-tag.is-field::before {
  display: none;
}

/* hide the chip dot */

.publish-flow__gen-field-clip {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
}

.publish-flow__gen-field-inner {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: transform 0.08s linear;
  /* scroll to keep the caret in view */
}

.publish-flow__gen-field-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  background: var(--brand-secondary-moola, #254f1a);
  animation: gwCaretBlink 1s step-end infinite;
}

@keyframes gwCaretBlink {
  0%, 50% {
    opacity: 1;
  }

  50.01%, 100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .publish-flow__gen-source {
    animation: none;
  }

  .publish-flow__gen-media,
  .publish-flow__gen-source,
  .publish-flow__gen-ai,
  .publish-flow__gen-ai-cell {
    transition-duration: 0.2s;
  }

  .publish-flow__gen-chip-tag.is-front {
    animation: none;
    top: 50%;
  }

  .publish-flow__gen-field-caret {
    animation: none;
  }
}

/* Two overlapping product thumbnails (column 1 of the row). The thumbs are
   absolutely positioned, so the container needs an explicit box: a 64px image
   plus the 2nd thumb's 8px lateral offset. */

.publish-flow__gen-stack {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 64px;
}

.publish-flow__gen-thumb {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  /* rounded-radius-20 */
  overflow: hidden;
  border: 1.5px solid #ffffff;
  /* Gradient fallback shows through when an offer has no image. */
  background: linear-gradient(
    135deg,
    var(--background-base, #f7f5f0),
    var(--background-overlay, rgba(104, 67, 0, 0.1))
  );
}

.publish-flow__gen-thumb:nth-child(1) {
  top: 0;
  left: 0;
  transform: rotate(-3deg);
  z-index: 2;
}

.publish-flow__gen-thumb:nth-child(2) {
  top: 0;
  left: 8px;
  transform: rotate(4deg);
  z-index: 1;
}

.publish-flow__gen-meta {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.publish-flow__gen-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--content-primary, #342e26);
}

.publish-flow__gen-brands {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--content-primary, #342e26);
}

.publish-flow__gen-brands-avatar {
  flex-shrink: 0;
}

/* Looping progress + functional stop, ported from the Collab Finder Omnibox.
   The ring spins indefinitely (no fake progress fill); the square is a real
   stop control — clicking it aborts generation and returns to the interstitial.
   The "ring" is a conic gradient (comet: transparent → white → transparent)
   masked to a thin band at the circle's edge, rotated continuously. */

/* Sits OUTSIDE the modal card, centered just below it on the backdrop (Pomelli
   style). Absolutely positioned against .publish-flow (position:relative) so it
   escapes the content's scroll region and the card's rounded box; top:100% drops
   it to the card's bottom edge, +24px gap. */

.publish-flow__gen-stop-row {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.publish-flow__gen-stop {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  /* On the dark generating backdrop the button inverts: white circle, with the
     stop square + spinner in content-primary. */
  background: var(--background-elevated, #ffffff);
  color: var(--content-primary, #342e26);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.publish-flow__gen-stop:hover {
  transform: scale(1.05);
}

/* Spinner ring: inset 4px from the button edge (32px ring in a 40px circle) so
   the white circle shows a ring of padding around it for contrast. The conic
   comet (content-primary) is masked to a 2.5px band at the inset circle's edge
   and rotated continuously. */

.publish-flow__gen-stop::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--content-primary, #342e26) 270deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2.5px),
    #000 calc(100% - 2.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2.5px),
    #000 calc(100% - 2.5px)
  );
  animation: publishFlowSpin 1s linear infinite;
}

.publish-flow__gen-stop-icon {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
}

.publish-flow__gen-stop-label {
  font-size: 0.875rem;
  /* On the dark generating backdrop → inverse (on-dark) secondary content. */
  color: var(--content-secondary-inverse, rgba(255, 255, 255, 0.56));
}

@keyframes publishFlowSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .publish-flow__gen-stop::before {
    animation: none;
  }
}

/* Headerless (standalone-dialog) steps hide the whole stepper header. The
   [hidden] attribute alone loses to .publish-flow__header's display:flex, so
   pin it with a higher-specificity rule. The close button stays (it's separate). */

.publish-flow__header[hidden] {
  display: none;
}

/* The recap content owns the scroll inside the (possibly shrunk) card; the footer
   below it stays pinned. No internal header to clear now (it's lifted onto the dark
   stage), so a normal card-top padding. */

.publish-flow__step--success .publish-flow__content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  /* Extra bottom padding clears the absolute footer/CTA (≈96px) so the last field
     can scroll fully into view above the gradient scrim. */
  padding: 24px 24px 96px;
  /* Trap the recap's internal z-indexes. The scrolling content stacks things inside itself (the
     "N more" tile fans its thumbnails with z-index 1/2/3), and the footer is a positioned sibling at
     z-index:auto — so those positive z children were escaping into the CARD's stacking context and
     painting OVER the "View in Shopify" CTA. Isolating the scroll region keeps that layering local,
     so the footer (a later sibling) always wins. Beats bumping the footer's z-index, which would just
     restart the fight the next time content stacks something. */
  isolation: isolate;
  /* Scroll without a visible scrollbar (still scrollable). */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* legacy Edge */
}

.publish-flow__step--success .publish-flow__content::-webkit-scrollbar {
  display: none;
  /* WebKit (Chrome/Safari) */
}

/* ── Ready-to-generate interstitial ─────────────────────────────────────── */

.publish-flow__ready {
  align-items: center;
  text-align: center;
  gap: 32px;
  padding-top: 28px;
  padding-bottom: 28px;
}

/* Hero-sized headline for this step (the shared title is 26px/tight-5). */

.publish-flow__ready .publish-flow__title {
  font-size: 2.25rem;
  /* 36px */
  line-height: 1.1;
  letter-spacing: -0.1625rem;
  /* tracking-tight-10 — our most condensed */
}

/* Mobile: the banner pins to the bottom of the body, just above the Let's go
   footer — the preview group grows to fill the full-height sheet's slack and
   the auto margin pushes the banner down (an in-flow "absolute bottom": no
   overlap if a short viewport ever makes the content actually scroll). The
   tighter 8px bottom padding closes the gap to the footer. */

@media (max-width: 1023px) {
  .publish-flow__ready {
    padding-bottom: 8px;
  }

  .publish-flow__ready-preview {
    flex: 1 1 auto;
    min-height: 0;
  }

  .publish-flow__ready-banner {
    margin-top: auto;
  }
}

/* Placeholder for the hover-preview animation (video to come). */

.publish-flow__ready-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  background: radial-gradient(
    120% 120% at 50% 0%,
    var(--background-base, #f7f5f0),
    var(--background-overlay, rgba(104, 67, 0, 0.1))
  );
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
}

/* Media preview + clarifying banner, 24px apart. */

.publish-flow__ready-preview {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Default banner style: --background-base surface, icon + text row. */

.publish-flow__ready-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--background-base, #f7f5f0);
  text-align: left;
}

.publish-flow__ready-cta {
  margin: 0;
  width: 100%;
}

/* ── Draft outline (post-publish recap) ─────────────────────────────────────
   A wide bento preview of what the agent generated: imagery on top, full
   content below. Centered header, left-aligned bento cards. ─────────────── */

/* The preview reuses the generating step's immersive dark stage (dark backdrop,
   centered card, no close/back — see the generating block above). Keep the
   recap's wider width though: cap the WRAPPER (not the now-full-bleed dialog) at
   52rem, overriding the generating wrapper's 526px so the bento stays as laid out. */

.publish-flow-dialog:has(.publish-flow__step--success) > * {
  max-width: 52rem;
}

.publish-flow__draft {
  align-items: stretch;
  gap: 8px;
}

.publish-flow__draft .publish-flow__header-wrap {
  text-align: center;
}

/* Generated imagery bento. */

.publish-flow__draft-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.publish-flow__draft-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  /* Radius is applied via the rounded-radius-24 utility on the element, not hardcoded here, so it
     stays on the design-system token and is controlled consistently across the app. */
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--background-base, #f7f5f0),
    var(--background-overlay, rgba(104, 67, 0, 0.1))
  );
}

/* "View all" tile — the fourth slot when there are more than three photos. A
   square tile matching the images (same radius), but an elevated surface since
   it's a control: a fanned deck of the overflow images over a "{n} more" label.
   shadow-sm → hover:shadow-md come from utility classes in the markup. */

.publish-flow__draft-more {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px;
  /* Radius applied via the rounded-radius-24 utility in the markup (same as the image tiles). */
  background: var(--background-elevated, #ffffff);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.publish-flow__draft-more:focus-visible {
  outline: 2px solid var(--content-focus-outline, rgba(52, 46, 38, 0.2));
  outline-offset: 2px;
}

/* Fanned deck of up to three overflow images — the bundle card's white-bordered,
   shadowed thumbnails (shadow-md via the markup), scaled down. The fan uses
   Airbnb's technique: a transform-origin pivot BELOW the cards, so a small rotate
   splays them out from a common base (like a hand of cards) rather than offset +
   rotate from each card's own centre. */

.publish-flow__draft-more-stack {
  position: relative;
  width: 104px;
  height: 64px;
  flex-shrink: 0;
}

.publish-flow__draft-more-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  /* centre; the rotate/translate below scatter the cards */
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #ffffff;
  background: linear-gradient(
    135deg,
    var(--background-base, #f7f5f0),
    var(--background-overlay, rgba(104, 67, 0, 0.1))
  );
  transform-origin: 50% 50%;
  /* centre pivot, like Airbnb */
  /* Airbnb drives this with the individual rotate/translate properties (not the
     `transform` shorthand) so the hover spread can animate with a touch of overshoot. */
  transition:
    translate 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
    rotate 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* Rest = Airbnb's scattered-stack layout: each card rotated + translated as a % of
   its OWN size, around its centre. Front-most (highest z) → furthest-back (lowest z). */

.publish-flow__draft-more-thumb:nth-child(1) {
  rotate: -5deg;
  translate: -37.1429% -5.71429%;
  z-index: 3;
}

.publish-flow__draft-more-thumb:nth-child(2) {
  rotate: 5deg;
  translate: 37.1429% -25.7143%;
  z-index: 2;
}

.publish-flow__draft-more-thumb:nth-child(3) {
  rotate: -2.5deg;
  translate: -17.1429% -42.8571%;
  z-index: 1;
}

/* Hover: each card pushes a bit further in its own direction — the stack opens up. */

.publish-flow__draft-more:hover .publish-flow__draft-more-thumb:nth-child(1) {
  rotate: -7deg;
  translate: -48% -12%;
}

.publish-flow__draft-more:hover .publish-flow__draft-more-thumb:nth-child(2) {
  rotate: 7deg;
  translate: 48% -33%;
}

.publish-flow__draft-more:hover .publish-flow__draft-more-thumb:nth-child(3) {
  rotate: -4deg;
  translate: -24% -54%;
}

.publish-flow__draft-more-label {
  font-size: 0.9375rem;
  /* 15px */
  font-weight: 600;
  line-height: 1;
  color: var(--content-primary, #342e26);
}

/* Partner media — one tile per included product, laid out in the same bento grid as
   the photoshoot. The product's first image fills the tile; any additional images
   overlay as small square thumbnails pinned to the bottom (6px inset on left/right/
   bottom). Up to three slots — a 4th+ collapses the third into a "{n} more" count. */

.publish-flow__partner-tile {
  position: relative;
  aspect-ratio: 1;
  /* Radius is applied via the rounded-radius-24 utility on the element (matches the photoshoot tiles),
     not hardcoded here, so it stays on the design-system token. */
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--background-base, #f7f5f0),
    var(--background-overlay, rgba(104, 67, 0, 0.1))
  );
}

.publish-flow__partner-lead {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.publish-flow__partner-thumbs {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
}

.publish-flow__partner-thumb {
  /* Three equal slots that fill the tile width: each is a third, with the two 4px
     gaps subtracted so a full row spans edge-to-edge. Fewer images just leave the
     trailing slots empty, keeping every thumbnail the same size across tiles. */
  position: relative;
  flex: 0 0 calc((100% - 8px) / 3);
  aspect-ratio: 1;
  border-radius: 16px;
  /* rounded-radius-16 */
  overflow: hidden;
  background: var(--background-elevated, #ffffff);
}

/* Hairline drawn as an inset overlay (a positioned layer ON TOP of the image) rather
   than an outer border, so it reads as a border over the artwork. An inset box-shadow
   would be hidden behind the opaque image; a top ::after isn't. */

.publish-flow__partner-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  pointer-events: none;
}

/* Overflow slot: a flat surface (not a photo) with the generic image glyph + count. */

.publish-flow__partner-thumb--more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--content-primary, #342e26);
  font-size: 0.8125rem;
  /* 13px */
  font-weight: 600;
}

.publish-flow__partner-more-count {
  line-height: 1;
}

/* Generated content bento. */

/* Flex-wrap (not grid) so the row never leaves a hole: cards default to two-up
   (≈50%), but a card left alone on a line — because its neighbour is full-width, or
   it's an odd one at the end — flex-grows to fill the whole row instead of stranding
   an empty column. Fully dynamic: works for any number of merchant metafields. */

.publish-flow__draft-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  text-align: left;
}

.publish-flow__draft-field {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 28px;
  /* rounded-radius-28 */
  background: var(--background-base, #f7f5f0);
}

/* Half-width basis, but grow to fill when alone on a line (50% - 4px accounts for
   the 8px gap shared between the two columns). */

.publish-flow__draft-content > .publish-flow__draft-field {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}

/* Wide cards always span the full row. */

.publish-flow__draft-content > .publish-flow__draft-field--wide {
  flex-basis: 100%;
}

/* Linked cards open the Shopify product (these fields are managed there, not in
   OfferLab — for now). position:relative anchors the floating action; hover/focus
   reveals it and draws a 2px inset ring in the primary colour. */

.publish-flow__draft-field--linked {
  position: relative;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.publish-flow__draft-field--linked:hover,
.publish-flow__draft-field--linked:focus-visible {
  box-shadow: inset 0 0 0 2px var(--content-primary, #342e26);
  outline: none;
}

/* Floating external-link action — pinned 16px from the card's top-right, revealed on
   hover/focus. Visual only: the card's own <a> handles the click, so it must not eat
   pointer events. */

.publish-flow__draft-field-action {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.publish-flow__draft-field--linked:hover .publish-flow__draft-field-action,
.publish-flow__draft-field--linked:focus-visible .publish-flow__draft-field-action {
  opacity: 1;
}

.publish-flow__draft-label {
  font-size: 1rem;
  /* text-base */
  font-weight: 600;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

.publish-flow__draft-value {
  font-size: 1rem;
  /* text-base */
  line-height: 1.5;
  color: var(--content-primary, #342e26);
}

.publish-flow__draft-value--title {
  font-size: 1.5rem;
  /* 24px; font-family from the .font-display-semi-condensed utility in the markup */
  font-weight: 600;
  line-height: 1;
}

/* ── Typed metafield/metaobject renderers (preview bento) ──────────────────── */

/* Color field: a swatch beside the hex value. */

.publish-flow__draft-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.publish-flow__draft-swatch-chip {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  flex-shrink: 0;
}

/* Image / file field: a contained thumbnail. */

/* Metafield image: source aspect ratios vary, so we pin a fixed 144px height and
   let the width follow the image's own ratio (width:auto), then centre the result
   within the field cell. The wrapper hugs the image so the radius rounds the art. */

.publish-flow__draft-imagefield {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  height: 144px;
  border-radius: 20px;
  /* rounded-radius-20 */
  overflow: hidden;
}

/* ── Success recap, mobile ──────────────────────────────────────────────────
   The stage wrapper's 526px cap never met the viewport, so the content-sized
   card rendered wider than small screens (max-width here beats the base rule
   by source order). Chips may run the full row instead of thirds. */

@media (max-width: 1023px) {
  .publish-flow-dialog:has(.publish-flow__step--generating, .publish-flow__step--success) > * {
    max-width: 100%;
  }

  /* ── Mobile recap: the panel RIDES UP and DOCKS under Done ─────────────────────────────────────
     Desktop centers a recap card on a dark stage. On a phone the same pieces re-stage as a sheet:
     Done stays fixed on the dark UI, and scrolling lifts the white panel until its top edge docks
     just beneath Done, fading the hero (title + subtitle) out behind it. Past the dock the panel is
     pinned and only its content keeps moving. The panel never slides UNDER Done — Done keeps a dark
     strip above the panel, which is the whole point (white-on-white had no contrast).

     THE SCROLLER IS STILL .publish-flow__content — the same element that scrolls on desktop. Nothing
     nests, so there's no scroll-chaining handoff to go janky mid-flick under a thumb. (An earlier
     pass moved overflow-y up to .publish-flow__body and let the whole view scroll; that flattens the
     dark stage into the scroll flow, so Done can't stay on dark and the panel can't dock.)

     publish_flow_recap_controller publishes ONE property off that scrollTop —
     --pf-collapse = min(scrollTop, travel) — and exactly two rules below consume it:

         panel   translateY(-collapse)          rides up, docks after `travel` px
         content padding-top: + collapse        cancels the panel's rise

     The second is load-bearing. Without it the content moves by the scroll AND by the panel's rise:
     2px on screen per 1px of thumb. With it the content sits at (natural - scrollTop) whatever the
     collapse is, so it tracks the finger 1:1 and the collapse reads purely as the panel climbing.
     The padding also grows the scroll range by the same amount it consumes, so the end of the recap
     stays reachable. Both properties are absent on desktop (and stripped on resize out of mobile),
     so every calc() falls back to 0px and the panel sits static. */

  .publish-flow-dialog:has(.publish-flow__step--success) {
    overflow: hidden;
    /* a fixed frame — the panel's content scrolls, nothing else */
    justify-content: flex-start;
    /* column flex: vertical is the MAIN axis */
    /* NO side gutter: the panel is full-bleed, so it just fills the dialog and the HEADER carries
       its own gutter instead (beats breaking the panel out with a negative inline margin). */
    padding: 16px 0 0;
  }

  /* Height-BIND the chain from the dialog down to the step. The dialog's own wrapper divs are
     flex:0 0 auto with no cap, so without this they size to CONTENT — the whole column balloons to
     the recap's ~2000px, the panel never gets capped at the viewport, and the content therefore has
     nothing to overflow: the scroller silently stops scrolling. Everything downstream (the dock, the
     pinned footer, the collapse) depends on the panel ending at the viewport bottom. */

  .publish-flow-dialog:has(.publish-flow__step--success) > *,
  .publish-flow-dialog:has(.publish-flow__step--success) .publish-flow,
  .publish-flow__body:has(.publish-flow__step--success) {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }

  /* 16px side gutter now the dialog dropped its own; 72px top clears the fixed 48px Done control
     pinned at top:24 (dialog top padding is 16px, so 16 + 72 lands the title below Done's 72px
     bottom edge). Fades out as the panel climbs over it. */

  .publish-flow__draft-header {
    padding: 72px 16px 0;
    opacity: var(--pf-hero-fade, 1);
    /* No transition: this tracks scrollTop frame by frame, so easing it would only add lag. */
  }

  /* Full-bleed white panel. Rounds at the top only (it runs off the bottom of the viewport), and
     paints ABOVE the hero so it covers the fading text as it climbs.

     flex:1 + the negative bottom margin is what pays for the translate: the margin hands the flex
     line `collapse` extra free space, this item (the only one that grows) absorbs all of it, and the
     translate then lands its bottom edge back exactly on the viewport bottom. So the panel gets
     TALLER as it rises rather than dragging a gap up behind it — and the footer, absolutely pinned
     to the panel's bottom, stays on the viewport bottom for free. */

  .publish-flow__draft-card {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    border-radius: 36px 36px 0 0;
    /* concentric with the 28px inner cards + 8px content padding (28 + 8 = 36) */
    margin-bottom: calc(-1 * var(--pf-collapse, 0px));
    transform: translateY(calc(-1 * var(--pf-collapse, 0px)));
  }

  /* 8px sides — the bento tiles want the width back now that the panel is edge to edge. The bottom
     keeps its clearance so the last row scrolls up UNDER the footer scrim rather than behind the
     button. The top is 8px + the collapse (see the block comment above). */

  .publish-flow__step--success .publish-flow__content {
    padding: calc(8px + var(--pf-collapse, 0px)) 8px 96px;
    /* The top padding grows mid-scroll; scroll anchoring would "helpfully" compensate by shifting
       scrollTop, which feeds straight back into --pf-collapse and makes the climb stutter. */
    overflow-anchor: none;
  }

  /* Partner-media overlay thumbnails read smaller at this scale. */

  .publish-flow__partner-thumb {
    border-radius: 12px;
    /* rounded-radius-12 */
  }

  /* Recap bundle card: 16px all round. The desktop 28px inset eats too much of a 375px row and
     squeezes the name/brand column (the bundle name was truncating to "QA: Pu…"). */

  .publish-flow__gen-card--preview {
    padding: 16px;
  }

  /* Bundle name: text-base on a phone (down from the 26px desktop display size). At 26px in a 375px
     row it truncated to "Untitled bundle (Cop…"; 16px lets it breathe. Same (0,2,0) selector as the
     base rule but later + mobile-scoped, so it wins the tie. Keeps nowrap/ellipsis for the extreme. */

  .publish-flow__gen-card--preview .publish-flow__gen-name {
    font-size: 0.875rem;
    /* text-sm */
    line-height: 18px;
    margin-bottom: 0;
    /* close the gap to the brands line (base preview rule leaves 4px) */
    /* Loosen from the markup's tracking-tight-5 (-0.06rem), which was tuned for the 26px desktop
       size and reads too tight here. This (0,2,0) rule outranks the utility class. */
    letter-spacing: -0.02rem;
    /* tracking-tight-2 */
  }

  /* Brands line a step smaller than the name on a phone (text-xs vs the desktop text-base). Same
     (0,2,0) selector as the base preview rule but later + mobile-scoped, so it wins the tie. */

  .publish-flow__gen-card--preview .publish-flow__gen-brands {
    font-size: 0.75rem;
    /* text-xs */
  }

  /* Recap deck thumbs: 64px on a phone (down from the 88px desktop deck). The stack is an explicit
     box for the two absolutely-positioned thumbs, so it has to track the size: 64px thumb + the 2nd
     thumb's 16px lateral peek. Radius held at 20px. All three selectors match their base preview
     rules on specificity and sit later + mobile-scoped, so they win the tie. */

  .publish-flow__gen-card--preview .publish-flow__gen-stack {
    width: 80px;
    height: 64px;
  }

  .publish-flow__gen-card--preview .publish-flow__gen-thumb {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    /* rounded-radius-20 */
  }

  .publish-flow__gen-card--preview .publish-flow__gen-thumb:nth-child(2) {
    left: 16px;
    /* 2nd thumb's peek, scaled from the desktop deck's 20px */
  }

  /* Media bento: a fixed 2-up, matching the Assets tab. The desktop track (auto-fill, 160px floor)
     can only ever fit ONE column at this width, so the tiles stacked one-up. Both the bundle
     photoshoot and the partner media render through this grid, so this covers both. */

  .publish-flow__draft-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* "3 more" tile: give the deck more headroom and drop the label to the tile's bottom edge, flush
     with the 12px padding, instead of hugging the deck. Pulling the label out of the centered flow
     lets the deck sit at true center (~15px lower than the old stack+label group), which is the extra
     top space; the label then pins to the bottom. */

  .publish-flow__draft-more {
    position: relative;
  }

  .publish-flow__draft-more-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    text-align: center;
  }

  .publish-flow__draft-content > .publish-flow__draft-field {
    flex-basis: 100%;
  }

  .publish-flow__draft-field {
    padding: 20px;
    gap: 12px;
  }

  /* Scoped (0,2,0): the chip's base third-width cap is defined later in the
     file and would win a plain-class tie. Covers both list chips (inside
     __draft-chips) and standalone metaobject chips — every chip renders
     inside a __draft-field card. */

  .publish-flow__draft-field .publish-flow__draft-chip {
    max-width: 100%;
  }
}

/* Metaobject lists → Shopify-style chips: a small media + text preview in a
   rounded chip, capped width with an ellipsis, wrapping in an 8px-gap flex row
   (mirrors Shopify's own admin metafield-list UI). */

.publish-flow__draft-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.publish-flow__draft-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* between thumbnail and text */
  /* Cap each chip at a third of the row (minus the two 8px gaps) so at least three
     fit before wrapping; shorter chips pack more per row. */
  max-width: calc((100% - 16px) / 3);
  min-width: 0;
  padding: 8px 12px 8px 8px;
  /* extra right inset so the text clears the edge */
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  border-radius: 20px;
  /* rounded-radius-20 */
  font-size: 0.875rem;
  /* text-sm */
  font-weight: 500;
  /* medium */
  color: var(--content-primary, #342e26);
}

/* Text-only chips (no thumbnail) read as smaller tokens — just a tighter radius;
   the flat overlay fill / no border / no shadow is shared by all chips above. */

.publish-flow__draft-chip:not(:has(.publish-flow__draft-chip-thumb)) {
  border-radius: 12px;
  /* rounded-radius-12 */
}

.publish-flow__draft-chip-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  /* rounded-radius-10 */
  overflow: hidden;
  flex-shrink: 0;
}

.publish-flow__draft-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A single metaobject reference reuses the chip, with room for longer text. */

.publish-flow__draft-chip--lg {
  max-width: 360px;
}

/* Metaobject LISTS → each object fully exposed. Instead of a wrapping row of name-only chips, every
   entry is a block that shows its media (if any) + all of its fields (label + value), and the blocks
   stack in a single column. Keeps the chips' overlay background so each object still reads as its own
   token. */

.publish-flow__draft-objects {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.publish-flow__draft-object {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  border-radius: 20px;
  /* rounded-radius-20 — matches the chips it replaces */
}

.publish-flow__draft-object-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  /* rounded-radius-12 */
  overflow: hidden;
  flex-shrink: 0;
}

.publish-flow__draft-object-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.publish-flow__draft-object-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.publish-flow__draft-object-field-label {
  font-size: 0.75rem;
  /* text-xs */
  font-weight: 600;
  color: var(--content-secondary, rgba(52, 46, 38, 0.64));
}

.publish-flow__draft-object-field-value {
  font-size: 0.9375rem;
  /* 15px */
  line-height: 1.45;
  color: var(--content-primary, #342e26);
}

/* Rich text (sanitized HTML) inside a field value: give block tags sensible spacing so paragraphs and
   lists read as formatted text, not a run-on wall. */

.publish-flow__draft-value p,
.publish-flow__draft-object-field-value p {
  margin: 0;
}

.publish-flow__draft-value p + p,
.publish-flow__draft-object-field-value p + p {
  margin-top: 0.5em;
}

.publish-flow__draft-value ul,
.publish-flow__draft-value ol,
.publish-flow__draft-object-field-value ul,
.publish-flow__draft-object-field-value ol {
  margin: 0.25em 0;
  padding-left: 1.25em;
}

/* Guide tutorial modal — a reusable in-app education pattern (OL-3459, first used by the
   Orders 2.0 "How orders work" guide). One themed TurboDialog stays mounted while its
   slides cross-fade in place and the viewport height eases to each slide, so the nav +
   action bar never move and the modal grows/shrinks fluidly between steps. Theme colors
   are per-guide CSS variables so other guides can reuse this structure with a different
   palette — the orders palette is the default set on `.guide-dialog`. Behavior lives in
   guide_dialog_controller.js. */

.guide-dialog {
  /* Orders theme palette — lilac surface, chocolate ink. (Custom hex, off the system.) */
  --guide-bg: #e2c2e8;
  --guide-ink: #4d2f06;
  /* chocolate — nav title, headings, primary button fill */
  --guide-ink-contrast: #f3f0e8;
  /* crisp — primary button label */
  --guide-back-ink: #342e26;
  /* primary — back button label */
  --guide-overlay: rgba(104, 67, 0, 0.08);
  /* background-overlay — close-button hover */
  --guide-dot: rgba(77, 47, 6, 0.2);
  --guide-dot-active: #4d2f06;
  /* Slide-transition timing + distance — variables so the dev guide-animation playground (and any
     future tuning) can drive the motion live without touching the rules below. Defaults = current. */
  --guide-media-distance: 33%;
  --guide-media-fade: 0.3s;
  --guide-media-travel: 1s;
  --guide-media-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Copy cross-fade is sequenced, not simultaneous: the outgoing text fades out (--out) first and
     quickly, and the incoming text fades in (--in) only after --in-delay — set so the old text is
     ~90% gone before the new appears, so they barely overlap. */
  --guide-copy-out: 0.3s;
  --guide-copy-in: 0.46s;
  --guide-copy-in-delay: 0.27s;
  --guide-copy-ease: ease;
  /* Beat the shared dialog's bg-white, paint the orders surface, clip the full-bleed
     media to the dialog radius. */
  background-color: var(--guide-bg) !important;
  overflow: hidden;
}

.guide {
  display: flex;
  flex-direction: column;
  color: var(--guide-ink);
}

/* ── Nav ─────────────────────────────────────────────────────────────────────── */

.guide__nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 16px;
}

/* Invisible spacer mirrors the close button so the title stays optically centered. */

.guide__nav-spacer {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.guide__nav-title {
  color: var(--brand-primary-chocolate, #4d2f06);
  text-align: center;
  font-size: var(--size-lg, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: var(--tracking-tight-1, -0.16px);
}

.guide__close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  color: var(--guide-ink);
  transition: background-color 0.15s ease;
}

.guide__close:hover {
  background-color: var(--guide-overlay);
}

/* ── Viewport + slides ─────────────────────────────────────────────────────────
   All slides share ONE grid cell (each on grid-area 1/1), so the cell, and thus the
   viewport, auto-sizes to the TALLEST slide's content. Height is constant across slides
   (no resize, no JS measurement); the browser does the "tallest" math at any breakpoint
   or copy length. */

.guide__viewport {
  display: grid;
  width: 100%;
}

.guide__slide {
  grid-area: 1 / 1;
  /* every slide stacks in the same cell, so the cell is as tall as the tallest */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* space-between parks the copy at the top and the media at the bottom; a shorter slide spends its
     extra height as a larger copy-to-media gap, so both ends stay put and only the gap flexes. */
  justify-content: space-between;
  gap: 32px;
  pointer-events: none;
}

.guide__slide.is-active {
  pointer-events: auto;
}

/* Copy cross-fade, sequenced so the slides barely overlap: the outgoing text fades OUT first and
   quickly (no delay), and the incoming text fades IN only after the outgoing is ~90% gone
   (--guide-copy-in-delay). CSS runs the transition of the END state — leaving is-active uses the
   base (out) transition; entering is-active uses the delayed (in) transition. */

.guide__title,
.guide__body {
  opacity: 0;
  transition: opacity var(--guide-copy-out) var(--guide-copy-ease);
}

.guide__slide.is-active .guide__title,
.guide__slide.is-active .guide__body {
  opacity: 1;
  transition: opacity var(--guide-copy-in) var(--guide-copy-ease) var(--guide-copy-in-delay);
}

.guide__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 488px;
  padding: 8px 24px 0;
  text-align: center;
}

.guide__title {
  font-family: 'Media Sans Semi-Condensed';
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.guide__body {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  /* Safety cap for pathologically long copy: past ~6 lines the description scrolls instead of
     ballooning the (tallest-wins) shared height of every slide. Em-based, so it stays ~6 lines at
     any breakpoint / body font-size. */
  max-height: 9em;
  overflow-y: auto;
}

.guide__media {
  width: 100%;
  aspect-ratio: 680 / 400;
  opacity: 0;
  transform: translateX(0);
  /* Carousel slide. Opacity fades faster (0.5s) than the travel (0.64s) so the exiting image is
     gone before it fully clears the frame, and the entering one is visible as it slides in. */
  transition: opacity var(--guide-media-fade) ease, transform var(--guide-media-travel) var(--guide-media-ease);
}

.guide__slide.is-active .guide__media {
  opacity: 1;
  transform: translateX(0);
}

/* Slides BEFORE the active index rest LEFT, slides AFTER rest RIGHT — so Next pushes the old media
   left and pulls the new one in from the right, and Back reverses it. Direction is implied by each
   slide's index vs. the active index (the controller sets is-behind / is-ahead), so there's no
   separate direction flag to keep in sync. */

.guide__slide.is-behind .guide__media {
  transform: translateX(calc(-1 * var(--guide-media-distance)));
}

.guide__slide.is-ahead .guide__media {
  transform: translateX(var(--guide-media-distance));
}

.guide__media-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ── Action bar ──────────────────────────────────────────────────────────────────
   Solid surface (matches the dialog) so it cleanly caps the media + covers any slide
   overflow mid-height-animation. Back · centered dots · Next/Done. */

.guide__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background-color: var(--guide-bg);
}

.guide__back,
.guide__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 94px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* Back — ghost/outlined pill; fades in (+ becomes clickable) past the first slide. */

.guide__back {
  color: var(--guide-back-ink);
  border: 1px solid rgba(52, 46, 38, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease, background-color 0.2s ease;
}

.guide__back.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.guide__back:hover {
  background-color: rgba(52, 46, 38, 0.04);
}

/* Next/Done — button-primary-dark with a rounded-full + chocolate-surface override. */

.guide__next {
  color: var(--guide-ink-contrast);
  background-color: var(--guide-ink);
  transition: filter 0.2s ease, transform 0.1s ease;
}

.guide__next:hover {
  filter: brightness(1.1);
}

.guide__next:active {
  transform: scale(0.97);
}

/* ── Dots ─────────────────────────────────────────────────────────────────────────
   A track of faint dots with a solid indicator that slides between positions. The
   controller sets --guide-index; the indicator translates by (size + gap) * index. */

.guide__dots {
  --guide-dot-size: 6px;
  --guide-dot-gap: 6px;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: var(--guide-dot-gap);
  transform: translate(-50%, -50%);
}

.guide__dot {
  position: relative;
  /* anchors the enlarged hit area */
  width: var(--guide-dot-size);
  height: var(--guide-dot-size);
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: var(--guide-dot);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* A comfortable click/tap target without disturbing the 6px visual or the dot spacing — so the
   active-indicator's translate math stays exact. Adjacent dots' hit areas tile (no dead zones). */

.guide__dot::before {
  content: '';
  position: absolute;
  inset: -9px -3px;
}

/* Hover previews selection — the dot takes the active color, signaling it jumps to that slide. */

.guide__dot:hover {
  background-color: var(--guide-dot-active);
}

.guide__dot-active {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  /* clicks pass through to the dot button beneath */
  width: var(--guide-dot-size);
  height: var(--guide-dot-size);
  border-radius: 9999px;
  background-color: var(--guide-dot-active);
  /* Move via the `translate` property (not `transform`) so `transform` stays free for the elastic
     scaleX pulse the controller runs on each step — separate properties, so they compose, not fight. */
  translate: calc(var(--guide-index, 0) * (var(--guide-dot-size) + var(--guide-dot-gap))) 0;
  transition: translate 0.46s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Feature callout ─────────────────────────────────────────────────────────────
   A one-shot, caret-tipped popover that auto-fires beside a control (feature_callout_controller) —
   distinct from the app's hover tooltips. This instance (the Orders guide's "reopen me" hint) is
   themed in Moolah green. Floating UI sets left/top + transform-origin inline and places the arrow. */

.orders-guide-callout {
  position: fixed;
  z-index: 60;
  width: 248px;
  padding: 14px 16px;
  border-radius: 16px;
  background-color: var(--bg-fill-moola);
  color: var(--brand-primary-crisp, #f3f0e8);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.orders-guide-callout[hidden] {
  display: none;
}

.orders-guide-callout.is-shown {
  opacity: 1;
  transform: scale(1);
}

.orders-guide-callout__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--bg-fill-moola);
  border-radius: 2px;
  transform: rotate(45deg);
}

.orders-guide-callout__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  color: var(--content-primary-inverse);
  opacity: 0.65;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.orders-guide-callout__close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.14);
}

.orders-guide-callout__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  padding-right: 22px;
  color: var(--content-primary-inverse);
}

.orders-guide-callout__body {
  margin-top: 3px;
  font-size: 14px;
  line-height: 18px;
  color: var(--content-primary-inverse);
}

/* Mobile (bottom sheet): slightly smaller heading + body text, a touch more side padding, and a
   visible close-button background (the ghost treatment reads as a missing control on a touch target). */

@media (max-width: 1023px) {
  .guide__title {
    font-size: 36px;
  }

  .guide__body {
    font-size: 14px;
  }

  .guide__copy {
    padding-inline: 28px;
  }

  .guide__close {
    background-color: var(--guide-overlay);
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide__viewport,
  .guide__media,
  .guide__title,
  .guide__body,
  .guide__dot-active,
  .orders-guide-callout {
    transition-duration: 0.01ms;
  }
}

/* hide the first breadcrumb chevron */

ol.breadcrumb li:first-child svg {
  display: none;
}

/* Override Turbo's progress bar color with the application's theme. */

.turbo-progress-bar {
  height: 5px;
  background-color: var(--brand-secondary-moola);
}

/*
  When dragging a sortable table row, only show the first column, usually containing the element's label.
  Can be customize on a per-table basis.
  Remove when updated to Bullet Train version that merges upstream PR https://github.com/bullet-train-co/bullet_train-core/pull/923
*/

tr.gu-mirror > *:not(:first-child) {
  display: none;
}

.ol-accordion-item > summary::-webkit-details-marker,
.ol-accordion-item > summary::marker {
  display: none;
}

a {
  color: var(--content-primary);
  text-decoration-line: none;
}

a:hover {
  color: var(--content-primary);
  text-decoration-line: none;
}

hr {
  border-color: var(--content-border-neutral, rgba(52, 46, 38, 0.08));
}

/* `.shadow-modal` is generated by Tailwind from `boxShadow.modal` in
   tailwind.atelier.config.js — single source of truth, do not redefine here. */

/* Safe area insets for viewport-fit=cover */

/* This ensures content isn't hidden behind the notch/status bar on iOS devices */

/* Only apply when safe area insets are supported (iOS devices with notches) */

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* alias used to support ejecting the file to local */

/* OL-3343 root page-layout system (.layout + --screen-margin + max-w-layout-* support). */

/* Root page-layout system (OL-3343 — Shopify-style).

   `.layout` owns the responsive side gutter + centering + an outer width cap, applied once
   per page. Mobile-first: --screen-margin grows with the viewport. Sections narrow themselves
   with the max-w-layout-* tokens (see tailwind.config.js) or arbitrary max-w-[…]; those are
   max-width-only, so they never re-declare the gutter and can't double-pad inside a .layout.

   Breakpoints (769 / 1357 / 1661 / 1921) intentionally REPLACE Tailwind's default screen scale
   (640 / 768 / 1024 / 1280 / 1536) — the defaults aren't granular enough for the wide-canvas
   responsive controls this layout system needs. NOTE: today these gutter steps run on a scale
   parallel to Tailwind's lg:/xl: utilities, so the gutter and a view's flex/grid reflow can
   change at different widths (most visible 1024–1357px). A follow-up ticket unifies Tailwind's
   `screens` config onto this scale (and adds named utilities for any uncovered breakpoints) so
   the two systems converge; until then, prefer .layout + max-w-layout-* for page width and treat
   lg:/xl: as content-reflow only. */

:root {
  --screen-margin: 16px;
  /* mobile-first default */
  --layout-max: 2000px;
  /* Height of a page's pinned mobile header bar, for a SECOND sticky element further down the page that
     has to park flush beneath it (the Earnings search/filter row). The page's own controller measures the
     bar and overwrites this — see earnings_sticky_header_controller. The value here is only the pre-JS
     fallback: without it `top: var(--earnings-header-h)` would be invalid, resolve to auto, and the row
     would not stick at all on first paint. */
  --earnings-header-h: 72px;
}

@media (min-width: 769px)  {
  :root {
    --screen-margin: 24px;
  }
}

@media (min-width: 1357px) {
  :root {
    --screen-margin: 48px;
  }
}

@media (min-width: 1661px) {
  :root {
    --screen-margin: 64px;
  }
}

@media (min-width: 1921px) {
  :root {
    --screen-margin: 96px;
  }
}

/* Sticky-in-shell rescue.

   `.main-container-padding` (the app shell wrapper in _basic.html.erb) is
   `overflow:hidden` below lg to clip horizontal full-bleed content. But
   `overflow:hidden` makes that element a scroll container, which silently
   breaks `position:sticky` for any descendant — a sticky element (the listing
   header, the marketplace search bar) ends up pinned to the tall wrapper's top
   and scrolls away instead of holding at the viewport top.

   `overflow:clip` clips identically (and on both axes, like hidden) but does NOT
   establish a scroll container, so descendant sticky works. Mark any sticky
   element that lives inside this shell with `.sticky-in-shell`; the `:has()`
   rule then swaps ONLY the shells that actually contain such an element — so
   this doesn't change overflow/BFC behavior for every other page in the app —
   and only <lg, where the bug lives (desktop is already `lg:overflow-visible`).
   Older engines without `overflow:clip`/`:has()` just fall back to the existing
   hidden behavior (sticky stays broken there, but nothing regresses). */

@media (max-width: 1023px) {
  .main-container-padding:has(.sticky-in-shell) {
    overflow: clip;
  }
}

/* ✅ YOUR APPLICATION'S CSS */

/* If you need to customize your application's CSS, this is the place to do it. This helps
   avoid merge conflicts in the future when Rails or Bullet Train update their own CSS.
*/

body .Fade .AccordionItem.p-AccordionItem:first-child {
  border-radius: 12px 12px 0 0 !important;
}

.first-child-full-width {
  width: 100%;
}

.first-child-full-width > div {
  width: 100%;
}

/* Bottom-nav safe-area base strip height (used by app/views/themes/atelier/_with_bottom_bar).
   Reserves the bottom inset the browser exposes (home indicator / Android system-nav bar), capped at
   3.5rem (56px). 0 on desktop / responsive (strip + hairline collapse, the bar sits flush). The right
   value differs by platform, so there are two rules:

   DEFAULT (:root) — raw env() pass-through. Correct for Android Chrome, installed PWAs, and desktop.
   Android's dynamic chrome is the TOP url bar; the bottom system-nav inset is always exposed and
   load-bearing, so it must reserve the full env() at all times.

   iOS (html.is-ios, below) — Safari / Chrome / Comet all put their toolbar at the BOTTOM, over the
   home indicator. Comet + iOS Chrome report that ~34px inset STATICALLY (sized to their chrome-HIDDEN
   state) even while the toolbar still covers it, so a raw pass-through (PR #3172) left a redundant
   ~34px band under the tabs — the bug Sean kept seeing. The iOS rule subtracts the live toolbar
   coverage. This subtraction must NOT run on Android, where the viewport shrink is the TOP url bar,
   not the bottom — subtracting it would wrongly zero a still-exposed nav bar.

   Exposed as a custom property so the strip AND the tab-bar content clearance
   (pb-[calc(… + var(--ol-tabbar-safe-strip))]) stay in lockstep. */

:root {
  --ol-tabbar-safe-strip: min(3.5rem, env(safe-area-inset-bottom));
}

/* iOS only (all iOS browsers have a BOTTOM toolbar). `100lvh - 100dvh` = how much of the viewport that
   toolbar is covering right now (0 when hidden; ~178px in Comet when shown), so subtracting it zeroes
   the strip while the toolbar covers the home indicator and restores the true inset the instant the
   toolbar hides on scroll (dvh grows back toward lvh). Safari's env()=0 keeps it 0 throughout. dvh is
   dynamic, so this tracks live. .is-ios is set on <html> by support/detect_safe_area_inset.js. */

html.is-ios {
  --ol-tabbar-safe-strip: min(3.5rem, max(0px, env(safe-area-inset-bottom) - 100lvh + 100dvh));
}

.ol-tabbar-safe-strip {
  border-color: var(--content-border-neutral);
  border-top-style: solid;
  border-top-width: min(1px, var(--ol-tabbar-safe-strip));
  padding-bottom: var(--ol-tabbar-safe-strip);
}

/* When there's no real bottom inset, drop the strip out of the flex flow entirely so
   it doesn't reserve the bar's gap-y-3 row-gap above itself (a 12px ghost gap below
   the tabs row on desktop / responsive / non-rounded screens). The .has-safe-area-inset
   class is set on <html> by support/detect_safe_area_inset.js — CSS alone can size the
   strip from env() but can't conditionally toggle display. */

html:not(.has-safe-area-inset) .ol-tabbar-safe-strip {
  display: none;
}

/* iOS Safari anchors `position:fixed; bottom:0` to the toolbar-SHOWN viewport and doesn't perfectly
   follow the toolbar as it condenses on scroll, briefly exposing the page bg in a thin strip below the
   bar. This panel hangs BELOW the bar and fills that strip with the bar's own colour, so any exposed gap
   reads as part of the bar rather than a cut-off. It sits off-screen (below the viewport) whenever there
   is no gap — inert at rest, needs no JS, and it never moves the bar (so no cut-off risk). Mobile only:
   the bar is lg:hidden on desktop. This mirrors the plain fixed-bar approach shop.app and other apps use;
   a hairline some iOS *betas* still show affects them too, so we treat that residual as an upstream
   Safari bug rather than chasing it. */

@media (max-width: 1023px) {
  .ol-bottom-nav::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 50vh;
    background-color: var(--background-elevated);
  }
}

/* Mobile content-fill: make a main-container card stretch to the full mobile
   viewport so its background reaches the bottom tab bar with no gap, even when
   the content is shorter than the screen — without ever producing a page scroll.
   The card fills 100dvh; the page itself can't scroll because the view pairs this
   with @lock_body_scroll_on_mobile (body → overflow-hidden, row → fixed dvh
   height, and the tab-bar padding moves into the card's own content). The floating
   tab bar overlays the filled background; content keeps its own bottom clearance.
   Applied to account/shared/_index's card via @mobile_fill_viewport. */

@media (max-width: 1023px) {
  .ol-mobile-fill {
    min-height: 100dvh;
  }
}

@media (min-width: 1024px) {
  .settings .navigation [data-is-active='true'] {
    background-color: var(--background-base);
  }
}

/* Mobile: settings nav rows are plain navigation links — there's no "currently
   selected tab" the way the desktop sticky sidebar has, so the active row must NOT
   carry a persistent highlight (sidebar_item applies bg-background-overlay inline
   when is_active). Suppress it below lg. `:not(:active)` keeps the tap-and-hold press
   feedback (active:bg-background-base) intact, since that only paints while pressed.
   Desktop is untouched (the lg:bg-background-base rule above still wins there). */

@media (max-width: 1023px) {
  .btn-toggle input[type='checkbox']:checked + button.button-secondary.settings .navigation a.item[data-is-active='true']:not(:active), .btn-toggle input[type='radio']:checked + button.button-secondary.settings .navigation a.item[data-is-active='true']:not(:active) {
    background-color: var(--background-overlay);
  }

  .settings .navigation a.item[data-is-active='true']:not(:active) {
    background-color: transparent;
  }
}

/* Scoped to a.item (menu rows) so non-row links in the nav — e.g. the Profile-tab
   cards (refer card) and the "View profile" button — keep their own card/button
   styling instead of inheriting the row padding/radius/justify. */

.settings .navigation a.item {
  /* transition + max-lg:active: the whole row flips to background-base on tap-and-hold (matches the
     mobile bottom-sheet menu rows, e.g. notification_preferences). No hover bg on touch. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--content-primary);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media not all and (min-width: 1024px) {
  .btn-toggle input[type='checkbox']:checked + .settings .navigation a.item:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .settings .navigation a.item:hoverbutton.button-secondary {
    background-color: var(--background-overlay);
  }

  .settings .navigation a.item {
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .settings .navigation a.item:hover {
    background-color: transparent;
  }

  .settings .navigation a.item:active {
    background-color: var(--background-base);
  }
}

@media (min-width: 1024px) {
  .settings .navigation a.item:hover {
    background-color: var(--background-base) !important;
  }
}

@media not all and (min-width: 1024px) {
  .settings .navigation a.item span.text-2xl {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.settings .navigation .item {
  display: flex;
  max-width: 100% !important;
  align-items: center;
}

@media (min-width: 1024px) {
  .settings .navigation .item {
    gap: 0.25rem;
    border-radius: 0.75rem;
  }

  .settings-layout .navigation a.item {
    gap: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }

  .settings-layout .navigation a.item span {
    margin-left: 0px !important;
  }
}

/* Sell navigation icon sizing - larger icons for sell layout */

@media not all and (min-width: 1024px) {
  .settings.sell-layout .navigation .item .icon {
    display: flex;
    width: 2rem;
    height: 2rem;
  }
}

@media (min-width: 1024px) {
  .settings.sell-layout .navigation .item .icon {
    width: 2rem;
    height: 2rem;
  }
}

/* Settings navigation icon sizing — 24px on mobile, 20px on the desktop sidebar */

@media not all and (min-width: 1024px) {
  .settings:not(.sell-layout) .navigation .item .icon {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .settings:not(.sell-layout) .navigation .item .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Settings layout label text size override */

@media (min-width: 1024px) {
  .settings-layout .navigation a.item .label {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    letter-spacing: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   Native-style forward/back page transitions (Turbo 8 View Transitions).

   `data-vt-slide` is set per-visit by app/javascript/page_transitions.js (mobile,
   settings↔settings only). Everything animates on the compositor (transform +
   opacity), so it stays at 60fps. With no attribute the transition is a no-op, so
   desktop / non-settings / unsupported browsers fall back to instant navigation.

       forward (drill in):  new covers from the right · old parallaxes ~25% left + dims
       back    (pop):       old slides off the right   · new parallaxes in from the left
   ────────────────────────────────────────────────────────────────────────────── */

/* Default: suppress the UA cross-fade so any view transition we don't opt into is instant. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

@media (max-width: 1023px) {
  /* Keep the fixed bottom tab bar out of the page-level slide so it stays put while the content
     moves (native tab-bar behaviour). Same position old→new ⇒ it doesn't visibly animate. */

  .ol-bottom-nav {
    view-transition-name: ol-bottom-nav;
  }

  /* Forward — drill in. New page on top, covering from the right. */

  html[data-vt-slide="forward"]::view-transition-old(root) {
    animation: vt-slide-out-left 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html[data-vt-slide="forward"]::view-transition-new(root) {
    z-index: 1;
    animation: vt-slide-in-right 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  /* Back — pop. Old page on top, sliding off to the right to reveal the parent. */

  html[data-vt-slide="back"]::view-transition-old(root) {
    z-index: 1;
    animation: vt-slide-out-right 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html[data-vt-slide="back"]::view-transition-new(root) {
    animation: vt-slide-in-left 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
}

@keyframes vt-slide-in-right {
  from {
    transform: translateX(100%);
  }

  to   {
    transform: translateX(0);
  }
}

/* Outgoing (drill-in): parallax left AND fade out hard + early — opacity is front-loaded so the old
   page is clearly dimmed by mid-transition, well before the incoming page finishes covering it. */

@keyframes vt-slide-out-left {
  0%   {
    transform: translateX(0);
    opacity: 1;
  }

  45%  {
    opacity: 0.25;
  }

  100% {
    transform: translateX(-25%);
    opacity: 0.25;
  }
}

@keyframes vt-slide-out-right {
  from {
    transform: translateX(0);
  }

  to   {
    transform: translateX(100%);
  }
}

/* Incoming on a back/pop: mirror of slide-out-left — stays dim, then brightens in as it settles. */

@keyframes vt-slide-in-left {
  0%   {
    transform: translateX(-25%);
    opacity: 0.25;
  }

  55%  {
    opacity: 0.25;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   Earnings-card bar chart entrance (Profile tab). Bars grow up from the baseline on
   first load to draw the eye. Pure CSS keyframes; the `.animate-bars` gate is added
   once per document load by the `earnings-chart` Stimulus controller — a module-
   scoped flag survives Turbo Drive visits, so returning to the Profile tab does NOT
   re-animate (only a real page load does). Bars without the gate render at full
   height, so no-JS and reduced-motion users see the final chart immediately.
   ────────────────────────────────────────────────────────────────────────────── */

.earnings-bar {
  transform-origin: bottom center;
}

.animate-bars .earnings-bar {
  /* fill-mode both: adopt the 0% (collapsed) state the instant the gate is added
     and hold 100% after, so there's no full-height flash or post-animation snap. */
  animation: earnings-bar-grow 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--bar-delay, 0ms);
}

@keyframes earnings-bar-grow {
  from {
    transform: scaleY(0);
  }

  to   {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-bars .earnings-bar {
    animation: none;
  }
}

/* OL-3206: mobile "peek" Details drawer (iMessage / Claude-app pattern).

   On mobile the Details panel sits BENEATH the conversation thread. Tapping the info toggle
   slides the thread left into a floating card (leaving a 76px sliver), revealing Details beside it:
   the thread's rounded-card styling snaps in while the slide animates, and the Details content
   fades in. The slid thread's own content dims to 30% (a receded, inactive look) and goes
   pointer-events:none, so a tap on the sliver falls through to the card frame, which slides it
   back closed (see inbox_controller#closeDetailsOnPeekTap). On desktop the panel stays a
   side-by-side column, so every rule here is scoped to <lg and does not touch desktop.

   Open state = the inbox group is NOT .collaboration-details-hidden (the class the info toggle
   removes to open); .inbox-ready is added by the controller once the correct initial state is
   set, so the peek styling never applies before JS (no load-time flash of the slid card). */

@media (max-width: 1023px) {
  /* The sliding thread card. Only the transform animates ("slide with animation"); the rounded
     corners / border / shadow snap in ("immediately shift"). */

  .inbox-peek-card {
    position: relative;
    z-index: 10;
    transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* The thread's own content (header + messages + composer). It dims as the card slides away. */

  .inbox-peek-content {
    transition: opacity 400ms ease;
  }

  /* The Details drawer underneath the thread. On mobile its surface is --background-light (a hair
     lighter than --background-base); the var isn't in the theme yet, so fall back to its value.
     Desktop keeps bg-background-elevated (set as an lg: utility in the markup). */

  .inbox-peek-underlay {
    z-index: 0;
    background: var(--background-light, #fbfaf7);
  }

  /* Details content fades in as the thread slides away to reveal it. */

  .inbox-peek-underlay-content {
    opacity: 0;
    transition: opacity 400ms ease;
  }

  /* --- Open --- */

  .inbox-ready:not(.collaboration-details-hidden) .inbox-peek-card {
    transform: translateX(calc(-100% + 76px));
    border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
    border-radius: 60px;
    box-shadow: var(--shadow-main-container);
  }

  /* Dim the slid thread's content to 30% and make it inert, so a tap on the sliver falls through
     to the card frame's close handler instead of hitting a message / the composer. */

  .inbox-ready:not(.collaboration-details-hidden) .inbox-peek-content {
    opacity: 0.3;
    pointer-events: none;
  }

  .inbox-ready:not(.collaboration-details-hidden) .inbox-peek-underlay-content {
    opacity: 1;
  }
}

/* Skeleton / shimmer primitives (settings preloader — see settings_skeleton_controller.js).

   `.skeleton` is the only building block: a neutral filled shape with a subtle left→right
   shimmer sweep. Compose any skeleton by giving an element `.skeleton` + Tailwind sizing
   (h-*, w-*, rounded-*). The shimmer is decorative, so it's disabled under
   prefers-reduced-motion (the static fill alone still reads as "loading"). */

.offers .page:first-of-type {
  margin: 0px;
  border-style: none;
  padding: 0px;
}

.offers .page:first-of-type > .title {
  margin: 0px;
  border-style: none;
  padding: 0px;
  font-family: aktiv-grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.offers .page:first-of-type > .title h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.0294rem;
}

@media not all and (min-width: 1024px) {
  .settings .navigation a.item span.offers .page:first-of-type > .title h1 {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.offers .page:first-of-type > .body {
  margin: 0px;
  padding: 0px;
}

/* not collection item is a hack to try to solve layout issues. TODO: make better */

[data-select-all-target='wrapper'][data-property-path]:not(.collection-item):not(.optional-item) {
  display: block;
}

[data-property-path]:not(.collection-item):not(.optional-item) {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

[data-property-path]:not(.collection-item):not(.optional-item):hover {
  box-shadow: inset 0 0 0 3px var(--brand-secondary-mint);
}

[data-select-all-target='wrapper'].textarea-tag {
  display: block;
}

.textarea-tag {
  position: relative;
  display: inline-block;
  cursor: text;
}

.textarea-tag:focus-within {
  cursor: text;
}

.collection-controls,
.optional-item-controls {
  pointer-events: auto;
  position: absolute;
  z-index: 9999;
  display: none;
  gap: 0.25rem;
}

.date-range-calendar .flatpickr-day.collection-controls,.date-range-calendar .flatpickr-day
.optional-item-controls {
  display: block;
  visibility: hidden;
}

.collection-controls button, .optional-item-controls button {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.collection-controls button:hover, .optional-item-controls button:hover {
  text-decoration-line: none;
}

.collection-controls button:active, .optional-item-controls button:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.collection-controls button:where(.dark, .dark *), .optional-item-controls button:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.collection-controls button, .optional-item-controls button {
  aspect-ratio: 1 / 1;
  height: 32px;
  width: 32px;
  background-color: var(--background-overlay);
  padding: 0px !important;
  color: var(--content-primary);
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.collection-controls button:hover, .optional-item-controls button:hover {
  color: var(--content-primary);
}

.collection-controls button, .optional-item-controls button {
  /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
  border-radius: var(--rounded-full, 99999px) !important;
  background: var(--background-overlay, rgba(104, 67, 0, 0.08));
  color: var(--content-primary, #342e26);
}

.collection-controls button:hover, .optional-item-controls button:hover {
  background-color: var(--bg-fill-secondary-hover);
}

.collection-controls button svg, .optional-item-controls button svg {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.collection-controls button:hover svg, .optional-item-controls button:hover svg, .collection-controls button:active svg, .optional-item-controls button:active svg {
  transform: scale(1.1);
}

.collection-controls button.button-xs, .optional-item-controls button.button-xs {
  height: 26px;
  width: 26px;
  padding: 0.375rem !important;
}

.collection-controls button.button-xs svg, .optional-item-controls button.button-xs svg {
  height: 0.875rem !important;
  width: 0.875rem !important;
}

.collection-controls button.button-small, .optional-item-controls button.button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.collection-controls button.\!button-small, .optional-item-controls button.\!button-small {
  height: 2rem;
  width: 2rem;
  padding: 0.5rem !important;
}

.collection-controls button.button-small svg, .optional-item-controls button.button-small svg {
  height: 1rem !important;
  width: 1rem !important;
}

.collection-controls button.\!button-small svg, .optional-item-controls button.\!button-small svg {
  height: 1rem !important;
  width: 1rem !important;
}

.collection-controls button.button-medium, .optional-item-controls button.button-medium {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0.625rem !important;
}

.collection-controls button.button-medium svg, .optional-item-controls button.button-medium svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.collection-controls button.button-large, .optional-item-controls button.button-large {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.collection-controls button.button-large svg, .optional-item-controls button.button-large svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.collection-controls button.button-icon-pagination svg, .optional-item-controls button.button-icon-pagination svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

.collection-controls button.wizard-button--next, .optional-item-controls button.wizard-button--next {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.collection-controls button.wizard-button--next svg, .optional-item-controls button.wizard-button--next svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.collection-controls button.wizard-button--previous, .optional-item-controls button.wizard-button--previous {
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.75rem !important;
}

.collection-controls button.wizard-button--previous svg, .optional-item-controls button.wizard-button--previous svg {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.collection-controls button.button-small svg.icon-18, .optional-item-controls button.button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.collection-controls button.\!button-small svg.icon-18, .optional-item-controls button.\!button-small svg.icon-18 {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.collection-controls button.button-medium.lightbox-pagination svg, .optional-item-controls button.button-medium.lightbox-pagination svg {
  width: 14px !important;
  height: 14px !important;
}

.collection-controls button, .optional-item-controls button {
  aspect-ratio: 1 / 1;
  border-radius: 9999px !important;
}

@media (max-width: 1023px) {
  
    .page-header-toolbar .collection-controls button,
    .drawer-footer-toolbar .collection-controls button,
    .page-header-toolbar  .optional-item-controls button,
    .drawer-footer-toolbar  .optional-item-controls button {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem;
  }

  
    .page-header-toolbar .collection-controls button svg,
    .drawer-footer-toolbar .collection-controls button svg,
    .page-header-toolbar  .optional-item-controls button svg,
    .drawer-footer-toolbar  .optional-item-controls button svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

  
    .page-header-toolbar .collection-controls button,
    .drawer-footer-toolbar .collection-controls button,
    .page-header-toolbar  .optional-item-controls button,
    .drawer-footer-toolbar  .optional-item-controls button {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem;
  }

  
    .page-header-toolbar .collection-controls button svg,
    .drawer-footer-toolbar .collection-controls button svg,
    .page-header-toolbar  .optional-item-controls button svg,
    .drawer-footer-toolbar  .optional-item-controls button svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

  
    .page-header-toolbar .collection-controls button,
    .drawer-footer-toolbar .collection-controls button,
    .page-header-toolbar  .optional-item-controls button,
    .drawer-footer-toolbar  .optional-item-controls button {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem;
  }

  
    .page-header-toolbar .collection-controls button svg,
    .drawer-footer-toolbar .collection-controls button svg,
    .page-header-toolbar  .optional-item-controls button svg,
    .drawer-footer-toolbar  .optional-item-controls button svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

  
    .page-header-toolbar .collection-controls button,
    .drawer-footer-toolbar .collection-controls button,
    .page-header-toolbar  .optional-item-controls button,
    .drawer-footer-toolbar  .optional-item-controls button {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem;
  }

  
    .page-header-toolbar .collection-controls button svg,
    .drawer-footer-toolbar .collection-controls button svg,
    .page-header-toolbar  .optional-item-controls button svg,
    .drawer-footer-toolbar  .optional-item-controls button svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */
}

.collection-controls button, .optional-item-controls button {
  width: 1.75rem !important;
  height: 1.75rem !important;
  background-color: var(--background-elevated);
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: var(--brand-secondary-moola) !important;
  --tw-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 8px 28px 0px rgba(0,0,0, 0.16);;
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 8px 28px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[data-controller='sections--section-menu'] .collection-controls button,[data-controller='sections--section-menu']  .optional-item-controls button {
  overflow: visible;
}

[data-controller='sections--section-menu'] .collection-controls button:before,[data-controller='sections--section-menu']  .optional-item-controls button:before {
  inset: -1px;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  content: '';
  background-color: white;
  display: block;
  position: absolute;
  z-index: -1;
}

.collection-controls button:hover, .optional-item-controls button:hover {
  background-color: var(--background-overlay) !important;
  color: var(--brand-secondary-moola) !important;
}

.collection-controls button:after, .optional-item-controls button:after {
  inset: -1px;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  border-radius: 9999px !important;
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
}

.collection-item {
  position: relative;
  cursor: pointer;
}

.collection-item:hover {
  box-shadow: inset 0 0 0 3px var(--brand-secondary-mint);
}

.collection-item:focus-within {
  box-shadow: inset 0 0 0 3px var(--brand-secondary-mint);
}

.collection-item-controls,
.optional-item-controls,
.asset-tag-controls {
  position: absolute;
  z-index: 9999;
  display: none;
}

.date-range-calendar .flatpickr-day.collection-item-controls,.date-range-calendar .flatpickr-day
.optional-item-controls,.date-range-calendar .flatpickr-day
.asset-tag-controls {
  display: block;
  visibility: hidden;
}

.collection-item-controls,
.optional-item-controls,
.asset-tag-controls {
  width: -moz-max-content;
  width: max-content;
}

.empty-collection-placeholder {
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: dashed;
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  color: var(--content-secondary);
  opacity: 0.5;
}

.empty-collection-placeholder:hover {
  opacity: 1;
}

.optional-item {
  opacity: 0.3;
}

.optional-item > * {
  pointer-events: none;
}

.optional-item[enabled='true'] {
  opacity: 1;
}

.optional-item[enabled='true'] > * {
  pointer-events: auto;
}

.asset-tag {
  position: relative;
  cursor: pointer;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.generating-ai-update {
  position: relative;
}

.generating-ai-update::after {
  content: '';
  position: absolute;
  inset: 0px;
  z-index: 50;
  border-style: none;
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0) 100%
    );
  background-size: 200% 100%;
  animation: shimmer 3.5s infinite ease-in-out;
}

/* OTO Rendering Context */

[data-section].rendering-context-oto {
  pointer-events: none;
  position: relative;
  z-index: 0;
  border-style: none;
}

[data-section].rendering-context-oto:hover {
  pointer-events: none !important;
  border-style: none !important;
}

[data-section].rendering-context-oto:after {
  content: '';
  position: absolute;
  inset: 0px;
  z-index: 10;
  border-style: none;
  background-color: rgba(255, 255, 255, 0.7);
}

[data-section].rendering-context-oto:before {
  display: none !important;
}

[data-section].rendering-context-oto .collection-controls {
  display: none !important;
}

[data-section].rendering-context-oto [data-property-path],
  [data-section].rendering-context-oto .collection-item {
  pointer-events: none;
}

[data-section].rendering-context-oto [data-property-path*='oto_'],
  [data-section].rendering-context-oto [data-property-path*='purchase_block_options'] {
  pointer-events: auto;
  position: relative;
  z-index: 20;
}

[data-section].rendering-context-oto .optional-item:not([enabled='true']) [data-property-path*='oto_'] {
  pointer-events: none;
}

.asset-tag {
  display: block;
  width: 100%;
  height: 100%;
  max-height: inherit;
  -o-object-fit: inherit;
     object-fit: inherit;
  border-radius: inherit;
}

.asset-tag:has(.placeholder).media-element,
  .asset-tag:has(.placeholder) img,
  .asset-tag:has(.placeholder) video {
  height: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--grayscale-2);
}

.asset-tag:has(.placeholder) .asset-tag-controls {
  display: none !important;
  opacity: 0 !important;
}

.asset-tag .placeholder {
  border-radius: 0.75rem;
  background-color: var(--grayscale-2);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  color: var(--content-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0px;
}

.asset-tag .placeholder:hover {
  box-shadow: inset 0 0 0 3px var(--brand-secondary-mint);
}

.asset-tag .placeholder svg {
  min-height: 16px;
  min-width: 16px;
  max-width: 56px;
  max-height: 56px;
  width: 33%;
  height: 33%;
}

.default-overlay-button {
  border-radius: var(--rounded-full, 99999px);
  border: 1px solid var(--content-border-neutral, rgba(52, 46, 38, 0.08));
  background-color: var(--content-background-elevated, #fff);
  transition: background-color, border-color, color, fill, stroke ease 150ms;
  /* shadows/sm */
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0),
    0px 0px 2px 0px rgba(0, 0, 0, 0.05), 0px 4px 6px 0px rgba(0, 0, 0, 0.02);
}

.default-overlay-button:hover {
  background-color: var(--content-background-overlay);
}

.default-overlay-button,
.ai-overlay-button:hover {
  background-color: var(--mint-50, #f5f8f6);
}

/* Hack to give studio buttons a white background */

[data-controller='sections--section-menu'] .button-icon-circle {
  overflow: visible;
}

[data-controller='sections--section-menu'] .button-icon-circle:before {
  inset: -1px;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  content: '';
  background-color: white;
  display: block;
  position: absolute;
  z-index: -1;
}

.star-rating-tag .star-rating {
  --star-color: #ccc;
  --star-filled: #ffc107;
}

.star-rating-tag .star-rating input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.star-rating-tag .star-rating label {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  color: var(--star-color);
  padding: 0.125rem;
}

.star-rating-tag .star-rating label:hover,
  .star-rating-tag .star-rating label:hover ~ label,
  .star-rating-tag .star-rating input:checked ~ label {
  color: var(--star-filled);
}

.sticky-purchase-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  /* Below modals (1050) but above other content */
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.sticky-purchase-bar:first-of-type {
  display: block;
}

.sticky-purchase-bar--visible {
  transform: translateY(0);
}

.sticky-purchase-bar__content {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding: 20px;
}

.sticky-purchase-bar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Offer info styles */

.sticky-purchase-bar__info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
}

.sticky-purchase-bar__image {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1),
    0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(0, 0, 0, 0.02);
  border: 2px solid white;
  max-width: none;
}

.sticky-purchase-bar__image.editable:hover {
  cursor: pointer;
  border: 2px solid var(--brand-secondary-mint) !important;
}

.sticky-purchase-bar__details {
  display: flex;
  flex-direction: column;
  justify-items: start;
  gap: 2px;
  max-width: 460px;
}

.sticky-purchase-bar__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  text-align: left;
  line-clamp: 1;
  overflow: ellipsis;
}

.sticky-purchase-bar__creator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-align: left;
  line-clamp: 1;
  overflow: ellipsis;
}

.sticky-purchase-bar__creator-logo {
  height: 20px;
  max-width: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}

.sticky-purchase-bar__creator-name {
  font-weight: 600;
}

/* Pricing section */

.sticky-purchase-bar__pricing {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  min-width: 340px;
  justify-content: space-between;
}

.sticky-purchase-bar__price-info {
  display: flex;
  align-items: center;
}

.sticky-purchase-bar__price-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sticky-purchase-bar__price-label {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}

.sticky-purchase-bar__price-current {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}

/* Form and button */

.sticky-purchase-bar__form {
  display: inline-flex;
}

.sticky-purchase-bar__button {
  min-width: 148px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sticky-purchase-bar__button span {
  line-clamp: 1;
  overflow: ellipsis;
}

.sticky-purchase-bar__button:active {
  transform: translate(1px, 1px);
}

/* Mobile styles - position at bottom */

@media (max-width: 768px) {
  .sticky-purchase-bar {
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    border-bottom: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .sticky-purchase-bar--visible {
    transform: translateY(0);
  }

  .sticky-purchase-bar__content {
    padding: 12px 16px;
  }

  .sticky-purchase-bar__container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .sticky-purchase-bar__info {
    padding: 0;
    gap: 12px;
  }

  .sticky-purchase-bar__image {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .sticky-purchase-bar__details {
    max-width: none;
    gap: 4px;
  }

  .sticky-purchase-bar__title {
    font-size: 14px;
    line-height: 1.2;
  }

  .sticky-purchase-bar__creator {
    font-size: 12px;
  }

  .sticky-purchase-bar__pricing {
    padding: 0;
    min-width: auto;
    gap: 12px;
    flex-wrap: wrap;
  }

  .sticky-purchase-bar__price-label {
    font-size: 16px;
  }

  .sticky-purchase-bar__price-current {
    font-size: 16px;
  }

  .sticky-purchase-bar__form {
    flex: 1;
  }

  .sticky-purchase-bar__button {
    width: 100%;
    min-width: auto;
    padding: 12px 16px;
    font-size: 16px;
  }
}

/* Intercom positioning overrides for mobile devices */

@media (max-width: 1024px) {
  .intercom-lightweight-app-launcher {
    bottom: 72px !important;
  }

  /*localhost*/

  .intercom-dfosxs {
    bottom: 72px !important;
  }

  iframe[name='intercom-notifications-frame'] {
    bottom: 124px !important;
  }
}

/**
 * tom-select.css (v2.4.3)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */

.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
}

.full .ts-control {
  background-color: #fff;
}

.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}

.focus .ts-control {
  box-shadow: none;
}

.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}

.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0 solid #d0d0d0;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0 solid #cacaca;
}

.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: white;
  border: 0 solid white;
}

.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}

.ts-control > input::-ms-clear {
  display: none;
}

.ts-control > input:focus {
  outline: none !important;
}

.has-items .ts-control > input {
  margin: 0 4px !important;
}

.ts-control.rtl {
  text-align: right;
}

.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}

.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}

.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}

.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}

.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}

.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}

.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}

.ts-dropdown .active.create {
  color: #495c68;
}

.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}

.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}

.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}

.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */

.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}

.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}

.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}

.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}

.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}

.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}

.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}

.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}

.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
  color: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}

.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}

.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}

.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}

.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}

.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* Shared animations */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.turbo-frame-fade-in {
  animation: fadeIn 0.05s ease-in-out;
  min-height: 150px;
}

/* Frame busy-fade — dims a turbo-frame while it reloads so a server-backed swap reads as a
   smooth transition instead of an abrupt pop. Turbo sets [busy] on the frame during the fetch;
   when it clears, opacity eases back to 1, fading the new content in. */

.frame-busy-fade {
  transition: opacity 0.2s ease-out;
}

.frame-busy-fade[busy] {
  opacity: 0.45;
}

@media (min-width: 1024px) {
  .lg\:font-display-semi-condensed {
    letter-spacing: 0 !important;
  }
}

.before\:box_shadow_sm::before {
  content: var(--tw-content);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
}

.after\:border-gradient::after {
  position: absolute;
  inset: 0px;
  content: var(--tw-content);
  border-radius: inherit;
  z-index: -1;
  mask: linear-gradient(black, black) content-box,
      linear-gradient(black, black);
  -webkit-mask: linear-gradient(black, black) content-box,
      linear-gradient(black, black);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding: var(--border-gradient-width, 1px);
  /* Thickness of the border */
  box-sizing: border-box;
}

.after\:border-b[data-select-all-target='wrapper']::after {
  content: var(--tw-content);
  border-color: var(--content-border-dark);
}

.after\:box_shadow_sm::after {
  content: var(--tw-content);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.hover\:button-link-disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.hover\:button-link-disabled:hover {
  background-color: var(--background-overlay);
}

.hover\:button-link-disabled:hover {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.hover\:button-link-disabled:hover,
.floating-input-field.hover\:button-link-disabled:hover:focus,
.floating-input-field.hover\:button-link-disabled:hover:hover,
.floating-input-field.hover\:button-link-disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .hover\:button-link-disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .hover\:button-link-disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.hover\:button-link-disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.hover\:button-disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.hover\:button-disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.hover\:button-disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.hover\:button-disabled:hover),
  .button-primary-dark:has(.hover\:button-disabled:hover),
  .button-secondary:has(.hover\:button-disabled:hover),
  .button-tertiary:has(.hover\:button-disabled:hover),
  .button-danger:has(.hover\:button-disabled:hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.hover\:button-disabled:hover):not(.no-disabled-style), .button-primary-dark:has(.hover\:button-disabled:hover):not(.no-disabled-style), .button-secondary:has(.hover\:button-disabled:hover):not(.no-disabled-style), .button-tertiary:has(.hover\:button-disabled:hover):not(.no-disabled-style), .button-danger:has(.hover\:button-disabled:hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.hover\:before\:large-button-hover:hover::before {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0),
      0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px 0px rgba(0, 0, 0, 0.05),
      0px 4px 6px 0px rgba(0, 0, 0, 0.02);
  border-width: 1px;
  border-color: var(--content-border-dark);
  background-color: var(--grayscale-1);
  content: var(--tw-content);
  /* background: linear-gradient(
      90deg,
      theme(colors.seafoam.100) 0%,
      theme(colors.offWhite / 0%) 110.35%
    );
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06); */
}

.btn-toggle input[type='checkbox']:checked + .focus\:bg-transparent:focusbutton.button-secondary, .btn-toggle input[type='radio']:checked + .focus\:bg-transparent:focusbutton.button-secondary {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.disabled\:button-link-disabled:disabled, .btn-toggle input[type='radio']:checked + button.button-secondary.disabled\:button-link-disabled:disabled {
  background-color: var(--background-overlay);
}

.disabled\:button-link-disabled:disabled {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.disabled\:button-link-disabled:disabled,
.floating-input-field.disabled\:button-link-disabled:disabled:focus,
.floating-input-field.disabled\:button-link-disabled:disabled:hover,
.floating-input-field.disabled\:button-link-disabled:disabled:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .disabled\:button-link-disabled:disabled:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .disabled\:button-link-disabled:disabled:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.disabled\:button-link-disabled:disabled:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.disabled\:button-disabled:disabled {
  cursor: not-allowed;
  text-decoration-line: none;
}

.disabled\:button-disabled:disabled:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.disabled\:button-disabled:disabled:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.disabled\:button-disabled:disabled),
  .button-primary-dark:has(.disabled\:button-disabled:disabled),
  .button-secondary:has(.disabled\:button-disabled:disabled),
  .button-tertiary:has(.disabled\:button-disabled:disabled),
  .button-danger:has(.disabled\:button-disabled:disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.disabled\:button-disabled:disabled):not(.no-disabled-style), .button-primary-dark:has(.disabled\:button-disabled:disabled):not(.no-disabled-style), .button-secondary:has(.disabled\:button-disabled:disabled):not(.no-disabled-style), .button-tertiary:has(.disabled\:button-disabled:disabled):not(.no-disabled-style), .button-danger:has(.disabled\:button-disabled:disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.btn-toggle input[type='checkbox']:checked + button.button-secondary.hover\:disabled\:button-link-disabled:disabled:hover, .btn-toggle input[type='radio']:checked + button.button-secondary.hover\:disabled\:button-link-disabled:disabled:hover {
  background-color: var(--background-overlay);
}

.hover\:disabled\:button-link-disabled:disabled:hover {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.floating-input-field.hover\:disabled\:button-link-disabled:disabled:hover,
.floating-input-field.hover\:disabled\:button-link-disabled:disabled:hover:focus,
.floating-input-field.hover\:disabled\:button-link-disabled:disabled:hover:hover,
.floating-input-field.hover\:disabled\:button-link-disabled:disabled:hover:active {
  box-shadow: none;
}

.btn-toggle input[type='checkbox']:checked + .hover\:disabled\:button-link-disabled:disabled:hover:where(.dark, .dark *)button.button-secondary, .btn-toggle input[type='radio']:checked + .hover\:disabled\:button-link-disabled:disabled:hover:where(.dark, .dark *)button.button-secondary {
  background-color: var(--background-overlay);
}

.hover\:disabled\:button-link-disabled:disabled:hover:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
  background-color: transparent;
}

.hover\:disabled\:button-disabled:disabled:hover {
  cursor: not-allowed;
  text-decoration-line: none;
}

.hover\:disabled\:button-disabled:disabled:hover:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.hover\:disabled\:button-disabled:disabled:hover:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.button-primary:has(.hover\:disabled\:button-disabled:disabled:hover),
  .button-primary-dark:has(.hover\:disabled\:button-disabled:disabled:hover),
  .button-secondary:has(.hover\:disabled\:button-disabled:disabled:hover),
  .button-tertiary:has(.hover\:disabled\:button-disabled:disabled:hover),
  .button-danger:has(.hover\:disabled\:button-disabled:disabled:hover) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.button-primary:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style), .button-primary-dark:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style), .button-secondary:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style), .button-tertiary:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style), .button-danger:has(.hover\:disabled\:button-disabled:disabled:hover):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.btn-toggle input[type='checkbox']:checked + .group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:hover\:bg-transparent:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:hover\:bg-transparent:hoverbutton.button-secondary {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + .peer:checked ~ .peer-checked\:bg-transparentbutton.button-secondary, .btn-toggle input[type='radio']:checked + .peer:checked ~ .peer-checked\:bg-transparentbutton.button-secondary {
  background-color: var(--background-overlay) !important;
}

.peer:checked ~ .peer-checked\:button-primary-dark {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.peer:checked ~ .peer-checked\:button-primary-dark:hover {
  text-decoration-line: none;
}

.peer:checked ~ .peer-checked\:button-primary-dark:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:button-primary-dark:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.peer:checked ~ .peer-checked\:button-primary-dark {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
}

.message .peer:checked ~ .peer-checked\:button-primary-dark .markdown-content a {
  word-break: break-all !important;
  color: var(--background-base) !important;
  text-decoration-line: underline !important;
}

.peer:checked ~ .peer-checked\:button-primary-dark:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
}

.peer:checked ~ .peer-checked\:button-primary-dark[disabled] {
  cursor: not-allowed;
  text-decoration-line: none;
}

.peer:checked ~ .peer-checked\:button-primary-dark[disabled]:not(.no-disabled-style) {
  /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  cursor: not-allowed;
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.peer:checked ~ .peer-checked\:button-primary-dark[disabled]:not(.no-disabled-style):active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:button-primary-dark:has(.button-disabled) {
  cursor: not-allowed;
  text-decoration-line: none;
}

.peer:checked ~ .peer-checked\:button-primary-dark:has(.button-disabled):not(.no-disabled-style) {
  background-color: var(--background-disabled) !important;
  color: var(--content-tertiary);
}

.btn-toggle input[type='checkbox']:checked + .peer:checked ~ .peer-checked\:hover\:bg-transparent:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .peer:checked ~ .peer-checked\:hover\:bg-transparent:hoverbutton.button-secondary {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + .has-\[\:checked\]\:bg-transparent:has(:checked)button.button-secondary, .btn-toggle input[type='radio']:checked + .has-\[\:checked\]\:bg-transparent:has(:checked)button.button-secondary {
  background-color: var(--background-overlay) !important;
}

.btn-toggle input[type='checkbox']:checked + .has-\[\:disabled\]\:hover\:bg-transparent:hover:has(:disabled)button.button-secondary, .btn-toggle input[type='radio']:checked + .has-\[\:disabled\]\:hover\:bg-transparent:hover:has(:disabled)button.button-secondary {
  background-color: var(--background-overlay) !important;
}

@container (min-width: 42rem) {
  .btn-toggle input[type='checkbox']:checked + .\@2xl\:hover\:bg-transparent:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .\@2xl\:hover\:bg-transparent:hoverbutton.button-secondary {
    background-color: var(--background-overlay) !important;
  }
}

@container (min-width: 48rem) {
  .\@3xl\:border-b[data-select-all-target='wrapper'] {
    border-color: var(--content-border-dark);
  }
}

@media not all and (min-width: 1024px) {
  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.max-lg\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.max-lg\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:active.nested-filter-row [data-dropdown-target="trigger"] {
    background-color: var(--background-base);
    color: var(--content-primary);
  }

  svg.max-lg\:icon-size-4 {
    height: 1rem;
    width: 1rem;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
  /* used for wrapping button internals in a span, used by the spinner component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0em;
  transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  }

  .box-footer .max-lg\:button-secondary:hover,
  .box-actions .max-lg\:button-secondary:hover {
  text-decoration-line: none;
  }

  .box-footer .max-lg\:button-secondary:active,
  .box-actions .max-lg\:button-secondary:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .box-footer .max-lg\:button-secondary:where(.dark, .dark *),
  .box-actions .max-lg\:button-secondary:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
  background-color: var(--brand-primary-brew);
  color: var(--brand-primary-crisp);
  }

  .box-footer .max-lg\:button-secondary:hover,
  .box-actions .max-lg\:button-secondary:hover {
  color: var(--brand-primary-crisp);
  background-color: var(--bg-fill-dark-hover);
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style) {
    /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style) {
    /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
    cursor: not-allowed;
    background-color: var(--background-disabled) !important;
    color: var(--content-tertiary);
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style):active {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style) {
    /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
    cursor: not-allowed;
    background-color: var(--background-disabled) !important;
    color: var(--content-tertiary);
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style):active {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:has(.button-disabled) {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary.bg-transparent, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary.bg-transparent {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.max-lg\:button-secondary span span, .btn-toggle input[type='radio']:checked + button.max-lg\:button-secondary span span {
    color: var(--content-primary);
  }

  .max-lg\:button-secondary {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:button-secondary:hover {
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .max-lg\:button-secondary {
    background-color: var(--background-overlay);
    color: var(--content-primary);
  }

  .max-lg\:button-secondary:hover {
    color: var(--content-primary);
    background-color: var(--bg-fill-secondary-hover);
  }

  .box-footer .max-lg\:button-secondary,
  .box-actions .max-lg\:button-secondary {
    @extend .button-primary-dark;
    @extend .button-primary-dark;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  }

  .buttons .max-lg\:button-secondary {
    @extend .button-tertiary;
  }

  .max-lg\:button-secondary[disabled] {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style) {
    /* active:scale-100 keeps disabled buttons from press-shrinking (preserved from the old
         legacy rule that was removed from components.css). */
    cursor: not-allowed;
    background-color: var(--background-disabled) !important;
    color: var(--content-tertiary);
  }

  .max-lg\:button-secondary[disabled]:not(.no-disabled-style):active {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:button-secondary:has(.button-disabled) {
    cursor: not-allowed;
    text-decoration-line: none;
  }

  .max-lg\:button-secondary:has(.button-disabled):not(.no-disabled-style) {
    background-color: var(--background-disabled) !important;
    color: var(--content-tertiary);
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .max-lg\:button-large {
    /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .max-lg\:button-large {
    /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
    height: 3rem;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .max-lg\:button-large
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .max-lg\:button-large.button-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .max-lg\:button-large.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .max-lg\:button-large {
    /* text-base is part of the large spec — without it a `.button-medium.button-large` combo (e.g. a
       dialog-button that's medium on desktop, large on mobile) leaks button-medium's text-sm. */
    height: 3rem;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .max-lg\:button-large svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .max-lg\:dialog-bottom-sheet {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto;
    margin-bottom: 0px !important;
    width: 100%;
    max-width: 100% !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }

  .max-lg\:dialog-full-sheet {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto;
    margin-bottom: 0px !important;
    width: 100%;
    max-width: 100% !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    height: calc(100dvh - 8px);
    max-height: none;
  }

  .max-lg\:dialog-full-screen {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    height: 100dvh;
    max-height: none;
    width: 100%;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  .max-lg\:active.nested-filter-row [data-dropdown-target="trigger"] {
    background-color: var(--background-base);
    color: var(--content-primary);
  }

  .daterangepicker .calendar-table .max-lg\:active {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(33 168 117 / var(--tw-bg-opacity, 1)) !important;
  }

  .btn-toggle input[type='checkbox']:checked + .max-lg\:hover\:bg-transparent:hoverbutton.button-secondary, .btn-toggle input[type='radio']:checked + .max-lg\:hover\:bg-transparent:hoverbutton.button-secondary {
    background-color: var(--background-overlay) !important;
  }
}

@media not all and (min-width: 768px) {
  .max-md\:dialog-bottom-sheet {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto;
    margin-bottom: 0px !important;
    width: 100%;
    max-width: 100% !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }
}

@media (min-width: 768px) {
  .btn-toggle input[type='checkbox']:checked + button.md\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.md\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .md\:inline-block[data-select-all-target='wrapper'] {
    display: block;
  }

  .md\:border-t[data-select-all-target='wrapper'] {
    border-color: var(--content-border-dark);
  }
}

@media (min-width: 1024px) {
  .lg\:button-small
    .button-link {
    padding: 0;
    border-radius: 2px;
  }

  .btn-toggle input[type='checkbox']:checked + button.lg\:\!bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.lg\:\!bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.lg\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.lg\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.lg\:\!bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.lg\:\!bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  .btn-toggle input[type='checkbox']:checked + button.lg\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.lg\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }

  svg.lg\:icon-size-8 {
    height: 2rem;
    width: 2rem;
  }

  .lg\:button-icon {
    /* used for wrapping button internals in a span, used by the spinner component */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .lg\:button-icon:hover {
    text-decoration-line: none;
  }

  .lg\:button-icon:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:button-icon:where(.dark, .dark *) {
    background-color: rgba(238,232,229,0.15) !important;
  }

  .lg\:button-icon {
    aspect-ratio: 1 / 1;
    height: 32px;
    width: 32px;
    background-color: var(--background-overlay);
    padding: 0px !important;
    color: var(--content-primary);
    transition-property: color, background-color, background-image, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .lg\:button-icon:hover {
    color: var(--content-primary);
  }

  .lg\:button-icon {
    /* Icon buttons are always a circle — enforced so size/other utilities can't square it off. */
    border-radius: var(--rounded-full, 99999px) !important;
    background: var(--background-overlay, rgba(104, 67, 0, 0.08));
    color: var(--content-primary, #342e26);
  }

  .lg\:button-icon:hover {
    background-color: var(--bg-fill-secondary-hover);
  }

  .lg\:button-icon svg {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .lg\:button-icon:hover svg,.lg\:button-icon:active svg {
    transform: scale(1.1);
  }

  .lg\:button-icon.button-xs {
    height: 26px;
    width: 26px;
    padding: 0.375rem !important;
  }

  .lg\:button-icon.button-xs svg {
    height: 0.875rem !important;
    width: 0.875rem !important;
  }

  .lg\:button-icon.button-small {
    height: 2rem;
    width: 2rem;
    padding: 0.5rem !important;
  }

  .lg\:button-small.button-icon {
    height: 2rem;
    width: 2rem;
    padding: 0.5rem !important;
  }

  .lg\:button-icon.button-small svg {
    height: 1rem !important;
    width: 1rem !important;
  }

  .lg\:button-small.button-icon svg {
    height: 1rem !important;
    width: 1rem !important;
  }

  .lg\:button-icon.button-medium {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem !important;
  }

  .lg\:button-medium.button-icon {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.625rem !important;
  }

  .lg\:button-icon.button-medium svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .lg\:button-medium.button-icon svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .lg\:button-icon.button-large {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0.75rem !important;
  }

  .lg\:button-icon.button-large svg {
    height: 1.25rem !important;
    width: 1.25rem !important;
  }

  .lg\:button-icon.button-icon-pagination svg {
    height: 0.75rem !important;
    width: 0.75rem !important;
  }

  @media (max-width: 1023px) {
    .page-header-toolbar .lg\:button-icon,
    .drawer-footer-toolbar .lg\:button-icon {
      height: 2.5rem !important;
      width: 2.5rem !important;
      padding: 0.625rem !important;
    }

    .page-header-toolbar .lg\:button-icon svg,
    .drawer-footer-toolbar .lg\:button-icon svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }

    /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

    .page-header-toolbar .lg\:button-icon.button-icon-pagination svg {
      width: 0.875rem !important;
      height: 0.875rem !important;
    }

    .page-header-toolbar .lg\:button-icon,
    .drawer-footer-toolbar .lg\:button-icon {
      height: 2.5rem !important;
      width: 2.5rem !important;
      padding: 0.625rem !important;
    }

    .page-header-toolbar .lg\:button-icon svg,
    .drawer-footer-toolbar .lg\:button-icon svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }

    /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

    .page-header-toolbar .lg\:button-icon.button-icon-pagination svg {
      width: 0.875rem !important;
      height: 0.875rem !important;
    }

    .page-header-toolbar .lg\:button-icon,
    .drawer-footer-toolbar .lg\:button-icon {
      height: 2.5rem !important;
      width: 2.5rem !important;
      padding: 0.625rem !important;
    }

    .page-header-toolbar .lg\:button-icon svg,
    .drawer-footer-toolbar .lg\:button-icon svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }

    /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

    .page-header-toolbar .lg\:button-icon.button-icon-pagination svg {
      width: 0.875rem !important;
      height: 0.875rem !important;
    }

    .page-header-toolbar .lg\:button-icon,
    .drawer-footer-toolbar .lg\:button-icon {
      height: 2.5rem !important;
      width: 2.5rem !important;
      padding: 0.625rem !important;
    }

    .page-header-toolbar .lg\:button-icon svg,
    .drawer-footer-toolbar .lg\:button-icon svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }

    /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

    .page-header-toolbar .lg\:button-icon.button-icon-pagination svg {
      width: 0.875rem !important;
      height: 0.875rem !important;
    }

    .page-header-toolbar .lg\:button-icon,
    .drawer-footer-toolbar .lg\:button-icon {
      height: 2.5rem !important;
      width: 2.5rem !important;
      padding: 0.625rem !important;
    }

    .page-header-toolbar .lg\:button-icon svg,
    .drawer-footer-toolbar .lg\:button-icon svg {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }

    /* Pagination chevrons keep their sized-down treatment even inside a toolbar (which steps icons
       up to 20px): 14px on mobile, mirroring the always-smaller chevron vs the default icon. */

    .page-header-toolbar .lg\:button-icon.button-icon-pagination svg {
      width: 0.875rem !important;
      height: 0.875rem !important;
    }
  }

  .lg\:button-medium {
    height: 2.5rem;
    border-radius: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .lg\:button-small {
    height: 2rem;
    border-radius: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .lg\:dialog-full-sheet {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto;
    margin-bottom: 0px !important;
    width: 100%;
    max-width: 100% !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    height: calc(100dvh - 8px);
    max-height: none;
  }

  .lg\:dialog-full-screen {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    height: 100dvh;
    max-height: none;
    width: 100%;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  .lg\:button-icon.button-small svg.icon-18 {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .lg\:button-small.button-icon svg.icon-18 {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .lg\:inline-block[data-select-all-target='wrapper'] {
    display: block;
  }

  .lg\:border-b[data-select-all-target='wrapper'] {
    border-color: var(--content-border-dark);
  }

  .lg\:border-t[data-select-all-target='wrapper'] {
    border-color: var(--content-border-dark);
  }
}

@media (min-width: 1280px) {
  .btn-toggle input[type='checkbox']:checked + button.xl\:bg-transparent.button-secondary, .btn-toggle input[type='radio']:checked + button.xl\:bg-transparent.button-secondary {
    background-color: var(--background-overlay) !important;
  }
}

.marker\:text-content-primary *::marker {
  color: var(--content-primary);
}

.marker\:text-content-tertiary *::marker {
  color: var(--content-tertiary);
}

.marker\:text-content-primary::marker {
  color: var(--content-primary);
}

.marker\:text-content-tertiary::marker {
  color: var(--content-tertiary);
}

.placeholder\:text-sm::-moz-placeholder {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.placeholder\:text-sm::placeholder {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.placeholder\:font-medium::-moz-placeholder {
  font-weight: 500;
}

.placeholder\:font-medium::placeholder {
  font-weight: 500;
}

.placeholder\:normal-case::-moz-placeholder {
  text-transform: none;
}

.placeholder\:normal-case::placeholder {
  text-transform: none;
}

.placeholder\:\!text-content-secondary::-moz-placeholder {
  color: var(--content-secondary) !important;
}

.placeholder\:\!text-content-secondary::placeholder {
  color: var(--content-secondary) !important;
}

.placeholder\:text-content-secondary::-moz-placeholder {
  color: var(--content-secondary);
}

.placeholder\:text-content-secondary::placeholder {
  color: var(--content-secondary);
}

.placeholder\:text-content-tertiary::-moz-placeholder {
  color: var(--content-tertiary);
}

.placeholder\:text-content-tertiary::placeholder {
  color: var(--content-tertiary);
}

.placeholder\:text-gray-300::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-300::placeholder {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.placeholder\:text-richBlack\/12::-moz-placeholder {
  color: rgb(11 5 29 / .12);
}

.placeholder\:text-richBlack\/12::placeholder {
  color: rgb(11 5 29 / .12);
}

.placeholder\:text-richBlack\/32::-moz-placeholder {
  color: rgb(11 5 29 / .32);
}

.placeholder\:text-richBlack\/32::placeholder {
  color: rgb(11 5 29 / .32);
}

.placeholder\:text-stone-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.placeholder\:text-stone-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.backdrop\:bg-black\/30::backdrop {
  background-color: rgb(0 0 0 / 0.3);
}

.backdrop\:bg-content-background-modal-overlay::backdrop {
  background-color: var(--content-background-modal-overlay);
}

.backdrop\:backdrop-blur-xs::backdrop {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.before\:pointer-events-none::before {
  content: var(--tw-content);
  pointer-events: none;
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:inset-\[-1px\]::before {
  content: var(--tw-content);
  inset: -1px;
}

.before\:inset-y-0::before {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.before\:-left-10::before {
  content: var(--tw-content);
  left: -2.5rem;
}

.before\:-left-3::before {
  content: var(--tw-content);
  left: -0.75rem;
}

.before\:-left-\[1px\]::before {
  content: var(--tw-content);
  left: -1px;
}

.before\:-right-3::before {
  content: var(--tw-content);
  right: -0.75rem;
}

.before\:top-1\/2::before {
  content: var(--tw-content);
  top: 50%;
}

.before\:-z-10::before {
  content: var(--tw-content);
  z-index: -10;
}

.before\:z-0::before {
  content: var(--tw-content);
  z-index: 0;
}

.before\:mr-2::before {
  content: var(--tw-content);
  margin-right: 0.5rem;
}

.before\:hidden::before {
  content: var(--tw-content);
  display: none;
}

.before\:h-\[60\%\]::before {
  content: var(--tw-content);
  height: 60%;
}

.before\:w-px::before {
  content: var(--tw-content);
  width: 1px;
}

.before\:-translate-y-1\/2::before {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.before\:rounded-radius-12::before {
  content: var(--tw-content);
  border-radius: 0.75rem;
}

.before\:rounded-radius-16::before {
  content: var(--tw-content);
  border-radius: 1rem;
}

.before\:rounded-radius-20::before {
  content: var(--tw-content);
  border-radius: 1.25rem;
}

.before\:rounded-radius-8::before {
  content: var(--tw-content);
  border-radius: 0.5rem;
}

.before\:border::before {
  content: var(--tw-content);
  border-width: 1px;
}

.before\:border-transparent::before {
  content: var(--tw-content);
  border-color: transparent;
}

.before\:bg-background-base::before {
  content: var(--tw-content);
  background-color: var(--background-base);
}

.before\:bg-content-border-neutral::before {
  content: var(--tw-content);
  background-color: var(--content-border-neutral);
}

.before\:text-xs::before {
  content: var(--tw-content);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
}

.before\:font-semibold::before {
  content: var(--tw-content);
  font-weight: 600;
}

.before\:uppercase::before {
  content: var(--tw-content);
  text-transform: uppercase;
}

.before\:tracking-wider::before {
  content: var(--tw-content);
  letter-spacing: 0.05em;
}

.before\:text-content-secondary::before {
  content: var(--tw-content);
  color: var(--content-secondary);
}

.before\:opacity-0::before {
  content: var(--tw-content);
  opacity: 0;
}

.before\:transition-opacity::before {
  content: var(--tw-content);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.before\:content-\[attr\(data-label\)\]::before {
  --tw-content: attr(data-label);
  content: var(--tw-content);
}

.after\:pointer-events-none::after {
  content: var(--tw-content);
  pointer-events: none;
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}

.after\:inset-x-2::after {
  content: var(--tw-content);
  left: 0.5rem;
  right: 0.5rem;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:bottom-0::after {
  content: var(--tw-content);
  bottom: 0px;
}

.after\:left-9::after {
  content: var(--tw-content);
  left: 2.25rem;
}

.after\:right-2\.5::after {
  content: var(--tw-content);
  right: 0.625rem;
}

.after\:z-0::after {
  content: var(--tw-content);
  z-index: 0;
}

.after\:hidden::after {
  content: var(--tw-content);
  display: none;
}

.after\:h-px::after {
  content: var(--tw-content);
  height: 1px;
}

.after\:rounded-radius-16::after {
  content: var(--tw-content);
  border-radius: 1rem;
}

.after\:rounded-radius-20::after {
  content: var(--tw-content);
  border-radius: 1.25rem;
}

.after\:rounded-radius-8::after {
  content: var(--tw-content);
  border-radius: 0.5rem;
}

.after\:border-b::after {
  content: var(--tw-content);
  border-bottom-width: 1px;
}

.after\:border-content-border-neutral::after {
  content: var(--tw-content);
  border-color: var(--content-border-neutral);
}

.after\:bg-content-border-neutral::after {
  content: var(--tw-content);
  background-color: var(--content-border-neutral);
}

.after\:bg-gradient-to-b::after {
  content: var(--tw-content);
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.after\:from-black\/0::after {
  content: var(--tw-content);
  --tw-gradient-from: rgb(0 0 0 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.after\:from-white::after {
  content: var(--tw-content);
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.after\:to-black\/04::after {
  content: var(--tw-content);
  --tw-gradient-to: rgb(0 0 0 / .04) var(--tw-gradient-to-position);
}

.after\:to-white\/40::after {
  content: var(--tw-content);
  --tw-gradient-to: rgb(255 255 255 / 0.4) var(--tw-gradient-to-position);
}

.after\:opacity-38::after {
  content: var(--tw-content);
  opacity: .38;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:flex:first-child {
  display: flex;
}

.first\:rounded-t-none:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.first\:pt-4:first-child {
  padding-top: 1rem;
}

.last\:hidden:last-child {
  display: none;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-4:last-child {
  padding-bottom: 1rem;
}

.last\:after\:hidden:last-child::after {
  content: var(--tw-content);
  display: none;
}

.last\:after\:border-b-0:last-child::after {
  content: var(--tw-content);
  border-bottom-width: 0px;
}

.last-of-type\:rounded-b-radius-6:last-of-type {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.checked\:opacity-100:checked {
  opacity: 1;
}

.empty\:mt-0:empty {
  margin-top: 0px;
}

.empty\:hidden:empty {
  display: none;
}

.empty\:border-0:empty {
  border-width: 0px;
}

.empty\:pt-0:empty {
  padding-top: 0px;
}

.focus-within\:z-10:focus-within {
  z-index: 10;
}

.focus-within\:z-30:focus-within {
  z-index: 30;
}

.focus-within\:border-primary-500:focus-within {
  border-color: var(--primary-500);
}

.focus-within\:border-richBlack\/30:focus-within {
  border-color: rgb(11 5 29 / 0.3);
}

.focus-within\:ring-primary-500:focus-within {
  --tw-ring-color: var(--primary-500);
}

.hover\:z-50:hover {
  z-index: 50;
}

.hover\:translate-y-\[-1px\]:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:cursor-grab:hover {
  cursor: grab;
}

.hover\:cursor-not-allowed:hover {
  cursor: not-allowed;
}

.hover\:cursor-pointer:hover {
  cursor: pointer;
}

.hover\:border-2:hover {
  border-width: 2px;
}

.hover\:border-background-overlay:hover {
  border-color: var(--background-overlay);
}

.hover\:border-content-border-dark:hover {
  border-color: var(--content-border-dark);
}

.hover\:border-content-border-input:hover {
  border-color: var(--content-border-input);
}

.hover\:border-content-focus-outline:hover {
  border-color: var(--content-focus-outline);
}

.hover\:border-content-primary:hover {
  border-color: var(--content-primary);
}

.hover\:border-content-tertiary:hover {
  border-color: var(--content-tertiary);
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-500:hover {
  border-color: var(--primary-500);
}

.hover\:border-richBlack:hover {
  --tw-border-opacity: 1;
  border-color: rgb(11 5 29 / var(--tw-border-opacity, 1));
}

.hover\:border-richBlack\/10:hover {
  border-color: rgb(11 5 29 / 0.1);
}

.hover\:border-richBlack\/12:hover {
  border-color: rgb(11 5 29 / .12);
}

.hover\:border-slate-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.hover\:border-transparent:hover {
  border-color: transparent;
}

.hover\:\!bg-background-base:hover {
  background-color: var(--background-base) !important;
}

.hover\:\!bg-background-elevated:hover {
  background-color: var(--background-elevated) !important;
}

.hover\:\!bg-background-overlay:hover {
  background-color: var(--background-overlay) !important;
}

.hover\:\!bg-mint-200:hover {
  background-color: var(--mint-200) !important;
}

.hover\:\!bg-red-100:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(253 227 229 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-\[\#342e26\]\/70:hover {
  background-color: rgb(52 46 38 / 0.7);
}

.hover\:bg-\[color\:var\(--base-color\)\]:hover {
  background-color: var(--base-color);
}

.hover\:bg-\[rgba\(104\2c 67\2c 0\2c 0\.08\)\]:hover {
  background-color: rgba(104,67,0,0.08);
}

.hover\:bg-\[rgba\(104\2c 67\2c 0\2c 0\.12\)\]:hover {
  background-color: rgba(104,67,0,0.12);
}

.hover\:bg-background-base:hover {
  background-color: var(--background-base);
}

.hover\:bg-background-elevated:hover {
  background-color: var(--background-elevated);
}

.hover\:bg-background-light:hover {
  background-color: var(--background-light);
}

.hover\:bg-background-neutral:hover {
  background-color: var(--background-neutral);
}

.hover\:bg-background-overlay:hover {
  background-color: var(--background-overlay);
}

.hover\:bg-black\/10:hover {
  background-color: rgb(0 0 0 / 0.1);
}

.hover\:bg-black\/60:hover {
  background-color: rgb(0 0 0 / 0.6);
}

.hover\:bg-black\/90:hover {
  background-color: rgb(0 0 0 / 0.9);
}

.hover\:bg-blue-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-grayscale-1:hover {
  background-color: var(--grayscale-1);
}

.hover\:bg-hover-background-04:hover {
  background-color: var(--hover-background-04);
}

.hover\:bg-mint-50:hover {
  background-color: var(--mint-50);
}

.hover\:bg-primary-600:hover {
  background-color: var(--primary-600);
}

.hover\:bg-primary-700:hover {
  background-color: var(--primary-700);
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 243 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(214 44 56 / var(--tw-bg-opacity, 1));
}

.hover\:bg-richBlack\/04:hover {
  background-color: rgb(11 5 29 / .04);
}

.hover\:bg-sentiment-negative:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-stone-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}

.hover\:bg-yellow-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(181 123 25 / var(--tw-bg-opacity, 1));
}

.hover\:bg-zinc-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.hover\:to-\[\#D7F0D1\]:hover {
  --tw-gradient-to: #D7F0D1 var(--tw-gradient-to-position);
}

.hover\:\!text-brand-secondary-moola:hover {
  color: var(--brand-secondary-moola) !important;
}

.hover\:text-\[var\(--base-color\)\]:hover {
  color: var(--base-color);
}

.hover\:text-background-elevated:hover {
  color: var(--background-elevated);
}

.hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.hover\:text-brand-primary-crisp:hover {
  color: var(--brand-primary-crisp);
}

.hover\:text-content-primary:hover {
  color: var(--content-primary);
}

.hover\:text-content-secondary:hover {
  color: var(--content-secondary);
}

.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-inherit:hover {
  color: inherit;
}

.hover\:text-interactive-primary:hover {
  color: var(--interactive-primary);
}

.hover\:text-offWhite:hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-600:hover {
  color: var(--primary-600);
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(214 44 56 / var(--tw-text-opacity, 1));
}

.hover\:text-richBlack:hover {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary-600:hover {
  color: var(--secondary-600);
}

.hover\:text-sentiment-negative:hover {
  --tw-text-opacity: 1;
  color: rgb(149 31 39 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-400:hover {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-500:hover {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.hover\:text-stone-900:hover {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:decoration-2:hover {
  text-decoration-thickness: 2px;
}

.hover\:\!opacity-100:hover {
  opacity: 1 !important;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-50:hover {
  opacity: 0.5;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-\[inset_0_0_0_1\.5px_var\(--content-primary\)\]:hover {
  --tw-shadow: inset 0 0 0 1.5px var(--content-primary);
  --tw-shadow-colored: inset 0 0 0 1.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-none:hover {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm-hover:hover {
  --tw-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 0px 0px 0px rgba(0, 0, 0, 0.00), 0px 2px 12px 0px rgba(0, 0, 0, 0.04), 0px 9px 9px 0px rgba(0, 0, 0, 0.01), 0px 2px 5px 0px rgba(0, 0, 0, 0.06);;
  --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 2px 12px 0px var(--tw-shadow-color), 0px 9px 9px 0px var(--tw-shadow-color), 0px 2px 5px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:outline-none:hover {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.hover\:ring-0:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:brightness-90:hover {
  --tw-brightness: brightness(.9);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:brightness-\[0\.88\]:hover {
  --tw-brightness: brightness(0.88);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:animation-paused:hover {
  animation-play-state: paused;
}

.hover\:before\:opacity-0:hover::before {
  content: var(--tw-content);
  opacity: 0;
}

.hover\:before\:opacity-90:hover::before {
  content: var(--tw-content);
  opacity: 0.9;
}

.focus-within\:hover\:border-richBlack\/30:hover:focus-within {
  border-color: rgb(11 5 29 / 0.3);
}

.focus\:rounded-full:focus {
  border-radius: 9999px;
}

.focus\:border:focus {
  border-width: 1px;
}

.focus\:border-0:focus {
  border-width: 0px;
}

.focus\:border-none:focus {
  border-style: none;
}

.focus\:border-blue-400\/50:focus {
  border-color: rgb(96 165 250 / 0.5);
}

.focus\:border-content-border-dark:focus {
  border-color: var(--content-border-dark);
}

.focus\:border-content-primary:focus {
  border-color: var(--content-primary);
}

.focus\:border-gray-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-500:focus {
  border-color: var(--primary-500);
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(232 59 71 / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:bg-background-elevated:focus {
  background-color: var(--background-elevated);
}

.focus\:bg-transparent:focus {
  background-color: transparent;
}

.focus\:text-content-primary:focus {
  color: var(--content-primary);
}

.focus\:shadow:focus {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:shadow-\[0px_0px_0px_2px_var\(--content-focus-outline\2c rgba\(52\2c 46\2c 38\2c 0\.20\)\)_inset\]:focus {
  --tw-shadow: 0px 0px 0px 2px var(--content-focus-outline,rgba(52,46,38,0.20)) inset;
  --tw-shadow-colored: inset 0px 0px 0px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:shadow-none:focus {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:shadow-sm:focus {
  --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[0\.5px\]:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.5px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}

.focus\:ring-\[color\:var\(--button-color\)\]:focus {
  --tw-ring-color: var(--button-color);
}

.focus\:ring-blue-400\/50:focus {
  --tw-ring-color: rgb(96 165 250 / 0.5);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-content-focus-outline:focus {
  --tw-ring-color: var(--content-focus-outline);
}

.focus\:ring-content-primary:focus {
  --tw-ring-color: var(--content-primary);
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--primary-500);
}

.focus\:ring-primary-600:focus {
  --tw-ring-color: var(--primary-600);
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(232 59 71 / var(--tw-ring-opacity, 1));
}

.focus\:ring-slate-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));
}

.focus\:ring-white:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus\:placeholder\:\!text-content-secondary:focus::-moz-placeholder {
  color: var(--content-secondary) !important;
}

.focus\:placeholder\:\!text-content-secondary:focus::placeholder {
  color: var(--content-secondary) !important;
}

.focus\:placeholder\:text-content-tertiary:focus::-moz-placeholder {
  color: var(--content-tertiary);
}

.focus\:placeholder\:text-content-tertiary:focus::placeholder {
  color: var(--content-tertiary);
}

.focus\:hover\:text-offWhite:hover:focus {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.hover\:focus\:text-content-primary:focus:hover {
  color: var(--content-primary);
}

.focus-visible\:bg-background-overlay:focus-visible {
  background-color: var(--background-overlay);
}

.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.focus-visible\:shadow-\[inset_0px_0px_0px_2px_rgba\(11\2c 5\2c 29\2c 0\.40\)\2c 0px_0px_0px_1px_var\(--background-base\)\]:focus-visible {
  --tw-shadow: inset 0px 0px 0px 2px rgba(11,5,29,0.40),0px 0px 0px 1px var(--background-base);
  --tw-shadow-colored: inset 0px 0px 0px 2px var(--tw-shadow-color), 0px 0px 0px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-content-primary:focus-visible {
  outline-color: var(--content-primary);
}

.focus-visible\:outline-white:focus-visible {
  outline-color: #fff;
}

.focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}

.focus-visible\:ring-\[\#342e2633\]:focus-visible {
  --tw-ring-color: #342e2633;
}

.focus-visible\:ring-\[rgba\(11\2c 5\2c 29\2c 0\.40\)\]:focus-visible {
  --tw-ring-color: rgba(11,5,29,0.40);
}

.focus-visible\:ring-content-primary:focus-visible {
  --tw-ring-color: var(--content-primary);
}

.focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:\[--tw-ring-offset-width\:2px\]:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:\[--tw-ring-width\:2px\]:focus-visible {
  --tw-ring-width: 2px;
}

.active\:\!scale-\[0\.995\]:active {
  --tw-scale-x: 0.995 !important;
  --tw-scale-y: 0.995 !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

.active\:scale-100:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.96\]:active {
  --tw-scale-x: 0.96;
  --tw-scale-y: 0.96;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.995\]:active {
  --tw-scale-x: 0.995;
  --tw-scale-y: 0.995;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:border-background-overlay:active {
  border-color: var(--background-overlay);
}

.active\:bg-background-base:active {
  background-color: var(--background-base);
}

.active\:bg-background-elevated:active {
  background-color: var(--background-elevated);
}

.active\:bg-background-overlay:active {
  background-color: var(--background-overlay);
}

.active\:bg-sentiment-negative:active {
  --tw-bg-opacity: 1;
  background-color: rgb(149 31 39 / var(--tw-bg-opacity, 1));
}

.active\:\!text-yellow-800:active {
  --tw-text-opacity: 1 !important;
  color: rgb(120 71 27 / var(--tw-text-opacity, 1)) !important;
}

.active\:\!opacity-100:active {
  opacity: 1 !important;
}

.active\:shadow-\[inset_0_0_0_2px_rgba\(11\2c 5\2c 29\2c 0\.4\)\2c _0_0_0_1px_var\(--content-background-base\2c \#F3F0E8\)\]:active {
  --tw-shadow: inset 0 0 0 2px rgba(11,5,29,0.4), 0 0 0 1px var(--content-background-base,#F3F0E8);
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.active\:outline-none:active {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.active\:outline:active {
  outline-style: solid;
}

.active\:outline-2:active {
  outline-width: 2px;
}

.active\:outline-content-primary:active {
  outline-color: var(--content-primary);
}

.active\:focus\:\[--tw-ring-color\:transparent\]:focus:active {
  --tw-ring-color: transparent;
}

.active\:focus\:\[--tw-ring-width\:0px\]:focus:active {
  --tw-ring-width: 0px;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:hidden:disabled {
  display: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:\!bg-white:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:bg-slate-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-white:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.disabled\:text-content-primary:disabled {
  color: var(--content-primary);
}

.disabled\:\!opacity-0:disabled {
  opacity: 0 !important;
}

.disabled\:opacity-0:disabled {
  opacity: 0;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-80:disabled {
  opacity: 0.8;
}

.disabled\:hover\:\!bg-offWhite:hover:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:hover\:bg-offWhite:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
}

.disabled\:hover\:brightness-100:hover:disabled {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.group:first-of-type .group-first-of-type\:block {
  display: block;
}

.group[open] .group-open\:block {
  display: block;
}

.group[open] .group-open\:inline {
  display: inline;
}

.group[open] .group-open\:hidden {
  display: none;
}

.group\/\--subscription-details[open] .group-open\/--subscription-details\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[open] .group-open\:rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[open] .group-open\:-scale-y-100 {
  --tw-scale-y: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[open] .group-open\:grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}

.group[open] .group-open\:bg-background-base {
  background-color: var(--background-base);
}

.group:focus-within .group-focus-within\:visible {
  visibility: visible;
}

.group:hover .group-hover\:pointer-events-auto {
  pointer-events: auto;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:block {
  display: block;
}

.group:hover .group-hover\:flex {
  display: flex;
}

.group:hover .group-hover\:hidden {
  display: none;
}

.group\/item:hover .group-hover\/item\:translate-x-3 {
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-3 {
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/card:hover .group-hover\/card\:border-background-base {
  border-color: var(--background-base);
}

.group\/row:hover .group-hover\/row\:border-content-primary {
  border-color: var(--content-primary);
}

.group\/tab:hover .group-hover\/tab\:bg-content-border-dark {
  background-color: var(--content-border-dark);
}

.group:hover .group-hover\:bg-background-base {
  background-color: var(--background-base);
}

.group:hover .group-hover\:bg-background-overlay {
  background-color: var(--background-overlay);
}

.group\/item:hover .group-hover\/item\:text-content-secondary {
  color: var(--content-secondary);
}

.group:hover .group-hover\:text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:underline {
  text-decoration-line: underline;
}

.group:hover .group-hover\:no-underline {
  text-decoration-line: none;
}

.group:hover .group-hover\:decoration-content-tertiary {
  text-decoration-color: var(--content-tertiary);
}

.group:hover .group-hover\:decoration-dotted {
  text-decoration-style: dotted;
}

.group\/item:hover .group-hover\/item\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group\/item:focus .group-focus\/item\:opacity-100 {
  opacity: 1;
}

.group\/tab:focus-visible .group-focus-visible\/tab\:text-content-primary {
  color: var(--content-primary);
}

.group\/tab:focus-visible .group-focus-visible\/tab\:opacity-100 {
  opacity: 1;
}

.group:active .group-active\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/rail.is-open .group-\[\.is-open\]\/rail\:pointer-events-auto {
  pointer-events: auto;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:bottom-auto {
  bottom: auto;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:top-0 {
  top: 0px;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:left-4 {
  left: 1rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:mb-4 {
  margin-bottom: 1rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:mr-3 {
  margin-right: 0.75rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.group.collaboration-details-hidden .group-\[\.collaboration-details-hidden\]\:block {
  display: block;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:block {
  display: block;
}

.group.collaboration-details-hidden .group-\[\.collaboration-details-hidden\]\:flex {
  display: flex;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:flex {
  display: flex;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:contents {
  display: contents;
}

.group\/dropdown.active .group-\[\.active\]\/dropdown\:hidden {
  display: none;
}

.group.collaboration-details-hidden .group-\[\.collaboration-details-hidden\]\:hidden {
  display: none;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:hidden {
  display: none;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:hidden {
  display: none;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:\!size-5 {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:h-10 {
  height: 2.5rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:h-5 {
  height: 1.25rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:h-6 {
  height: 1.5rem;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:w-20 {
  width: 5rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:w-5 {
  width: 1.25rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:w-6 {
  width: 1.5rem;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:min-w-\[0px\] {
  min-width: 0px;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:flex-1 {
  flex: 1 1 0%;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:scale-x-100 {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:flex-row-reverse {
  flex-direction: row-reverse;
}

.group\/layout.sidebar-collapsed .group-\[\.sidebar-collapsed\]\/layout\:items-center {
  align-items: center;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:gap-6 {
  gap: 1.5rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:\!rounded-radius-6 {
  border-radius: 0.375rem !important;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:rounded-none {
  border-radius: 0;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:rounded-radius-16 {
  border-radius: 1rem;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:rounded-b-radius-4 {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.group\/card.bg-background-base .group-\[\.bg-background-base\]\/card\:border-background-base {
  border-color: var(--background-base);
}

.group.active .group-\[\.active\]\:bg-hover-background-04 {
  background-color: var(--hover-background-04);
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:p-3 {
  padding: 0.75rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.group\/tab-group.use-overline .group-\[\.use-overline\]\/tab-group\:pt-2\.5 {
  padding-top: 0.625rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:pb-3 {
  padding-bottom: 0.75rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:pl-10 {
  padding-left: 2.5rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:pr-4 {
  padding-right: 1rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:pt-2 {
  padding-top: 0.5rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:pt-4 {
  padding-top: 1rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:pt-5 {
  padding-top: 1.25rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:text-base {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:text-lg {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.0113rem;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:leading-snug {
  line-height: 1.33;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:\!tracking-tight-2 {
  letter-spacing: -0.02rem !important;
}

.group.active .group-\[\.active\]\:text-content-secondary {
  color: var(--content-secondary);
}

.group\/rail.is-open .group-\[\.is-open\]\/rail\:opacity-100 {
  opacity: 1;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:hover\:bg-transparent:hover {
  background-color: transparent;
}

.group\/dropdown-modal.with-items .group-\[\.with-items\]\/dropdown-modal\:active\:bg-background-base:active {
  background-color: var(--background-base);
}

.peer[open] ~ .peer-open\:hidden {
  display: none;
}

.peer:checked ~ .peer-checked\:inline {
  display: inline;
}

.peer:checked ~ .peer-checked\:hidden {
  display: none;
}

.peer:checked ~ .peer-checked\:translate-x-\[0\.5rem\] {
  --tw-translate-x: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:translate-x-\[0\.875rem\] {
  --tw-translate-x: 0.875rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:border-\[6px\] {
  border-width: 6px;
}

.peer:checked ~ .peer-checked\:border-content-border-neutral {
  border-color: var(--content-border-neutral);
}

.peer:checked ~ .peer-checked\:border-content-primary {
  border-color: var(--content-primary);
}

.peer:checked ~ .peer-checked\:bg-background-elevated {
  background-color: var(--background-elevated);
}

.peer:checked ~ .peer-checked\:bg-content-primary {
  background-color: var(--content-primary);
}

.peer:checked ~ .peer-checked\:bg-interactive-primary {
  background-color: var(--interactive-primary);
}

.peer:checked ~ .peer-checked\:bg-transparent {
  background-color: transparent;
}

.peer:checked ~ .peer-checked\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.peer:checked ~ .peer-checked\:text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

.peer:checked ~ .peer-checked\:text-content-primary {
  color: var(--content-primary);
}

.peer:checked ~ .peer-checked\:text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:opacity-100 {
  opacity: 1;
}

.peer:checked ~ .peer-checked\:shadow-\[inset_0_0_0_1\.5px_var\(--content-primary\)\] {
  --tw-shadow: inset 0 0 0 1.5px var(--content-primary);
  --tw-shadow-colored: inset 0 0 0 1.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.peer:checked ~ .peer-checked\:outline {
  outline-style: solid;
}

.peer:checked ~ .peer-checked\:outline-2 {
  outline-width: 2px;
}

.peer:checked ~ .peer-checked\:outline-offset-2 {
  outline-offset: 2px;
}

.peer:checked ~ .peer-checked\:outline-white {
  outline-color: #fff;
}

.peer:checked ~ .peer-checked\:before\:border-content-primary::before {
  content: var(--tw-content);
  border-color: var(--content-primary);
}

.peer:checked ~ .peer-checked\:after\:opacity-0::after {
  content: var(--tw-content);
  opacity: 0;
}

.peer:checked ~ .peer-checked\:hover\:bg-transparent:hover {
  background-color: transparent;
}

.peer:checked ~ .peer-checked\:focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:border-content-border-dark {
  border-color: var(--content-border-dark);
}

.peer:placeholder-shown ~ .peer-placeholder-shown\:border-content-border-dark {
  border-color: var(--content-border-dark);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-content-primary {
  --tw-ring-color: var(--content-primary);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.peer:enabled ~ .peer-enabled\:hover\:bg-background-overlay:hover {
  background-color: var(--background-overlay);
}

.peer:disabled ~ .peer-disabled\:border-0 {
  border-width: 0px;
}

.peer:disabled ~ .peer-disabled\:border-8 {
  border-width: 8px;
}

.peer:disabled ~ .peer-disabled\:border-background-disabled {
  border-color: var(--background-disabled);
}

.peer:disabled ~ .peer-disabled\:border-content-border-neutral {
  border-color: var(--content-border-neutral);
}

.peer:disabled ~ .peer-disabled\:bg-\[\#DFDEDC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(223 222 220 / var(--tw-bg-opacity, 1));
}

.peer:disabled ~ .peer-disabled\:bg-background-disabled {
  background-color: var(--background-disabled);
}

.peer:disabled ~ .peer-disabled\:bg-background-overlay {
  background-color: var(--background-overlay);
}

.peer:disabled ~ .peer-disabled\:bg-content-border-dark {
  background-color: var(--content-border-dark);
}

.peer:disabled ~ .peer-disabled\:text-content-tertiary {
  color: var(--content-tertiary);
}

.peer:disabled ~ .peer-disabled\:text-transparent {
  color: transparent;
}

.peer:disabled ~ .peer-disabled\:\!opacity-0 {
  opacity: 0 !important;
}

.peer:disabled ~ .peer-disabled\:opacity-40 {
  opacity: 0.4;
}

.peer:disabled ~ .peer-disabled\:before\:opacity-0::before {
  content: var(--tw-content);
  opacity: 0;
}

.peer:disabled ~ .peer-disabled\:after\:opacity-0::after {
  content: var(--tw-content);
  opacity: 0;
}

.peer:disabled ~ .peer-disabled\:after\:opacity-38::after {
  content: var(--tw-content);
  opacity: .38;
}

.peer:disabled ~ .peer-disabled\:focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.group:hover .peer:disabled ~ .group-hover\:peer-disabled\:\!opacity-0 {
  opacity: 0 !important;
}

.peer:disabled:checked ~ .peer-disabled\:peer-checked\:bg-background-elevated {
  background-color: var(--background-elevated);
}

.has-\[\.active\]\:z-50:has(.active) {
  z-index: 50;
}

.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled) {
  cursor: not-allowed;
}

.has-\[\:checked\]\:border-content-primary:has(:checked) {
  border-color: var(--content-primary);
}

.has-\[\:checked\]\:border-transparent:has(:checked) {
  border-color: transparent;
}

.has-\[input\:checked\]\:border-content-border-neutral:has(input:checked) {
  border-color: var(--content-border-neutral);
}

.has-\[\:checked\]\:bg-transparent:has(:checked) {
  background-color: transparent;
}

.has-\[\:focus\]\:bg-background-base:has(:focus) {
  background-color: var(--background-base);
}

.has-\[input\:checked\]\:bg-background-elevated:has(input:checked) {
  background-color: var(--background-elevated);
}

.has-\[\:checked\]\:\!text-content-primary:has(:checked) {
  color: var(--content-primary) !important;
}

.has-\[\:checked\]\:text-content-primary:has(:checked) {
  color: var(--content-primary);
}

.has-\[\:selected\]\:\!text-content-primary:has(:selected) {
  color: var(--content-primary) !important;
}

.has-\[input\:checked\]\:text-yellow-400:has(input:checked) {
  --tw-text-opacity: 1;
  color: rgb(226 180 45 / var(--tw-text-opacity, 1));
}

.has-\[input\:hover\]\:text-yellow-600:has(input:hover) {
  --tw-text-opacity: 1;
  color: rgb(181 123 25 / var(--tw-text-opacity, 1));
}

.has-\[\~label\>input\:checked\]\:has-\[input\:hover\]\:text-yellow-600:has(input:hover):has(~label>input:checked) {
  --tw-text-opacity: 1;
  color: rgb(181 123 25 / var(--tw-text-opacity, 1));
}

.has-\[\~label\>input\:checked\]\:text-yellow-400:has(~label>input:checked) {
  --tw-text-opacity: 1;
  color: rgb(226 180 45 / var(--tw-text-opacity, 1));
}

.has-\[\~label\>input\:hover\]\:text-yellow-600:has(~label>input:hover) {
  --tw-text-opacity: 1;
  color: rgb(181 123 25 / var(--tw-text-opacity, 1));
}

.has-\[dialog\[open\]\]\:\!opacity-0:has(dialog[open]) {
  opacity: 0 !important;
}

.has-\[\:checked\]\:shadow-\[inset_0_0_0_2px_black\]:has(:checked) {
  --tw-shadow: inset 0 0 0 2px black;
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.has-\[input\:checked\]\:shadow-\[inset_0_0_0_2px_var\(--content-primary\2c \#342E26\)\]:has(input:checked) {
  --tw-shadow: inset 0 0 0 2px var(--content-primary,#342E26);
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.has-\[input\:focus-visible\]\:outline-1:has(input:focus-visible) {
  outline-width: 1px;
}

.has-\[\:checked\]\:ring-0:has(:checked) {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.has-\[input\:checked\]\:before\:opacity-100:has(input:checked)::before {
  content: var(--tw-content);
  opacity: 1;
}

.has-\[\:disabled\]\:hover\:bg-transparent:hover:has(:disabled) {
  background-color: transparent;
}

.group:has(:checked) .group-has-\[\:checked\]\:scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:has(:disabled) .group-has-\[\:disabled\]\:text-content-tertiary {
  color: var(--content-tertiary);
}

.group\/mute:has(:checked) .group-has-\[\:checked\]\/mute\:opacity-0 {
  opacity: 0;
}

.group\/mute:has(:checked) .group-has-\[\:checked\]\/mute\:opacity-100 {
  opacity: 1;
}

.group:has(:checked) .group-has-\[\:checked\]\:opacity-100 {
  opacity: 1;
}

.group:has(:checked) .group-has-\[\:checked\]\:\[grid-template-columns\:1fr\] {
  grid-template-columns: 1fr;
}

.aria-hidden\:hidden[aria-hidden="true"] {
  display: none;
}

.aria-selected\:bg-background-overlay[aria-selected="true"] {
  background-color: var(--background-overlay);
}

.aria-selected\:bg-content-primary[aria-selected="true"] {
  background-color: var(--content-primary);
}

.aria-selected\:bg-offWhite\/04[aria-selected="true"] {
  background-color: rgb(248 245 244 / .04);
}

.aria-selected\:bg-offWhite\/50[aria-selected="true"] {
  background-color: rgb(248 245 244 / 0.5);
}

.aria-selected\:text-content-primary[aria-selected="true"] {
  color: var(--content-primary);
}

.aria-selected\:text-content-primary-inverse[aria-selected="true"] {
  color: var(--content-primary-inverse);
}

.group\/search[aria-busy="true"] .group-aria-busy\/search\:block {
  display: block;
}

.group\/search[aria-busy="true"] .group-aria-busy\/search\:hidden {
  display: none;
}

.group[aria-selected="true"] .group-aria-selected\:block {
  display: block;
}

.group[aria-selected="true"] .group-aria-selected\:border-\[var\(--base-color\)\] {
  border-color: var(--base-color);
}

.group\/tab[aria-selected="true"] .group-aria-selected\/tab\:bg-brand-secondary-moola {
  background-color: var(--brand-secondary-moola);
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:pointer-events-none {
  pointer-events: none;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:visible {
  visibility: visible;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:block {
  display: block;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:flex {
  display: flex;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:hidden {
  display: none;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:max-w-\[200px\] {
  max-width: 200px;
}

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

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:animate-spin {
  animation: spin 1s linear infinite;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:opacity-0 {
  opacity: 0;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:opacity-100 {
  opacity: 1;
}

.group[aria-busy="true"] .group-aria-\[busy\=true\]\:delay-\[3s\] {
  transition-delay: 3s;
}

.data-\[dragover\]\:border-content-primary[data-dragover] {
  border-color: var(--content-primary);
}

.data-\[dragover\]\:border-richBlack[data-dragover] {
  --tw-border-opacity: 1;
  border-color: rgb(11 5 29 / var(--tw-border-opacity, 1));
}

.data-\[state\=all\]\:border-content-primary[data-state="all"] {
  border-color: var(--content-primary);
}

.data-\[state\=some\]\:border-content-primary[data-state="some"] {
  border-color: var(--content-primary);
}

.data-\[dragover\]\:bg-background-overlay[data-dragover] {
  background-color: var(--background-overlay);
}

.data-\[state\=all\]\:bg-content-primary[data-state="all"] {
  background-color: var(--content-primary);
}

.data-\[state\=some\]\:bg-content-primary[data-state="some"] {
  background-color: var(--content-primary);
}

.data-\[active\=true\]\:ring-2[data-active="true"] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.data-\[active\=true\]\:ring-content-primary[data-active="true"] {
  --tw-ring-color: var(--content-primary);
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:invisible {
  visibility: hidden;
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:block {
  display: block;
}

.group[data-dragover] .group-data-\[dragover\]\:block {
  display: block;
}

.group[data-view="preview"] .group-data-\[view\=preview\]\:flex {
  display: flex;
}

.group[data-dragover] .group-data-\[dragover\]\:hidden {
  display: none;
}

.group[data-view="preview"] .group-data-\[view\=preview\]\:hidden {
  display: none;
}

.group\/button[data-spinner-shown="true"] .group-data-\[spinner-shown\=true\]\/button\:w-\[var\(--content-max-width\2c auto\)\] {
  width: var(--content-max-width,auto);
}

.group\/acc[data-expanded="true"] .group-data-\[expanded\=true\]\/acc\:grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:border-richBlack {
  --tw-border-opacity: 1;
  border-color: rgb(11 5 29 / var(--tw-border-opacity, 1));
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:bg-background-overlay {
  background-color: var(--background-overlay);
}

.group\/button[data-spinner-shown="true"] .group-data-\[spinner-shown\=true\]\/button\:opacity-0 {
  opacity: 0;
}

.group\/button[data-spinner-shown="true"] .group-data-\[spinner-shown\=true\]\/button\:opacity-100 {
  opacity: 1;
}

.group\/cbx[data-state="all"] .group-data-\[state\=all\]\/cbx\:opacity-100 {
  opacity: 1;
}

.group\/cbx[data-state="some"] .group-data-\[state\=some\]\/cbx\:opacity-100 {
  opacity: 1;
}

.group[data-dragover="true"] .group-data-\[dragover\=true\]\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.group[data-dragover="true"] .group-data-\[dragover\=true\]\:ring-content-primary {
  --tw-ring-color: var(--content-primary);
}

@container (min-width: 32rem) {
  .\@lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .\@lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .\@lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .\@lg\:flex-row {
    flex-direction: row;
  }

  .\@lg\:items-center {
    align-items: center;
  }

  .\@lg\:justify-between {
    justify-content: space-between;
  }

  .\@lg\:gap-2 {
    gap: 0.5rem;
  }

  .\@lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@container (min-width: 36rem) {
  .\@xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .\@xl\:col-start-2 {
    grid-column-start: 2;
  }

  .\@xl\:col-start-3 {
    grid-column-start: 3;
  }

  .\@xl\:col-start-4 {
    grid-column-start: 4;
  }

  .\@xl\:row-start-1 {
    grid-row-start: 1;
  }

  .\@xl\:-mb-2 {
    margin-bottom: -0.5rem;
  }

  .\@xl\:-ml-1\.5 {
    margin-left: -0.375rem;
  }

  .\@xl\:-ml-4 {
    margin-left: -1rem;
  }

  .\@xl\:-mr-4 {
    margin-right: -1rem;
  }

  .\@xl\:-mt-2 {
    margin-top: -0.5rem;
  }

  .\@xl\:block {
    display: block;
  }

  .\@xl\:flex {
    display: flex;
  }

  .\@xl\:grid {
    display: grid;
  }

  .\@xl\:hidden {
    display: none;
  }

  .\@xl\:h-11 {
    height: 2.75rem;
  }

  .\@xl\:w-11 {
    width: 2.75rem;
  }

  .\@xl\:grid-cols-\[minmax\(50\%\2c auto\)_1fr_1fr_auto\] {
    grid-template-columns: minmax(50%,auto) 1fr 1fr auto;
  }

  .\@xl\:grid-cols-subgrid {
    grid-template-columns: subgrid;
  }

  .\@xl\:items-center {
    align-items: center;
  }

  .\@xl\:gap-0 {
    gap: 0px;
  }

  .\@xl\:gap-4 {
    gap: 1rem;
  }

  .\@xl\:p-2 {
    padding: 0.5rem;
  }

  .\@xl\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .\@xl\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .\@xl\:pl-2 {
    padding-left: 0.5rem;
  }

  .\@xl\:pl-3 {
    padding-left: 0.75rem;
  }

  .\@xl\:pr-2 {
    padding-right: 0.5rem;
  }

  .\@xl\:pr-3 {
    padding-right: 0.75rem;
  }

  .\@xl\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

@container (min-width: 42rem) {
  .\@2xl\:absolute {
    position: absolute;
  }

  .\@2xl\:relative {
    position: relative;
  }

  .\@2xl\:bottom-0 {
    bottom: 0px;
  }

  .\@2xl\:left-0 {
    left: 0px;
  }

  .\@2xl\:left-4 {
    left: 1rem;
  }

  .\@2xl\:right-0 {
    right: 0px;
  }

  .\@2xl\:right-4 {
    right: 1rem;
  }

  .\@2xl\:mb-0 {
    margin-bottom: 0px;
  }

  .\@2xl\:table-cell {
    display: table-cell;
  }

  .\@2xl\:table-row {
    display: table-row;
  }

  .\@2xl\:hidden {
    display: none;
  }

  .\@2xl\:size-20 {
    width: 5rem;
    height: 5rem;
  }

  .\@2xl\:size-8 {
    width: 2rem;
    height: 2rem;
  }

  .\@2xl\:h-px {
    height: 1px;
  }

  .\@2xl\:flex-col {
    flex-direction: column;
  }

  .\@2xl\:items-center {
    align-items: center;
  }

  .\@2xl\:gap-3 {
    gap: 0.75rem;
  }

  .\@2xl\:rounded-none {
    border-radius: 0;
  }

  .\@2xl\:rounded-radius-20 {
    border-radius: 1.25rem;
  }

  .\@2xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .\@2xl\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .\@2xl\:text-left {
    text-align: left;
  }

  .\@2xl\:text-center {
    text-align: center;
  }

  .\@2xl\:text-6xl {
    font-size: 3.5rem;
    line-height: 1.2;
    letter-spacing: -0.1138rem;
  }

  .\@2xl\:text-\[26px\] {
    font-size: 26px;
  }

  .\@2xl\:content-\[\'\'\] {
    --tw-content: '';
    content: var(--tw-content);
  }

  .\@2xl\:hover\:bg-transparent:hover {
    background-color: transparent;
  }
}

@container (min-width: 48rem) {
  .\@3xl\:block {
    display: block;
  }

  .\@3xl\:flex {
    display: flex;
  }

  .\@3xl\:w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }

  .\@3xl\:max-w-\[390px\] {
    max-width: 390px;
  }

  .\@3xl\:max-w-\[540px\] {
    max-width: 540px;
  }

  .\@3xl\:flex-row {
    flex-direction: row;
  }

  .\@3xl\:items-center {
    align-items: center;
  }

  .\@3xl\:justify-between {
    justify-content: space-between;
  }

  .\@3xl\:gap-20 {
    gap: 5rem;
  }

  .\@3xl\:border-b {
    border-bottom-width: 1px;
  }

  .\@3xl\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }
}

html[data-hotwire-native] .hotwire-native\:hidden {
  display: none;
}

.empty-within\:border-richBlack\/10:has(input:not([placeholder])[data-empty="true"]) {
  border-color: rgb(11 5 29 / 0.1);
}

@media not all and (min-width: 1280px) {
  .max-xl\:mb-20 {
    margin-bottom: 5rem;
  }
}

@media not all and (min-width: 1024px) {
  .max-lg\:fixed {
    position: fixed;
  }

  .max-lg\:absolute {
    position: absolute;
  }

  .max-lg\:relative {
    position: relative;
  }

  .max-lg\:sticky {
    position: sticky;
  }

  .max-lg\:inset-y-0 {
    top: 0px;
    bottom: 0px;
  }

  .max-lg\:left-0 {
    left: 0px;
  }

  .max-lg\:right-0 {
    right: 0px;
  }

  .max-lg\:right-4 {
    right: 1rem;
  }

  .max-lg\:top-0 {
    top: 0px;
  }

  .max-lg\:top-4 {
    top: 1rem;
  }

  .max-lg\:top-\[calc\(var\(--earnings-header-h\)_-_1px\)\] {
    top: calc(var(--earnings-header-h) - 1px);
  }

  .max-lg\:top-auto {
    top: auto;
  }

  .max-lg\:z-10 {
    z-index: 10;
  }

  .max-lg\:z-30 {
    z-index: 30;
  }

  .max-lg\:z-40 {
    z-index: 40;
  }

  .max-lg\:z-\[2000\] {
    z-index: 2000;
  }

  .max-lg\:z-\[2020\] {
    z-index: 2020;
  }

  .max-lg\:z-\[999\] {
    z-index: 999;
  }

  .max-lg\:order-1 {
    order: 1;
  }

  .max-lg\:order-2 {
    order: 2;
  }

  .max-lg\:order-first {
    order: -9999;
  }

  .max-lg\:order-last {
    order: 9999;
  }

  .max-lg\:m-0 {
    margin: 0px;
  }

  .max-lg\:-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .max-lg\:-mx-5 {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .max-lg\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .max-lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .max-lg\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .max-lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .max-lg\:my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .max-lg\:mb-0 {
    margin-bottom: 0px;
  }

  .max-lg\:ml-2 {
    margin-left: 0.5rem;
  }

  .max-lg\:mr-2\.5 {
    margin-right: 0.625rem;
  }

  .max-lg\:block {
    display: block;
  }

  .max-lg\:flex {
    display: flex;
  }

  .max-lg\:contents {
    display: contents;
  }

  .max-lg\:\!hidden {
    display: none !important;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:\!size-10 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  .max-lg\:\!size-5 {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  .max-lg\:\!size-6 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  .max-lg\:size-5 {
    width: 1.25rem;
    height: 1.25rem;
  }

  .max-lg\:size-6 {
    width: 1.5rem;
    height: 1.5rem;
  }

  .max-lg\:size-8 {
    width: 2rem;
    height: 2rem;
  }

  .max-lg\:\!h-dvh {
    height: 100dvh !important;
  }

  .max-lg\:h-10 {
    height: 2.5rem;
  }

  .max-lg\:h-12 {
    height: 3rem;
  }

  .max-lg\:h-4 {
    height: 1rem;
  }

  .max-lg\:h-5 {
    height: 1.25rem;
  }

  .max-lg\:h-6 {
    height: 1.5rem;
  }

  .max-lg\:h-\[calc\(100dvh-3\.75rem\)\] {
    height: calc(100dvh - 3.75rem);
  }

  .max-lg\:h-auto {
    height: auto;
  }

  .max-lg\:h-dvh {
    height: 100dvh;
  }

  .max-lg\:h-full {
    height: 100%;
  }

  .max-lg\:max-h-\[calc\(100dvh-8px\)\] {
    max-height: calc(100dvh - 8px);
  }

  .max-lg\:max-h-none {
    max-height: none;
  }

  .max-lg\:min-h-0 {
    min-height: 0px;
  }

  .max-lg\:min-h-\[100dvh\] {
    min-height: 100dvh;
  }

  .max-lg\:min-h-\[calc\(100dvh-7rem\)\] {
    min-height: calc(100dvh - 7rem);
  }

  .max-lg\:\!w-full {
    width: 100% !important;
  }

  .max-lg\:w-10 {
    width: 2.5rem;
  }

  .max-lg\:w-4 {
    width: 1rem;
  }

  .max-lg\:w-5 {
    width: 1.25rem;
  }

  .max-lg\:w-6 {
    width: 1.5rem;
  }

  .max-lg\:w-\[88\%\] {
    width: 88%;
  }

  .max-lg\:w-\[calc\(100\%-46px\)\] {
    width: calc(100% - 46px);
  }

  .max-lg\:w-full {
    width: 100%;
  }

  .max-lg\:min-w-0 {
    min-width: 0px;
  }

  .max-lg\:min-w-\[300px\] {
    min-width: 300px;
  }

  .max-lg\:max-w-\[440px\] {
    max-width: 440px;
  }

  .max-lg\:max-w-none {
    max-width: none;
  }

  .max-lg\:max-w-sm {
    max-width: 24rem;
  }

  .max-lg\:flex-1 {
    flex: 1 1 0%;
  }

  .max-lg\:shrink-0 {
    flex-shrink: 0;
  }

  .max-lg\:flex-grow {
    flex-grow: 1;
  }

  .max-lg\:grow {
    flex-grow: 1;
  }

  .max-lg\:translate-x-full {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:translate-y-\[calc\(100\%\+2rem\)\] {
    --tw-translate-y: calc(100% + 2rem);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-lg\:cursor-pointer {
    cursor: pointer;
  }

  .max-lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .max-lg\:flex-col {
    flex-direction: column;
  }

  .max-lg\:items-start {
    align-items: flex-start;
  }

  .max-lg\:items-center {
    align-items: center;
  }

  .max-lg\:items-stretch {
    align-items: stretch;
  }

  .max-lg\:justify-end {
    justify-content: flex-end;
  }

  .max-lg\:justify-center {
    justify-content: center;
  }

  .max-lg\:justify-between {
    justify-content: space-between;
  }

  .max-lg\:gap-0 {
    gap: 0px;
  }

  .max-lg\:gap-10 {
    gap: 2.5rem;
  }

  .max-lg\:gap-2 {
    gap: 0.5rem;
  }

  .max-lg\:gap-3 {
    gap: 0.75rem;
  }

  .max-lg\:gap-4 {
    gap: 1rem;
  }

  .max-lg\:gap-5 {
    gap: 1.25rem;
  }

  .max-lg\:gap-6 {
    gap: 1.5rem;
  }

  .max-lg\:gap-7 {
    gap: 1.75rem;
  }

  .max-lg\:gap-8 {
    gap: 2rem;
  }

  .max-lg\:gap-y-0 {
    row-gap: 0px;
  }

  .max-lg\:space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
  }

  .max-lg\:overflow-hidden {
    overflow: hidden;
  }

  .max-lg\:overflow-visible {
    overflow: visible;
  }

  .max-lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .max-lg\:rounded-full {
    border-radius: 9999px;
  }

  .max-lg\:rounded-none {
    border-radius: 0;
  }

  .max-lg\:rounded-radius-10 {
    border-radius: 0.625rem;
  }

  .max-lg\:rounded-radius-20 {
    border-radius: 1.25rem;
  }

  .max-lg\:rounded-radius-24 {
    border-radius: 1.5rem;
  }

  .max-lg\:rounded-radius-8 {
    border-radius: 0.5rem;
  }

  .max-lg\:\!rounded-b-none {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .max-lg\:rounded-t-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .max-lg\:border {
    border-width: 1px;
  }

  .max-lg\:border-0 {
    border-width: 0px;
  }

  .max-lg\:\!border-none {
    border-style: none !important;
  }

  .max-lg\:border-background-base {
    border-color: var(--background-base);
  }

  .max-lg\:\!bg-background-dark {
    background-color: var(--background-dark) !important;
  }

  .max-lg\:\!bg-background-overlay {
    background-color: var(--background-overlay) !important;
  }

  .max-lg\:bg-background-base {
    background-color: var(--background-base);
  }

  .max-lg\:bg-background-dark {
    background-color: var(--background-dark);
  }

  .max-lg\:bg-background-elevated {
    background-color: var(--background-elevated);
  }

  .max-lg\:bg-background-overlay {
    background-color: var(--background-overlay);
  }

  .max-lg\:bg-content-background-modal-overlay {
    background-color: var(--content-background-modal-overlay);
  }

  .max-lg\:bg-transparent {
    background-color: transparent;
  }

  .max-lg\:\!p-2\.5 {
    padding: 0.625rem !important;
  }

  .max-lg\:p-0 {
    padding: 0px;
  }

  .max-lg\:p-2 {
    padding: 0.5rem;
  }

  .max-lg\:p-3 {
    padding: 0.75rem;
  }

  .max-lg\:p-4 {
    padding: 1rem;
  }

  .max-lg\:\!px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .max-lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .max-lg\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .max-lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .max-lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .max-lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .max-lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .max-lg\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .max-lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .max-lg\:py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .max-lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .max-lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .max-lg\:\!pb-0 {
    padding-bottom: 0px !important;
  }

  .max-lg\:\!pt-8 {
    padding-top: 2rem !important;
  }

  .max-lg\:pb-0 {
    padding-bottom: 0px;
  }

  .max-lg\:pb-1 {
    padding-bottom: 0.25rem;
  }

  .max-lg\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .max-lg\:pb-4 {
    padding-bottom: 1rem;
  }

  .max-lg\:pb-5 {
    padding-bottom: 1.25rem;
  }

  .max-lg\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .max-lg\:pb-8 {
    padding-bottom: 2rem;
  }

  .max-lg\:pb-\[calc\(6rem\+var\(--ol-tabbar-safe-strip\)\)\] {
    padding-bottom: calc(6rem + var(--ol-tabbar-safe-strip));
  }

  .max-lg\:pb-\[calc\(8rem\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(8rem + env(safe-area-inset-bottom));
  }

  .max-lg\:pb-\[calc\(var\(--ol-sticky-footer-height\2c 0px\)\+36px\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(var(--ol-sticky-footer-height,0px) + 36px + env(safe-area-inset-bottom));
  }

  .max-lg\:pb-\[calc\(var\(--ol-sticky-footer-height\2c 8rem\)\+1rem\)\] {
    padding-bottom: calc(var(--ol-sticky-footer-height,8rem) + 1rem);
  }

  .max-lg\:pl-4 {
    padding-left: 1rem;
  }

  .max-lg\:pl-\[76px\] {
    padding-left: 76px;
  }

  .max-lg\:pr-0 {
    padding-right: 0px;
  }

  .max-lg\:pr-2 {
    padding-right: 0.5rem;
  }

  .max-lg\:pr-4 {
    padding-right: 1rem;
  }

  .max-lg\:pt-0 {
    padding-top: 0px;
  }

  .max-lg\:pt-3 {
    padding-top: 0.75rem;
  }

  .max-lg\:pt-4 {
    padding-top: 1rem;
  }

  .max-lg\:pt-5 {
    padding-top: 1.25rem;
  }

  .max-lg\:pt-6 {
    padding-top: 1.5rem;
  }

  .max-lg\:\!text-base {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  .max-lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.0294rem;
  }

  .max-lg\:text-\[26px\] {
    font-size: 26px;
  }

  .max-lg\:text-\[28px\] {
    font-size: 28px;
  }

  .max-lg\:text-base {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .max-lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: -0.0113rem;
  }

  .max-lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .max-lg\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0;
  }

  .max-lg\:font-medium {
    font-weight: 500;
  }

  .max-lg\:font-normal {
    font-weight: 400;
  }

  .max-lg\:leading-7 {
    line-height: 1.75rem;
  }

  .max-lg\:leading-\[1\.2\] {
    line-height: 1.2;
  }

  .max-lg\:leading-\[18px\] {
    line-height: 18px;
  }

  .max-lg\:\!tracking-tight-2 {
    letter-spacing: -0.02rem !important;
  }

  .max-lg\:tracking-tight-2 {
    letter-spacing: -0.02rem;
  }

  .max-lg\:shadow-modal {
    --tw-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
    --tw-shadow-colored: 0px 4px 24px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .max-lg\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .max-lg\:shadow-sm {
    --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .max-lg\:backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  .max-lg\:transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-lg\:duration-300 {
    transition-duration: 300ms;
  }

  .max-lg\:\[margin-inline\:calc\(var\(--screen-margin\)_\*_-1\)\] {
    margin-inline: calc(var(--screen-margin) * -1);
  }

  .max-lg\:backdrop\:bg-content-background-modal-overlay::backdrop {
    background-color: var(--content-background-modal-overlay);
  }

  .max-lg\:backdrop\:backdrop-blur-xs::backdrop {
    --tw-backdrop-blur: blur(2px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  .max-lg\:before\:hidden::before {
    content: var(--tw-content);
    display: none;
  }

  .max-lg\:before\:\!opacity-0::before {
    content: var(--tw-content);
    opacity: 0 !important;
  }

  .max-lg\:after\:left-4::after {
    content: var(--tw-content);
    left: 1rem;
  }

  .max-lg\:after\:right-4::after {
    content: var(--tw-content);
    right: 1rem;
  }

  .max-lg\:focus-within\:w-full:focus-within {
    width: 100%;
  }

  .max-lg\:hover\:bg-transparent:hover {
    background-color: transparent;
  }

  .max-lg\:active\:bg-background-base:active {
    background-color: var(--background-base);
  }

  .max-lg\:active\:bg-background-overlay:active {
    background-color: var(--background-overlay);
  }

  .max-lg\:disabled\:hidden:disabled {
    display: none;
  }

  .group.conversation-selected .group-\[\.conversation-selected\]\:max-lg\:flex {
    display: flex;
  }

  .group.conversation-selected .group-\[\.conversation-selected\]\:max-lg\:hidden {
    display: none;
  }

  .group\/rail.is-open .group-\[\.is-open\]\/rail\:max-lg\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .peer:focus-within ~ .max-lg\:peer-focus-within\:pointer-events-none {
    pointer-events: none;
  }

  .peer:focus-within ~ .max-lg\:peer-focus-within\:scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .peer:focus-within ~ .max-lg\:peer-focus-within\:opacity-0 {
    opacity: 0;
  }

  .max-lg\:has-\[\:disabled\]\:hidden:has(:disabled) {
    display: none;
  }

  .max-lg\:data-\[revealed\=true\]\:translate-y-0[data-revealed="true"] {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media not all and (min-width: 768px) {
  .max-md\:sticky {
    position: sticky;
  }

  .max-md\:bottom-0 {
    bottom: 0px;
  }

  .max-md\:top-0 {
    top: 0px;
  }

  .max-md\:z-20 {
    z-index: 20;
  }

  .max-md\:-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .max-md\:-mb-8 {
    margin-bottom: -2rem;
  }

  .max-md\:block {
    display: block;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:h-0 {
    height: 0px;
  }

  .max-md\:h-\[200px\] {
    height: 200px;
  }

  .max-md\:max-h-\[90dvh\] {
    max-height: 90dvh;
  }

  .max-md\:w-\[calc\(100\%\+\(var\(--screen-margin\)\*2\)\)\] {
    width: calc(100% + (var(--screen-margin) * 2));
  }

  .max-md\:flex-col {
    flex-direction: column;
  }

  .max-md\:items-start {
    align-items: flex-start;
  }

  .max-md\:items-stretch {
    align-items: stretch;
  }

  .max-md\:gap-4 {
    gap: 1rem;
  }

  .max-md\:overflow-y-auto {
    overflow-y: auto;
  }

  .max-md\:overscroll-contain {
    overscroll-behavior: contain;
  }

  .max-md\:rounded-radius-12 {
    border-radius: 0.75rem;
  }

  .max-md\:bg-background-elevated {
    background-color: var(--background-elevated);
  }

  .max-md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .max-md\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .max-md\:pt-5 {
    padding-top: 1.25rem;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:hidden {
    display: none;
  }
}

@media (min-width: 640px) {
  .sm\:static {
    position: static;
  }

  .sm\:bottom-40 {
    bottom: 10rem;
  }

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:m-10 {
    margin: 2.5rem;
  }

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .sm\:mb-0 {
    margin-bottom: 0px;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-7 {
    margin-top: 1.75rem;
  }

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:min-h-screen {
    min-height: 100vh;
  }

  .sm\:w-1\/4 {
    width: 25%;
  }

  .sm\:w-3\/4 {
    width: 75%;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:max-w-\[350px\] {
    max-width: 350px;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:auto-cols-\[330px\] {
    grid-auto-columns: 330px;
  }

  .sm\:auto-cols-\[46\%\] {
    grid-auto-columns: 46%;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  }

  .sm\:rounded-radius-6 {
    border-radius: 0.375rem;
  }

  .sm\:border-0 {
    border-width: 0px;
  }

  .sm\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

  .sm\:p-0 {
    padding: 0px;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .sm\:pl-8 {
    padding-left: 2rem;
  }

  .sm\:pr-10 {
    padding-right: 2.5rem;
  }

  .sm\:pr-6 {
    padding-right: 1.5rem;
  }

  .sm\:text-3xl {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.0431rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.0375rem;
  }

  .sm\:text-\[1\.375rem\] {
    font-size: 1.375rem;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .sm\:text-sm\/6 {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .sm\:text-xl {
    font-size: 1.3125rem;
    line-height: 1.2;
    letter-spacing: -0.02rem;
  }

  .sm\:shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 768px) {
  .md\:absolute {
    position: absolute;
  }

  .md\:relative {
    position: relative;
  }

  .md\:right-0 {
    right: 0px;
  }

  .md\:top-0 {
    top: 0px;
  }

  .md\:top-0\.5 {
    top: 0.125rem;
  }

  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:my-2\.5 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  .md\:mr-2\.5 {
    margin-right: 0.625rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:mt-8 {
    margin-top: 2rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:size-16 {
    width: 4rem;
    height: 4rem;
  }

  .md\:h-1 {
    height: 0.25rem;
  }

  .md\:h-14 {
    height: 3.5rem;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:h-\[480px\] {
    height: 480px;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:h-full {
    height: 100%;
  }

  .md\:h-screen {
    height: 100vh;
  }

  .md\:max-h-32 {
    max-height: 8rem;
  }

  .md\:max-h-\[60dvh\] {
    max-height: 60dvh;
  }

  .md\:min-h-0 {
    min-height: 0px;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-14 {
    width: 3.5rem;
  }

  .md\:w-2\/5 {
    width: 40%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-3\/5 {
    width: 60%;
  }

  .md\:w-6 {
    width: 1.5rem;
  }

  .md\:w-\[350px\] {
    width: 350px;
  }

  .md\:w-\[388px\] {
    width: 388px;
  }

  .md\:w-\[400px\] {
    width: 400px;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:min-w-0 {
    min-width: 0px;
  }

  .md\:min-w-\[165px\] {
    min-width: 165px;
  }

  .md\:max-w-\[calc\(1280px\+64px\)\] {
    max-width: calc(1280px + 64px);
  }

  .md\:max-w-layout-1600 {
    max-width: 1600px;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:shrink-0 {
    flex-shrink: 0;
  }

  .md\:rotate-\[5deg\] {
    --tw-rotate: 5deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-stretch {
    align-items: stretch;
  }

  .md\:justify-normal {
    justify-content: normal;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:overflow-hidden {
    overflow: hidden;
  }

  .md\:overflow-y-scroll {
    overflow-y: scroll;
  }

  .md\:rounded-radius-24 {
    border-radius: 1.5rem;
  }

  .md\:rounded-radius-8 {
    border-radius: 0.5rem;
  }

  .md\:rounded-tl-radius-8 {
    border-top-left-radius: 0.5rem;
  }

  .md\:border {
    border-width: 1px;
  }

  .md\:border-l {
    border-left-width: 1px;
  }

  .md\:border-l-2 {
    border-left-width: 2px;
  }

  .md\:border-r {
    border-right-width: 1px;
  }

  .md\:border-t {
    border-top-width: 1px;
  }

  .md\:border-none {
    border-style: none;
  }

  .md\:border-content-border-neutral {
    border-color: var(--content-border-neutral);
  }

  .md\:border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  .md\:bg-background-base {
    background-color: var(--background-base);
  }

  .md\:bg-background-overlay {
    background-color: var(--background-overlay);
  }

  .md\:bg-transparent {
    background-color: transparent;
  }

  .md\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .md\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

  .md\:p-3 {
    padding: 0.75rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:px-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:pb-12 {
    padding-bottom: 3rem;
  }

  .md\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .md\:pl-0 {
    padding-left: 0px;
  }

  .md\:pl-8 {
    padding-left: 2rem;
  }

  .md\:pt-12 {
    padding-top: 3rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-3xl {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.0431rem;
  }

  .md\:text-\[26px\] {
    font-size: 26px;
  }

  .md\:text-\[72px\] {
    font-size: 72px;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .md\:leading-110 {
    line-height: 1.1;
  }

  .md\:leading-\[20px\] {
    line-height: 20px;
  }

  .md\:leading-tight {
    line-height: 1.2;
  }

  .md\:tracking-tight-10 {
    letter-spacing: -0.1625rem;
  }

  .md\:tracking-tight-4 {
    letter-spacing: -0.04rem;
  }

  .first-of-type\:md\:col-span-2:first-of-type {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 1024px) {
  .lg\:visible {
    visibility: visible;
  }

  .lg\:invisible {
    visibility: hidden;
  }

  .lg\:static {
    position: static;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:relative {
    position: relative;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:bottom-0 {
    bottom: 0px;
  }

  .lg\:bottom-3 {
    bottom: 0.75rem;
  }

  .lg\:bottom-4 {
    bottom: 1rem;
  }

  .lg\:bottom-\[15px\] {
    bottom: 15px;
  }

  .lg\:bottom-auto {
    bottom: auto;
  }

  .lg\:left-1\/2 {
    left: 50%;
  }

  .lg\:left-4 {
    left: 1rem;
  }

  .lg\:left-6 {
    left: 1.5rem;
  }

  .lg\:left-8 {
    left: 2rem;
  }

  .lg\:left-\[10px\] {
    left: 10px;
  }

  .lg\:left-\[15px\] {
    left: 15px;
  }

  .lg\:left-\[75px\] {
    left: 75px;
  }

  .lg\:left-\[76px\] {
    left: 76px;
  }

  .lg\:left-auto {
    left: auto;
  }

  .lg\:right-2 {
    right: 0.5rem;
  }

  .lg\:right-4 {
    right: 1rem;
  }

  .lg\:right-auto {
    right: auto;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:top-0\.5 {
    top: 0.125rem;
  }

  .lg\:top-10 {
    top: 2.5rem;
  }

  .lg\:top-2 {
    top: 0.5rem;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:top-4 {
    top: 1rem;
  }

  .lg\:top-8 {
    top: 2rem;
  }

  .lg\:top-\[4px\] {
    top: 4px;
  }

  .lg\:top-\[56px\] {
    top: 56px;
  }

  .lg\:top-\[57px\] {
    top: 57px;
  }

  .lg\:top-\[9px\] {
    top: 9px;
  }

  .lg\:top-auto {
    top: auto;
  }

  .lg\:z-10 {
    z-index: 10;
  }

  .lg\:z-30 {
    z-index: 30;
  }

  .lg\:z-\[50\] {
    z-index: 50;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-first {
    order: -9999;
  }

  .lg\:order-last {
    order: 9999;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-start-3 {
    grid-column-start: 3;
  }

  .lg\:row-span-full {
    grid-row: 1 / -1;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:m-20 {
    margin: 5rem;
  }

  .lg\:-mx-2\.5 {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
  }

  .lg\:-mx-3 {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }

  .lg\:-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .lg\:-my-1 {
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .lg\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .lg\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .lg\:my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .lg\:my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .lg\:my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .lg\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .lg\:my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .lg\:\!mt-auto {
    margin-top: auto !important;
  }

  .lg\:-ml-px {
    margin-left: -1px;
  }

  .lg\:-mr-2 {
    margin-right: -0.5rem;
  }

  .lg\:-mr-px {
    margin-right: -1px;
  }

  .lg\:-mt-12 {
    margin-top: -3rem;
  }

  .lg\:-mt-3 {
    margin-top: -0.75rem;
  }

  .lg\:-mt-5 {
    margin-top: -1.25rem;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:mb-4 {
    margin-bottom: 1rem;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:ml-10 {
    margin-left: 2.5rem;
  }

  .lg\:ml-3 {
    margin-left: 0.75rem;
  }

  .lg\:ml-auto {
    margin-left: auto;
  }

  .lg\:mr-2\.5 {
    margin-right: 0.625rem;
  }

  .lg\:mr-\[9px\] {
    margin-right: 9px;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-12 {
    margin-top: 3rem;
  }

  .lg\:mt-14 {
    margin-top: 3.5rem;
  }

  .lg\:mt-16 {
    margin-top: 4rem;
  }

  .lg\:mt-2 {
    margin-top: 0.5rem;
  }

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:mt-5 {
    margin-top: 1.25rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:mt-\[10dvh\] {
    margin-top: 10dvh;
  }

  .lg\:mt-\[120px\] {
    margin-top: 120px;
  }

  .lg\:mt-\[20px\] {
    margin-top: 20px;
  }

  .lg\:mt-\[9px\] {
    margin-top: 9px;
  }

  .lg\:line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:\!size-9 {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  .lg\:size-10 {
    width: 2.5rem;
    height: 2.5rem;
  }

  .lg\:size-11 {
    width: 2.75rem;
    height: 2.75rem;
  }

  .lg\:size-12 {
    width: 3rem;
    height: 3rem;
  }

  .lg\:size-14 {
    width: 3.5rem;
    height: 3.5rem;
  }

  .lg\:size-4 {
    width: 1rem;
    height: 1rem;
  }

  .lg\:size-5 {
    width: 1.25rem;
    height: 1.25rem;
  }

  .lg\:size-8 {
    width: 2rem;
    height: 2rem;
  }

  .lg\:size-\[18px\] {
    width: 18px;
    height: 18px;
  }

  .lg\:size-\[80px\] {
    width: 80px;
    height: 80px;
  }

  .lg\:\!h-\[400px\] {
    height: 400px !important;
  }

  .lg\:h-16 {
    height: 4rem;
  }

  .lg\:h-3 {
    height: 0.75rem;
  }

  .lg\:h-36 {
    height: 9rem;
  }

  .lg\:h-4 {
    height: 1rem;
  }

  .lg\:h-7 {
    height: 1.75rem;
  }

  .lg\:h-8 {
    height: 2rem;
  }

  .lg\:h-\[104px\] {
    height: 104px;
  }

  .lg\:h-\[142px\] {
    height: 142px;
  }

  .lg\:h-\[200px\] {
    height: 200px;
  }

  .lg\:h-\[400px\] {
    height: 400px;
  }

  .lg\:h-\[440px\] {
    height: 440px;
  }

  .lg\:h-\[calc\(100dvh-16\.75rem\)\] {
    height: calc(100dvh - 16.75rem);
  }

  .lg\:h-\[calc\(100dvh-1rem\)\] {
    height: calc(100dvh - 1rem);
  }

  .lg\:h-\[calc\(100dvh_-_20px\)\] {
    height: calc(100dvh - 20px);
  }

  .lg\:h-auto {
    height: auto;
  }

  .lg\:h-dvh {
    height: 100dvh;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:h-screen {
    height: 100vh;
  }

  .lg\:max-h-12 {
    max-height: 3rem;
  }

  .lg\:max-h-16 {
    max-height: 4rem;
  }

  .lg\:max-h-64 {
    max-height: 16rem;
  }

  .lg\:max-h-\[425px\] {
    max-height: 425px;
  }

  .lg\:max-h-\[456px\] {
    max-height: 456px;
  }

  .lg\:max-h-\[75vh\] {
    max-height: 75vh;
  }

  .lg\:max-h-\[90vh\] {
    max-height: 90vh;
  }

  .lg\:max-h-\[calc\(70dvh-88px\)\] {
    max-height: calc(70dvh - 88px);
  }

  .lg\:max-h-none {
    max-height: none;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:min-h-16 {
    min-height: 4rem;
  }

  .lg\:min-h-\[230px\] {
    min-height: 230px;
  }

  .lg\:min-h-\[400px\] {
    min-height: 400px;
  }

  .lg\:min-h-\[600px\] {
    min-height: 600px;
  }

  .lg\:min-h-\[calc\(100vh-1rem\)\] {
    min-height: calc(100vh - 1rem);
  }

  .lg\:\!w-\[398px\] {
    width: 398px !important;
  }

  .lg\:\!w-\[680px\] {
    width: 680px !important;
  }

  .lg\:\!w-\[960px\] {
    width: 960px !important;
  }

  .lg\:w-0 {
    width: 0px;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-128 {
    width: 30rem;
  }

  .lg\:w-2\/5 {
    width: 40%;
  }

  .lg\:w-3 {
    width: 0.75rem;
  }

  .lg\:w-3\/4 {
    width: 75%;
  }

  .lg\:w-36 {
    width: 9rem;
  }

  .lg\:w-4 {
    width: 1rem;
  }

  .lg\:w-4\/5 {
    width: 80%;
  }

  .lg\:w-40 {
    width: 10rem;
  }

  .lg\:w-6 {
    width: 1.5rem;
  }

  .lg\:w-64 {
    width: 16rem;
  }

  .lg\:w-7 {
    width: 1.75rem;
  }

  .lg\:w-72 {
    width: 18rem;
  }

  .lg\:w-8 {
    width: 2rem;
  }

  .lg\:w-80 {
    width: 20rem;
  }

  .lg\:w-\[104px\] {
    width: 104px;
  }

  .lg\:w-\[144px\] {
    width: 144px;
  }

  .lg\:w-\[165px\] {
    width: 165px;
  }

  .lg\:w-\[222px\] {
    width: 222px;
  }

  .lg\:w-\[232px\] {
    width: 232px;
  }

  .lg\:w-\[264px\] {
    width: 264px;
  }

  .lg\:w-\[30\%\] {
    width: 30%;
  }

  .lg\:w-\[300px\] {
    width: 300px;
  }

  .lg\:w-\[308px\] {
    width: 308px;
  }

  .lg\:w-\[320px\] {
    width: 320px;
  }

  .lg\:w-\[340px\] {
    width: 340px;
  }

  .lg\:w-\[35\%\] {
    width: 35%;
  }

  .lg\:w-\[360px\] {
    width: 360px;
  }

  .lg\:w-\[368px\] {
    width: 368px;
  }

  .lg\:w-\[37px\] {
    width: 37px;
  }

  .lg\:w-\[400px\] {
    width: 400px;
  }

  .lg\:w-\[420px\] {
    width: 420px;
  }

  .lg\:w-\[468px\] {
    width: 468px;
  }

  .lg\:w-\[480px\] {
    width: 480px;
  }

  .lg\:w-\[500px\] {
    width: 500px;
  }

  .lg\:w-\[560px\] {
    width: 560px;
  }

  .lg\:w-\[568px\] {
    width: 568px;
  }

  .lg\:w-\[576px\] {
    width: 576px;
  }

  .lg\:w-\[60\%\] {
    width: 60%;
  }

  .lg\:w-\[600px\] {
    width: 600px;
  }

  .lg\:w-\[68px\] {
    width: 68px;
  }

  .lg\:w-\[736px\] {
    width: 736px;
  }

  .lg\:w-\[748px\] {
    width: 748px;
  }

  .lg\:w-\[860px\] {
    width: 860px;
  }

  .lg\:w-\[90vw\] {
    width: 90vw;
  }

  .lg\:w-\[960px\] {
    width: 960px;
  }

  .lg\:w-\[990px\] {
    width: 990px;
  }

  .lg\:w-\[calc\(100vw_-_20px\)\] {
    width: calc(100vw - 20px);
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:w-screen {
    width: 100vw;
  }

  .lg\:min-w-0 {
    min-width: 0px;
  }

  .lg\:min-w-6 {
    min-width: 1.5rem;
  }

  .lg\:min-w-\[240px\] {
    min-width: 240px;
  }

  .lg\:min-w-\[250px\] {
    min-width: 250px;
  }

  .lg\:min-w-\[300px\] {
    min-width: 300px;
  }

  .lg\:min-w-\[420px\] {
    min-width: 420px;
  }

  .lg\:min-w-\[84px\] {
    min-width: 84px;
  }

  .lg\:min-w-\[88px\] {
    min-width: 88px;
  }

  .lg\:min-w-full {
    min-width: 100%;
  }

  .lg\:\!max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem) !important;
  }

  .lg\:max-w-0 {
    max-width: 0px;
  }

  .lg\:max-w-2xl {
    max-width: 42rem;
  }

  .lg\:max-w-4xl {
    max-width: 56rem;
  }

  .lg\:max-w-5xl {
    max-width: 64rem;
  }

  .lg\:max-w-7xl {
    max-width: 80rem;
  }

  .lg\:max-w-\[1200px\] {
    max-width: 1200px;
  }

  .lg\:max-w-\[296px\] {
    max-width: 296px;
  }

  .lg\:max-w-\[300px\] {
    max-width: 300px;
  }

  .lg\:max-w-\[320px\] {
    max-width: 320px;
  }

  .lg\:max-w-\[34\.81\%\] {
    max-width: 34.81%;
  }

  .lg\:max-w-\[368px\] {
    max-width: 368px;
  }

  .lg\:max-w-\[380px\] {
    max-width: 380px;
  }

  .lg\:max-w-\[400px\] {
    max-width: 400px;
  }

  .lg\:max-w-\[456px\] {
    max-width: 456px;
  }

  .lg\:max-w-\[480px\] {
    max-width: 480px;
  }

  .lg\:max-w-\[500px\] {
    max-width: 500px;
  }

  .lg\:max-w-\[528px\] {
    max-width: 528px;
  }

  .lg\:max-w-\[544px\] {
    max-width: 544px;
  }

  .lg\:max-w-\[560px\] {
    max-width: 560px;
  }

  .lg\:max-w-\[568px\] {
    max-width: 568px;
  }

  .lg\:max-w-\[600px\] {
    max-width: 600px;
  }

  .lg\:max-w-\[640px\] {
    max-width: 640px;
  }

  .lg\:max-w-\[660px\] {
    max-width: 660px;
  }

  .lg\:max-w-\[88px\] {
    max-width: 88px;
  }

  .lg\:max-w-\[90vw\] {
    max-width: 90vw;
  }

  .lg\:max-w-layout-1000 {
    max-width: 1000px;
  }

  .lg\:max-w-lg {
    max-width: 32rem;
  }

  .lg\:max-w-md {
    max-width: 28rem;
  }

  .lg\:max-w-min {
    max-width: -moz-min-content;
    max-width: min-content;
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:max-w-screen-sm {
    max-width: 640px;
  }

  .lg\:max-w-xl {
    max-width: 36rem;
  }

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:flex-grow {
    flex-grow: 1;
  }

  .lg\:grow {
    flex-grow: 1;
  }

  .lg\:grow-0 {
    flex-grow: 0;
  }

  .lg\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:-translate-x-\[70px\] {
    --tw-translate-x: -70px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:translate-x-\[0\.5rem\] {
    --tw-translate-x: 0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:scale-\[0\.3\] {
    --tw-scale-x: 0.3;
    --tw-scale-y: 0.3;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:auto-cols-\[365px\] {
    grid-auto-columns: 365px;
  }

  .lg\:auto-cols-\[calc\(25\%-12px\)\] {
    grid-auto-columns: calc(25% - 12px);
  }

  .lg\:auto-cols-auto {
    grid-auto-columns: auto;
  }

  .lg\:grid-flow-row {
    grid-auto-flow: row;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[220px_minmax\(0px\2c _1fr\)\] {
    grid-template-columns: 220px minmax(0px, 1fr);
  }

  .lg\:grid-cols-\[auto_minmax\(min-content\2c 1fr\)_minmax\(min-content\2c 1fr\)_minmax\(min-content\2c 1fr\)_auto_auto_auto_minmax\(min-content\2c 1fr\)\] {
    grid-template-columns: auto minmax(min-content,1fr) minmax(min-content,1fr) minmax(min-content,1fr) auto auto auto minmax(min-content,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_300px\] {
    grid-template-columns: minmax(0,1fr) 300px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_320px\] {
    grid-template-columns: minmax(0,1fr) 320px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 3fr\)_minmax\(0\2c 2fr\)_108px\] {
    grid-template-columns: minmax(0,3fr) minmax(0,2fr) 108px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 3fr\)_minmax\(256px\2c 2fr\)_minmax\(0\2c 2fr\)_108px\] {
    grid-template-columns: minmax(0,3fr) minmax(256px,2fr) minmax(0,2fr) 108px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 520px\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,520px) minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 760fr\)_minmax\(0\2c 64fr\)_minmax\(0\2c 440fr\)\] {
    grid-template-columns: minmax(0,760fr) minmax(0,64fr) minmax(0,440fr);
  }

  .lg\:grid-cols-\[repeat\(auto-fit\2c minmax\(250px\2c 0\.2fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(250px,0.2fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-col-reverse {
    flex-direction: column-reverse;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:items-stretch {
    align-items: stretch;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-0 {
    gap: 0px;
  }

  .lg\:gap-0\.5 {
    gap: 0.125rem;
  }

  .lg\:gap-1 {
    gap: 0.25rem;
  }

  .lg\:gap-1\.5 {
    gap: 0.375rem;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-32 {
    gap: 8rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .lg\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .lg\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .lg\:gap-y-6 {
    row-gap: 1.5rem;
  }

  .lg\:gap-y-px {
    row-gap: 1px;
  }

  .lg\:space-y-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  }

  .lg\:space-y-9 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.25rem * var(--tw-space-y-reverse));
  }

  .lg\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .lg\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:overflow-auto {
    overflow: auto;
  }

  .lg\:overflow-hidden {
    overflow: hidden;
  }

  .lg\:overflow-visible {
    overflow: visible;
  }

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:overscroll-contain {
    overscroll-behavior: contain;
  }

  .lg\:\!rounded-radius-24 {
    border-radius: 1.5rem !important;
  }

  .lg\:\!rounded-radius-32 {
    border-radius: 2rem !important;
  }

  .lg\:rounded-full {
    border-radius: 9999px;
  }

  .lg\:rounded-none {
    border-radius: 0;
  }

  .lg\:rounded-radius-10 {
    border-radius: 0.625rem;
  }

  .lg\:rounded-radius-12 {
    border-radius: 0.75rem;
  }

  .lg\:rounded-radius-16 {
    border-radius: 1rem;
  }

  .lg\:rounded-radius-20 {
    border-radius: 1.25rem;
  }

  .lg\:rounded-radius-24 {
    border-radius: 1.5rem;
  }

  .lg\:rounded-radius-28 {
    border-radius: 1.75rem;
  }

  .lg\:rounded-radius-32 {
    border-radius: 2rem;
  }

  .lg\:rounded-radius-8 {
    border-radius: 0.5rem;
  }

  .lg\:rounded-b-none {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .lg\:rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .lg\:rounded-l-radius-16 {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }

  .lg\:rounded-l-radius-32 {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
  }

  .lg\:rounded-r-radius-16 {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  .lg\:rounded-r-radius-32 {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }

  .lg\:rounded-t-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .lg\:rounded-t-radius-28 {
    border-top-left-radius: 1.75rem;
    border-top-right-radius: 1.75rem;
  }

  .lg\:rounded-tl-radius-28 {
    border-top-left-radius: 1.75rem;
  }

  .lg\:rounded-tr-none {
    border-top-right-radius: 0;
  }

  .lg\:border {
    border-width: 1px;
  }

  .lg\:border-b {
    border-bottom-width: 1px;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-l-4 {
    border-left-width: 4px;
  }

  .lg\:border-t {
    border-top-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:border-content-border-dark {
    border-color: var(--content-border-dark);
  }

  .lg\:border-content-border-light {
    border-color: var(--content-border-light);
  }

  .lg\:border-content-border-neutral {
    border-color: var(--content-border-neutral);
  }

  .lg\:\!bg-transparent {
    background-color: transparent !important;
  }

  .lg\:bg-\[\#F8F5F4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-background-base {
    background-color: var(--background-base);
  }

  .lg\:bg-background-elevated {
    background-color: var(--background-elevated);
  }

  .lg\:bg-background-overlay {
    background-color: var(--background-overlay);
  }

  .lg\:bg-transparent {
    background-color: transparent;
  }

  .lg\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-none {
    background-image: none;
  }

  .lg\:p-0 {
    padding: 0px;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-16 {
    padding: 4rem;
  }

  .lg\:p-2 {
    padding: 0.5rem;
  }

  .lg\:p-2\.5 {
    padding: 0.625rem;
  }

  .lg\:p-3 {
    padding: 0.75rem;
  }

  .lg\:p-4 {
    padding: 1rem;
  }

  .lg\:p-5 {
    padding: 1.25rem;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:\!px-10 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  .lg\:\!px-12 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .lg\:\!px-2\.5 {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }

  .lg\:\!py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .lg\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .lg\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .lg\:px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:px-9 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .lg\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:\!pb-10 {
    padding-bottom: 2.5rem !important;
  }

  .lg\:\!pt-0 {
    padding-top: 0px !important;
  }

  .lg\:\!pt-12 {
    padding-top: 3rem !important;
  }

  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .lg\:pb-12 {
    padding-bottom: 3rem;
  }

  .lg\:pb-2\.5 {
    padding-bottom: 0.625rem;
  }

  .lg\:pb-4 {
    padding-bottom: 1rem;
  }

  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .lg\:pb-8 {
    padding-bottom: 2rem;
  }

  .lg\:pl-10 {
    padding-left: 2.5rem;
  }

  .lg\:pl-12 {
    padding-left: 3rem;
  }

  .lg\:pl-2 {
    padding-left: 0.5rem;
  }

  .lg\:pl-24 {
    padding-left: 6rem;
  }

  .lg\:pl-4 {
    padding-left: 1rem;
  }

  .lg\:pl-6 {
    padding-left: 1.5rem;
  }

  .lg\:pl-7 {
    padding-left: 1.75rem;
  }

  .lg\:pr-10 {
    padding-right: 2.5rem;
  }

  .lg\:pr-24 {
    padding-right: 6rem;
  }

  .lg\:pr-3 {
    padding-right: 0.75rem;
  }

  .lg\:pr-4 {
    padding-right: 1rem;
  }

  .lg\:pt-0 {
    padding-top: 0px;
  }

  .lg\:pt-10 {
    padding-top: 2.5rem;
  }

  .lg\:pt-12 {
    padding-top: 3rem;
  }

  .lg\:pt-16 {
    padding-top: 4rem;
  }

  .lg\:pt-2 {
    padding-top: 0.5rem;
  }

  .lg\:pt-2\.5 {
    padding-top: 0.625rem;
  }

  .lg\:pt-4 {
    padding-top: 1rem;
  }

  .lg\:pt-5 {
    padding-top: 1.25rem;
  }

  .lg\:pt-6 {
    padding-top: 1.5rem;
  }

  .lg\:pt-8 {
    padding-top: 2rem;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:font-display-semi-condensed {
    font-family: Media Sans Semi-Condensed, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.0294rem;
  }

  .lg\:text-3xl {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.0431rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -0.0375rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.06rem;
  }

  .lg\:text-6xl {
    font-size: 3.5rem;
    line-height: 1.2;
    letter-spacing: -0.1138rem;
  }

  .lg\:text-7xl {
    font-size: 5rem;
    line-height: 1.2;
    letter-spacing: -0.1625rem;
  }

  .lg\:text-\[21px\] {
    font-size: 21px;
  }

  .lg\:text-\[28px\] {
    font-size: 28px;
  }

  .lg\:text-\[56px\] {
    font-size: 56px;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: -0.0113rem;
  }

  .lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .lg\:text-xl {
    font-size: 1.3125rem;
    line-height: 1.2;
    letter-spacing: -0.02rem;
  }

  .lg\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0;
  }

  .lg\:font-bold {
    font-weight: 700;
  }

  .lg\:font-medium {
    font-weight: 500;
  }

  .lg\:leading-5 {
    line-height: 1.25rem;
  }

  .lg\:leading-9 {
    line-height: 2.25rem;
  }

  .lg\:leading-relaxed {
    line-height: 1.625;
  }

  .lg\:tracking-\[-2\.75px\] {
    letter-spacing: -2.75px;
  }

  .lg\:tracking-normal {
    letter-spacing: 0em;
  }

  .lg\:tracking-tight-1 {
    letter-spacing: -0.01rem;
  }

  .lg\:tracking-tight-8 {
    letter-spacing: -0.125rem;
  }

  .lg\:text-content-primary {
    color: var(--content-primary);
  }

  .lg\:text-content-secondary {
    color: var(--content-secondary);
  }

  .lg\:text-opacity-70 {
    --tw-text-opacity: 0.7;
  }

  .lg\:opacity-0 {
    opacity: 0;
  }

  .lg\:shadow-\[0_4px_8px_0_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
    --tw-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
    --tw-shadow-colored: 0 4px 8px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-main-container {
    --tw-shadow: var(--shadow-main-container);
    --tw-shadow-colored: var(--shadow-main-container);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-md {
    --tw-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 2px 12px 0 rgba(0, 0, 0, 0.04), 0 9px 9px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.06);;
    --tw-shadow-colored: 0 0 0 0 var(--tw-shadow-color), 0 0 0 0 var(--tw-shadow-color), 0 2px 12px 0 var(--tw-shadow-color), 0 9px 9px 0 var(--tw-shadow-color), 0 2px 5px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-sm {
    --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }

  .lg\:ring-inset {
    --tw-ring-inset: inset;
  }

  .lg\:ring-content-border-neutral {
    --tw-ring-color: var(--content-border-neutral);
  }

  .lg\:transition-\[max-width\] {
    transition-property: max-width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .lg\:transition-\[width\] {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .lg\:duration-300 {
    transition-duration: 300ms;
  }

  .lg\:mask-fade-top {
    -webkit-mask-image: linear-gradient(transparent 0%, black 28px);
    mask-image: linear-gradient(transparent 0%, black 28px);
  }

  .lg\:slide-direction-down {
    --initial-direction: 1;
  }

  .lg\:slide-direction-up {
    --initial-direction: -1;
  }

  .lg\:\[--read-more-line-clamp\:5\] {
    --read-more-line-clamp: 5;
  }

  .lg\:\[clip-path\:inset\(-12px\)\] {
    clip-path: inset(-12px);
  }

  .lg\:backdrop\:bg-background-base::backdrop {
    background-color: var(--background-base);
  }

  .lg\:backdrop\:backdrop-blur-none::backdrop {
    --tw-backdrop-blur:  ;
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  .lg\:before\:absolute::before {
    content: var(--tw-content);
    position: absolute;
  }

  .lg\:before\:hidden::before {
    content: var(--tw-content);
    display: none;
  }

  .before\:lg\:rounded-radius-12::before {
    content: var(--tw-content);
    border-radius: 0.75rem;
  }

  .lg\:first\:rounded-t-radius-24:first-child {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }

  .lg\:focus-within\:z-30:focus-within {
    z-index: 30;
  }

  .lg\:focus-within\:\!w-full:focus-within {
    width: 100% !important;
  }

  .lg\:focus-within\:w-full:focus-within {
    width: 100%;
  }

  .lg\:hover\:\!bg-background-overlay:hover {
    background-color: var(--background-overlay) !important;
  }

  .lg\:hover\:bg-background-base:hover {
    background-color: var(--background-base);
  }

  .lg\:hover\:bg-background-overlay:hover {
    background-color: var(--background-overlay);
  }

  .lg\:hover\:underline:hover {
    text-decoration-line: underline;
  }

  .lg\:hover\:decoration-solid:hover {
    text-decoration-style: solid;
  }

  .lg\:hover\:decoration-\[1\.5px\]:hover {
    text-decoration-thickness: 1.5px;
  }

  .lg\:hover\:underline-offset-2:hover {
    text-underline-offset: 2px;
  }

  .lg\:active\:scale-\[0\.96\]:active {
    --tw-scale-x: 0.96;
    --tw-scale-y: 0.96;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .group:hover .lg\:group-hover\:flex {
    display: flex;
  }

  .group:hover .lg\:group-hover\:opacity-100 {
    opacity: 1;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:absolute {
    position: absolute;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:inset-y-0 {
    top: 0px;
    bottom: 0px;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:left-0 {
    left: 0px;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:z-50 {
    z-index: 50;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:m-0 {
    margin: 0px;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:flex {
    display: flex;
  }

  .group.collaboration-details-hidden .lg\:group-\[\.collaboration-details-hidden\]\:hidden {
    display: none;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:hidden {
    display: none;
  }

  .group.collaboration-details-hidden .lg\:group-\[\.collaboration-details-hidden\]\:w-full {
    width: 100%;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:w-\[68px\] {
    width: 68px;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:w-auto {
    width: auto;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:w-\[232px\] {
    width: 232px;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:w-\[68px\] {
    width: 68px;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:max-w-0 {
    max-width: 0px;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:max-w-max {
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:items-start {
    align-items: flex-start;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:rounded-r-radius-28 {
    border-top-right-radius: 1.75rem;
    border-bottom-right-radius: 1.75rem;
  }

  .group\/bank.active .lg\:group-\[\.active\]\/bank\:bg-background-base {
    background-color: var(--background-base);
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:bg-background-elevated {
    background-color: var(--background-elevated);
  }

  .group\/layout.sidebar-collapsed .lg\:group-\[\.sidebar-collapsed\]\/layout\:opacity-0 {
    opacity: 0;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:shadow-main-container {
    --tw-shadow: var(--shadow-main-container);
    --tw-shadow-colored: var(--shadow-main-container);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:ring-inset {
    --tw-ring-inset: inset;
  }

  .group\/layout.sidebar-peeking .lg\:group-\[\.sidebar-peeking\]\/layout\:ring-content-border-dark {
    --tw-ring-color: var(--content-border-dark);
  }

  .lg\:data-\[expanded\=true\]\:max-w-full[data-expanded="true"] {
    max-width: 100%;
  }

  .group[data-expanded="true"] .lg\:group-data-\[expanded\=true\]\:w-14 {
    width: 3.5rem;
  }

  .group[data-expanded="true"] .lg\:group-data-\[expanded\=true\]\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  @keyframes thumb-pop {
    0% {
      opacity: 0;
      transform: rotate(-2deg) scale(0.3);
    }

    70% {
      opacity: 1;
      transform: rotate(-2deg) scale(1.06);
    }

    100% {
      opacity: 1;
      transform: rotate(-2deg) scale(1);
    }
  }

  .group[data-expanded="true"] .lg\:group-data-\[expanded\=true\]\:animate-thumb-pop {
    animation: thumb-pop 350ms ease-out 160ms backwards;
  }

  .group[data-expanded="true"] .lg\:group-data-\[expanded\=true\]\:opacity-100 {
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .xl\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .xl\:ml-0 {
    margin-left: 0px;
  }

  .xl\:mr-1\.5 {
    margin-right: 0.375rem;
  }

  .xl\:block {
    display: block;
  }

  .xl\:inline {
    display: inline;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:w-\[520px\] {
    width: 520px;
  }

  .xl\:max-w-\[260px\] {
    max-width: 260px;
  }

  .xl\:max-w-layout-1000 {
    max-width: 1000px;
  }

  .xl\:max-w-none {
    max-width: none;
  }

  .xl\:flex-1 {
    flex: 1 1 0%;
  }

  .xl\:shrink {
    flex-shrink: 1;
  }

  .xl\:basis-0 {
    flex-basis: 0px;
  }

  .xl\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .xl\:scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:gap-0 {
    gap: 0px;
  }

  .xl\:overflow-visible {
    overflow: visible;
  }

  .xl\:rounded-none {
    border-radius: 0;
  }

  .xl\:rounded-radius-24 {
    border-radius: 1.5rem;
  }

  .xl\:border {
    border-width: 1px;
  }

  .xl\:border-0 {
    border-width: 0px;
  }

  .xl\:border-content-border-neutral {
    border-color: var(--content-border-neutral);
  }

  .xl\:bg-transparent {
    background-color: transparent;
  }

  .xl\:p-2 {
    padding: 0.5rem;
  }

  .xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xl\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xl\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xl\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .xl\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .xl\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
  }

  .xl\:opacity-0 {
    opacity: 0;
  }

  .xl\:opacity-100 {
    opacity: 1;
  }

  .xl\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .xl\:shadow-sm {
    --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .xl\:\[grid-template-columns\:0fr\] {
    grid-template-columns: 0fr;
  }

  .xl\:\[grid-template-columns\:1fr\] {
    grid-template-columns: 1fr;
  }

  .group:has(:checked) .xl\:group-has-\[\:checked\]\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .group:has(:checked) .xl\:group-has-\[\:checked\]\:opacity-100 {
    opacity: 1;
  }

  .group:has(:checked) .xl\:group-has-\[\:checked\]\:\[grid-template-columns\:1fr\] {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1357px) {
  .min-\[1357px\]\:grid-cols-\[60px_repeat\(7\2c minmax\(0\2c 1fr\)\)\] {
    grid-template-columns: 60px repeat(7,minmax(0,1fr));
  }
}

@media (min-width: 1536px) {
  .\32xl\:pl-\[calc\(50\%-576px\+24px\)\] {
    padding-left: calc(50% - 576px + 24px);
  }
}

.dark\:block:where(.dark, .dark *) {
  display: block;
}

.dark\:hidden:where(.dark, .dark *) {
  display: none;
}

.dark\:divide-\[rgba\(255\2c 255\2c 255\2c 0\.08\)\]:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255,255,255,0.08);
}

.dark\:divide-slate-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}

.dark\:border-\[rgba\(255\2c 255\2c 255\2c \.16\)\]:where(.dark, .dark *) {
  border-color: rgba(255,255,255,.16);
}

.dark\:border-\[rgba\(255\2c 255\2c 255\2c 0\.02\)\]:where(.dark, .dark *) {
  border-color: rgba(255,255,255,0.02);
}

.dark\:border-offWhite\/08:where(.dark, .dark *) {
  border-color: rgb(248 245 244 / .08);
}

.dark\:border-offWhite\/12:where(.dark, .dark *) {
  border-color: rgb(248 245 244 / .12);
}

.dark\:border-red-700:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(180 33 43 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-500:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-600:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-900:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}

.dark\:border-white\/\[0\.04\]:where(.dark, .dark *) {
  border-color: rgb(255 255 255 / 0.04);
}

.dark\:border-opacity-10:where(.dark, .dark *) {
  --tw-border-opacity: 0.1;
}

.dark\:\!bg-\[rgba\(238\2c 232\2c 229\2c 0\.15\)\]:where(.dark, .dark *) {
  background-color: rgba(238,232,229,0.15) !important;
}

.dark\:bg-\[\#090A0B\]:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(9 10 11 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.05\)\]:where(.dark, .dark *) {
  background-color: rgba(255,255,255,0.05);
}

.dark\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.10\)\]:where(.dark, .dark *) {
  background-color: rgba(255,255,255,0.10);
}

.dark\:bg-\[var\(--image-new-color-dark\)\]:where(.dark, .dark *) {
  background-color: var(--image-new-color-dark);
}

.dark\:bg-background-elevated:where(.dark, .dark *) {
  background-color: var(--background-elevated);
}

.dark\:bg-black:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.dark\:bg-content-border-dark:where(.dark, .dark *) {
  background-color: var(--content-border-dark);
}

.dark\:bg-offWhite:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 244 / var(--tw-bg-opacity, 1));
}

.dark\:bg-offWhite\/04:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
}

.dark\:bg-offWhite\/50:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / 0.5);
}

.dark\:bg-red-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(180 33 43 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-700\/40:where(.dark, .dark *) {
  background-color: rgb(180 33 43 / 0.4);
}

.dark\:bg-red-900:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(124 32 38 / var(--tw-bg-opacity, 1));
}

.dark\:bg-richBlack:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
}

.dark\:bg-richBlack\/80:where(.dark, .dark *) {
  background-color: rgb(11 5 29 / 0.8);
}

.dark\:bg-slate-400:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-800:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-900:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.dark\:bg-white:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.dark\:bg-opacity-10:where(.dark, .dark *) {
  --tw-bg-opacity: 0.1;
}

.dark\:bg-opacity-50:where(.dark, .dark *) {
  --tw-bg-opacity: 0.5;
}

.dark\:bg-opacity-80:where(.dark, .dark *) {
  --tw-bg-opacity: 0.8;
}

.dark\:bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c 0\.05\)_0\%\2c rgba\(0\2c 0\2c 0\2c 0\.2\)_100\%\)\]:where(.dark, .dark *) {
  background-image: linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.2) 100%);
}

.dark\:from-primary-900:where(.dark, .dark *) {
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-slate-700:where(.dark, .dark *) {
  --tw-gradient-from: #334155 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-slate-700\/50:where(.dark, .dark *) {
  --tw-gradient-from: rgb(51 65 85 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-slate-800:where(.dark, .dark *) {
  --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:to-primary-600:where(.dark, .dark *) {
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}

.dark\:to-slate-800:where(.dark, .dark *) {
  --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}

.dark\:text-blue-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.dark\:text-content-primary:where(.dark, .dark *) {
  color: var(--content-primary);
}

.dark\:text-offWhite:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.dark\:text-offWhite\/32:where(.dark, .dark *) {
  color: rgb(248 245 244 / .32);
}

.dark\:text-offWhite\/50:where(.dark, .dark *) {
  color: rgb(248 245 244 / 0.5);
}

.dark\:text-offWhite\/64:where(.dark, .dark *) {
  color: rgb(248 245 244 / .64);
}

.dark\:text-offWhite\/79:where(.dark, .dark *) {
  color: rgb(248 245 244 / .79);
}

.dark\:text-primary-300:where(.dark, .dark *) {
  color: var(--primary-300);
}

.dark\:text-red-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 227 229 / var(--tw-text-opacity, 1));
}

.dark\:text-richBlack:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-200:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-300:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-400:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-500:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-800:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.dark\:text-white:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:shadow:where(.dark, .dark *) {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:ring-transparent:where(.dark, .dark *) {
  --tw-ring-color: transparent;
}

.dark\:ring-offset-slate-700:where(.dark, .dark *) {
  --tw-ring-offset-color: #334155;
}

.dark\:\[--tw-ring-color\:var\(--tw-ring-color-dark\)\]:where(.dark, .dark *) {
  --tw-ring-color: var(--tw-ring-color-dark);
}

.dark\:\[border-color\:rgba\(255\2c 255\2c 255\2c 0\.08\)\]:where(.dark, .dark *) {
  border-color: rgba(255,255,255,0.08);
}

.dark\:placeholder\:text-offWhite\/36:where(.dark, .dark *)::-moz-placeholder {
  color: rgb(248 245 244 / .36);
}

.dark\:placeholder\:text-offWhite\/36:where(.dark, .dark *)::placeholder {
  color: rgb(248 245 244 / .36);
}

.dark\:hover\:border-offWhite\/12:hover:where(.dark, .dark *) {
  border-color: rgb(248 245 244 / .12);
}

.dark\:hover\:bg-\[color\:var\(--base-color\)\]:hover:where(.dark, .dark *) {
  background-color: var(--base-color);
}

.dark\:hover\:bg-richBlack:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 5 29 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-slate-400:hover:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.hover\:dark\:bg-offWhite\/04:where(.dark, .dark *):hover {
  background-color: rgb(248 245 244 / .04);
}

.hover\:dark\:bg-slate-700:where(.dark, .dark *):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:text-offWhite:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-richBlack:hover:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(11 5 29 / var(--tw-text-opacity, 1));
}

.hover\:dark\:text-offWhite:where(.dark, .dark *):hover {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.disabled\:dark\:bg-slate-700:where(.dark, .dark *):disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.group:hover .dark\:group-hover\:bg-slate-700:where(.dark, .dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.group:hover .dark\:group-hover\:bg-opacity-25:where(.dark, .dark *) {
  --tw-bg-opacity: 0.25;
}

.group:hover .dark\:group-hover\:text-slate-100:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.group:focus .dark\:group-focus\:text-offWhite:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 245 244 / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:dark\:bg-background-elevated:where(.dark, .dark *) {
  background-color: var(--background-elevated);
}

.peer:checked ~ .peer-checked\:before\:dark\:border-content-primary:where(.dark, .dark *)::before {
  content: var(--tw-content);
  border-color: var(--content-primary);
}

.peer:disabled ~ .peer-disabled\:dark\:bg-content-border-dark:where(.dark, .dark *) {
  background-color: var(--content-border-dark);
}

.peer:disabled ~ .dark\:peer-disabled\:text-content-tertiary:where(.dark, .dark *) {
  color: var(--content-tertiary);
}

.dark\:aria-selected\:bg-offWhite\/04[aria-selected="true"]:where(.dark, .dark *) {
  background-color: rgb(248 245 244 / .04);
}

.data-\[dragover\]\:dark\:border-offWhite:where(.dark, .dark *)[data-dragover] {
  --tw-border-opacity: 1;
  border-color: rgb(248 245 244 / var(--tw-border-opacity, 1));
}

.group\/main-dropzone[data-dragover] .group-data-\[dragover\]\/main-dropzone\:dark\:border-offWhite:where(.dark, .dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(248 245 244 / var(--tw-border-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:dark\:bg-slate-700:where(.dark, .dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .sm\:dark\:shadow-lg:where(.dark, .dark *) {
    --tw-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 0px 0px 0px rgba(0,0,0, 0.00), 0px 8px 28px 0px rgba(0,0,0, 0.16);;
    --tw-shadow-colored: 0px 0px 0px 0px var(--tw-shadow-color), 0px 0px 0px 0px var(--tw-shadow-color), 0px 8px 28px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.\[\&\:\:-moz-progress-bar\]\:rounded-full::-moz-progress-bar {
  border-radius: 9999px;
}

.\[\&\:\:-moz-progress-bar\]\:bg-brand-secondary-moola::-moz-progress-bar {
  background-color: var(--brand-secondary-moola);
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-progress-bar\]\:bg-content-border-dark::-webkit-progress-bar {
  background-color: var(--content-border-dark);
}

.\[\&\:\:-webkit-progress-value\]\:rounded-full::-webkit-progress-value {
  border-radius: 9999px;
}

.\[\&\:\:-webkit-progress-value\]\:bg-brand-secondary-moola::-webkit-progress-value {
  background-color: var(--brand-secondary-moola);
}

.\[\&\:has\(\[aria-busy\=true\]\)\]\:pointer-events-none:has([aria-busy=true]) {
  pointer-events: none;
}

.\[\&\:has\(\[aria-busy\=true\]\)\]\:opacity-50:has([aria-busy=true]) {
  opacity: 0.5;
}

.\[\&\:not\(\:has\(\:checked\)\)\]\:hover\:bg-background-base:hover:not(:has(:checked)) {
  background-color: var(--background-base);
}

.\[\&\:not\(\:has\(\:checked\)\)\]\:hover\:bg-background-overlay:hover:not(:has(:checked)) {
  background-color: var(--background-overlay);
}

.\[\&\>canvas\]\:h-auto>canvas {
  height: auto;
}

.\[\&\>canvas\]\:w-full>canvas {
  width: 100%;
}

.\[\&\>canvas\]\:max-w-full>canvas {
  max-width: 100%;
}

.\[\&_\.button\]\:w-full .button {
  width: 100%;
}

@media not all and (min-width: 768px) {
  .max-md\:\[\&_\.button\]\:w-full .button {
    width: 100%;
  }
}

.\[\&_\.grid\>div\]\:w-full .grid>div {
  width: 100%;
}

.\[\&_\.grid\]\:w-full .grid {
  width: 100%;
}

@media not all and (min-width: 1024px) {
  .max-lg\:\[\&_button\]\:h-12 button {
    height: 3rem;
  }

  .max-lg\:\[\&_button\]\:text-base button {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.\[\&_img\]\:\!w-full img {
  width: 100% !important;
}

@media not all and (min-width: 1024px) {
  .max-lg\:\[\&_input\]\:h-12 input {
    height: 3rem;
  }

  .max-lg\:\[\&_input\]\:text-base input {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.\[\&_path\]\:stroke-1 path {
  stroke-width: 1;
}

.\[\&_path\]\:stroke-2 path {
  stroke-width: 2;
}

.\[\&_svg\]\:\!size-3\.5 svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
}

.\[\&_svg\]\:open\:-rotate-180[open] svg {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media not all and (min-width: 1024px) {
  .max-lg\:\[\&_svg\]\:\!size-\[18px\] svg {
    width: 18px !important;
    height: 18px !important;
  }
}

.peer:checked~* .\[\.peer\:checked\~\*_\&\]\:block {
  display: block;
}

@media(hover:hover) {
  .\[\@media\(hover\:hover\)\]\:hover\:bg-background-overlay:hover {
    background-color: var(--background-overlay);
  }
}

[data-hidden=false] .\[\[data-hidden\=false\]_\&\]\:hidden {
  display: none;
}

[data-hidden=true] .\[\[data-hidden\=true\]_\&\]\:hidden {
  display: none;
}

[open] .\[\[open\]_\&\]\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

fieldset:disabled .\[fieldset\:disabled_\&\]\:text-base {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

fieldset:disabled .\[fieldset\:disabled_\&\]\:font-normal {
  font-weight: 400;
}

fieldset:disabled .\[fieldset\:disabled_\&\]\:font-semibold {
  font-weight: 600;
}

fieldset:disabled .\[fieldset\:disabled_\&\]\:text-content-tertiary {
  color: var(--content-tertiary);
}

fieldset:disabled .dark\:\[fieldset\:disabled_\&\]\:text-content-tertiary:where(.dark, .dark *) {
  color: var(--content-tertiary);
}

/*# sourceMappingURL=application.atelier.css.map */