*, ::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.19 | 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: Inter, 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;
}

:root {
  /* Brand */
  --color-brand-blue: 22 122 238;
  --color-brand-cyan: 9 251 247;
  /* Surfaces */
  --color-surface: 255 255 255;
  --color-surface-secondary: 249 250 251;
  --color-surface-tertiary: 243 244 246;
  --color-surface-elevated: 255 255 255;
  --color-surface-inset: 241 245 249;
  --color-surface-overlay: 255 255 255;
  --color-surface-group-header: 243 244 246;
  /* Text
       Rendered markdown (`prose`) takes its colours from these: --tw-prose-* is
       wired to them in tailwind.config.js, so prose blocks need no `dark:`
       variant and no per-view colour classes. */
  --color-text: 15 23 42;
  --color-text-secondary: 71 85 105;
  --color-text-tertiary: 100 116 139;
  --color-text-muted: 148 163 184;
  --color-text-on-dark: 255 255 255;
  /* Borders */
  --color-border: 229 231 235;
  --color-border-strong: 203 213 225;
  --color-border-subtle: 241 245 249;
  /* Interactive / Buttons */
  --color-btn-primary: 59 130 246;
  --color-btn-primary-hover: 37 99 235;
  --color-btn-secondary: 209 213 219;
  --color-btn-secondary-hover: 156 163 175;
  --color-btn-danger: 239 68 68;
  --color-btn-danger-hover: 220 38 38;
  --color-btn-success: 34 197 94;
  --color-btn-success-hover: 22 163 74;
  --color-btn-warning: 245 158 11;
  --color-btn-warning-hover: 217 119 6;
  --color-btn-info: 59 130 246;
  --color-btn-info-hover: 37 99 235;
  /* Table header */
  --color-th-bg: 51 65 85;
  /* Nav accent (sidebar active state + mobile tab) */
  --color-nav-accent: 96 165 250;
  --color-nav-gradient-start: 47 212 217;
  --color-nav-gradient-mid: 59 130 246;
  --color-nav-gradient-end: 29 78 216;
  /* Focus */
  --color-ring: 59 130 246;
  /* Hover states */
  --color-hover: 249 250 251;
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
  --shadow-up-sm: 0 -2px 6px rgb(0 0 0 / 0.06);
  /* Semantic: Success */
  --color-success-bg: 220 252 231;
  --color-success-text: 21 128 61;
  --color-success-border: 187 247 208;
  --color-success-solid: 34 197 94;
  /* Semantic: Error */
  --color-error-bg: 254 226 226;
  --color-error-text: 185 28 28;
  --color-error-border: 254 202 202;
  --color-error-solid: 239 68 68;
  /* Semantic: Warning */
  --color-warning-bg: 254 249 195;
  --color-warning-text: 161 98 7;
  --color-warning-border: 254 240 138;
  --color-warning-solid: 245 158 11;
  /* Semantic: Info */
  --color-info-bg: 219 234 254;
  --color-info-text: 29 78 216;
  --color-info-border: 191 219 254;
  --color-info-solid: 59 130 246;
  /* Semantic: Accent (purple) */
  --color-accent-bg: 243 232 255;
  --color-accent-text: 126 34 206;
  --color-accent-border: 216 180 254;
  --color-accent-solid: 147 51 234;
  /* Tooltips */
  --color-tooltip-bg: 15 23 42;
  --color-tooltip-text: 255 255 255;
  /* Links */
  --color-link: 37 99 235;
  --color-link-hover: 29 78 216;
  /* Pagination */
  --color-pagy-text: 100 116 139;
  --color-pagy-bg: 255 255 255;
  --color-pagy-border: 226 232 240;
  --color-pagy-active-bg: 59 130 246;
  --color-pagy-active-text: 255 255 255;
  --color-pagy-hover-bg: 248 250 252;
  --color-pagy-disabled-bg: 248 250 252;
  --color-pagy-disabled-text: 203 213 225;
  /* Scrollbar */
  --color-scrollbar-thumb: 148 163 184;
  --color-scrollbar-track: 226 232 240;
  /* Skeleton */
  --color-skeleton-from: 240 240 240;
  --color-skeleton-to: 224 224 224;
  /* Form-specific — the canonical family for INTERACTIVE form controls in
       app chrome: inputs, selects and textareas the user actually types into.
       Three families exist and they are not interchangeable:
         --color-form-*     editable app-chrome controls (this one)
         --color-doc-*      document-look surfaces that imitate paper, with
                            their own softer palette (.compliance-form-document)
         --color-surface-secondary / --color-text
                            generic surface tokens, used by read-only
                            renderings such as MultiStepFormDisplayComponent
       Reach for --color-form-* whenever the control is genuinely editable.
       Picking the wrong family renders plausibly and only shows up as a
       computed-colour test failure, so choose deliberately. */
  --color-form-border: 203 213 225;
  --color-form-bg: 255 255 255;
  --color-form-text: 30 41 59;
  --color-form-placeholder: 148 163 184;
  --color-form-disabled-bg: 248 250 252;
  --color-form-focus-border: 59 130 246;
  /* Toast */
  --color-toast-bg: 255 255 255;
  --color-toast-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.1);
  /* Overlay */
  --color-overlay: 255 255 255 / 0.8;
  /* Scrim: the dark dim behind a mobile drawer / off-canvas panel. Distinct
       from --color-overlay (a light frosted modal backdrop). */
  --color-scrim: 15 23 42 / 0.5;
  /* Page gradient */
  --color-page-gradient-from: 249 250 251;
  --color-page-gradient-to: 243 244 246;
  /* Compliance form document */
  --color-doc-bg: 255 255 255;
  --color-doc-text: 51 51 51;
  --color-doc-header-bg: 248 249 250;
  --color-doc-border: 233 236 239;
  --color-doc-muted: 108 117 125;
  --color-doc-title: 32 33 36;
  --color-doc-description: 95 99 104;
  --color-doc-input-border: 218 220 224;
  /* Loading spinner */
  --color-spinner-track: 203 213 225;
  --color-spinner-head: 59 130 246;
  /* Questionnaire (Form ADV) */
  --color-quest-accent: 124 58 237;
  --color-quest-accent-hover: 51 65 85;
  --color-quest-help-bg: 250 245 255;
  --color-quest-help-border: 168 85 247;
  --color-quest-help-text: 68 64 60;
  --color-quest-example-bg: 255 255 255;
  --color-quest-example-border: 214 211 209;
  --color-quest-example-label: 168 162 158;
  --color-quest-card-bg: 255 255 255;
  --color-quest-card-bg-end: 250 250 249;
  --color-quest-card-border: 231 229 228;
  --color-quest-card-title: 28 25 23;
  --color-quest-card-subtitle: 120 113 108;
  --color-quest-field-bg: 255 255 255;
  --color-quest-field-border: 231 229 228;
  --color-quest-field-text: 28 25 23;
  --color-quest-field-placeholder: 168 162 158;
  --color-quest-sidebar-bg: 255 255 255;
  --color-quest-sidebar-bg-end: 250 250 249;
  --color-quest-step-hover: 245 245 244;
  --color-quest-step-current-bg: 241 245 249;
  --color-quest-step-current-border: 203 213 225;
  --color-quest-step-pending-bg: 245 245 244;
  --color-quest-step-pending-border: 231 229 228;
  --color-quest-step-pending-text: 168 162 158;
  --color-quest-tip-bg-start: 255 251 235;
  --color-quest-tip-border: 253 230 138;
}

.dark {
  /* Surfaces — deep slate palette from RegFin design system */
  --color-surface: 15 23 42;
  /* #0F172A — card background */
  --color-surface-secondary: 19 29 51;
  /* #131D33 — nested card / secondary surface */
  --color-surface-tertiary: 22 32 54;
  /* #162036 — tertiary / raised surface */
  --color-surface-elevated: 19 29 51;
  /* #131D33 — elevated panels */
  --color-surface-inset: 7 12 24;
  /* #070C18 — inset / page background */
  --color-surface-overlay: 19 29 51;
  /* #131D33 — modal / overlay surface */
  --color-surface-group-header: 30 41 59;
  /* #1E293B — group header separator */
  --color-surface-nav-top: 10 17 36;
  /* #0A1124 — sidebar/topbar gradient start */
  /* Text — softer warm white from design */
  --color-text: 230 237 247;
  /* #E6EDF7 — primary text */
  --color-text-secondary: 203 213 225;
  /* #CBD5E1 — secondary text */
  --color-text-tertiary: 148 163 184;
  /* #94A3B8 — tertiary / muted labels */
  --color-text-muted: 100 116 139;
  /* #64748B — dim / placeholder */
  --color-text-on-dark: 255 255 255;
  /* Borders — translucent for depth, matching design */
  --color-border: 38 50 74;
  /* ~rgba(148,163,184,0.10) on #070C18 */
  --color-border-strong: 52 66 92;
  /* ~rgba(148,163,184,0.18) on #070C18 */
  --color-border-subtle: 19 29 51;
  /* #131D33 — very subtle separation */
  /* Interactive / Buttons */
  --color-btn-primary: 59 130 246;
  --color-btn-primary-hover: 96 165 250;
  --color-btn-secondary: 52 66 92;
  --color-btn-secondary-hover: 71 85 105;
  --color-btn-danger: 220 38 38;
  --color-btn-danger-hover: 239 68 68;
  --color-btn-success: 22 163 74;
  --color-btn-success-hover: 34 197 94;
  --color-btn-warning: 217 119 6;
  --color-btn-warning-hover: 245 158 11;
  --color-btn-info: 37 99 235;
  --color-btn-info-hover: 59 130 246;
  /* Table header */
  --color-th-bg: 30 41 59;
  /* Focus */
  --color-ring: 59 130 246;
  /* Hover states */
  --color-hover: 26 37 64;
  /* #1A2540 — surface-3 from design */
  /* Shadows — deeper with inset highlight from design */
  --shadow-sm: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.45);
  --shadow-up-sm: 0 -2px 6px rgb(0 0 0 / 0.3);
  /* Semantic: Success */
  --color-success-bg: 12 57 30;
  --color-success-text: 134 239 172;
  --color-success-border: 22 101 52;
  --color-success-solid: 52 211 153;
  /* #34D399 — design's success */
  /* Semantic: Error */
  --color-error-bg: 70 16 16;
  --color-error-text: 252 165 165;
  --color-error-border: 127 29 29;
  --color-error-solid: 239 68 68;
  /* #EF4444 — richer red */
  /* Semantic: Warning */
  --color-warning-bg: 66 28 6;
  --color-warning-text: 254 240 138;
  --color-warning-border: 133 77 14;
  --color-warning-solid: 251 191 36;
  /* #FBBF24 — design's warning */
  /* Semantic: Info */
  --color-info-bg: 22 36 72;
  --color-info-text: 147 197 253;
  --color-info-border: 30 64 175;
  --color-info-solid: 59 130 246;
  /* Semantic: Accent (purple) */
  --color-accent-bg: 59 7 100;
  --color-accent-text: 216 180 254;
  --color-accent-border: 88 28 135;
  --color-accent-solid: 168 85 247;
  /* Tooltips — inverted in dark mode */
  --color-tooltip-bg: 230 237 247;
  --color-tooltip-text: 7 12 24;
  /* Links */
  --color-link: 147 197 253;
  --color-link-hover: 191 219 254;
  /* Pagination */
  --color-pagy-text: 148 163 184;
  --color-pagy-bg: 19 29 51;
  --color-pagy-border: 38 50 74;
  --color-pagy-active-bg: 59 130 246;
  --color-pagy-active-text: 255 255 255;
  --color-pagy-hover-bg: 26 37 64;
  --color-pagy-disabled-bg: 7 12 24;
  --color-pagy-disabled-text: 52 66 92;
  /* Scrollbar */
  --color-scrollbar-thumb: 52 66 92;
  --color-scrollbar-track: 19 29 51;
  /* Skeleton */
  --color-skeleton-from: 19 29 51;
  --color-skeleton-to: 26 37 64;
  /* Form-specific — dark values for the family documented at the light
       :root above. Keep the two lists in step. */
  --color-form-border: 52 66 92;
  --color-form-bg: 19 29 51;
  --color-form-text: 230 237 247;
  --color-form-placeholder: 100 116 139;
  --color-form-disabled-bg: 7 12 24;
  --color-form-focus-border: 59 130 246;
  /* Toast */
  --color-toast-bg: 19 29 51;
  --color-toast-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 1px rgba(0,0,0,0.3);
  /* Overlay */
  --color-overlay: 7 12 24 / 0.8;
  /* Scrim behind a mobile drawer — kept dark in both themes for contrast. */
  --color-scrim: 2 6 23 / 0.6;
  /* Page gradient — design uses flat #070C18 */
  --color-page-gradient-from: 7 12 24;
  --color-page-gradient-to: 10 16 30;
  /* Compliance form document */
  --color-doc-bg: 22 32 54;
  --color-doc-text: 203 213 225;
  --color-doc-header-bg: 15 23 42;
  --color-doc-border: 38 50 74;
  --color-doc-muted: 148 163 184;
  --color-doc-title: 230 237 247;
  --color-doc-description: 148 163 184;
  --color-doc-input-border: 52 66 92;
  /* Loading spinner */
  --color-spinner-track: 52 66 92;
  --color-spinner-head: 148 163 184;
  /* Questionnaire (Form ADV) */
  --color-quest-accent: 167 139 250;
  --color-quest-accent-hover: 148 163 184;
  --color-quest-help-bg: 46 16 101;
  --color-quest-help-border: 126 34 206;
  --color-quest-help-text: 203 213 225;
  --color-quest-example-bg: 19 29 51;
  --color-quest-example-border: 52 66 92;
  --color-quest-example-label: 100 116 139;
  --color-quest-card-bg: 19 29 51;
  --color-quest-card-bg-end: 7 12 24;
  --color-quest-card-border: 38 50 74;
  --color-quest-card-title: 230 237 247;
  --color-quest-card-subtitle: 148 163 184;
  --color-quest-field-bg: 7 12 24;
  --color-quest-field-border: 52 66 92;
  --color-quest-field-text: 230 237 247;
  --color-quest-field-placeholder: 100 116 139;
  --color-quest-sidebar-bg: 19 29 51;
  --color-quest-sidebar-bg-end: 7 12 24;
  --color-quest-step-hover: 26 37 64;
  --color-quest-step-current-bg: 26 37 64;
  --color-quest-step-current-border: 52 66 92;
  --color-quest-step-pending-bg: 19 29 51;
  --color-quest-step-pending-border: 38 50 74;
  --color-quest-step-pending-text: 100 116 139;
  --color-quest-tip-bg-start: 69 26 3;
  --color-quest-tip-border: 133 77 14;
}

.\!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;
  }
}

.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 var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  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: rgb(var(--color-text-secondary));
  --tw-prose-headings: rgb(var(--color-text));
  --tw-prose-lead: rgb(var(--color-text-secondary));
  --tw-prose-links: rgb(var(--color-link));
  --tw-prose-bold: rgb(var(--color-text));
  --tw-prose-counters: rgb(var(--color-text-tertiary));
  --tw-prose-bullets: rgb(var(--color-text-tertiary));
  --tw-prose-hr: rgb(var(--color-border));
  --tw-prose-quotes: rgb(var(--color-text-secondary));
  --tw-prose-quote-borders: rgb(var(--color-border));
  --tw-prose-captions: rgb(var(--color-text-tertiary));
  --tw-prose-kbd: rgb(var(--color-text));
  --tw-prose-kbd-shadows: rgb(var(--color-text) / 10%);
  --tw-prose-code: rgb(var(--color-text));
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: rgb(var(--color-border-strong));
  --tw-prose-td-borders: rgb(var(--color-border));
  --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: rgb(255 255 255 / 10%);
  --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;
}

.prose-invert {
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}

input.input-field,
  textarea.input-field {
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-opacity, 1));
}

.dark input.input-field,.dark 
  textarea.input-field {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.styled-form input.input-field,.styled-form 
  textarea.input-field {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(var(--color-form-text));
  background-color: rgb(var(--color-form-bg));
  border: 2px solid rgb(var(--color-form-border));
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.styled-form input.input-field:hover:not(:focus):not(:disabled),.styled-form 
  textarea.input-field:hover:not(:focus):not(:disabled) {
  border-color: rgb(var(--color-form-placeholder));
  background-color: rgb(var(--color-form-bg));
}

.styled-form input.input-field:focus,.styled-form 
  textarea.input-field:focus {
  outline: none;
  border-color: rgb(var(--color-form-focus-border));
  box-shadow: 0 0 0 4px rgb(var(--color-form-focus-border) / 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
  background-color: rgb(var(--color-form-bg));
}

.styled-form input.input-field:disabled,.styled-form 
  textarea.input-field:disabled {
  background-color: rgb(var(--color-form-disabled-bg));
  border-color: rgb(var(--color-border));
  color: rgb(var(--color-form-placeholder));
  cursor: not-allowed;
}

.styled-form input.input-field::-moz-placeholder, .styled-form 
  textarea.input-field::-moz-placeholder {
  color: rgb(var(--color-form-placeholder));
  font-weight: 400;
}

.styled-form input.input-field::placeholder,.styled-form 
  textarea.input-field::placeholder {
  color: rgb(var(--color-form-placeholder));
  font-weight: 400;
}

.styled-form input.input-field.form-input-error,.styled-form 
  textarea.input-field.form-input-error {
  border-color: rgb(var(--color-error-border));
}

.styled-form input.input-field.form-input-error:focus,.styled-form 
  textarea.input-field.form-input-error:focus {
  border-color: rgb(var(--color-error-border));
  box-shadow: 0 0 0 4px rgb(var(--color-error-border) / 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.styled-form input.input-field.form-input-leading-icon,.styled-form 
  textarea.input-field.form-input-leading-icon {
  padding-left: 2.5rem;
}

.styled-form input.input-field.form-input-trailing-icon,.styled-form 
  textarea.input-field.form-input-trailing-icon {
  padding-right: 2.5rem;
}

input.input-field:focus,
  textarea.input-field:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-ring) / var(--tw-border-opacity, 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(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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}


  .compliance-form-document .question-content select.input-field {
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--color-doc-input-border));
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  background-color: rgb(var(--color-doc-bg));
  color: rgb(var(--color-doc-text));
  transition: border-color 0.2s ease;
}

.compliance-form-document select.input-field {
  border: 1px solid rgb(var(--color-doc-input-border));
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  background-image: none;
}

.compliance-form-document select.input-field:focus {
  border-color: rgb(var(--color-form-text));
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

.compliance-form-document select.input-field.preview-only {
  cursor: pointer;
  position: relative;
}

select.input-field {
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-opacity, 1));
}

.dark select.input-field {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.styled-form select.input-field {
  padding-right: 2.75rem;
  /* inset 1 + 1.25em glyph + gap */
  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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 1rem center;
  /* == left padding 1rem (SYMMETRIC) */
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
}


:where(#step-form) .question-content select.input-field {
  border: 1px solid rgb(var(--color-border-strong));
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  width: 100%;
  background-color: rgb(var(--color-form-bg));
  color: rgb(var(--color-form-text));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}


:where(#step-form) .question-content select.input-field:disabled {
  background-color: rgb(var(--color-form-disabled-bg));
  color: rgb(var(--color-form-placeholder));
}


:where(#step-form) .question-content select.input-field:focus {
  border-color: rgb(var(--color-ring));
  box-shadow: 0 0 0 3px rgb(var(--color-ring) / 0.1);
  outline: none;
}


:where(#step-form) .question-container.has-error select.input-field {
  border-color: rgb(var(--color-error-solid));
}

select.input-field:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-ring) / var(--tw-border-opacity, 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(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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

/* ============================================
     FILTER BAR CONTROLS — Shared::FilterBarComponent (FIZZY-969)

     The compact, toolbar-sized siblings of the .styled-form CRUD field, for
     index filter bars.

     Two things about this block are deliberate, and both are the fix for the
     bug class it was written to kill:

     1. UNSCOPED single-class selectors. `.form-input` / `.form-select` /
        `.form-label` exist ONLY as `.styled-form .form-*`, so writing
        `class: "form-input form-select"` on a form that does not also carry
        `styled-form` applies literally nothing and renders a browser-default
        control — with no error, no warning, and markup that reads correct.
        Consultant filter bars had one of each: one form with `styled-form`
        (styled), one without (bare), and two more spelling the styles out as
        one-off utility strings that agreed with neither. A class whose effect
        depends on an ancestor nobody can see IS the failure mode; these
        classes have no ancestor requirement, so they cannot be defeated by
        where they are used.

     2. Colours come from the --color-form-* family (the "editable app-chrome
        control" family — see the token comment near the top of this file), NOT
        from bg-surface / text-content. The global `.dark input` / `.dark select`
        safety net repaints every control with --color-form-*, and at (0,1,1) it
        out-specifies a single class, so any other palette chosen here would be
        silently replaced in dark mode only — the classic "looks right in light,
        wrong in dark" report.

     Regression cover: test/views/consultant_filter_bar_guard_test.rb (nothing in
     the consultant namespace may hand-roll a filter control) and
     test/components/shared/filter_bar_component_test.rb.
     ============================================ */

.filter-field-label {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: rgb(var(--color-text-secondary));
  margin-bottom: 0.25rem;
}

.filter-field-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(var(--color-form-text));
  background-color: rgb(var(--color-form-bg));
  border: 1px solid rgb(var(--color-form-border));
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.filter-field-control::-moz-placeholder {
  color: rgb(var(--color-form-placeholder));
}

.filter-field-control::placeholder {
  color: rgb(var(--color-form-placeholder));
}

.filter-field-control:hover:not(:focus):not(:disabled) {
  border-color: rgb(var(--color-form-placeholder));
}

.filter-field-control:focus {
  outline: none;
  border-color: rgb(var(--color-form-focus-border));
  box-shadow: 0 0 0 3px rgb(var(--color-form-focus-border) / 0.15);
}

/* `appearance: none` above strips the native chevron, so a select has to draw
     its own or it reads as a text input. Two copies of the arrow because the
     stroke colour is baked into the data URI and cannot reference a token. */

/* CARET SYMMETRY (FIZZY-1180): .filter-field-control pads `0.5rem 0.75rem`, so
     the chevron inset must equal the 0.75rem left padding (was 0.625rem — the
     caret sat 2px closer to the edge than the text). */

select.filter-field-control {
  padding-right: 2.25rem;
  /* inset 0.75 + 1.125em glyph + gap */
  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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  /* == left padding 0.75rem (SYMMETRIC) */
  background-repeat: no-repeat;
  background-size: 1.125em 1.125em;
}

.dark select.filter-field-control {
  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='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Native pickers (the date input's calendar button) draw with the OS colour
     scheme, which is light unless told otherwise — a white-on-white glyph on
     the dark form surface without this. */

.dark input[type="date"].filter-field-control,
  .dark input[type="month"].filter-field-control {
  color-scheme: dark;
}

/* ── .select-caret — shared opt-in caret for CLASSED selects (FIZZY-1180) ────
     The base classless chevron rule is gated `:not([class])`, so any select that
     carries a class (a filter pill, a utility-styled <select>) falls back to the
     browser's NATIVE arrow — which most engines paint flush against the right
     edge while the text keeps its left padding. That asymmetry is the founder
     mandate's exact complaint. Broadening the base rule to classed selects is
     forbidden (the 234-select / 109-file audit: their tight `px-*` utilities
     would crush the chevron's clearance and run text under it — see the base
     block's SCOPE note), so classed pills opt IN with this one class instead.

     `select.select-caret` = (0,1,1), so its `padding-right` OUTRANKS any single
     `pr-*` utility (0,1,0) — the caret clearance holds no matter the utility
     soup on the element. Drop any manual `appearance-none`/`pr-*`; this sets
     both. Assumes ~0.75rem (px-3 / pl-2.5) left padding, per the STANDARD.

     ⛔ Tailwind v4 CAVEAT: this (0,1,1)-beats-`pr-*` win is v3-specific — it
     relies on `pr-*` being a plain (0,1,0) rule. Under v4 every utility moves
     into a NATIVE `@layer`, and a layered utility LOSES to an unlayered rule
     regardless of specificity — so if `.select-caret` stays in this `@layer
     components` block the relation flips (and if it were unlayered it would leap
     above ALL utilities). RE-DERIVE this on a v4 upgrade; see the base block's
     TRIPWIRE for the full cascade re-derivation. */

select.select-caret {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  /* inset 0.75 + 1.125em glyph + gap */
  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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  /* == typical left padding (SYMMETRIC) */
  background-repeat: no-repeat;
  background-size: 1.125em 1.125em;
}

.dark select.select-caret {
  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='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Size variant of .select-caret for 1rem-padded controls (the `px-4 py-3`
     CRUD-field family). Same FORMULA, next size up — inset 1rem == the px-4
     left padding, pr = 1rem + 1.25em glyph + gap, matching the
     `.styled-form .form-select` geometry exactly. Everything in the
     .select-caret comment above (specificity win over pr-*, drop manual
     appearance-none/pr-*, the Tailwind v4 cascade caveat) applies here too. */

select.select-caret-lg {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  /* inset 1 + 1.25em glyph + gap */
  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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 1rem center;
  /* == left padding 1rem (SYMMETRIC) */
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
}

.dark select.select-caret-lg {
  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='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Autofill background override for dark mode */

input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--color-content));
  -webkit-box-shadow: 0 0 0px 1000px rgb(var(--color-surface-secondary)) inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

/* Day chip toggle — used in booking availability settings */

.questionnaire-form .day-chip.items-center label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.questionnaire-form .flex.day-chip label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.day-chip {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.peer:checked ~ .day-chip {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.day-chip:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-text-tertiary) / var(--tw-border-opacity, 1));
}

/* ============================================
     DETAILS/SUMMARY — hide native marker in WebKit
     ============================================ */

details > summary.list-none::-webkit-details-marker {
  display: none;
}

/* ============================================
     CSS TOOLTIPS
     ============================================ */

.has-tooltip {
  position: relative;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-line;
  background: rgb(var(--color-tooltip-bg, 15 23 42));
  color: rgb(var(--color-tooltip-text, 255 255 255));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 50;
  width: -moz-max-content;
  width: max-content;
  max-width: 200px;
}

.has-tooltip:hover::after {
  opacity: 1;
}

/* Right-edge-safe variant for controls at the end of a row (FIZZY-1515): the
     tooltip aligns to the span's right edge instead of centering, so it never
     overflows the viewport when the control sits at the far right of a card. */

.has-tooltip-end::after {
  left: auto;
  right: 0;
  transform: none;
}

.tooltip-popup {
  position: fixed;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  /* Short text stays on one line; a long reason wraps into a readable
       box at most 20rem wide (narrower on a small viewport). The tooltip
       controller keeps the popup on screen horizontally. */
  width: -moz-max-content;
  width: max-content;
  max-width: min(20rem, calc(100vw - 16px));
  white-space: normal;
  overflow-wrap: break-word;
  background: rgb(var(--color-tooltip-bg, 15 23 42));
  color: rgb(var(--color-tooltip-text, 255 255 255));
  pointer-events: none;
  z-index: 9999;
}

/* ============================================
     BUTTON SYSTEM
     ============================================ */

/* Variants — each includes base + sizing defaults */

.questionnaire-form .flex.btn-primary label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-primary {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-on-dark) / var(--tw-text-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;
}

.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary-hover) / var(--tw-bg-opacity, 1));
}

.btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-secondary label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-secondary {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-strong) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-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;
}

.dark .btn-secondary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-hover) / var(--tw-bg-opacity, 1));
}

.btn-secondary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-danger label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-danger {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-danger) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-on-dark) / var(--tw-text-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;
}

.btn-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-danger-hover) / var(--tw-bg-opacity, 1));
}

.btn-danger:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-success label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-success {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-success) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-on-dark) / var(--tw-text-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;
}

.btn-success:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-success-hover) / var(--tw-bg-opacity, 1));
}

.btn-success:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-warning label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-warning {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-warning) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-on-dark) / var(--tw-text-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;
}

.btn-warning:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-warning-hover) / var(--tw-bg-opacity, 1));
}

.btn-warning:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-info label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-info {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-info) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-on-dark) / var(--tw-text-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;
}

.btn-info:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-info-hover) / var(--tw-bg-opacity, 1));
}

.btn-info:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

/* Outline variants */

.questionnaire-form .flex.btn-outline-primary label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-outline-primary {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-btn-primary) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-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;
}

.dark .btn-outline-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-outline-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
}

.btn-outline-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-outline-danger label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-outline-danger {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-text) / var(--tw-text-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;
}

.dark .btn-outline-danger {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-outline-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-bg) / var(--tw-bg-opacity, 1));
}

.btn-outline-danger:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-outline-secondary label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-outline-secondary {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-strong) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-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;
}

.dark .btn-outline-secondary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-outline-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-hover) / var(--tw-bg-opacity, 1));
}

.btn-outline-secondary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-outline-success label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-outline-success {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-text) / var(--tw-text-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;
}

.dark .btn-outline-success {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-outline-success:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-bg) / var(--tw-bg-opacity, 1));
}

.btn-outline-success:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.btn-outline-warning {
  /* FIZZY-1253: the warning-border token (#FEF08A) is nearly invisible on a
       white surface, so the outline read as no button at all in light mode.
       Draw the border from warning-solid at 55% alpha instead — visible in
       light, and still fine in dark (warning-solid #FBBF24 at 55%). */
}

.questionnaire-form .flex.btn-outline-warning label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-outline-warning {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(var(--color-warning-solid) / 0.55);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-text) / var(--tw-text-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;
}

.dark .btn-outline-warning {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-outline-warning:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-bg) / var(--tw-bg-opacity, 1));
}

.btn-outline-warning:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-outline-info label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-outline-info {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-text) / var(--tw-text-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;
}

.dark .btn-outline-info {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-outline-info:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-bg) / var(--tw-bg-opacity, 1));
}

.btn-outline-info:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.questionnaire-form .flex.btn-outline-accent label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-outline-accent {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-text) / var(--tw-text-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;
}

.dark .btn-outline-accent {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-outline-accent:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-bg) / var(--tw-bg-opacity, 1));
}

.btn-outline-accent:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

/* Ghost (borderless) */

.questionnaire-form .flex.btn-ghost label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.btn-ghost {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-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;
}

.btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-opacity, 1));
}

.btn-ghost:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

/* Size modifiers (override defaults when needed) */

.btn-sm {
  height: 2rem;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Disabled state — mirrors docs/design_system/tokens.css (the bundle had
     this rule; the app did not, FIZZY-1511). pointer-events: none also stops
     the hover colour from applying; wrap a disabled button in a titled <span>
     when a tooltip is needed. */

.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled,
  .btn-success:disabled, .btn-warning:disabled, .btn-info:disabled,
  .btn-outline-primary:disabled, .btn-outline-danger:disabled,
  .btn-outline-secondary:disabled, .btn-outline-success:disabled,
  .btn-outline-warning:disabled, .btn-outline-info:disabled,
  .btn-outline-accent:disabled, .btn-ghost:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Disabled-with-a-reason: aria-disabled keeps the control focusable (and
     hoverable, so a tooltip can explain why) while it looks disabled. Its
     activation is blocked in JS (aria-disabled-guard controller). The hover
     rules pin each variant's resting colours so it never reads as clickable. */

.btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"],
  .btn-danger[aria-disabled="true"], .btn-success[aria-disabled="true"],
  .btn-warning[aria-disabled="true"], .btn-info[aria-disabled="true"],
  .btn-outline-primary[aria-disabled="true"], .btn-outline-danger[aria-disabled="true"],
  .btn-outline-secondary[aria-disabled="true"], .btn-outline-success[aria-disabled="true"],
  .btn-outline-warning[aria-disabled="true"], .btn-outline-info[aria-disabled="true"],
  .btn-outline-accent[aria-disabled="true"], .btn-ghost[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-primary[aria-disabled="true"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
}

.btn-danger[aria-disabled="true"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-danger) / var(--tw-bg-opacity, 1));
}

.btn-success[aria-disabled="true"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-success) / var(--tw-bg-opacity, 1));
}

.btn-warning[aria-disabled="true"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-warning) / var(--tw-bg-opacity, 1));
}

.btn-info[aria-disabled="true"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-info) / var(--tw-bg-opacity, 1));
}

.btn-secondary[aria-disabled="true"]:hover,
  .btn-outline-primary[aria-disabled="true"]:hover,
  .btn-outline-danger[aria-disabled="true"]:hover,
  .btn-outline-secondary[aria-disabled="true"]:hover,
  .btn-outline-success[aria-disabled="true"]:hover,
  .btn-outline-warning[aria-disabled="true"]:hover,
  .btn-outline-info[aria-disabled="true"]:hover,
  .btn-outline-accent[aria-disabled="true"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.dark .btn-secondary[aria-disabled="true"]:hover,.dark 
  .btn-outline-primary[aria-disabled="true"]:hover,.dark 
  .btn-outline-danger[aria-disabled="true"]:hover,.dark 
  .btn-outline-secondary[aria-disabled="true"]:hover,.dark 
  .btn-outline-success[aria-disabled="true"]:hover,.dark 
  .btn-outline-warning[aria-disabled="true"]:hover,.dark 
  .btn-outline-info[aria-disabled="true"]:hover,.dark 
  .btn-outline-accent[aria-disabled="true"]:hover {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.btn-ghost[aria-disabled="true"]:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
}

.btn-lg {
  height: 2.75rem;
  gap: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Icon-only square button — pair with a variant (e.g. `btn-secondary btn-icon`).
     It has no text label, so always give it a `title` / aria-label. */

.btn-icon {
  width: 2.25rem;
  padding-left: 0px;
  padding-right: 0px;
}

/* Neutralize legacy hand-authored icon margins so they can't stack with the
     recipe's gap. ~2000 call sites predate the gap and carry margin utilities
     (me-, mr-, ms-) on their icon; icon spacing now comes from the recipe's
     gap, so zero the margin here. Specificity (0,2,0) intentionally beats the margin utilities'
     (0,1,0) without !important. Variants are listed explicitly — never
     [class*="btn-"], which would also match bg-btn-primary etc. */

.btn-primary > .bi, .btn-secondary > .bi, .btn-danger > .bi,
  .btn-success > .bi, .btn-warning > .bi, .btn-info > .bi,
  .btn-outline-primary > .bi, .btn-outline-danger > .bi,
  .btn-outline-secondary > .bi, .btn-outline-success > .bi,
  .btn-outline-warning > .bi, .btn-outline-info > .bi,
  .btn-outline-accent > .bi, .btn-ghost > .bi,
  .btn-sm > .bi, .btn-lg > .bi, .btn-icon > .bi {
  margin-inline: 0;
}

@keyframes tw-pulse {
  50% {
    opacity: 0.5;
  }
}

.loading-pulse {
  animation: tw-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* Review queue pulse animation for attracting attention */

@keyframes review-queue-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

.animate-pulse-once {
  animation: review-queue-pulse 1.5s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FIZZY-1381: transient highlight for the table row / mobile card of a task
     the user just created or published (applied by row_highlight_controller).
     Fades an accent-info token tint back to transparent. The action cell carries
     its own bg-surface, so the row's direct <td> children are tinted too, and
     under reduced-motion the tint is held statically with no fade. */

.row-highlight-flash,
  .row-highlight-flash > td {
  animation: row-highlight-flash 3s ease-out forwards;
}

@keyframes row-highlight-flash {
  0%, 60% {
    background-color: rgb(var(--color-info-bg));
  }

  100% {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .row-highlight-flash,
    .row-highlight-flash > td {
    animation: none;
    background-color: rgb(var(--color-info-bg));
  }
}

.animate-progress-bar {
  animation: progress-bar-indeterminate 1.8s ease-in-out infinite;
}

@keyframes progress-bar-indeterminate {
  0% {
    width: 30%;
    transform: translateX(-100%);
  }

  50% {
    width: 40%;
    transform: translateX(100%);
  }

  100% {
    width: 30%;
    transform: translateX(350%);
  }
}

/* Loading state styles */

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

.is-loading {
  position: relative;
  cursor: wait;
}

.is-loading::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  opacity: 0.7;
}

/* For buttons/elements that need the spinner on the left */

.is-loading.loading-spinner-left::after {
  right: auto;
  left: 0.75rem;
}

/* Hide elements marked for loading hide */

.is-loading [data-loading-hide] {
  opacity: 0;
}

/* Inline spinner for explicit placement */

.loading-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(var(--color-spinner-track));
  border-top-color: rgb(var(--color-spinner-head));
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.loading-spinner-sm {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 1.5px;
}

.loading-spinner-lg {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

/* ============================================
     DROPZONE UPLOAD
     ============================================ */

.dropzone-area.drag-active {
  border-color: rgb(var(--color-info-text));
  background-color: rgb(var(--color-info-bg));
  transform: scale(1.01);
}

/* ============================================
     TAB LOADING STATES
     CSS-driven via aria-busy attribute
     ============================================ */

/* Tab in loading state */

[role="tab"][aria-busy="true"],
  .settings-nav-link[aria-busy="true"] {
  cursor: wait;
  position: relative;
}

/* Hide icon when tab/link is loading */

[role="tab"][aria-busy="true"] .tab-icon,
  .settings-nav-link[aria-busy="true"] .tab-icon {
  display: none;
}

/* Show spinner when tab/link is loading */

[role="tab"][aria-busy="true"] .tab-spinner,
  .settings-nav-link[aria-busy="true"] .tab-spinner {
  display: inline-block;
}

/* Tab spinner - hidden by default, shown via aria-busy */

.tab-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 0.5rem;
  opacity: 0.7;
}

/* Content loading overlay */

.tab-content-overlay {
  position: absolute;
  inset: 0;
  background: rgb(var(--color-overlay));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-content-overlay.hidden {
  display: none;
}

/* Settings mobile drill-down (below md only).
     settings_nav_controller sets data-mobile-view="content" on its root when
     the user drills into a section; these rules own panel visibility so the
     JS is a single attribute write. On md+ none of this applies (the rules
     live inside a max-width query), so growing the window past the breakpoint
     restores the desktop split-panel with no JS repair needed. */

@media (max-width: 767px) {
  [data-controller~="settings-nav"]:not([data-mobile-view="content"]) [data-settings-nav-target~="contentPanel"] {
    display: none;
  }

  [data-mobile-view="content"] [data-settings-nav-target="nav"] {
    display: none;
  }

  [data-settings-nav-target="backButton"] {
    display: none;
  }

  [data-mobile-view="content"] [data-settings-nav-target="backButton"] {
    display: flex;
  }

  /* A user/group sub-screen's breadcrumb is its way back (FIZZY-1879). */

  [data-mobile-view="content"][data-panel-sub-screen] [data-settings-nav-target="backButton"] {
    display: none;
  }
}

/* ============================================
     OVERSIGHT FILTER DROPDOWN
     (replaces the horizontal oversight tab bar)
     ============================================ */

/* Filter trigger button — a select-style dropdown trigger (icon + label +
     chevron). Styled via a semantic class (like the .btn-* system) rather than
     a bespoke utility string in the markup. */

.questionnaire-form .flex.tab-filter-button label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.tab-filter-button {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-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;
}

.dark .tab-filter-button {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.tab-filter-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
}

.tab-filter-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

/* Button face loading state — mirrors the [role="tab"] aria-busy behavior so
     the icon swaps to a spinner while the next filter's content is fetched. */

.tab-filter-button[aria-busy="true"] {
  cursor: wait;
}

.tab-filter-button[aria-busy="true"] .tab-icon {
  display: none;
}

.tab-filter-button[aria-busy="true"] .tab-spinner {
  display: inline-block;
}

/* The button uses flex `gap` for spacing, so drop the tab-context margin. */

.tab-filter-button .tab-spinner {
  margin-right: 0;
}

/* Active option — highlight + reveal the trailing checkmark. Driven by
     aria-checked so it stays correct on both server render and client toggle. */

.filter-option-check {
  visibility: hidden;
}

.filter-option[aria-checked="true"] {
  background-color: rgb(var(--color-info-bg));
  color: rgb(var(--color-info-text));
}

.filter-option[aria-checked="true"] .filter-option-check {
  visibility: visible;
}

/* ============================================
     DASHBOARD TAB DROPDOWN (< lg)
     The desktop view-toggle pill bar, collapsed to a single dropdown trigger.
     The trigger IS the active pill: full-width, inset inside a bg-surface pill
     container (.dashboard-tab-bar) with the same bg-btn-primary fill the desktop
     bar gives its active tab. Menu options reuse the .filter-option styling above.
     ============================================ */

/* Outer pill container — mirrors the desktop tab bar wrapper so the blue
     trigger sits inset (via p-1) inside a surface-colored, bordered pill. */

.dashboard-tab-bar {
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
  --tw-shadow: var(--shadow-sm);
  --tw-shadow-colored: var(--shadow-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark .dashboard-tab-bar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.questionnaire-form .flex.dashboard-tab-button label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.dashboard-tab-button {
  display: inline-flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-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;
}

.dashboard-tab-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary-hover) / var(--tw-bg-opacity, 1));
}

.dashboard-tab-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

/* Loading state mirrors .tab-filter-button / [role="tab"]: swap icon → spinner
     on the button face while the next view's content is fetched. */

.dashboard-tab-button[aria-busy="true"] {
  cursor: wait;
}

.dashboard-tab-button[aria-busy="true"] .tab-icon {
  display: none;
}

.dashboard-tab-button[aria-busy="true"] .tab-spinner {
  display: inline-block;
}

/* The button uses flex `gap` for spacing, so drop the tab-context margin. */

.dashboard-tab-button .tab-spinner {
  margin-right: 0;
}

/* Table loading overlay — spinner near top so it's visible on long tables */

.table-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgb(var(--color-overlay));
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4rem;
}

.table-loading-overlay.hidden {
  display: none;
}

/* Ensure turbo-frame has relative positioning for overlay */

turbo-frame[data-turbo-tabs-loading-target="content"] {
  display: block;
  position: relative;
  min-height: 200px;
}

/* ============================================
     END TAB LOADING STATES
     ============================================ */

.collapsible-content {
  overflow: hidden;
  transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

.collapsible-content.show {
  opacity: 1;
}

.collapsible-content.\!show {
  opacity: 1 !important;
}

.collapsible-content.hidden {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

/* Custom Scrollbar for Navigation */

.navbar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 85, 105, 0.5) transparent;
}

.navbar-scroll::-webkit-scrollbar {
  width: 6px;
}

.navbar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.navbar-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.5);
  border-radius: 3px;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.navbar-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(71, 85, 105, 0.8);
}

/* Hide scrollbar until hover/scroll */

.navbar-scroll::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.navbar-scroll:hover::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.5);
}

.navbar-scroll::-webkit-scrollbar-thumb:active {
  background-color: rgba(71, 85, 105, 0.8);
}

/* Nav active state — gradient background + left accent bar */

.nav-item-active {
  background: linear-gradient(90deg, rgb(var(--color-nav-gradient-mid) / 0.18), rgb(var(--color-nav-gradient-mid) / 0.04));
  position: relative;
}

.nav-item-active .bi {
  color: rgb(var(--color-nav-accent));
}

.nav-item-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(135deg, rgb(var(--color-nav-gradient-start)) 0%, rgb(var(--color-nav-gradient-mid)) 50%, rgb(var(--color-nav-gradient-end)) 100%);
  border-radius: 2px;
}

/* Mobile bottom tab active state — top accent bar + brand blue */

.mobile-tab-active {
  color: rgb(var(--color-nav-accent));
}

.mobile-tab-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--color-nav-gradient-start)) 0%, rgb(var(--color-nav-gradient-mid)) 50%, rgb(var(--color-nav-gradient-end)) 100%);
  border-radius: 2px;
}

/* Horizontal-scrolling tab strips (FIZZY-1851): the strip scrolls instead of
     pushing the page wider on phones; the scrollbar is hidden because the
     tab row is short and touch-scrolls naturally. */

.tab-strip-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tab-strip-scroll::-webkit-scrollbar {
  display: none;
}

/* Pagination Styling — pagy 9.x outputs class="pagy nav" (two classes) */

.pagy-nav,
  .pagy-nav-tailwind,
  nav.pagy.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
}


  nav.pagy.\!nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.5rem 0 !important;
}

.pagy-nav a,
  .pagy-nav span.page,
  .pagy-nav span.gap,
  .pagy-nav-tailwind a,
  .pagy-nav-tailwind span.page,
  .pagy-nav-tailwind span.gap,
  nav.pagy.nav a,
  nav.pagy.nav span.page,
  nav.pagy.nav span.gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  margin: 0;
  color: rgb(var(--color-pagy-text));
  background-color: rgb(var(--color-pagy-bg));
  border: 1px solid rgb(var(--color-pagy-border));
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 2.5rem;
}


  nav.pagy.\!nav a,
  nav.pagy.\!nav span.page,
  nav.pagy.\!nav span.gap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0 !important;
  color: rgb(var(--color-pagy-text)) !important;
  background-color: rgb(var(--color-pagy-bg)) !important;
  border: 1px solid rgb(var(--color-pagy-border)) !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  min-width: 2.5rem !important;
}

.pagy-nav a:hover,
  .pagy-nav-tailwind a:hover,
  nav.pagy.nav a:hover {
  background-color: rgb(var(--color-pagy-hover-bg));
  border-color: rgb(var(--color-pagy-disabled-text));
  color: rgb(var(--color-pagy-text));
}


  nav.pagy.\!nav a:hover {
  background-color: rgb(var(--color-pagy-hover-bg)) !important;
  border-color: rgb(var(--color-pagy-disabled-text)) !important;
  color: rgb(var(--color-pagy-text)) !important;
}

.pagy-nav a.current,
  .pagy-nav a[aria-current="page"],
  .pagy-nav-tailwind a.current,
  .pagy-nav-tailwind a[aria-current="page"],
  nav.pagy.nav a.current,
  nav.pagy.nav a[aria-current="page"] {
  background-color: rgb(var(--color-pagy-active-bg));
  border-color: rgb(var(--color-pagy-active-bg));
  color: rgb(var(--color-pagy-active-text));
  font-weight: 600;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.pagy-nav a.\!current,
  .pagy-nav-tailwind a.\!current,
  nav.pagy.nav a.\!current {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
  color: rgb(var(--color-pagy-active-text)) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}


  nav.pagy.\!nav a.current,
  nav.pagy.\!nav a[aria-current="page"] {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
  color: rgb(var(--color-pagy-active-text)) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.pagy-nav a.\!current,
  .pagy-nav-tailwind a.\!current,
  nav.pagy.nav a.\!current {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
  color: rgb(var(--color-pagy-active-text)) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}


  nav.pagy.\!nav a.current,
  nav.pagy.\!nav a[aria-current="page"] {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
  color: rgb(var(--color-pagy-active-text)) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.pagy-nav a.current:hover,
  .pagy-nav a[aria-current="page"]:hover,
  .pagy-nav-tailwind a.current:hover,
  .pagy-nav-tailwind a[aria-current="page"]:hover,
  nav.pagy.nav a.current:hover,
  nav.pagy.nav a[aria-current="page"]:hover {
  background-color: rgb(var(--color-pagy-active-bg));
  border-color: rgb(var(--color-pagy-active-bg));
}

.pagy-nav a.\!current:hover,
  .pagy-nav-tailwind a.\!current:hover,
  nav.pagy.nav a.\!current:hover {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
}


  nav.pagy.\!nav a.current:hover,
  nav.pagy.\!nav a[aria-current="page"]:hover {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
}

.pagy-nav a.\!current:hover,
  .pagy-nav-tailwind a.\!current:hover,
  nav.pagy.nav a.\!current:hover {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
}


  nav.pagy.\!nav a.current:hover,
  nav.pagy.\!nav a[aria-current="page"]:hover {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
}

.pagy-nav span.gap,
  .pagy-nav span.disabled,
  .pagy-nav-tailwind span.gap,
  .pagy-nav-tailwind span.disabled,
  nav.pagy.nav span.gap,
  nav.pagy.nav a[aria-disabled="true"] {
  color: rgb(var(--color-pagy-disabled-text));
  background-color: rgb(var(--color-pagy-disabled-bg));
  border-color: rgb(var(--color-pagy-border));
  cursor: not-allowed;
}


  nav.pagy.\!nav span.gap,
  nav.pagy.\!nav a[aria-disabled="true"] {
  color: rgb(var(--color-pagy-disabled-text)) !important;
  background-color: rgb(var(--color-pagy-disabled-bg)) !important;
  border-color: rgb(var(--color-pagy-border)) !important;
  cursor: not-allowed !important;
}

.pagy-nav span.prev.disabled,
  .pagy-nav span.next.disabled,
  .pagy-nav-tailwind span.prev.disabled,
  .pagy-nav-tailwind span.next.disabled,
  nav.pagy.nav a[aria-disabled="true"][aria-label="Previous"],
  nav.pagy.nav a[aria-disabled="true"][aria-label="Next"] {
  opacity: 0.5;
}


  nav.pagy.\!nav a[aria-disabled="true"][aria-label="Previous"],
  nav.pagy.\!nav a[aria-disabled="true"][aria-label="Next"] {
  opacity: 0.5 !important;
}

/* Current page must override disabled styles (pagy 9.x sets both aria-current and aria-disabled on current page) */

nav.pagy.nav a[aria-current="page"],
  nav.pagy.nav a.current {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
  color: rgb(var(--color-pagy-active-text)) !important;
  font-weight: 600;
  cursor: default;
  opacity: 1 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

nav.pagy.\!nav a[aria-current="page"],
  nav.pagy.\!nav a.current {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
  color: rgb(var(--color-pagy-active-text)) !important;
  font-weight: 600 !important;
  cursor: default !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}


  nav.pagy.nav a.\!current {
  background-color: rgb(var(--color-pagy-active-bg)) !important;
  border-color: rgb(var(--color-pagy-active-bg)) !important;
  color: rgb(var(--color-pagy-active-text)) !important;
  font-weight: 600 !important;
  cursor: default !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Main content minimum width for chat drawer resize */

[data-chat-layout-target="mainContent"] {
  min-width: 850px;
}

/* Sidebar Panel Animation */

.sidebar-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.sidebar-panel-open {
  display: block;
  opacity: 1;
}

.sidebar-panel-closed {
  display: none;
  opacity: 0;
}

/* Loading skeleton animations */

.skeleton {
  background: linear-gradient(90deg, rgb(var(--color-skeleton-from)) 25%, rgb(var(--color-skeleton-to)) 50%, rgb(var(--color-skeleton-from)) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Form Renderer Component Styles */

.compliance-form-document {
  max-width: 794px;
  margin: 0 auto;
  background: rgb(var(--color-doc-bg));
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: rgb(var(--color-doc-text));
}

.dark .compliance-form-document {
  border: 1px solid rgb(var(--color-doc-border));
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

.compliance-form-document .document-header {
  background: rgb(var(--color-doc-header-bg));
  border-bottom: 3px solid rgb(var(--color-form-text));
  padding: 2rem;
}

.compliance-form-document .header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.compliance-form-document .company-branding {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.compliance-form-document .company-logo {
  width: 48px;
  height: 48px;
  background: rgb(var(--color-form-text));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-doc-bg));
  font-size: 1.5rem;
}

.compliance-form-document .company-info .company-name {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--color-form-text));
  letter-spacing: 0.5px;
}

.compliance-form-document .company-info .document-type {
  font-size: 0.875rem;
  color: rgb(var(--color-doc-muted));
  margin-top: 0.25rem;
}

.compliance-form-document .document-meta {
  text-align: right;
  font-size: 0.875rem;
  color: rgb(var(--color-doc-muted));
}

.compliance-form-document .form-id {
  font-weight: 600;
  color: rgb(var(--color-doc-muted));
}

.compliance-form-document .form-title-section {
  padding: 2rem;
  border-bottom: 1px solid rgb(var(--color-doc-border));
}

.compliance-form-document .document-title {
  font-size: 2rem;
  font-weight: 700;
  color: rgb(var(--color-doc-title));
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.compliance-form-document .document-description {
  font-size: 1.125rem;
  color: rgb(var(--color-doc-description));
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.compliance-form-document .form-metadata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.compliance-form-document .metadata-badges {
  display: flex;
  gap: 0.5rem;
}

.compliance-form-document .badge {
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compliance-form-document .badge.compliance-form {
  background: rgb(var(--color-info-bg));
  color: rgb(var(--color-info-solid));
}

.compliance-form-document .badge.field-count {
  background: rgb(var(--color-quest-help-bg));
  color: rgb(var(--color-quest-accent));
}

.compliance-form-document .badge.required-fields {
  background: rgb(var(--color-warning-bg));
  color: rgb(var(--color-warning-solid));
}

.compliance-form-document .generation-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgb(var(--color-doc-muted));
}

.compliance-form-document .instructions-section {
  padding: 2rem;
  background: rgb(var(--color-doc-header-bg));
  border-left: 4px solid rgb(var(--color-form-text));
  margin: 0;
}

.compliance-form-document .instructions-section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(var(--color-doc-title));
  margin: 0 0 1rem 0;
}

.compliance-form-document .instructions-section p {
  margin: 0;
  color: rgb(var(--color-doc-description));
  font-size: 0.95rem;
}

.compliance-form-document .form-questions {
  padding: 2rem;
}

.compliance-form-document .question-container {
  display: flex;
  margin-bottom: 2rem;
  align-items: flex-start;
  gap: 1rem;
}

.compliance-form-document .question-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgb(var(--color-doc-title));
  color: rgb(var(--color-doc-bg));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.compliance-form-document .question-content {
  flex: 1;
}

.compliance-form-document .question-content .form-label {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--color-doc-title));
  margin-bottom: 0.5rem;
  display: block;
}

.compliance-form-document .question-content .field-description {
  font-size: 0.875rem;
  color: rgb(var(--color-doc-description));
  margin-bottom: 0.75rem;
  font-style: italic;
}

.compliance-form-document .question-content .form-control,
  .compliance-form-document .question-content .form-select,
  .compliance-form-document .question-content input[type="text"],
  .compliance-form-document .question-content input[type="email"],
  .compliance-form-document .question-content input[type="number"],
  .compliance-form-document .question-content input[type="date"],
  .compliance-form-document .question-content textarea,
  .compliance-form-document .question-content select,
  .compliance-form-document .form-field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  .compliance-form-document .form-field textarea,
  .compliance-form-document .form-field select {
  display: block !important;
  width: 100% !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgb(var(--color-doc-input-border)) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  background-color: rgb(var(--color-doc-bg)) !important;
  color: rgb(var(--color-doc-text)) !important;
  transition: border-color 0.2s ease;
}

.compliance-form-document .question-content .form-control:focus {
  border-color: rgb(var(--color-form-text));
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

.compliance-form-document .question-container[data-field-type="header"] .question-content,
  .compliance-form-document .question-container[data-field-type="paragraph"] .question-content,
  .compliance-form-document .question-container[data-field-type="rich_text"] .question-content {
  width: 100%;
}

.compliance-form-document .question-container[data-field-type="header"] {
  margin-bottom: 1.5rem;
}

.compliance-form-document .question-container[data-field-type="paragraph"],
  .compliance-form-document .question-container[data-field-type="rich_text"] {
  margin-bottom: 1rem;
}

.compliance-form-document .form-actions {
  padding: 2rem;
  background: rgb(var(--color-doc-bg));
  border-top: 1px solid rgb(var(--color-doc-border));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compliance-form-document .completion-status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.compliance-form-document .status-text {
  font-size: 0.875rem;
  color: rgb(var(--color-doc-title));
  font-weight: 500;
}

.compliance-form-document .requirement-text {
  font-size: 0.75rem;
  color: rgb(var(--color-doc-muted));
}

.compliance-form-document .action-buttons {
  display: flex;
  gap: 1rem;
}

.compliance-form-document .btn-secondary,
  .compliance-form-document .btn-primary {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.compliance-form-document .btn-secondary {
  background: rgb(var(--color-doc-header-bg));
  color: rgb(var(--color-doc-description));
  border: 1px solid rgb(var(--color-doc-input-border));
}

.compliance-form-document .btn-secondary:hover {
  background: rgb(var(--color-btn-secondary-hover));
  border-color: rgb(var(--color-form-text));
  color: rgb(var(--color-form-text));
}

.compliance-form-document .btn-primary {
  background: rgb(var(--color-form-text));
  color: rgb(var(--color-doc-bg));
}

.compliance-form-document .btn-primary:hover {
  background: rgb(var(--color-btn-primary-hover));
}

.compliance-form-document .readonly-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(var(--color-success-solid));
  font-weight: 500;
}

.compliance-form-document .document-footer {
  background: rgb(var(--color-doc-header-bg));
  padding: 1.5rem 2rem;
  border-top: 1px solid rgb(var(--color-doc-border));
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgb(var(--color-doc-muted));
}

.compliance-form-document .required-indicator {
  color: rgb(var(--color-error-solid));
  margin-left: 0.25rem;
}

.compliance-form-document input[type="checkbox"],
  .compliance-form-document input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgb(var(--color-form-border));
  border-radius: 0.25rem;
  background-color: rgb(var(--color-form-bg));
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-top: 0.125rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.compliance-form-document input[type="radio"] {
  border-radius: 50%;
}

.compliance-form-document input[type="checkbox"]:hover:not(:disabled),
  .compliance-form-document input[type="radio"]:hover:not(:disabled) {
  border-color: rgb(var(--color-form-focus-border));
  background-color: rgb(var(--color-form-disabled-bg));
}

.compliance-form-document input[type="checkbox"]:focus,
  .compliance-form-document input[type="radio"]:focus {
  outline: none;
  border-color: rgb(var(--color-form-focus-border));
  box-shadow: 0 0 0 3px rgb(var(--color-form-focus-border) / 0.15);
}

.compliance-form-document input[type="checkbox"]:checked,
  .compliance-form-document input[type="radio"]:checked {
  background-color: rgb(var(--color-form-focus-border));
  border-color: rgb(var(--color-form-focus-border));
  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");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.compliance-form-document input[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='4'/%3e%3c/svg%3e");
}

.compliance-form-document input[type="checkbox"]:disabled,
  .compliance-form-document input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.compliance-form-document .compliance-check-label {
  font-size: 0.95rem;
  color: rgb(var(--color-doc-title));
  cursor: pointer;
  line-height: 1.4;
}

.compliance-form-document input:disabled ~ .compliance-check-label {
  opacity: 0.5;
  cursor: not-allowed;
}

.compliance-form-document .form-select {
  border: 1px solid rgb(var(--color-doc-input-border));
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  background-image: none;
}

.compliance-form-document .form-select:focus {
  border-color: rgb(var(--color-form-text));
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

.compliance-form-document .form-select.preview-only {
  cursor: pointer;
  position: relative;
}

/* Responsive Design */

@media (max-width: 768px) {
  .compliance-form-document {
    margin: 0;
    box-shadow: none;
  }

  .compliance-form-document .document-header,
    .compliance-form-document .form-title-section,
    .compliance-form-document .instructions-section,
    .compliance-form-document .form-questions,
    .compliance-form-document .form-actions,
    .compliance-form-document .document-footer {
    padding: 1.5rem 1rem;
  }

  .compliance-form-document .header-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .compliance-form-document .document-meta {
    text-align: center;
  }

  .compliance-form-document .form-metadata {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .compliance-form-document .form-actions {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .compliance-form-document .action-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .compliance-form-document .document-footer {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* Print Styles */

@media print {
  .compliance-form-document {
    box-shadow: none;
    max-width: none;
  }

  .compliance-form-document .action-buttons,
    .compliance-form-document .completion-status {
    display: none;
  }
}

/* Field Comment Indicator Styles */

.field-with-indicator {
  position: relative;
}

.field-with-indicator .field-content-area {
  padding-right: 2rem;
}

.field-comment-indicator {
  z-index: 10;
}

/* Notification badge on comment icon */

.comment-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
}

.field-comment-popover-container {
  z-index: 50;
}

.field-comment-popover {
  max-height: 400px;
}

/* Ensure popovers stay above other content */

.question-container {
  position: relative;
}

/* Popover positioning is handled entirely by the field_comments_controller.js
     using fixed positioning (to escape overflow:hidden on .step-card containers).
     The JS calculates top/left and sets them as inline styles.
     popover-below / popover-above classes are retained only for animations. */

/* Animation for popover */

.field-comment-popover-container.popover-below:not(.hidden) {
  animation: fadeInDown 0.15s ease-out;
}

.field-comment-popover-container.popover-above:not(.hidden) {
  animation: fadeInUp 0.15s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Row Feedback Popover Styles (for data source tables) */

/* Note: Do NOT add overflow:hidden - it clips the form section and moves the Add button outside the popover */

/* Row Feedback Popover - fixed positioning animations */

.row-feedback-popover-container.popover-below:not(.hidden) {
  animation: fadeInDown 0.15s ease-out;
}

.row-feedback-popover-container.popover-above:not(.hidden) {
  animation: fadeInUp 0.15s ease-out;
}

/* Toast Notification Styles */

.toast-notification {
  background: rgb(var(--color-toast-bg));
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--color-toast-shadow);
  border: 1px solid rgb(var(--color-border));
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  min-width: 320px;
  max-width: 420px;
}

.toast-notification.toast-enter {
  opacity: 1;
  transform: translateX(0);
}

.toast-notification.toast-exit {
  opacity: 0;
  transform: translateX(100%);
}

/* Toast type variants - subtle left border accent */

.toast-success {
  border-left: 4px solid rgb(var(--color-success-solid));
}

.toast-error {
  border-left: 4px solid rgb(var(--color-error-solid));
}

.toast-warning {
  border-left: 4px solid rgb(var(--color-warning-solid));
}

.toast-info {
  border-left: 4px solid rgb(var(--color-info-solid));
}

/* Toast progress bar */

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgb(var(--color-success-solid));
  transform-origin: left;
  transform: scaleX(1);
}

.toast-progress-error {
  background: rgb(var(--color-error-solid));
}

.toast-progress-warning {
  background: rgb(var(--color-warning-solid));
}

.toast-progress-info {
  background: rgb(var(--color-info-solid));
}

.toast-progress-animate {
  animation: toast-progress-shrink linear forwards;
}

@keyframes toast-progress-shrink {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* Hover state pauses animation visually */

.toast-notification:hover .toast-progress {
  animation-play-state: paused;
}

/* Table scroll container with visible scrollbar */

.table-scroll-container {
  position: relative;
}

.table-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-scrollbar-thumb)) rgb(var(--color-scrollbar-track));
}

.table-scrollbar::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.table-scrollbar::-webkit-scrollbar-track {
  background: rgb(var(--color-scrollbar-track));
  border-radius: 5px;
}

.table-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-scrollbar-thumb));
  border-radius: 5px;
  border: 2px solid rgb(var(--color-scrollbar-track));
}

.table-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-text-tertiary));
}

/* Shadow for pinned/sticky columns */

.shadow-left {
  box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.1);
}

/* ============================================
     FORM ADV QUESTIONNAIRE - TURBOTAX STYLE
     ============================================ */

/* --- EXPANDABLE HELP COMPONENT --- */

.expandable-help {
  position: relative;
  margin-top: 0.25rem;
}

.expandable-help__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(var(--color-quest-accent));
  transition: color 0.15s ease;
}

.expandable-help__trigger:hover {
  color: rgb(var(--color-form-focus-border));
}

.expandable-help__trigger--open .expandable-help__icon {
  transform: rotate(180deg);
}

.expandable-help__icon {
  transition: transform 0.2s ease;
}

.expandable-help__label {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.expandable-help__content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.25s ease;
}

.expandable-help__content--open {
  max-height: 300px;
  opacity: 1;
  margin-top: 0.75rem;
}

.expandable-help__inner {
  padding: 1rem;
  border-radius: 0.5rem;
  background: rgb(var(--color-quest-help-bg));
  border-left: 3px solid rgb(var(--color-quest-help-border));
}

.expandable-help__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(var(--color-quest-help-text));
}

.expandable-help__example {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: rgb(var(--color-quest-example-bg));
  border: 1px dashed rgb(var(--color-quest-example-border));
}

.expandable-help__example-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--color-quest-example-label));
}

.expandable-help__example-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-family: ui-monospace, monospace;
  color: rgb(var(--color-quest-help-text));
}

.expandable-help__regulatory {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: rgb(var(--color-quest-example-label));
}

/* Variants */

.expandable-help--inline {
  /* default */
}

.expandable-help--tooltip {
}

.expandable-help--sidebar {
}

/* --- STEP CARD COMPONENT --- */

.step-card {
  position: relative;
  overflow: hidden;
  background: rgb(var(--color-surface));
  border-radius: 1rem;
  border: 1px solid rgb(var(--color-border));
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease;
}

.step-card:hover {
  box-shadow: var(--shadow-md);
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgb(var(--color-btn-primary)), rgb(var(--color-btn-primary-hover)));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.step-card:focus-within::before {
  opacity: 1;
}

/* Header */

.step-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  padding-bottom: 1rem;
}

.step-card__header-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.step-card__icon-wrapper {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-surface-tertiary));
  border: 1px solid rgb(var(--color-border));
}

.step-card__icon {
  font-size: 1.25rem;
  color: rgb(var(--color-text-secondary));
}

.step-card__titles {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-card__counter {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--color-quest-example-label));
}

.step-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgb(var(--color-quest-card-title));
}

.step-card__subtitle {
  font-size: 0.875rem;
  color: rgb(var(--color-quest-card-subtitle));
}

/* Help Toggle */

.step-card__help-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-quest-accent));
  background: rgb(var(--color-quest-help-bg));
  border: 1px solid transparent;
  transition: all 0.15s ease;
  /* Never wrap the "Why we ask" toggle onto a second line (FIZZY-1453). */
  white-space: nowrap;
  flex-shrink: 0;
}

.step-card__help-toggle:hover {
  background: rgb(var(--color-quest-help-bg));
  border-color: rgb(var(--color-quest-help-border));
}

.step-card__help-toggle--open {
  background: rgb(var(--color-quest-help-bg));
  border-color: rgb(var(--color-quest-help-border));
}

.step-card__help-chevron {
  transition: transform 0.2s ease;
}

.step-card__help-chevron.rotate-180 {
  transform: rotate(180deg);
}

/* Help Panel */

.step-card__help-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
}

.step-card__help-panel--open {
  max-height: 500px;
  opacity: 1;
  padding: 0 1.5rem 1rem;
}

.step-card__help-inner {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgb(var(--color-quest-help-bg));
  border: 1px solid rgb(var(--color-quest-help-border));
}

.step-card__help-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-quest-help-bg));
  color: rgb(var(--color-quest-help-border));
}

.step-card__help-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-card__help-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: rgb(var(--color-quest-help-text));
}

.step-card__help-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(var(--color-quest-help-text));
}

/* ============================================================
     Form ADV cover filing-type picker (FIZZY-1453)
     ============================================================ */

.cover-filing__notice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(var(--color-quest-help-text));
  background: rgb(var(--color-quest-help-bg));
  border: 1px solid rgb(var(--color-quest-help-border));
}

.cover-filing__group {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(var(--color-text-tertiary));
  margin: 1.25rem 0 0.5rem;
}

.cover-filing__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.625rem;
  background: rgb(var(--color-surface));
  cursor: pointer;
}

.cover-filing__opt + .cover-filing__opt {
  margin-top: 0.5rem;
}

.cover-filing__opt--on {
  border-color: rgb(var(--color-info-text) / 0.4);
  background: rgb(var(--color-info-bg) / 0.5);
}

.cover-filing__opt input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.cover-filing__opt-body {
  display: flex;
  flex-direction: column;
}

.cover-filing__opt-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(var(--color-text));
}

.cover-filing__opt-desc {
  font-size: 0.8125rem;
  color: rgb(var(--color-text-tertiary));
  margin-top: 0.125rem;
}

.cover-filing__fye {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.625rem;
}

.cover-filing__fye-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-text-secondary));
}

/* ============================================================
     Form ADV execution page (FIZZY-1453)
     ============================================================ */

.exec-card {
  background: rgb(var(--color-surface));
  border-radius: 1rem;
  border: 1px solid rgb(var(--color-border));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  overflow: hidden;
}

.exec-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1rem;
}

.exec-card__hc {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.exec-card__iw {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-surface-tertiary));
  border: 1px solid rgb(var(--color-border));
  color: rgb(var(--color-text-secondary));
  font-size: 1.25rem;
}

.exec-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(var(--color-text));
  margin: 0;
}

.exec-card__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: rgb(var(--color-text-tertiary));
}

.exec-variant {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgb(var(--color-text-secondary));
  background: rgb(var(--color-surface-tertiary));
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.exec-card__intro {
  padding: 0 1.5rem 1rem;
}

.exec-card__intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(var(--color-text-secondary));
}

.exec-form {
  padding: 0 1.5rem 1.5rem;
}

.exec-clause {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.75rem;
  background: rgb(var(--color-surface));
}

.exec-clause + .exec-clause {
  margin-top: 0.625rem;
}

.exec-clause__num {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgb(var(--color-surface-inset));
  color: rgb(var(--color-text-secondary));
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exec-clause__body h4 {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.exec-clause__body p {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(var(--color-text-secondary));
}

.exec-ack {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-text));
  cursor: pointer;
}

.exec-info {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgb(var(--color-info-bg));
  border: 1px solid rgb(var(--color-info-border));
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgb(var(--color-info-text));
}

.exec-group {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(var(--color-text-tertiary));
  margin: 1.5rem 0 0.5rem;
}

.exec-sig {
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.75rem;
  background: rgb(var(--color-surface-secondary));
  padding: 1.125rem 1.25rem;
}

.exec-sig__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.exec-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-text-secondary));
  margin-bottom: 0.375rem;
}

.exec-req {
  color: rgb(var(--color-btn-danger));
}

.exec-sigline {
  font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 1.75rem;
  color: rgb(var(--color-text));
  padding: 0.375rem 0.875rem 0.25rem;
  border-bottom: 2px solid rgb(var(--color-text));
  background: rgb(var(--color-surface));
  border-radius: 0.625rem 0.625rem 0 0;
  min-height: 3.25rem;
  margin-bottom: 0.5rem;
}

.exec-hint {
  font-size: 0.75rem;
  color: rgb(var(--color-text-tertiary));
  margin: 0.375rem 0 0;
}

.exec-btnrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--color-border));
  flex-wrap: wrap;
}

.exec-lock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgb(var(--color-text-tertiary));
}

.exec-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  background: rgb(var(--color-btn-primary));
  color: #fff;
}

.exec-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.exec-done {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  margin: 0 1.5rem 1.5rem;
  padding: 1rem 1.125rem;
  border-radius: 0.75rem;
  background: rgb(var(--color-success-bg));
  border: 1px solid rgb(var(--color-success-border));
  color: rgb(var(--color-success-text));
}

.exec-done > i {
  font-size: 1.375rem;
  margin-top: 0.125rem;
}

.exec-done b {
  color: rgb(var(--color-success-text));
}

.exec-done__note {
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  color: rgb(var(--color-success-text));
}

.exec-kv {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.375rem 1rem;
  font-size: 0.875rem;
  margin-top: 0.625rem;
}

.exec-kv dt {
  color: rgb(var(--color-success-text) / 0.8);
}

.exec-kv dd {
  margin: 0;
  color: rgb(var(--color-success-text));
  font-weight: 500;
}

/* Intro Text */

.step-card__intro {
  padding: 0 1.5rem 1rem;
}

.step-card__intro p {
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(var(--color-quest-help-text));
}

/* Fields Grid */

.step-card__fields {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 0 1.5rem 1.5rem;
}

@media (min-width: 640px) {
  .step-card__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pro Tip */

.step-card__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 1.5rem 1.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgb(var(--color-warning-bg));
  border: 1px solid rgb(var(--color-warning-border));
}

.step-card__tip-icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: rgb(var(--color-warning-solid));
}

.step-card__tip-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.step-card__tip-label {
  font-weight: 600;
  color: rgb(var(--color-warning-solid));
}

.step-card__tip-text {
  color: rgb(var(--color-quest-help-text));
}

/* --- FRIENDLY FIELD STYLING --- */

.friendly-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.friendly-field__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-quest-help-text));
}

.friendly-field__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  background: rgb(var(--color-quest-field-bg));
  border: 2px solid rgb(var(--color-quest-field-border));
  color: rgb(var(--color-quest-field-text));
  transition: all 0.15s ease;
}

.friendly-field__input:hover {
  border-color: rgb(var(--color-quest-example-border));
}

.friendly-field__input:focus {
  outline: none;
  border-color: rgb(var(--color-form-focus-border));
  box-shadow: 0 0 0 4px rgb(var(--color-form-focus-border) / 0.1);
}

.friendly-field__input::-moz-placeholder {
  color: rgb(var(--color-quest-field-placeholder));
}

.friendly-field__input::placeholder {
  color: rgb(var(--color-quest-field-placeholder));
}

/* ============================================
     SINGLE-COLUMN QUESTIONNAIRE LAYOUT
     TurboTax-Style Focused Experience
     ============================================ */

/* --- QUESTIONNAIRE LAYOUT --- */

.questionnaire-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: rgb(var(--color-surface-secondary));
}

.questionnaire-layout__main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 4rem;
}

.questionnaire-layout__content {
  width: 100%;
  max-width: 680px;
}

.questionnaire-layout__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgb(var(--color-border));
}

.questionnaire-layout__header-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-btn-primary));
  color: white;
  font-size: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.questionnaire-layout__header-text {
  flex: 1;
  min-width: 0;
}

.questionnaire-layout__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: rgb(var(--color-text));
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.questionnaire-layout__description {
  font-size: 1rem;
  color: rgb(var(--color-text-tertiary));
  line-height: 1.5;
}

/* --- MINIMAL PROGRESS BAR --- */

.minimal-progress-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  background: rgb(var(--color-surface));
  border-bottom: 1px solid rgb(var(--color-border));
  box-shadow: var(--shadow-sm);
}

.minimal-progress-bar__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.minimal-progress-bar__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.minimal-progress-bar__nav--left {
  flex-shrink: 0;
}

.minimal-progress-bar__nav--right {
  flex-shrink: 0;
  margin-left: auto;
}

.minimal-progress-bar__back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: rgb(var(--color-text-tertiary));
  transition: all 0.15s ease;
}

.minimal-progress-bar__back-link:hover {
  background: rgb(var(--color-quest-step-current-bg));
  color: rgb(var(--color-form-focus-border));
}

.minimal-progress-bar__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.minimal-progress-bar__step-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.minimal-progress-bar__step-number {
  color: rgb(var(--color-text-tertiary));
  font-weight: 500;
}

.minimal-progress-bar__divider {
  color: rgb(var(--color-form-border));
}

.minimal-progress-bar__step-name {
  color: rgb(var(--color-text));
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minimal-progress-bar__track {
  height: 4px;
  background: rgb(var(--color-border));
  border-radius: 2px;
  overflow: hidden;
}

.minimal-progress-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease-out;
}

.minimal-progress-bar__percentage {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--color-text-tertiary));
  white-space: nowrap;
}

.minimal-progress-bar__review-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-text-secondary));
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border-strong));
  transition: all 0.15s ease;
}

.minimal-progress-bar__review-link:hover {
  background: rgb(var(--color-hover));
}

/* --- QUESTIONNAIRE FORM & NAV --- */

.questionnaire-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================
     QUESTIONNAIRE FORM INPUT STYLING
     Enhanced prominence and usability
     ============================================ */

/* --- Text Inputs, Textareas, Selects --- */

.questionnaire-form input[type="text"],
  .questionnaire-form input[type="number"],
  .questionnaire-form input[type="email"],
  .questionnaire-form input[type="tel"],
  .questionnaire-form input[type="url"],
  .questionnaire-form input[type="date"],
  .questionnaire-form input[type="password"],
  .questionnaire-form textarea,
  .questionnaire-form select {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(var(--color-form-text));
  background-color: rgb(var(--color-form-bg));
  background-clip: padding-box;
  border: 2px solid rgb(var(--color-form-border));
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Hover state - subtle border enhancement */

.questionnaire-form input[type="text"]:hover:not(:focus):not(:disabled),
  .questionnaire-form input[type="number"]:hover:not(:focus):not(:disabled),
  .questionnaire-form input[type="email"]:hover:not(:focus):not(:disabled),
  .questionnaire-form input[type="tel"]:hover:not(:focus):not(:disabled),
  .questionnaire-form input[type="url"]:hover:not(:focus):not(:disabled),
  .questionnaire-form input[type="date"]:hover:not(:focus):not(:disabled),
  .questionnaire-form input[type="password"]:hover:not(:focus):not(:disabled),
  .questionnaire-form textarea:hover:not(:focus):not(:disabled),
  .questionnaire-form select:hover:not(:focus):not(:disabled) {
  border-color: rgb(var(--color-form-placeholder));
  background-color: rgb(var(--color-form-bg));
}

/* Focus state - prominent ring */

.questionnaire-form input[type="text"]:focus,
  .questionnaire-form input[type="number"]:focus,
  .questionnaire-form input[type="email"]:focus,
  .questionnaire-form input[type="tel"]:focus,
  .questionnaire-form input[type="url"]:focus,
  .questionnaire-form input[type="date"]:focus,
  .questionnaire-form input[type="password"]:focus,
  .questionnaire-form textarea:focus,
  .questionnaire-form select:focus {
  outline: none;
  border-color: rgb(var(--color-form-focus-border));
  box-shadow: 0 0 0 4px rgb(var(--color-form-focus-border) / 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
  background-color: rgb(var(--color-form-bg));
}

/* Placeholder styling */

.questionnaire-form input::-moz-placeholder, .questionnaire-form textarea::-moz-placeholder {
  color: rgb(var(--color-form-placeholder));
  font-weight: 400;
}

.questionnaire-form input::placeholder,
  .questionnaire-form textarea::placeholder {
  color: rgb(var(--color-form-placeholder));
  font-weight: 400;
}

/* Disabled state */

.questionnaire-form input:disabled,
  .questionnaire-form textarea:disabled,
  .questionnaire-form select:disabled {
  background-color: rgb(var(--color-form-disabled-bg));
  border-color: rgb(var(--color-border));
  color: rgb(var(--color-form-placeholder));
  cursor: not-allowed;
  opacity: 0.8;
}

/* --- Textarea specific --- */

.questionnaire-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* --- Select specific with custom arrow ---
     CARET SYMMETRY (FIZZY-1180): the questionnaire control pads `1rem 1.25rem`,
     so the chevron inset must equal the 1.25rem left padding (was 1rem — the
     caret sat 4px closer to the edge than the text). */

.questionnaire-form select {
  padding-right: 3rem;
  /* inset 1.25 + 1.25em glyph + gap */
  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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 1.25rem center;
  /* == left padding 1.25rem (SYMMETRIC) */
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
}

/* --- Checkbox & Radio styling --- */

.questionnaire-form input[type="checkbox"],
  .questionnaire-form input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  margin-right: 0.75rem;
  border: 2px solid rgb(var(--color-form-border));
  border-radius: 0.375rem;
  background-color: rgb(var(--color-form-bg));
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.questionnaire-form input[type="radio"] {
  border-radius: 50%;
}

.questionnaire-form input[type="checkbox"]:hover:not(:disabled),
  .questionnaire-form input[type="radio"]:hover:not(:disabled) {
  border-color: rgb(var(--color-text-tertiary));
  background-color: rgb(var(--color-form-disabled-bg));
}

.questionnaire-form input[type="checkbox"]:focus,
  .questionnaire-form input[type="radio"]:focus {
  outline: none;
  border-color: rgb(var(--color-form-focus-border));
  box-shadow: 0 0 0 4px rgb(var(--color-form-focus-border) / 0.12);
}

.questionnaire-form input[type="checkbox"]:checked,
  .questionnaire-form input[type="radio"]:checked {
  background-color: rgb(var(--color-form-focus-border));
  border-color: rgb(var(--color-form-focus-border));
  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");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.questionnaire-form input[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='4'/%3e%3c/svg%3e");
}

/* --- Label styling --- */

.questionnaire-form label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(var(--color-form-text));
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Labels next to checkboxes/radios */

.questionnaire-form .flex.items-center label,
  .questionnaire-form div:has(> input[type="checkbox"]) label,
  .questionnaire-form div:has(> input[type="radio"]) label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

/* --- Required field indicator --- */

.questionnaire-form label.required::after,
  .questionnaire-form label[for]:has(+ input[required])::after {
  content: " *";
  color: rgb(var(--color-error-solid));
  font-weight: 600;
}

.questionnaire-form label.\!required::after {
  content: " *" !important;
  color: rgb(var(--color-error-solid)) !important;
  font-weight: 600 !important;
}

/* --- Input group styling (for currency, etc.) --- */

.questionnaire-form .relative input {
  padding-left: 2.5rem;
}

.questionnaire-form .relative span.absolute {
  font-size: 1rem;
  color: rgb(var(--color-text-tertiary));
  font-weight: 500;
}

/* TextArrayFieldComponent styles the add button (btn-secondary) and the remove
     control (Tailwind utilities) directly, so the old high-specificity descendant
     rules — whose display:inline-flex defeated the JS `hidden` toggle — are gone
     (FIZZY-1460). */

/* --- Input validation states ---
     The error border shows only after interaction: a field gains .was-validated
     on blur, and the whole form on submit (field_validation_controller.js). This
     replaces the old :not(:placeholder-shown) reliance, which left placeholder-less
     required selects red on first paint (FIZZY-1460). Selects behave like inputs. */

.questionnaire-form input.was-validated:invalid:not(:focus),
  .questionnaire-form textarea.was-validated:invalid:not(:focus),
  .questionnaire-form select.was-validated:invalid:not(:focus),
  .questionnaire-form.was-validated input:invalid:not(:focus),
  .questionnaire-form.was-validated textarea:invalid:not(:focus),
  .questionnaire-form.was-validated select:invalid:not(:focus) {
  border-color: rgb(var(--color-error-solid));
}

.questionnaire-form input:valid:not(:-moz-placeholder), .questionnaire-form textarea:valid:not(:-moz-placeholder) {
  /* Subtle success indicator - uncomment if desired */
  /* border-color: #4ade80; */
}

.questionnaire-form input:valid:not(:placeholder-shown),
  .questionnaire-form textarea:valid:not(:placeholder-shown),
  .questionnaire-form select:valid {
  /* Subtle success indicator - uncomment if desired */
  /* border-color: #4ade80; */
}

/* --- Animated focus indicator --- */

@keyframes input-focus-pulse {
  0% {
    box-shadow: 0 0 0 4px rgb(var(--color-form-focus-border) / 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  50% {
    box-shadow: 0 0 0 6px rgb(var(--color-form-focus-border) / 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  100% {
    box-shadow: 0 0 0 4px rgb(var(--color-form-focus-border) / 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
  }
}

/* --- Step Card field container adjustments --- */

.step-card__field {
  margin-bottom: 0.25rem;
}

.step-card__field > div {
  width: 100%;
}

/* --- Item 5.D client-type grid ---
     The grid cells render inside .questionnaire-form, whose generic
     input[type="text"] rules (block, full-width, 1rem 1.25rem padding, 2px
     border, .75rem radius, 1rem font) would blow the compact grid apart. These
     component-layer overrides restyle the grid inputs while leaving the border,
     focus ring and disabled treatment to the questionnaire rules (house rule 9:
     bare inputs). */

/* Fixed layout so the explicit column widths on the header cells (w-auto /
     w-24 / w-14 / w-40) govern the table and it never lays out wider than the
     step card's field area. The wrapper is overflow-x-auto as a last-resort
     fallback so nothing is ever clipped. */

.client-type-grid table {
  table-layout: fixed;
  width: 100%;
}

.questionnaire-form .client-type-grid input[type="text"] {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.5rem;
}

.client-type-grid input[type="text"][inputmode="numeric"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.client-type-grid .client-type-grid__raum input {
  padding-left: 1.75rem;
}

.questionnaire-form .client-type-grid input[type="checkbox"] {
  margin-right: 0;
}

/* Dark mode handled via CSS variables - no media query overrides needed */

/* ============================================
     END QUESTIONNAIRE FORM INPUT STYLING
     ============================================ */

.questionnaire-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgb(var(--color-error-bg));
  border: 1px solid rgb(var(--color-error-border));
  border-radius: 0.75rem;
}

.questionnaire-error-banner__icon {
  flex-shrink: 0;
  color: rgb(var(--color-error-solid));
  font-size: 1.125rem;
}

.questionnaire-error-banner__content h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--color-error-text));
  margin-bottom: 0.5rem;
}

.questionnaire-error-banner__content ul {
  list-style: disc;
  list-style-position: inside;
  font-size: 0.875rem;
  color: rgb(var(--color-error-text));
}

.questionnaire-nav {
  margin-top: 1rem;
  padding: 1.5rem;
  background: rgb(var(--color-surface));
  border-radius: 1rem;
  border: 1px solid rgb(var(--color-border));
  box-shadow: var(--shadow-sm);
}

.questionnaire-nav__buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.questionnaire-nav__spacer {
  width: 120px;
}

.questionnaire-nav__primary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.questionnaire-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}

.questionnaire-nav__btn--primary {
  background: rgb(var(--color-btn-primary));
  color: white;
  box-shadow: var(--shadow-sm);
}

.questionnaire-nav__btn--primary:hover {
  background: rgb(var(--color-btn-primary-hover));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.questionnaire-nav__btn--secondary {
  background: rgb(var(--color-quest-card-bg));
  color: rgb(var(--color-text-secondary));
  border: 1px solid rgb(var(--color-form-border));
}

.questionnaire-nav__btn--secondary:hover {
  background: rgb(var(--color-form-disabled-bg));
  border-color: rgb(var(--color-form-placeholder));
}

.questionnaire-nav__btn--ghost {
  background: transparent;
  color: rgb(var(--color-text-tertiary));
  padding: 0.875rem 1rem;
}

.questionnaire-nav__btn--ghost:hover {
  background: rgb(var(--color-quest-step-current-bg));
  color: rgb(var(--color-form-focus-border));
}

.questionnaire-nav__encouragement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--color-border));
  font-size: 0.875rem;
  color: rgb(var(--color-text-tertiary));
}

.questionnaire-nav__encouragement i {
  color: rgb(var(--color-success-solid));
}

/* --- HELP DRAWER --- */

.help-drawer {
  position: fixed;
  z-index: 50;
}

.help-drawer__trigger {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  z-index: 51;
}

.help-drawer__trigger:hover {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.5);
  transform: translateY(-2px);
}

.help-drawer__trigger--active {
  background: #334155;
  box-shadow: 0 4px 12px rgba(51, 65, 85, 0.4);
}

.help-drawer__trigger--active:hover {
  background: #1e293b;
}

.help-drawer__trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.help-drawer__trigger-label {
  display: none;
}

@media (min-width: 640px) {
  .help-drawer__trigger-label {
    display: inline;
  }
}

.help-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 49;
}

.help-drawer__backdrop--visible {
  opacity: 1;
}

.help-drawer-body-locked {
  overflow: hidden;
}

@media (min-width: 768px) {
  .help-drawer-body-locked {
    overflow: auto;
  }
}

.help-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-surface));
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 52;
}

.help-drawer__panel--open {
  transform: translateX(0);
}

.help-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgb(var(--color-surface-secondary)), rgb(var(--color-surface-tertiary)));
  border-bottom: 1px solid rgb(var(--color-border));
}

.help-drawer__header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.help-drawer__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: white;
  font-size: 1.125rem;
}

.help-drawer__header-text {
  display: flex;
  flex-direction: column;
}

.help-drawer__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.help-drawer__subtitle {
  font-size: 0.75rem;
  color: rgb(var(--color-text-tertiary));
}

.help-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: rgb(var(--color-text-tertiary));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.help-drawer__close:hover {
  background: rgb(var(--color-surface-tertiary));
  color: rgb(var(--color-text));
}

/* Tips Section */

.help-drawer__tips {
  border-bottom: 1px solid rgb(var(--color-border));
}

.help-drawer__tips-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-text));
  cursor: pointer;
  transition: background 0.15s ease;
}

.help-drawer__tips-header:hover {
  background: rgb(var(--color-hover));
}

.help-drawer__tips-content {
  padding: 0 1.25rem 1rem;
  font-size: 0.875rem;
  color: rgb(var(--color-text-secondary));
  overflow: hidden;
  transition: all 0.2s ease;
}

.help-drawer__tips-content--collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.help-drawer__help-text {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.help-drawer__tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.help-drawer__tips-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.help-drawer__tips-list li i {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Chat Section */

.help-drawer__chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.help-drawer__suggestions {
  padding: 1rem 1.25rem;
  background: rgb(var(--color-surface-secondary));
  border-bottom: 1px solid rgb(var(--color-border));
}

.help-drawer__suggestions-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--color-text-tertiary));
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.help-drawer__suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.help-drawer__suggestion-btn {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: #7c3aed;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.help-drawer__suggestion-btn:hover {
  background: #faf5ff;
  border-color: #c4b5fd;
  color: #6d28d9;
}

.help-drawer__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.help-drawer__empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: rgb(var(--color-text-muted));
}

.help-drawer__empty-state i {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.help-drawer__empty-state p {
  font-size: 0.875rem;
  line-height: 1.5;
}

.help-drawer__thinking {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: #faf5ff;
  font-size: 0.8125rem;
  color: #7c3aed;
}

.help-drawer__thinking-dots {
  display: flex;
  gap: 0.25rem;
}

.help-drawer__thinking-dots span {
  width: 0.5rem;
  height: 0.5rem;
  background: #8b5cf6;
  border-radius: 50%;
  animation: thinking-bounce 1.4s ease-in-out infinite;
}

.help-drawer__thinking-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.help-drawer__thinking-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes thinking-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }

  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Agent thinking indicator — reusable bouncing dots */

.agent-thinking-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
}

.agent-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.agent-thinking-dots span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgb(var(--color-accent-text));
  animation: agent-thinking-bounce 1.4s ease-in-out infinite;
}

.agent-thinking-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.agent-thinking-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes agent-thinking-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Agent step entrance animation */

.agent-step {
  animation: agent-step-enter 0.3s ease-out both;
}

@keyframes agent-step-enter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.help-drawer__input-area {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-secondary));
}

.help-drawer__form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.help-drawer__input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(var(--color-border-strong));
  border-radius: 0.75rem;
  font-size: 0.875rem;
  resize: none;
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text));
  transition: all 0.15s ease;
}

.help-drawer__input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.help-drawer__send-btn {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.help-drawer__send-btn:hover {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  transform: scale(1.05);
}

.help-drawer__send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.help-drawer__footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-tertiary));
  text-align: center;
}

.help-drawer__expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: rgb(var(--color-text-tertiary));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.help-drawer__expand-btn:hover {
  color: #7c3aed;
}

/* ============================================
     ANNOTATED DOCUMENT VIEWER
     Pulse animations for bi-directional issue linking
     ============================================ */

@keyframes annotation-pulse {
  0% {
    background-color: inherit;
  }

  25% {
    background-color: rgba(147, 51, 234, 0.15);
  }

  50% {
    background-color: rgba(147, 51, 234, 0.25);
  }

  75% {
    background-color: rgba(147, 51, 234, 0.15);
  }

  100% {
    background-color: inherit;
  }
}

.annotation-pulse {
  animation: annotation-pulse 1s ease-out;
}

@keyframes annotation-highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.4);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.3);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
  }
}

.annotation-highlight-pulse {
  animation: annotation-highlight-pulse 1s ease-out;
}

.annotation-highlight {
  transition: box-shadow 0.2s ease;
}

.annotation-highlight:hover {
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.3);
}

/* ============================================
     END ANNOTATED DOCUMENT VIEWER
     ============================================ */

/* ============================================
     PDF.js VIEWER
     ============================================ */

.pdf-viewer-pages {
  padding: 1rem;
}

.pdf-page-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
  background: rgb(var(--color-surface));
  --tw-shadow: var(--shadow-sm);
  --tw-shadow-colored: var(--shadow-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  overflow: hidden;
}

.pdf-page-wrapper canvas {
  display: block;
  width: 100%;
  height: auto;
}

.pdf-text-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.25;
  line-height: 1;
}

.pdf-text-layer span {
  position: absolute;
  white-space: pre;
  color: transparent;
  pointer-events: all;
}

.pdf-text-layer span::-moz-selection {
  background: rgba(0, 100, 200, 0.3);
}

.pdf-text-layer span::selection {
  background: rgba(0, 100, 200, 0.3);
}

.pdf-highlights-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.pdf-highlight {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 2px;
  mix-blend-mode: multiply;
  transition: box-shadow 0.2s ease;
}

/* Severity colors — underline via box-shadow renders below the element, avoiding text overlap */

.pdf-highlight-critical {
  background-color: rgb(var(--color-error-solid) / 0.12);
  box-shadow: 0 3px 0 0 rgb(var(--color-error-solid) / 0.5);
}

.pdf-highlight-critical:hover {
  box-shadow: 0 3px 0 0 rgb(var(--color-error-solid) / 0.5), 0 0 0 2px rgb(var(--color-accent-text) / 0.3);
}

.pdf-highlight-major {
  background-color: rgb(var(--color-warning-solid) / 0.12);
  box-shadow: 0 3px 0 0 rgb(var(--color-warning-solid) / 0.5);
}

.pdf-highlight-major:hover {
  box-shadow: 0 3px 0 0 rgb(var(--color-warning-solid) / 0.5), 0 0 0 2px rgb(var(--color-accent-text) / 0.3);
}

.pdf-highlight-minor {
  background-color: rgb(var(--color-warning-solid) / 0.08);
  box-shadow: 0 3px 0 0 rgb(var(--color-warning-solid) / 0.35);
}

.pdf-highlight-minor:hover {
  box-shadow: 0 3px 0 0 rgb(var(--color-warning-solid) / 0.35), 0 0 0 2px rgb(var(--color-accent-text) / 0.3);
}

.pdf-highlight-suggestion {
  background-color: rgb(var(--color-info-solid) / 0.1);
  box-shadow: 0 3px 0 0 rgb(var(--color-info-solid) / 0.4);
}

.pdf-highlight-suggestion:hover {
  box-shadow: 0 3px 0 0 rgb(var(--color-info-solid) / 0.4), 0 0 0 2px rgb(var(--color-accent-text) / 0.3);
}

/* Issue number badges on PDF highlights */

.pdf-issue-badge {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  line-height: 1;
  z-index: 3;
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  pointer-events: auto;
}

.pdf-issue-badge-critical {
  background-color: rgb(var(--color-error-solid) / 0.9);
}

.pdf-issue-badge-major {
  background-color: rgb(var(--color-warning-solid) / 0.9);
  color: rgb(26 26 26);
}

.pdf-issue-badge-minor {
  background-color: rgb(var(--color-warning-solid) / 0.7);
  color: rgb(26 26 26);
}

.pdf-issue-badge-suggestion {
  background-color: rgb(var(--color-info-solid) / 0.85);
}

/* Compact pins for omission issues (missing disclaimers, etc.) */

.pdf-page-marker-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 4;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.pdf-page-marker-pin:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.pdf-page-marker-pin i {
  font-size: 10px;
}

.pdf-page-marker-pin-critical {
  background-color: rgb(var(--color-error-solid));
  color: rgb(var(--color-text-on-dark));
}

.pdf-page-marker-pin-major {
  background-color: rgb(var(--color-warning-solid));
  color: rgb(26 26 26);
}

.pdf-page-marker-pin-minor {
  background-color: rgb(var(--color-warning-solid) / 0.8);
  color: rgb(26 26 26);
}

.pdf-page-marker-pin-suggestion {
  background-color: rgb(var(--color-info-solid));
  color: rgb(var(--color-text-on-dark));
}

/* Annotation visibility toggles */

.pdf-annotations-hidden .pdf-highlight,
  .pdf-annotations-hidden .pdf-issue-badge,
  .pdf-annotations-hidden .pdf-page-marker-pin {
  display: none !important;
}

.pdf-highlight[data-annotation-hidden="true"],
  .pdf-issue-badge[data-annotation-hidden="true"],
  .pdf-page-marker-pin[data-annotation-hidden="true"] {
  display: none !important;
}

.pdf-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-surface-tertiary));
}

/* ============================================
     END PDF.js VIEWER
     ============================================ */

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 640px) {
  .questionnaire-layout__main {
    padding: 1rem 0.75rem 3rem;
  }

  .questionnaire-layout__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }

  .questionnaire-layout__header-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    font-size: 1.25rem;
  }

  .questionnaire-layout__title {
    font-size: 1.25rem;
  }

  .questionnaire-layout__description {
    font-size: 0.875rem;
  }

  .minimal-progress-bar__container {
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .minimal-progress-bar__center {
    order: 3;
    flex-basis: 100%;
  }

  .minimal-progress-bar__step-info {
    font-size: 0.75rem;
    justify-content: center;
  }

  .minimal-progress-bar__percentage {
    font-size: 0.6875rem;
  }

  .minimal-progress-bar__review-link {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
  }

  .step-card__header {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    padding-bottom: 0.75rem;
  }

  .step-card__header-content {
    gap: 0.75rem;
  }

  .step-card__icon-wrapper {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
  }

  .step-card__icon {
    font-size: 1rem;
  }

  .step-card__title {
    font-size: 1.0625rem;
  }

  .step-card__help-toggle {
    align-self: flex-start;
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
  }

  .step-card__help-panel--open {
    padding: 0 1rem 0.75rem;
  }

  .step-card__help-inner {
    padding: 0.75rem;
  }

  .step-card__intro {
    padding: 0 1rem 0.75rem;
  }

  .step-card__fields {
    padding: 0 1rem 1rem;
    gap: 1rem;
  }

  .step-card__tip {
    margin: 0 1rem 1rem;
    padding: 0.75rem;
  }

  .questionnaire-nav {
    padding: 1rem;
    border-radius: 0.75rem;
  }

  .questionnaire-nav__buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .questionnaire-nav__spacer {
    display: none;
  }

  .questionnaire-nav__btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .questionnaire-nav__primary {
    width: 100%;
    flex-direction: column;
  }

  .questionnaire-nav__status {
    justify-content: center;
  }

  .questionnaire-nav__encouragement {
    font-size: 0.8125rem;
  }
}

.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-0 {
  inset: 0px;
}

.inset-4 {
  inset: 1rem;
}

.inset-x-4 {
  left: 1rem;
  right: 1rem;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-bottom-0\.5 {
  bottom: -0.125rem;
}

.-left-2 {
  left: -0.5rem;
}

.-left-5 {
  left: -1.25rem;
}

.-right-0\.5 {
  right: -0.125rem;
}

.-right-1 {
  right: -0.25rem;
}

.-right-1\.5 {
  right: -0.375rem;
}

.-right-5 {
  right: -1.25rem;
}

.-top-1 {
  top: -0.25rem;
}

.-top-1\.5 {
  top: -0.375rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-14 {
  bottom: 3.5rem;
}

.bottom-16 {
  bottom: 4rem;
}

.bottom-20 {
  bottom: 5rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1 {
  left: 0.25rem;
}

.left-1\/2 {
  left: 50%;
}

.left-14 {
  left: 3.5rem;
}

.left-2 {
  left: 0.5rem;
}

.left-2\.5 {
  left: 0.625rem;
}

.left-3 {
  left: 0.75rem;
}

.left-4 {
  left: 1rem;
}

.left-6 {
  left: 1.5rem;
}

.left-64 {
  left: 16rem;
}

.left-8 {
  left: 2rem;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-1 {
  right: 0.25rem;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-12 {
  right: 3rem;
}

.right-2 {
  right: 0.5rem;
}

.right-2\.5 {
  right: 0.625rem;
}

.right-20 {
  right: 5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-6 {
  right: 1.5rem;
}

.right-8 {
  right: 2rem;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\.5 {
  top: 0.375rem;
}

.top-1\/2 {
  top: 50%;
}

.top-1\/3 {
  top: 33.333333%;
}

.top-14 {
  top: 3.5rem;
}

.top-16 {
  top: 4rem;
}

.top-2 {
  top: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}

.top-3\.5 {
  top: 0.875rem;
}

.top-4 {
  top: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.top-6 {
  top: 1.5rem;
}

.top-full {
  top: 100%;
}

.isolate {
  isolation: isolate;
}

.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-\[100\] {
  z-index: 100;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[55\] {
  z-index: 55;
}

.z-\[5\] {
  z-index: 5;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[70\] {
  z-index: 70;
}

.z-\[9980\] {
  z-index: 9980;
}

.z-\[9990\] {
  z-index: 9990;
}

.z-\[9999\] {
  z-index: 9999;
}

.z-drawer {
  z-index: 48;
}

.z-dropdown {
  z-index: 45;
}

.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-4 {
  grid-column: span 4 / span 4;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

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

.col-start-2 {
  grid-column-start: 2;
}

.\!m-0 {
  margin: 0px !important;
}

.-m-1 {
  margin: -0.25rem;
}

.-m-2 {
  margin: -0.5rem;
}

.m-0 {
  margin: 0px;
}

.m-6 {
  margin: 1.5rem;
}

.m-auto {
  margin: auto;
}

.-mx-0\.5 {
  margin-left: -0.125rem;
  margin-right: -0.125rem;
}

.-mx-1\.5 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

.-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-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.-my-0\.5 {
  margin-top: -0.125rem;
  margin-bottom: -0.125rem;
}

.-my-1 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}

.-my-3 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}

.-my-\[6px\] {
  margin-top: -6px;
  margin-bottom: -6px;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.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-\[20px\] {
  margin-left: 20px;
  margin-right: 20px;
}

.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-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.-mb-3 {
  margin-bottom: -0.75rem;
}

.-mb-8 {
  margin-bottom: -2rem;
}

.-mb-px {
  margin-bottom: -1px;
}

.-ml-0\.5 {
  margin-left: -0.125rem;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-ml-px {
  margin-left: -1px;
}

.-mr-0\.5 {
  margin-right: -0.125rem;
}

.-mr-1 {
  margin-right: -0.25rem;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.-mr-2\.5 {
  margin-right: -0.625rem;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mt-2 {
  margin-top: -0.5rem;
}

.-mt-3 {
  margin-top: -0.75rem;
}

.-mt-4 {
  margin-top: -1rem;
}

.-mt-6 {
  margin-top: -1.5rem;
}

.-mt-px {
  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-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-3\.5 {
  margin-bottom: 0.875rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-\[20px\] {
  margin-bottom: 20px;
}

.mb-\[6px\] {
  margin-bottom: 6px;
}

.mb-\[8px\] {
  margin-bottom: 8px;
}

.me-0\.5 {
  margin-inline-end: 0.125rem;
}

.me-1 {
  margin-inline-end: 0.25rem;
}

.me-1\.5 {
  margin-inline-end: 0.375rem;
}

.me-2 {
  margin-inline-end: 0.5rem;
}

.me-2\.5 {
  margin-inline-end: 0.625rem;
}

.me-3 {
  margin-inline-end: 0.75rem;
}

.ml-0 {
  margin-left: 0px;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-12 {
  margin-left: 3rem;
}

.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-6 {
  margin-left: 1.5rem;
}

.ml-7 {
  margin-left: 1.75rem;
}

.ml-8 {
  margin-left: 2rem;
}

.ml-9 {
  margin-left: 2.25rem;
}

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

.mr-0\.5 {
  margin-right: 0.125rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-2\.5 {
  margin-right: 0.625rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.ms-0\.5 {
  margin-inline-start: 0.125rem;
}

.ms-1 {
  margin-inline-start: 0.25rem;
}

.ms-1\.5 {
  margin-inline-start: 0.375rem;
}

.ms-2 {
  margin-inline-start: 0.5rem;
}

.ms-3 {
  margin-inline-start: 0.75rem;
}

.ms-auto {
  margin-inline-start: 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-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[-1\.5rem\] {
  margin-top: -1.5rem;
}

.mt-\[-20px\] {
  margin-top: -20px;
}

.mt-\[1px\] {
  margin-top: 1px;
}

.mt-\[2px\] {
  margin-top: 2px;
}

.mt-\[3px\] {
  margin-top: 3px;
}

.mt-\[4px\] {
  margin-top: 4px;
}

.mt-\[5px\] {
  margin-top: 5px;
}

.mt-\[6px\] {
  margin-top: 6px;
}

.mt-\[7px\] {
  margin-top: 7px;
}

.mt-\[8px\] {
  margin-top: 8px;
}

.mt-\[9px\] {
  margin-top: 9px;
}

.mt-auto {
  margin-top: auto;
}

.mt-px {
  margin-top: 1px;
}

.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-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.\!table {
  display: table !important;
}

.table {
  display: table;
}

.flow-root {
  display: flow-root;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.list-item {
  display: list-item;
}

.hidden {
  display: none;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.\!h-auto {
  height: auto !important;
}

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.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-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-32 {
  height: 8rem;
}

.h-36 {
  height: 9rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[1\.6rem\] {
  height: 1.6rem;
}

.h-\[11px\] {
  height: 11px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[30px\] {
  height: 30px;
}

.h-\[34px\] {
  height: 34px;
}

.h-\[38px\] {
  height: 38px;
}

.h-\[420px\] {
  height: 420px;
}

.h-\[44px\] {
  height: 44px;
}

.h-\[720px\] {
  height: 720px;
}

.h-\[7px\] {
  height: 7px;
}

.h-\[calc\(100vh-\#\{top_offset\}px\)\] {
  height: calc(100vh - #{top offset}px);
}

.h-auto {
  height: auto;
}

.h-dvh {
  height: 100dvh;
}

.h-full {
  height: 100%;
}

.h-max {
  height: -moz-max-content;
  height: max-content;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-32 {
  max-height: 8rem;
}

.max-h-36 {
  max-height: 9rem;
}

.max-h-40 {
  max-height: 10rem;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-56 {
  max-height: 14rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-64 {
  max-height: 16rem;
}

.max-h-72 {
  max-height: 18rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-96 {
  max-height: 24rem;
}

.max-h-\[150px\] {
  max-height: 150px;
}

.max-h-\[500px\] {
  max-height: 500px;
}

.max-h-\[600px\] {
  max-height: 600px;
}

.max-h-\[60vh\] {
  max-height: 60vh;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-\[80px\] {
  max-height: 80px;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-\[85vh\] {
  max-height: 85vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-\[calc\(100vh-200px\)\] {
  max-height: calc(100vh - 200px);
}

.max-h-\[calc\(100vh-4rem\)\] {
  max-height: calc(100vh - 4rem);
}

.min-h-0 {
  min-height: 0px;
}

.min-h-10 {
  min-height: 2.5rem;
}

.min-h-11 {
  min-height: 2.75rem;
}

.min-h-9 {
  min-height: 2.25rem;
}

.min-h-96 {
  min-height: 24rem;
}

.min-h-\[100px\] {
  min-height: 100px;
}

.min-h-\[10rem\] {
  min-height: 10rem;
}

.min-h-\[118px\] {
  min-height: 118px;
}

.min-h-\[12rem\] {
  min-height: 12rem;
}

.min-h-\[16rem\] {
  min-height: 16rem;
}

.min-h-\[2\.75rem\] {
  min-height: 2.75rem;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[20px\] {
  min-height: 20px;
}

.min-h-\[28px\] {
  min-height: 28px;
}

.min-h-\[300px\] {
  min-height: 300px;
}

.min-h-\[32px\] {
  min-height: 32px;
}

.min-h-\[36px\] {
  min-height: 36px;
}

.min-h-\[42px\] {
  min-height: 42px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[48px\] {
  min-height: 48px;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.min-h-\[69px\] {
  min-height: 69px;
}

.min-h-\[70px\] {
  min-height: 70px;
}

.min-h-\[80px\] {
  min-height: 80px;
}

.min-h-\[calc\(100vh-80px\)\] {
  min-height: calc(100vh - 80px);
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.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-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.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-20 {
  width: 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\/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-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[11px\] {
  width: 11px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[280px\] {
  width: 280px;
}

.w-\[30px\] {
  width: 30px;
}

.w-\[34px\] {
  width: 34px;
}

.w-\[36\%\] {
  width: 36%;
}

.w-\[38px\] {
  width: 38px;
}

.w-\[44px\] {
  width: 44px;
}

.w-\[62\%\] {
  width: 62%;
}

.w-\[7\.5rem\] {
  width: 7.5rem;
}

.w-\[7px\] {
  width: 7px;
}

.w-\[94\%\] {
  width: 94%;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-40 {
  min-width: 10rem;
}

.min-w-48 {
  min-width: 12rem;
}

.min-w-5 {
  min-width: 1.25rem;
}

.min-w-64 {
  min-width: 16rem;
}

.min-w-\[1\.25rem\] {
  min-width: 1.25rem;
}

.min-w-\[1\.5rem\] {
  min-width: 1.5rem;
}

.min-w-\[1\.6rem\] {
  min-width: 1.6rem;
}

.min-w-\[100px\] {
  min-width: 100px;
}

.min-w-\[104px\] {
  min-width: 104px;
}

.min-w-\[10rem\] {
  min-width: 10rem;
}

.min-w-\[11rem\] {
  min-width: 11rem;
}

.min-w-\[120px\] {
  min-width: 120px;
}

.min-w-\[12rem\] {
  min-width: 12rem;
}

.min-w-\[140px\] {
  min-width: 140px;
}

.min-w-\[14rem\] {
  min-width: 14rem;
}

.min-w-\[150px\] {
  min-width: 150px;
}

.min-w-\[160px\] {
  min-width: 160px;
}

.min-w-\[180px\] {
  min-width: 180px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[20px\] {
  min-width: 20px;
}

.min-w-\[220px\] {
  min-width: 220px;
}

.min-w-\[230px\] {
  min-width: 230px;
}

.min-w-\[2rem\] {
  min-width: 2rem;
}

.min-w-\[36rem\] {
  min-width: 36rem;
}

.min-w-\[40rem\] {
  min-width: 40rem;
}

.min-w-\[44px\] {
  min-width: 44px;
}

.min-w-\[56rem\] {
  min-width: 56rem;
}

.min-w-\[60px\] {
  min-width: 60px;
}

.min-w-\[7rem\] {
  min-width: 7rem;
}

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

.max-w-2xl {
  max-width: 42rem;
}

.max-w-32 {
  max-width: 8rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[10rem\] {
  max-width: 10rem;
}

.max-w-\[120px\] {
  max-width: 120px;
}

.max-w-\[12rem\] {
  max-width: 12rem;
}

.max-w-\[140px\] {
  max-width: 140px;
}

.max-w-\[14rem\] {
  max-width: 14rem;
}

.max-w-\[16rem\] {
  max-width: 16rem;
}

.max-w-\[180px\] {
  max-width: 180px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[250px\] {
  max-width: 250px;
}

.max-w-\[360px\] {
  max-width: 360px;
}

.max-w-\[480px\] {
  max-width: 480px;
}

.max-w-\[50\%\] {
  max-width: 50%;
}

.max-w-\[600px\] {
  max-width: 600px;
}

.max-w-\[7\.5rem\] {
  max-width: 7.5rem;
}

.max-w-\[70\%\] {
  max-width: 70%;
}

.max-w-\[75\%\] {
  max-width: 75%;
}

.max-w-\[7rem\] {
  max-width: 7rem;
}

.max-w-\[80\%\] {
  max-width: 80%;
}

.max-w-\[80px\] {
  max-width: 80px;
}

.max-w-\[85\%\] {
  max-width: 85%;
}

.max-w-\[90\%\] {
  max-width: 90%;
}

.max-w-\[95\%\] {
  max-width: 95%;
}

.max-w-\[calc\(100vw-1rem\)\] {
  max-width: calc(100vw - 1rem);
}

.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}

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

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-none {
  max-width: none;
}

.max-w-prose {
  max-width: 65ch;
}

.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-\[2_1_220px\] {
  flex: 2 1 220px;
}

.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;
}

.grow {
  flex-grow: 1;
}

.basis-44 {
  flex-basis: 11rem;
}

.basis-auto {
  flex-basis: auto;
}

.basis-full {
  flex-basis: 100%;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1 {
  --tw-translate-x: -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-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-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\/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-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-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-\[110\%\] {
  --tw-translate-y: 110%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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-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-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));
}

.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-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-\[1\.01\] {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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));
}

@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;
}

.cursor-default {
  cursor: default;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

.cursor-grab {
  cursor: grab;
}

.cursor-move {
  cursor: move;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.touch-none {
  touch-action: none;
}

.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-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

.scroll-mt-4 {
  scroll-margin-top: 1rem;
}

.scroll-mt-6 {
  scroll-margin-top: 1.5rem;
}

.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;
}

.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-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}

.grid-cols-\[28px_1fr\] {
  grid-template-columns: 28px 1fr;
}

.grid-cols-\[minmax\(0\2c 1fr\)\] {
  grid-template-columns: minmax(0,1fr);
}

.grid-cols-\[repeat\(auto-fill\2c minmax\(230px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
}

.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;
}

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

.place-items-center {
  place-items: center;
}

.content-start {
  align-content: flex-start;
}

.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;
}

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

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

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

.justify-around {
  justify-content: space-around;
}

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[10px\] {
  gap: 10px;
}

.gap-\[11px\] {
  gap: 11px;
}

.gap-\[12px\] {
  gap: 12px;
}

.gap-\[16px\] {
  gap: 16px;
}

.gap-\[18px\] {
  gap: 18px;
}

.gap-\[20px\] {
  gap: 20px;
}

.gap-\[5px\] {
  gap: 5px;
}

.gap-\[6px\] {
  gap: 6px;
}

.gap-\[7px\] {
  gap: 7px;
}

.gap-\[8px\] {
  gap: 8px;
}

.gap-px {
  gap: 1px;
}

.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-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-3\.5 {
  -moz-column-gap: 0.875rem;
       column-gap: 0.875rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-x-\[14px\] {
  -moz-column-gap: 14px;
       column-gap: 14px;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-2\.5 {
  row-gap: 0.625rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.gap-y-\[4px\] {
  row-gap: 4px;
}

.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-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-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * 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-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * 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-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-\[18px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(18px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(18px * 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-edge > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-divide-opacity, 1));
}

.divide-edge-strong > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-border-strong) / var(--tw-divide-opacity, 1));
}

.divide-edge-subtle > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-border-subtle) / var(--tw-divide-opacity, 1));
}

.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-divide-opacity, 1));
}

.divide-red-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-divide-opacity, 1));
}

.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;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

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

.text-ellipsis {
  text-overflow: ellipsis;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

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

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

.break-words {
  overflow-wrap: break-word;
}

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

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[12px\] {
  border-radius: 12px;
}

.rounded-\[6px\] {
  border-radius: 6px;
}

.rounded-\[8px\] {
  border-radius: 8px;
}

.rounded-\[9px\] {
  border-radius: 9px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-bl-lg {
  border-bottom-left-radius: 0.5rem;
}

.rounded-bl-md {
  border-bottom-left-radius: 0.375rem;
}

.rounded-bl-sm {
  border-bottom-left-radius: 0.125rem;
}

.rounded-br-md {
  border-bottom-right-radius: 0.375rem;
}

.rounded-br-sm {
  border-bottom-right-radius: 0.125rem;
}

.rounded-tl-sm {
  border-top-left-radius: 0.125rem;
}

.rounded-tr-md {
  border-top-right-radius: 0.375rem;
}

.\!border-0 {
  border-width: 0px !important;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.\!border-t-0 {
  border-top-width: 0px !important;
}

.border-b {
  border-bottom-width: 1px;
}

.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-l-\[3px\] {
  border-left-width: 3px;
}

.border-r {
  border-right-width: 1px;
}

.border-r-4 {
  border-right-width: 4px;
}

.border-s-2 {
  border-inline-start-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-dashed {
  border-style: dashed;
}

.border-\[rgb\(var\(--color-form-border\)\)\] {
  border-color: rgb(var(--color-form-border));
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-200\/60 {
  border-color: rgb(253 230 138 / 0.6);
}

.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-amber-500\/20 {
  border-color: rgb(245 158 11 / 0.2);
}

.border-amber-600 {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}

.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}

.border-btn-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-btn-primary) / var(--tw-border-opacity, 1));
}

.border-content-muted {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-text-muted) / var(--tw-border-opacity, 1));
}

.border-cyan-200 {
  --tw-border-opacity: 1;
  border-color: rgb(165 243 252 / var(--tw-border-opacity, 1));
}

.border-edge {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
}

.border-edge-strong {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-strong) / var(--tw-border-opacity, 1));
}

.border-edge-strong\/40 {
  border-color: rgb(var(--color-border-strong) / 0.4);
}

.border-edge-subtle {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-subtle) / var(--tw-border-opacity, 1));
}

.border-edge\/50 {
  border-color: rgb(var(--color-border) / 0.5);
}

.border-edge\/60 {
  border-color: rgb(var(--color-border) / 0.6);
}

.border-edge\/80 {
  border-color: rgb(var(--color-border) / 0.8);
}

.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / 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-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-green-100 {
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-600 {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}

.border-indigo-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}

.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / 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-600 {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

.border-slate-700\/30 {
  border-color: rgb(51 65 85 / 0.3);
}

.border-slate-700\/50 {
  border-color: rgb(51 65 85 / 0.5);
}

.border-slate-800 {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}

.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}

.border-status-accent-border {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-border) / var(--tw-border-opacity, 1));
}

.border-status-accent-solid {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-solid) / var(--tw-border-opacity, 1));
}

.border-status-error-bg {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-bg) / var(--tw-border-opacity, 1));
}

.border-status-error-border {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-border) / var(--tw-border-opacity, 1));
}

.border-status-error-solid {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-solid) / var(--tw-border-opacity, 1));
}

.border-status-info-border {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-border) / var(--tw-border-opacity, 1));
}

.border-status-info-solid {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-solid) / var(--tw-border-opacity, 1));
}

.border-status-success-border {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success-border) / var(--tw-border-opacity, 1));
}

.border-status-success-solid {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success-solid) / var(--tw-border-opacity, 1));
}

.border-status-warning-border {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning-border) / var(--tw-border-opacity, 1));
}

.border-status-warning-solid {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning-solid) / var(--tw-border-opacity, 1));
}

.border-status-warning-solid\/55 {
  border-color: rgb(var(--color-warning-solid) / 0.55);
}

.border-status-warning-text {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning-text) / var(--tw-border-opacity, 1));
}

.border-surface {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface) / var(--tw-border-opacity, 1));
}

.border-teal-200 {
  --tw-border-opacity: 1;
  border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
}

.border-teal-800 {
  --tw-border-opacity: 1;
  border-color: rgb(17 94 89 / var(--tw-border-opacity, 1));
}

.border-th-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-link) / var(--tw-border-opacity, 1));
}

.border-th-link {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-link) / var(--tw-border-opacity, 1));
}

.border-th-ring {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-ring) / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-violet-800 {
  --tw-border-opacity: 1;
  border-color: rgb(91 33 182 / var(--tw-border-opacity, 1));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}

.border-b-transparent {
  border-bottom-color: transparent;
}

.border-l-blue-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-l-edge-strong {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-border-strong) / var(--tw-border-opacity, 1));
}

.border-l-status-error-border {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-error-border) / var(--tw-border-opacity, 1));
}

.border-l-status-error-solid {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-error-solid) / var(--tw-border-opacity, 1));
}

.border-l-status-info-border {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-info-border) / var(--tw-border-opacity, 1));
}

.border-l-status-success-solid {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-success-solid) / var(--tw-border-opacity, 1));
}

.border-l-status-warning-border {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-warning-border) / var(--tw-border-opacity, 1));
}

.border-l-status-warning-solid {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-warning-solid) / var(--tw-border-opacity, 1));
}

.border-l-transparent {
  border-left-color: transparent;
}

.border-r-surface-secondary {
  --tw-border-opacity: 1;
  border-right-color: rgb(var(--color-surface-secondary) / var(--tw-border-opacity, 1));
}

.border-t-blue-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-t-content-tertiary {
  --tw-border-opacity: 1;
  border-top-color: rgb(var(--color-text-tertiary) / var(--tw-border-opacity, 1));
}

.border-t-slate-600 {
  --tw-border-opacity: 1;
  border-top-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.border-t-status-info-text {
  --tw-border-opacity: 1;
  border-top-color: rgb(var(--color-info-text) / var(--tw-border-opacity, 1));
}

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[\#0A66C2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 102 194 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1877F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(24 119 242 / var(--tw-bg-opacity, 1));
}

.bg-\[rgb\(var\(--color-form-bg\)\)\] {
  background-color: rgb(var(--color-form-bg));
}

.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-50\/50 {
  background-color: rgb(255 251 235 / 0.5);
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}

.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 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-400\/10 {
  background-color: rgb(96 165 250 / 0.1);
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 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-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-brand\/10 {
  background-color: rgb(59 130 246 / 0.1);
}

.bg-btn-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-danger) / var(--tw-bg-opacity, 1));
}

.bg-btn-info {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-info) / var(--tw-bg-opacity, 1));
}

.bg-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
}

.bg-btn-primary\/10 {
  background-color: rgb(var(--color-btn-primary) / 0.1);
}

.bg-btn-success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-success) / var(--tw-bg-opacity, 1));
}

.bg-btn-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-warning) / var(--tw-bg-opacity, 1));
}

.bg-content {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-text) / var(--tw-bg-opacity, 1));
}

.bg-content-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-text-muted) / var(--tw-bg-opacity, 1));
}

.bg-content-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-text-secondary) / var(--tw-bg-opacity, 1));
}

.bg-content-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-text-tertiary) / var(--tw-bg-opacity, 1));
}

.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}

.bg-cyan-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}

.bg-cyan-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}

.bg-cyan-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}

.bg-cyan-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}

.bg-edge {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-border) / var(--tw-bg-opacity, 1));
}

.bg-edge-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-border-strong) / var(--tw-bg-opacity, 1));
}

.bg-edge-strong\/60 {
  background-color: rgb(var(--color-border-strong) / 0.6);
}

.bg-edge-subtle {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-border-subtle) / var(--tw-bg-opacity, 1));
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50\/30 {
  background-color: rgb(236 253 245 / 0.3);
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.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-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.bg-gray-700\/50 {
  background-color: rgb(55 65 81 / 0.5);
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}

.bg-lime-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-pink-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1));
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}

.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}

.bg-sky-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / 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-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.bg-slate-900\/40 {
  background-color: rgb(15 23 42 / 0.4);
}

.bg-slate-900\/60 {
  background-color: rgb(15 23 42 / 0.6);
}

.bg-status-accent-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-bg) / var(--tw-bg-opacity, 1));
}

.bg-status-accent-bg\/50 {
  background-color: rgb(var(--color-accent-bg) / 0.5);
}

.bg-status-accent-solid {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-solid) / var(--tw-bg-opacity, 1));
}

.bg-status-error-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-bg) / var(--tw-bg-opacity, 1));
}

.bg-status-error-bg\/30 {
  background-color: rgb(var(--color-error-bg) / 0.3);
}

.bg-status-error-bg\/40 {
  background-color: rgb(var(--color-error-bg) / 0.4);
}

.bg-status-error-bg\/50 {
  background-color: rgb(var(--color-error-bg) / 0.5);
}

.bg-status-error-solid {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-solid) / var(--tw-bg-opacity, 1));
}

.bg-status-error-solid\/50 {
  background-color: rgb(var(--color-error-solid) / 0.5);
}

.bg-status-info-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-bg) / var(--tw-bg-opacity, 1));
}

.bg-status-info-bg\/25 {
  background-color: rgb(var(--color-info-bg) / 0.25);
}

.bg-status-info-bg\/30 {
  background-color: rgb(var(--color-info-bg) / 0.3);
}

.bg-status-info-bg\/35 {
  background-color: rgb(var(--color-info-bg) / 0.35);
}

.bg-status-info-bg\/40 {
  background-color: rgb(var(--color-info-bg) / 0.4);
}

.bg-status-info-bg\/50 {
  background-color: rgb(var(--color-info-bg) / 0.5);
}

.bg-status-info-border {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-border) / var(--tw-bg-opacity, 1));
}

.bg-status-info-solid {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-solid) / var(--tw-bg-opacity, 1));
}

.bg-status-info-text\/15 {
  background-color: rgb(var(--color-info-text) / 0.15);
}

.bg-status-info-text\/20 {
  background-color: rgb(var(--color-info-text) / 0.2);
}

.bg-status-success-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-bg) / var(--tw-bg-opacity, 1));
}

.bg-status-success-bg\/30 {
  background-color: rgb(var(--color-success-bg) / 0.3);
}

.bg-status-success-solid {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-solid) / var(--tw-bg-opacity, 1));
}

.bg-status-success-text {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-text) / var(--tw-bg-opacity, 1));
}

.bg-status-warning-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-bg) / var(--tw-bg-opacity, 1));
}

.bg-status-warning-bg\/30 {
  background-color: rgb(var(--color-warning-bg) / 0.3);
}

.bg-status-warning-bg\/40 {
  background-color: rgb(var(--color-warning-bg) / 0.4);
}

.bg-status-warning-bg\/60 {
  background-color: rgb(var(--color-warning-bg) / 0.6);
}

.bg-status-warning-solid {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-solid) / var(--tw-bg-opacity, 1));
}

.bg-status-warning-solid\/70 {
  background-color: rgb(var(--color-warning-solid) / 0.7);
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.bg-surface-elevated {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-elevated) / var(--tw-bg-opacity, 1));
}

.bg-surface-group-header {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-group-header) / var(--tw-bg-opacity, 1));
}

.bg-surface-inset {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-inset) / var(--tw-bg-opacity, 1));
}

.bg-surface-inset\/40 {
  background-color: rgb(var(--color-surface-inset) / 0.4);
}

.bg-surface-overlay {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-overlay) / var(--tw-bg-opacity, 1));
}

.bg-surface-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
}

.bg-surface-secondary\/50 {
  background-color: rgb(var(--color-surface-secondary) / 0.5);
}

.bg-surface-secondary\/60 {
  background-color: rgb(var(--color-surface-secondary) / 0.6);
}

.bg-surface-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
}

.bg-surface-tertiary\/50 {
  background-color: rgb(var(--color-surface-tertiary) / 0.5);
}

.bg-surface-tertiary\/60 {
  background-color: rgb(var(--color-surface-tertiary) / 0.6);
}

.bg-surface\/20 {
  background-color: rgb(var(--color-surface) / 0.2);
}

.bg-surface\/50 {
  background-color: rgb(var(--color-surface) / 0.5);
}

.bg-surface\/70 {
  background-color: rgb(var(--color-surface) / 0.7);
}

.bg-surface\/80 {
  background-color: rgb(var(--color-surface) / 0.8);
}

.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}

.bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}

.bg-teal-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}

.bg-th-accent\/10 {
  background-color: rgb(var(--color-link) / 0.1);
}

.bg-th-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-th-bg) / var(--tw-bg-opacity, 1));
}

.bg-th-hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-hover) / var(--tw-bg-opacity, 1));
}

.bg-th-link {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-link) / var(--tw-bg-opacity, 1));
}

.bg-th-link\/10 {
  background-color: rgb(var(--color-link) / 0.1);
}

.bg-th-link\/70 {
  background-color: rgb(var(--color-link) / 0.7);
}

.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-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-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-\[linear-gradient\(135deg\2c \#F58529\2c \#DD2A7B\2c \#8134AF\)\] {
  background-image: linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);
}

.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-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500\/10 {
  --tw-gradient-from: rgb(59 130 246 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-600 {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-cyan-500\/20 {
  --tw-gradient-from: rgb(6 182 212 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-400 {
  --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500\/10 {
  --tw-gradient-from: rgb(16 185 129 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-600 {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-50 {
  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-page-gradient-from {
  --tw-gradient-from: rgb(var(--color-page-gradient-from) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-page-gradient-from) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-600 {
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-100 {
  --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-50 {
  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-700 {
  --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);
}

.from-slate-800 {
  --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);
}

.from-status-error-solid {
  --tw-gradient-from: rgb(var(--color-error-solid) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-error-solid) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-status-info-bg {
  --tw-gradient-from: rgb(var(--color-info-bg) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-info-bg) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-status-success-solid {
  --tw-gradient-from: rgb(var(--color-success-solid) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-success-solid) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-surface-secondary {
  --tw-gradient-from: rgb(var(--color-surface-secondary) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-surface-secondary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-teal-600 {
  --tw-gradient-from: #0d9488 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-violet-600 {
  --tw-gradient-from: #7c3aed var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(124 58 237 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-blue-500\/20 {
  --tw-gradient-to: rgb(59 130 246 / 0.2) var(--tw-gradient-to-position);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.to-cyan-50 {
  --tw-gradient-to: #ecfeff var(--tw-gradient-to-position);
}

.to-edge-strong {
  --tw-gradient-to: rgb(var(--color-border-strong) / 1) var(--tw-gradient-to-position);
}

.to-emerald-500 {
  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}

.to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}

.to-green-700 {
  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
}

.to-indigo-100 {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);
}

.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

.to-indigo-500\/10 {
  --tw-gradient-to: rgb(99 102 241 / 0.1) var(--tw-gradient-to-position);
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}

.to-orange-500 {
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}

.to-page-gradient-to {
  --tw-gradient-to: rgb(var(--color-page-gradient-to) / 1) var(--tw-gradient-to-position);
}

.to-purple-50 {
  --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);
}

.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-red-700 {
  --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
}

.to-slate-100\/80 {
  --tw-gradient-to: rgb(241 245 249 / 0.8) var(--tw-gradient-to-position);
}

.to-slate-200 {
  --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position);
}

.to-slate-700 {
  --tw-gradient-to: #334155 var(--tw-gradient-to-position);
}

.to-slate-800 {
  --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}

.to-status-error-solid\/90 {
  --tw-gradient-to: rgb(var(--color-error-solid) / 0.9) var(--tw-gradient-to-position);
}

.to-status-success-solid\/90 {
  --tw-gradient-to: rgb(var(--color-success-solid) / 0.9) var(--tw-gradient-to-position);
}

.to-surface {
  --tw-gradient-to: rgb(var(--color-surface) / 1) var(--tw-gradient-to-position);
}

.to-surface-secondary {
  --tw-gradient-to: rgb(var(--color-surface-secondary) / 1) var(--tw-gradient-to-position);
}

.to-teal-500\/10 {
  --tw-gradient-to: rgb(20 184 166 / 0.1) var(--tw-gradient-to-position);
}

.to-teal-700 {
  --tw-gradient-to: #0f766e var(--tw-gradient-to-position);
}

.to-violet-700 {
  --tw-gradient-to: #6d28d9 var(--tw-gradient-to-position);
}

.box-decoration-clone {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.fill-content-tertiary {
  fill: rgb(var(--color-text-tertiary) / 1);
}

.fill-current {
  fill: currentColor;
}

.fill-none {
  fill: none;
}

.fill-status-success-text {
  fill: rgb(var(--color-success-text) / 1);
}

.fill-th-link {
  fill: rgb(var(--color-link) / 1);
}

.stroke-edge {
  stroke: rgb(var(--color-border) / 1);
}

.stroke-status-error-solid {
  stroke: rgb(var(--color-error-solid) / 1);
}

.stroke-status-info-solid {
  stroke: rgb(var(--color-info-solid) / 1);
}

.stroke-status-success-solid {
  stroke: rgb(var(--color-success-solid) / 1);
}

.stroke-status-warning-solid {
  stroke: rgb(var(--color-warning-solid) / 1);
}

.stroke-surface-tertiary {
  stroke: rgb(var(--color-surface-tertiary) / 1);
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.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-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-\[20px\] {
  padding: 20px;
}

.p-\[22px\] {
  padding: 22px;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.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-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[10px\] {
  padding-left: 10px;
  padding-right: 10px;
}

.px-\[14px\] {
  padding-left: 14px;
  padding-right: 14px;
}

.px-\[20px\] {
  padding-left: 20px;
  padding-right: 20px;
}

.px-\[7px\] {
  padding-left: 7px;
  padding-right: 7px;
}

.px-\[9px\] {
  padding-left: 9px;
  padding-right: 9px;
}

.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-11 {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.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-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-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-\[11px\] {
  padding-top: 11px;
  padding-bottom: 11px;
}

.py-\[12px\] {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-\[14px\] {
  padding-top: 14px;
  padding-bottom: 14px;
}

.py-\[16px\] {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-\[34px\] {
  padding-top: 34px;
  padding-bottom: 34px;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[40px\] {
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-\[6px\] {
  padding-top: 6px;
  padding-bottom: 6px;
}

.py-\[9px\] {
  padding-top: 9px;
  padding-bottom: 9px;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.\!pr-9 {
  padding-right: 2.25rem !important;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-1\.5 {
  padding-bottom: 0.375rem;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-\[14px\] {
  padding-bottom: 14px;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-11 {
  padding-left: 2.75rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-2\.5 {
  padding-left: 0.625rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.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;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-2\.5 {
  padding-right: 0.625rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pr-9 {
  padding-right: 2.25rem;
}

.ps-2 {
  padding-inline-start: 0.5rem;
}

.ps-2\.5 {
  padding-inline-start: 0.625rem;
}

.ps-3 {
  padding-inline-start: 0.75rem;
}

.ps-5 {
  padding-inline-start: 1.25rem;
}

.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-2\.5 {
  padding-top: 0.625rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-3\.5 {
  padding-top: 0.875rem;
}

.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-\[12px\] {
  padding-top: 12px;
}

.pt-\[14px\] {
  padding-top: 14px;
}

.pt-\[6px\] {
  padding-top: 6px;
}

.pt-px {
  padding-top: 1px;
}

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

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

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

.align-baseline {
  vertical-align: baseline;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.align-bottom {
  vertical-align: bottom;
}

.font-sans {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[0\.5rem\] {
  font-size: 0.5rem;
}

.text-\[0\.65rem\] {
  font-size: 0.65rem;
}

.text-\[0\.6875rem\] {
  font-size: 0.6875rem;
}

.text-\[0\.6rem\] {
  font-size: 0.6rem;
}

.text-\[0\.8125rem\] {
  font-size: 0.8125rem;
}

.text-\[0\.95rem\] {
  font-size: 0.95rem;
}

.text-\[1\.05rem\] {
  font-size: 1.05rem;
}

.text-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11\.5px\] {
  font-size: 11.5px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12\.5px\] {
  font-size: 12.5px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[34px\] {
  font-size: 34px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.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;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.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-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.35\] {
  line-height: 1.35;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}

.tracking-\[\.05em\] {
  letter-spacing: .05em;
}

.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-\[0\.5em\] {
  letter-spacing: 0.5em;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.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-\[\#0A66C2\] {
  --tw-text-opacity: 1;
  color: rgb(10 102 194 / var(--tw-text-opacity, 1));
}

.text-\[\#1877F2\] {
  --tw-text-opacity: 1;
  color: rgb(24 119 242 / var(--tw-text-opacity, 1));
}

.text-\[\#E4405F\] {
  --tw-text-opacity: 1;
  color: rgb(228 64 95 / var(--tw-text-opacity, 1));
}

.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}

.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.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-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.text-blue-300\/80 {
  color: rgb(147 197 253 / 0.8);
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / 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-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-brand {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-brand-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-btn-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-primary) / var(--tw-text-opacity, 1));
}

.text-content {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-opacity, 1));
}

.text-content-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-text-opacity, 1));
}

.text-content-on-dark {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-on-dark) / var(--tw-text-opacity, 1));
}

.text-content-secondary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
}

.text-content-tertiary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity, 1));
}

.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}

.text-cyan-600 {
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}

.text-cyan-700 {
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}

.text-cyan-800 {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}

.text-edge {
  --tw-text-opacity: 1;
  color: rgb(var(--color-border) / var(--tw-text-opacity, 1));
}

.text-edge-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--color-border-strong) / var(--tw-text-opacity, 1));
}

.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}

.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.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-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / 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-green-100 {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-indigo-900 {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-orange-900 {
  --tw-text-opacity: 1;
  color: rgb(124 45 18 / var(--tw-text-opacity, 1));
}

.text-pink-500 {
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}

.text-purple-200 {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.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-100 {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}

.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}

.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}

.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / 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-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-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-status-accent-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-text) / var(--tw-text-opacity, 1));
}

.text-status-error-solid {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-solid) / var(--tw-text-opacity, 1));
}

.text-status-error-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-text) / var(--tw-text-opacity, 1));
}

.text-status-error-text\/80 {
  color: rgb(var(--color-error-text) / 0.8);
}

.text-status-info-solid {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-solid) / var(--tw-text-opacity, 1));
}

.text-status-info-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-text) / var(--tw-text-opacity, 1));
}

.text-status-success-solid {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-solid) / var(--tw-text-opacity, 1));
}

.text-status-success-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-text) / var(--tw-text-opacity, 1));
}

.text-status-success-text\/60 {
  color: rgb(var(--color-success-text) / 0.6);
}

.text-status-success-text\/80 {
  color: rgb(var(--color-success-text) / 0.8);
}

.text-status-success-text\/90 {
  color: rgb(var(--color-success-text) / 0.9);
}

.text-status-warning-solid {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-solid) / var(--tw-text-opacity, 1));
}

.text-status-warning-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-text) / var(--tw-text-opacity, 1));
}

.text-status-warning-text\/80 {
  color: rgb(var(--color-warning-text) / 0.8);
}

.text-status-warning-text\/90 {
  color: rgb(var(--color-warning-text) / 0.9);
}

.text-surface {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface) / var(--tw-text-opacity, 1));
}

.text-teal-100 {
  --tw-text-opacity: 1;
  color: rgb(204 251 241 / var(--tw-text-opacity, 1));
}

.text-teal-500 {
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

.text-th-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--color-link) / var(--tw-text-opacity, 1));
}

.text-th-link {
  --tw-text-opacity: 1;
  color: rgb(var(--color-link) / var(--tw-text-opacity, 1));
}

.text-th-link-hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-link-hover) / var(--tw-text-opacity, 1));
}

.text-th-link\/70 {
  color: rgb(var(--color-link) / 0.7);
}

.text-th-ring {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ring) / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

.text-violet-200 {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}

.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

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

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.decoration-slate-400 {
  text-decoration-color: #94a3b8;
}

.decoration-dotted {
  text-decoration-style: dotted;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-content-muted::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-placeholder-opacity, 1));
}

.placeholder-content-muted::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-placeholder-opacity, 1));
}

.placeholder-content-tertiary::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-placeholder-opacity, 1));
}

.placeholder-content-tertiary::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}

.placeholder-slate-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}

.placeholder-slate-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}

.accent-btn-primary {
  accent-color: rgb(var(--color-btn-primary) / 1);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-25 {
  opacity: 0.25;
}

.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-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.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-\[inset_3px_0_0_rgb\(var\(--color-info-solid\)\)\] {
  --tw-shadow: inset 3px 0 0 rgb(var(--color-info-solid));
  --tw-shadow-colored: inset 3px 0 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: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 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-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 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-theme-lg {
  --tw-shadow: var(--shadow-lg);
  --tw-shadow-colored: var(--shadow-lg);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-theme-md {
  --tw-shadow: var(--shadow-md);
  --tw-shadow-colored: var(--shadow-md);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-theme-sm {
  --tw-shadow: var(--shadow-sm);
  --tw-shadow-colored: var(--shadow-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-theme-up-sm {
  --tw-shadow: var(--shadow-up-sm);
  --tw-shadow-colored: var(--shadow-up-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-theme-xl {
  --tw-shadow: var(--shadow-xl);
  --tw-shadow-colored: var(--shadow-xl);
  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 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-blue-500\/30 {
  --tw-shadow-color: rgb(59 130 246 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-status-info-solid\/30 {
  --tw-shadow-color: rgb(var(--color-info-solid) / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.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-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-4 {
  --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(4px + 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-8 {
  --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(8px + 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-amber-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity, 1));
}

.ring-amber-600\/20 {
  --tw-ring-color: rgb(217 119 6 / 0.2);
}

.ring-black {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.ring-blue-600\/20 {
  --tw-ring-color: rgb(37 99 235 / 0.2);
}

.ring-edge {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-border) / var(--tw-ring-opacity, 1));
}

.ring-edge-strong\/20 {
  --tw-ring-color: rgb(var(--color-border-strong) / 0.2);
}

.ring-green-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.ring-green-600\/20 {
  --tw-ring-color: rgb(22 163 74 / 0.2);
}

.ring-orange-600\/20 {
  --tw-ring-color: rgb(234 88 12 / 0.2);
}

.ring-purple-600\/20 {
  --tw-ring-color: rgb(147 51 234 / 0.2);
}

.ring-red-600\/20 {
  --tw-ring-color: rgb(220 38 38 / 0.2);
}

.ring-slate-800 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity, 1));
}

.ring-status-info-border {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-border) / var(--tw-ring-opacity, 1));
}

.ring-status-success-border {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-success-border) / var(--tw-ring-opacity, 1));
}

.ring-status-warning-border {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-warning-border) / var(--tw-ring-opacity, 1));
}

.ring-surface {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface) / var(--tw-ring-opacity, 1));
}

.ring-th-link {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-link) / var(--tw-ring-opacity, 1));
}

.ring-th-ring {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.ring-th-ring\/40 {
  --tw-ring-color: rgb(var(--color-ring) / 0.4);
}

.ring-opacity-5 {
  --tw-ring-opacity: 0.05;
}

.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.ring-offset-surface {
  --tw-ring-offset-color: rgb(var(--color-surface) / 1);
}

.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);
}

.blur-md {
  --tw-blur: blur(12px);
  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 {
  --tw-backdrop-blur: blur(8px);
  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-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-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, 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-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-shadow {
  transition-property: box-shadow;
  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;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-75 {
  transition-duration: 75ms;
}

.duration-\[250ms\] {
  transition-duration: 250ms;
}

.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-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\@container {
  container-type: inline-size;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.select-none-appearance {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-area-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.h-dvh {
  height: 100vh;
  height: 100dvh;
}

.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------
   Mobile / PWA safe-area utilities
   -------------------------------------------------------- */

/* --------------------------------------------------------
   Safe-area inset fixes for PWA standalone and native app.
   In regular Safari the browser chrome naturally clears
   the notch / Dynamic Island and home indicator.
   -------------------------------------------------------- */

@media (display-mode: standalone) and (max-width: 767px) {
  .pwa-safe-header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(3.5rem + env(safe-area-inset-top, 0px));
  }

  .pwa-safe-sidebar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .pwa-safe-content {
    padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }

  .pwa-safe-chat-input {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Installed PWA on a phone: keep the toast at the bottom (above the tab bar),
     matching the base mobile rule, so it never covers the header (FIZZY-2167). */

  #toast-notifications {
    top: auto;
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px) + 1rem);
  }
}

/* Native app (Turbo Native) — same safe-area rules via body class */

.turbo-native .pwa-safe-header {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(3.5rem + env(safe-area-inset-top, 0px));
}

.turbo-native .pwa-safe-sidebar {
  padding-top: env(safe-area-inset-top, 0px);
}

.turbo-native .pwa-safe-content {
  padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
}

.turbo-native .pwa-safe-chat-input {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.turbo-native #toast-notifications {
  /* Native keeps the toast at the top; bottom:auto guards against ever having
     both top and bottom set (FIZZY-2167). */
  top: calc(4rem + env(safe-area-inset-top, 0px));
  bottom: auto;
}

/* While the iOS "Install RegFin" banner is on screen on a phone, lift the
   bottom toast clear of it (same mechanism as the tutorial launcher FAB —
   install_prompt_offset_controller publishes --install-prompt-offset and adds
   .install-prompt-visible). FIZZY-2167. */

@media (max-width: 767px) {
  #toast-notifications.install-prompt-visible {
    bottom: var(--install-prompt-offset);
  }

  /* The bottom-docked toast sits beside the Page Guides FAB (right-20 reserves
     its column), so it must be allowed to shrink below the default 320px toast
     min-width to fit — otherwise it would overflow back under the FAB. Scoped
     to the bottom-docked container so the native/devise top toasts are
     untouched. FIZZY-2167. */

  .toast-dock-bottom .toast-notification {
    min-width: 0;
  }
}

/* --------------------------------------------------------
   Tutorial launcher FAB ↔ iOS install prompt (card #433)
   While the "Install RegFin" banner is on screen,
   install_prompt_offset_controller adds .install-prompt-visible
   and sets --install-prompt-offset (measured from the banner) so
   the FAB clears it. Only below the md breakpoint, where the
   banner shows; otherwise the FAB keeps its Tailwind position.
   -------------------------------------------------------- */

@media (max-width: 767px) {
  #tutorial-launcher.install-prompt-visible {
    bottom: var(--install-prompt-offset);
  }
}

/* --------------------------------------------------------
   Draggable tutorial launcher FAB (card #445)
   fab_draggable_controller lets users drag the FAB to any
   spot. The handle (the FAB button) advertises draggability
   with a grab cursor and never scrolls the page under a drag
   (touch-action: none). While dragging it lifts above peers
   and gets a bit of feedback; a reset glides it back.
   -------------------------------------------------------- */

/* User-dragged position: fab_draggable publishes --fab-left/--fab-top and sets
   this flag; the flag gates the rule, so removing it reverts the FAB to its
   Tailwind corner. Mirrors how install_prompt_offset publishes
   --install-prompt-offset for CSS to apply. */

#tutorial-launcher[data-fab-custom-positioned] {
  top: var(--fab-top);
  left: var(--fab-left);
  right: auto;
  bottom: auto;
}

#tutorial-launcher [data-fab-draggable-target="handle"] {
  cursor: grab;
  touch-action: none;
}

#tutorial-launcher.fab-dragging {
  z-index: 60;
}

#tutorial-launcher.fab-dragging [data-fab-draggable-target="handle"] {
  cursor: grabbing;
  transform: scale(1.08);
  box-shadow: var(--shadow-xl);
  /* themed elevation — reads in dark mode too */
}

#tutorial-launcher.fab-resetting {
  transition: transform 0.25s ease;
}

/* --------------------------------------------------------
   Chat navigation buttons — rendered from {{nav:path|Label}}
   tokens in assistant messages.
   -------------------------------------------------------- */

.questionnaire-form .flex.chat-nav-button label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.chat-nav-button {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-on-dark) / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  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;
}

.chat-nav-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary-hover) / var(--tw-bg-opacity, 1));
}

/* Download variant of the chat button — rendered from {{download:path|Label}}
   tokens (FIZZY-1249). Same primary styling as the nav button; the label span
   truncates long filenames with an ellipsis so the button never blows out the
   chat column width. */

.questionnaire-form .flex.chat-download-button label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.chat-download-button {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-on-dark) / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  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;
}

.chat-download-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary-hover) / var(--tw-bg-opacity, 1));
}

.chat-download-button {
  max-width: 100%;
}

.chat-download-label {
  display: inline-block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* --------------------------------------------------------
   Mobile: hide the chat drawer entirely.
   The drawer uses position:fixed which escapes display:none
   parents, so we must force-hide the drawer and its overlay
   directly, and prevent marginRight on main content.
   -------------------------------------------------------- */

@media (max-width: 767px) {
  [data-controller="chat-drawer"] {
    display: none !important;
  }

  [data-chat-layout-target="mainContent"] {
    margin-right: 0 !important;
  }
}

/* --------------------------------------------------------
   Responsive table container
   Mobile: full width minus content padding
   Desktop: account for sidebar (16rem) + content padding
   -------------------------------------------------------- */

.table-container-width {
  max-width: calc(100vw - 1.5rem);
}

@media (min-width: 768px) {
  .table-container-width {
    max-width: calc(100vw - 16rem - 3rem);
  }
}

/* ============================================
   DARK MODE AMBIENT EFFECTS
   Subtle radial gradient mesh behind content and
   card surface sheen from the RegFin design system.
   ============================================ */

.dark .pwa-safe-content::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px circle at 12% -10%, rgb(var(--color-nav-gradient-start) / 0.08), transparent 50%),
    radial-gradient(700px circle at 95% 10%, rgb(var(--color-nav-gradient-mid) / 0.06), transparent 50%),
    radial-gradient(800px circle at 60% 100%, rgb(var(--color-nav-gradient-end) / 0.05), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.dark .pwa-safe-content > *:not(.topbar-glass):not(#toast-notifications) {
  position: relative;
  z-index: 1;
}

/* While an interactive tutorial runs, drop that z-index:1 cap. It makes each
   column a stacking context, which traps the tutorial's highlighted element
   (raised to z-index 9999) under the tutorial backdrop, so in dark mode the
   element showed at half brightness as if disabled. The column is still
   positioned, so it still paints above the gradient ::before (z-index 0, earlier
   in tree order). An open modal's z-50 lift below still wins (more specific). */

html.tutorial-active.dark .pwa-safe-content > *:not(.topbar-glass):not(#toast-notifications) {
  z-index: auto;
}

/* A page-level modal lives inside the z-index:1 column above, which would trap it
   under the dark topbar (z-index:10) and the fixed mobile header (z-40), hiding
   the modal's header. Lift the column to the modal layer (z-50) while a modal
   overlay is actually VISIBLE.

   The overlay signal is any `.fixed.inset-0` (what every modal/drawer backdrop
   uses) OR an `[aria-modal="true"]` dialog, but ONLY when that element is itself
   visible — not `.hidden`, and not a descendant of a `.hidden` ancestor
   (`.hidden *`). That exclusion is the crux (FIZZY-2032):

   - A CLOSED modal hides its WRAPPER with `.hidden` (every modal controller here
     — simple/modal_form/frame/schedule/preset/detail/dashboard/confirm/side_drawer
     — toggles `.hidden` on the wrapper/overlay), but leaves its inner backdrop
     (`.fixed.inset-0`, no `.hidden`) in the DOM. The original rule keyed on
     `.fixed.inset-0:not(.hidden)` matched that backdrop and pinned the column to
     z-50 permanently on any page merely CONTAINING a modal (the consulting
     Overview's escalation modal, billing's add-payment modal), dropping the
     user/notifications dropdowns behind the page and making "Exit firm"
     unreachable. `.hidden *` now excludes a backdrop nested in a hidden wrapper.
   - Some modals ship a STATIC `aria-modal="true"` on their CLOSED hidden wrapper
     (e.g. the escalate-button modal on ~12 show pages); `:not(.hidden)` excludes
     the wrapper and `.hidden *` excludes any inner marked element, so those pages
     are not pinned either.

   An OPEN modal's wrapper/overlay is a visible `.fixed.inset-0` (no `.hidden`
   ancestor), so the column still rises and the modal covers the topbar. Light
   mode never applies the z-index:1 cap, so it is unaffected. */

.dark .pwa-safe-content > *:not(.topbar-glass):not(#toast-notifications):has(:is(.fixed.inset-0, [aria-modal="true"]):not(.hidden, .hidden *, .properties-panel)) {
  z-index: 50;
}

/* An open in-page slide-over (the form builder's Field Properties below xl)
   lifts the column only to the drawer layer: over the fixed mobile header and
   tab bar (40), still under the toast stack (50), which is a sibling of the
   column. The modal rule above would put the column level with the toasts and
   paint over them, so it leaves the panel out (its open state is
   aria-modal="true") and its backdrop is not `.fixed.inset-0`. A real modal
   opened on top of it still lifts the column to 50. */

.dark .pwa-safe-content > *:not(.topbar-glass):not(#toast-notifications):has(.properties-panel.drawer-open) {
  z-index: 48;
}

/* MODAL SHELL — keep a centered modal still under the mouse wheel.

   Shared::ModalShellComponent carries all of this itself (`!m-0 !border-0
   overscroll-contain` on its overlay, a `min-h-full` centering box), and the
   app's Tailwind modals render through it. This rule now matters only for the
   dialogs allowlisted in test/lint/modal_shell_guard_test.rb that still
   hand-write a `fixed inset-0 overflow-y-auto` element: the global
   confirmation dialog, the feedback sheet and the task context overlay. Drop
   it once those use the shell.

   Modal overlays were `fixed inset-0 z-50 overflow-y-auto` wrapping a
   `flex items-center justify-center min-h-screen` centering box. Two things made
   that overlay scroll a few pixels even when the card fitted, so turning the
   wheel nudged the whole modal up and down:

   - The overlay is rendered inline in the page, often as a later child of a
     `space-y-*` (or `divide-y`) stack, which gives it a top margin (or border).
     A fixed inset-0 box with a 1rem margin is 1rem shorter than the viewport,
     while its 100vh centering box is not: 16px of overflow (the consultant
     dashboard's overdue-tasks and escalation review modals).
   - `min-h-screen` is 100vh, which on mobile browsers is the LARGE viewport
     (toolbar hidden) and so taller than the overlay itself.

   So the overlay never takes a margin or border, the centering box is sized to
   the overlay (100%, i.e. `min-h-full`, which a new shell can use directly)
   rather than the viewport, and overscroll is contained so a
   card that is taller than the screen scrolls inside the overlay without the
   page behind it moving. The `:not([hidden])` lifts the selector to (0,4,0) so
   it beats `.space-y-* > :not([hidden]) ~ :not([hidden])` (0,3,0) by
   specificity, not source order — Tailwind emits the responsive `md:space-y-*`
   variants AFTER this block. The `min-h-screen` centering box must be a DIRECT
   child of the overlay for the 100% override to apply. */

.fixed.inset-0.overflow-y-auto:not([hidden]) {
  margin: 0;
  border-width: 0;
  overscroll-behavior: contain;
}

.fixed.inset-0.overflow-y-auto > .min-h-screen {
  min-height: 100%;
}

.dark .pwa-safe-sidebar {
  background: linear-gradient(180deg, rgb(var(--color-surface-nav-top)) 0%, rgb(var(--color-surface-inset)) 100%) !important;
  border-color: rgb(var(--color-border) / 0.5) !important;
}

.dark .bg-surface {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.dark .topbar-glass {
  background: linear-gradient(90deg, rgb(var(--color-surface-nav-top) / 0.95) 0%, rgb(var(--color-surface) / 0.65) 35%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgb(var(--color-border) / 0.5) !important;
  /* The topbar is a flex item of .pwa-safe-content, so this z-index takes effect
     (and forms a stacking context) without position — lifting the topbar, and its
     descendant search/notifications/user dropdowns, above the z-index:1 content
     column in dark mode. No `position` here on purpose: it must not become the
     containing block for the dropdowns' absolute panels, which anchor to their own
     nearer `.relative` wrappers (FIZZY-2032). */
  z-index: 10;
}

/* ============================================
   ROOT COLOR-SCHEME PIN (FIZZY-853)
   Opts every layout that links this stylesheet out of Chrome's Auto Dark Mode
   and pins UA-rendered widgets (scrollbars, checkbox/radio glyphs, date
   pickers, select popups) to the app's class-based `.dark` theme rather than
   the OS. CSS `color-scheme` on an element overrides `<meta name="color-scheme">`,
   so this does NOT fight theme_controller#apply — both key off the same `.dark`
   class and resolve to the same value.

   Per surface:
     - booking_page / client_delivery / vendor_questionnaire never add `.dark`,
       so they pin permanently light — their intended, toggle-free look.
     - devise resolves the app theme pre-paint via the FOUC script's `.dark`
       class (shared/_dark_mode_script), so it stays theme-aware.
     - app layouts (application / native / api_docs / error) also key off
       `.dark`; this additionally closes the pre-Stimulus paint window, before
       theme_controller connects and rewrites the meta off `light dark`.
   Mechanism and measurements: see "FORM INPUT COLOR-SCHEME PIN" below.
   Regression cover: test/system/layout_color_scheme_test.rb (the Devise
   layout's rendered color-scheme in a browser) and
   test/integration/layout_color_scheme_markup_test.rb (the per-layout meta,
   `.dark` script and this pin, at request level).
   ============================================ */

:root {
  color-scheme: light;
}

:root.dark {
  color-scheme: dark;
}

/* ============================================
   FORM INPUT COLOR-SCHEME PIN + CORRECT-BY-DEFAULT BASE
   The `:root.dark { color-scheme: dark }` pin above, plus the FIZZY-1179
   zero-ish base layer below, are what keep bare controls theme-correct.
   The color-scheme reasoning (kept for the pin) follows; the form base
   layer and its specificity design come after the multi-step note.

   NOTE: the color-scheme half only covers DARK, and DARK was never the
   broken half.
   Card #838 was an OS-dark user seeing wrongly-coloured controls on a LIGHT
   app. Two distinct mechanisms can do that, and only the second one was
   actually measured on the affected pages:

     1. A control with no author-declared background/colour falls back to the
        UA's own field colours, which follow the page's *used* color-scheme
        rather than our `.dark` class.
     2. Chrome's Auto Dark Mode ("force-dark") re-tints pages it judges to be
        light-only while the OS is dark. It is applied per element and it does
        surface in getComputedStyle — a node with no matching `color` rule and
        no inline style can compute a different colour from its parent. That
        is what card #838's probes actually caught (BODY rgb(0,0,0), its own
        child rgb(210,210,210), value varying run to run). Declaring
        `color-scheme` on a subtree opts that subtree back out.

   Do NOT assume the pre-paint meta is the lever: theme_controller#apply
   (app/javascript/controllers/theme_controller.js) already rewrites
   `<meta name="color-scheme">` to the resolved theme on connect, so it does
   not stay at `light dark` on any layout that mounts that controller
   (application / native / api_docs — measured "light" on both #838 surfaces).
   The layouts that never mount it were the real remaining gap: `devise` ships
   the meta but nothing rewrites it, and `booking_page`, `client_delivery` and
   `vendor_questionnaire` ship no meta and no `.dark` class at all. That gap is
   now closed by the ROOT COLOR-SCHEME PIN above (FIZZY-853), which pins
   `color-scheme` off the same `.dark` class for every layout that links this
   stylesheet — theme-aware where `.dark` is resolved, permanently light where
   it never is.

   Surfaces that hit this declare their own `--color-form-*` colours for light
   and pin `color-scheme` to the app theme:
     FormBuilder::StepContentComponent (the fill-in step form): its rules
       live at the end of this file under "FILL-IN FLOW —
       FormBuilder::StepContentComponent", scoped with `:where(#step-form)`
     app/components/form_builder/multi_step_form_preview_component.html.erb:
       inline `\3c style>` in the template (the repo has no sidecar-asset
       pipeline for component CSS)
   Both scope to `.question-content .form-control` / `.form-select` = (0,2,0), which
   outranks the zero-ish base layer below, so they keep owning their look; the
   base is only a floor. Regression cover:
   test/system/multi_step_form_input_theme_test.rb.
   ============================================ */

/* ============================================================================
   FIZZY-1179 — FORM CONTROLS CORRECT-BY-DEFAULT (zero-ish-specificity base)

   ⚠️⚠️⚠️  TRIPWIRE — DO NOT WRAP THIS BLOCK IN `@layer`. DO NOT MOVE IT.  ⚠️⚠️⚠️
   This block is UNLAYERED and MUST emit AFTER `@tailwind base` (Preflight).
   The whole design leans on two cascade facts that ONLY hold in Tailwind v3's
   flat (unlayered) cascade:
     1. Source order beats Preflight at EQUAL specificity — our (0,0,1) base
        rules win over Preflight's (0,0,1) `input,select,textarea{color:inherit}`
        ONLY because they come later in the stylesheet. Wrap this in `@layer`
        (or an earlier `@layer base`) and Preflight wins again → text goes back
        to `inherit`, borders drop, the dark-mode-white-outline bug returns.
     2. These bare-element rules sit BELOW single utilities/component classes
        (0,1,0) so `bg-*`/`border-*`/`.form-input` still win. That "floor, not
        ceiling" math is the entire point.
   ⛔ Tailwind v4 INVERTS this: v4 puts everything in NATIVE `@layer`s where an
      UNLAYERED rule beats ALL layered utilities (layered < unlayered in the CSS
      cascade-layer spec). On a v4 upgrade this block would leap ABOVE every
      utility — silently clobbering `bg-*`/`border-*`/component classes app-wide.
      RE-DERIVE the specificity/layering from scratch before touching anything
      here on upgrade; do not port this block verbatim. See the guard test
      test/system/form_control_baseline_test.rb.

   THE INVERSION. Before this block, house form styling was opt-in: the house
   classes (`.styled-form .form-input`, `.filter-field-control`, `.input-field`)
   are the ONLY thing that painted a control, and FormFieldFactory only reaches
   ModernFormComponent forms — so every hand-written `input`/`select`/`textarea`
   started from raw browser rendering. Three silent no-ops then stacked into the
   prod bug this card was filed for (a Decision `<select>` showing a WHITE native
   focus outline in dark mode): (1) opt-in styles never applied; (2) Tailwind
   `focus:ring-<color>` with no ring WIDTH draws nothing, leaving the UA outline;
   (3) the old `.dark input` safety net (removed above) patched only bg/text/
   border in DARK — deliberately not appearance/focus/radius.

   This base makes a bare control CORRECT in both themes with no class at all.
   It supersedes the old dark-only net (which is why that net's bg/text/border/
   placeholder/disabled rules were deleted here rather than layered — leaving
   both invites drift, and the net's (0,2,1) specificity would have masked the
   very utility classes we now want to win).

   SPECIFICITY — this is the whole design, and it answers the historical
   objection to bare-element form selectors (recorded in the old comment above:
   "component classes must outrank"):
     - Selectors are element-anchored + `:where(...)` for the type/escape-hatch
       negations, so they compute to (0,0,1) for the base rules. The `:disabled` /
       `:focus` states add a pseudo-CLASS on top → (0,1,1); the `::placeholder`
       rule adds a pseudo-ELEMENT instead → (0,0,2) (pseudo-elements count as a
       type, not a class). `:where()` keeps the long `:not()` chains from adding
       specificity.
     - (0,0,1) is ONE notch above nothing — just enough to beat Tailwind
       Preflight's `input,select,textarea { color: inherit }` (0,0,1, won on
       source order since this block emits after Preflight) so text colour
       resolves to the token — and still BELOW any single utility or component
       class (0,1,0). Every existing styled control (`.form-input` (0,2,0),
       `.filter-field-control` (0,1,0), `.signature-input` (0,2,0), the
       `.question-content .form-control` inline rules (0,2,0), raw `bg-*`/
       `rounded-*`/`border-*` utilities) therefore wins UNTOUCHED. The state
       rules sit at (0,1,1), still below the real focus/disabled UTILITIES that
       render anything, which are (0,2,0) (`.focus\:ring-2:focus`,
       `.disabled\:bg-*:disabled`) — so a control that actually draws its own
       ring/disabled look keeps it; only the color-without-width no-ops fall
       through to the house ring here. That IS the trigger fix.

   THIRD-PARTY / SELF-STYLING WIDGET AUDIT (verified none is disturbed):
     - Trix / ActionText (has_rich_text): edits a `<trix-editor>` contenteditable
       + a hidden `<input type=hidden>`. The editor is not input/select/textarea;
       the hidden input is excluded. Untouched.
     - `@tailwindcss/forms`: COMMENTED OUT in tailwind.config.js — it is NOT the
       source of any control styling, so there is no plugin base layer to fight.
     - Dropzone (importmap, file-drop zones): renders `<div>`s; its file input is
       `type=file`, excluded. Untouched.
     - Signature pad (`.signature-field-component .signature-input`, (0,2,0),
       inline-styled bg/border/focus): outranks this base. Untouched.
     - OTP input (`.otp-code-input`): a normal visible `<input type=text>`. It
       takes the base bg/border/focus treatment plus its own utilities
       (mono/centered/2xl/tracking); the token treatment is desired here
       (FIZZY-1429 replaced the old opacity:0 overlay, which broke iOS Safari).
     - Native selects/pickers (`database_select`, `searchable_select`,
       `state_multi_select`, `date_select`, `time_range_picker`, `flatpickr`-less
       calendar controllers): all decorate a real `<select>`/`<input>`, so the
       token treatment is desired; none relies on the UA default look.
     No flatpickr / tom-select / choices / select2 / Stripe Elements are in the
     dependency set. If a future widget genuinely needs the native look, tag its
     control (or its container, for selects) with `data-native-control` — the
     `:where(:not([data-native-control]):not([data-native-control] *))` escape
     hatch exempts it and its descendants.
   ============================================================================ */

/* Base treatment — text-like inputs, textarea, select. Tokens flip per theme
   (`:root` light values + the `.dark` block above), so one rule covers both. */

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([data-native-control]):not([data-native-control] *)),
textarea:where(:not([data-native-control]):not([data-native-control] *)),
select:where(:not([data-native-control]):not([data-native-control] *)) {
  background-color: rgb(var(--color-form-bg));
  color: rgb(var(--color-form-text));
  border: 1px solid rgb(var(--color-form-border));
  border-radius: 0.625rem;
  /* matches .styled-form .form-input */
  padding: 0.5rem 0.75rem;
  /* sane baseline (== .input-field px-3 py-2) */
}

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([data-native-control]):not([data-native-control] *))::-moz-placeholder, textarea:where(:not([data-native-control]):not([data-native-control] *))::-moz-placeholder {
  color: rgb(var(--color-form-placeholder));
}

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([data-native-control]):not([data-native-control] *))::placeholder,
textarea:where(:not([data-native-control]):not([data-native-control] *))::placeholder {
  color: rgb(var(--color-form-placeholder));
}

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([data-native-control]):not([data-native-control] *)):disabled,
textarea:where(:not([data-native-control]):not([data-native-control] *)):disabled,
select:where(:not([data-native-control]):not([data-native-control] *)):disabled {
  background-color: rgb(var(--color-form-disabled-bg));
  color: rgb(var(--color-form-placeholder));
  cursor: not-allowed;
}

/* Select: strip the native chevron and draw a token-coloured one. The stroke is
   baked into the data URI, so a `.dark` override swaps to the lighter token —
   same technique as `.filter-field-control` above.

   SCOPE — this block applies ONLY to truly BARE selects (no `class` attribute at
   all), via `:not([class])`. Everything else beyond the base treatment is
   zero-specificity via `:where()`:
     - `:not([class])` — a select carrying ANY class is someone's already-styled
       control, so we leave its appearance/arrow exactly as it is on main and draw
       NOTHING here. This is the zero-app-wide-regression choice: the round-3
       audit (234 selects across 109 untouched files, dated 2026-08-17) proved that
       the alternative — narrowing only on `:not(.appearance-none)` — regresses
       those 109 files, because their `px-*` utilities crush the base chevron's
       right-padding clearance and render text UNDER the arrow. A classed select
       keeps its native UA arrow (or its own overlay chevron) precisely as before.
       Note: the token colors/border/radius/padding and the focus-ring rules below
       REMAIN for classed selects — those live at (0,0,1) specificity and are safe
       (they never fight a utility). Only THIS appearance/chevron/right-padding
       block narrows to classless selects. Unifying the whole select family onto
       the base chevron (drop the ~22 overlays + helper `appearance-none`, migrate
       the 234 sites) is the follow-up path tracked by card 1180, not folded into
       this base-layer rule.
     - `:not([multiple])` — a `<select multiple>` renders a listbox, not a
       collapsed combobox, so a chevron + right padding + `appearance:none` are
       meaningless there. (Only `<select multiple>` controls set `size=` in this
       app — verified by grep, e.g. admin/sec_adv_firms filters — so no single
       select is caught by excluding `[multiple]`; a dedicated `[size]` gate would
       be redundant here.) */

/* ── CARET SYMMETRY STANDARD (FIZZY-1180) ────────────────────────────────────
   THE canonical caret-spacing definition; every drawn-chevron select in this
   file (and the overlay-arrow component in style_helper.rb) matches these two
   invariants so a caret never sits flush against the control's edge:

     1. RIGHT INSET  == the control's own LEFT padding.  A select padded
        `0.5rem 0.75rem` draws its chevron at `right 0.75rem` — the glyph is as
        far from the right edge as the text is from the left. This is the
        founder mandate: "the caret should never sit right up against the
        boundary while the left has padding."
     2. PADDING-RIGHT == inset + chevron width + gap (~0.5rem), so option text
        never runs UNDER the chevron. With a 1.25em (~20px) glyph and a 0.75rem
        inset that is 0.75 + 1.25em + gap ~= 2.5rem here.

   The inset must equal each control's OWN left padding, so the value is
   per-control (0.75 / 1 / 1.25rem across the families below) — one FORMULA
   applied everywhere, not a single global constant. Audited by
   test/system/form_control_baseline_test.rb (caret-symmetry probe). */

select:where(:not([class]):not([multiple]):not([data-native-control]):not([data-native-control] *)) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  /* inset 0.75 + 1.25em glyph + gap (STANDARD) */
  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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  /* == left padding 0.75rem (SYMMETRIC) */
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
}

.dark select:where(:not([class]):not([multiple]):not([data-native-control]):not([data-native-control] *)) {
  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='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Focus — kill the UA outline, draw the house ring (matches
   `.styled-form .form-input:focus`). `:focus` + `:focus-visible` for parity
   with how Tailwind's forms behave. (0,1,1): below the (0,2,0) focus utilities
   that render a real ring, so those still win; a color-only `focus:ring-<c>`
   (no width, draws nothing) falls through to this ring — the trigger fix. */

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([data-native-control]):not([data-native-control] *)):focus,
input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([data-native-control]):not([data-native-control] *)):focus-visible,
textarea:where(:not([data-native-control]):not([data-native-control] *)):focus,
textarea:where(:not([data-native-control]):not([data-native-control] *)):focus-visible,
select:where(:not([data-native-control]):not([data-native-control] *)):focus,
select:where(:not([data-native-control]):not([data-native-control] *)):focus-visible {
  outline: none;
  border-color: rgb(var(--color-ring));
  box-shadow: 0 0 0 4px rgb(var(--color-ring) / 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Interactive-control focus ring, part 2 — BUTTONS & role=button (FIZZY-1180).
   The block above makes input/select/textarea correct-by-default; this extends
   the SAME house ring to the other keyboard-focusable controls. A hand-rolled
   `<button>` or `<a role="button">`/`<div role="button">` with no focus
   utilities of its own otherwise shows the UA focus outline — a white box on the
   dark surface, the same class of bug FIZZY-1179 fixed for inputs (found app-wide
   during 1200 verification: e.g. the dashboard Open-firm / Refresh buttons).

   `:focus-visible` ONLY — unlike a text input, a button must NOT draw a ring on
   mouse click, only on keyboard/AT focus. No `border-color` here (buttons are
   typically borderless; omitting it avoids shifting a `.btn-outline-*` border on
   focus).

   SPECIFICITY differs by which arm matches, and it matters for `.btn-*`:
     - `button:where(...):focus-visible` = `button` (0,0,1) + `:focus-visible`
       (0,1,0) = (0,1,1). The `.btn-*` ring is a `focus:ring-2` UTILITY =
       `.focus\:ring-2:focus` (0,2,0), which OUTRANKS this — so an element-typed
       `<button class="btn-*">` keeps its own focus treatment untouched.
     - `[role="button"]:where(...):focus-visible` = `[role]` (0,1,0) +
       `:focus-visible` (0,1,0) = (0,2,0) — a TIE with `focus:ring-2` (0,2,0),
       broken by SOURCE ORDER (this unlayered block emits after the utilities),
       so on a `[role="button"]` that ALSO carries `focus:ring-2` the HOUSE ring
       wins. The only such widget in the app is `state_multi_select_component`;
       on keyboard focus it draws the house ring instead of its own — acceptable
       (same ring token, verified). A button that draws NOTHING always falls
       through to this house ring, which is the whole point.
   Same unlayered / source-order / Tailwind-v4 caveats as the block above — see
   the tripwire (v4's native @layer would invert the source-order tie above). */

button:where(:not([data-native-control]):not([data-native-control] *)):focus-visible,
[role="button"]:where(:not([data-native-control]):not([data-native-control] *)):focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgb(var(--color-ring) / 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Date/time input icon theming for dark mode */

.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
}

/* Audio player dark mode - tells browser to render native controls in dark theme */

.dark audio {
  color-scheme: dark;
}

/* ============================================
   GLOBAL DARK MODE TABLE TEXT SAFETY NET
   Ensures table cells and common text elements inherit
   theme-aware text color in dark mode, even without
   explicit text-content-* Tailwind classes.
   ============================================ */

.dark table td,
.dark table th {
  color: rgb(var(--color-text));
}

.dark table td a:not([class*="text-"]) {
  color: rgb(var(--color-link));
}

/*
 * Form input visibility fix - outside of @layer to ensure highest cascade priority
 * This overrides Tailwind's Preflight which sets border-width: 0 on all elements
 */

.compliance-form-document .form-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.compliance-form-document .form-field textarea,
.compliance-form-document .form-field select {
  display: block !important;
  width: 100% !important;
  border: 1px solid rgb(var(--color-doc-input-border)) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  background-color: rgb(var(--color-doc-bg)) !important;
  color: rgb(var(--color-doc-text)) !important;
  box-sizing: border-box !important;
}

.compliance-form-document .form-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.compliance-form-document .form-field textarea:focus,
.compliance-form-document .form-field select:focus {
  border-color: rgb(var(--color-form-focus-border)) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
  outline: none !important;
}

/* ============================================
   STYLED FORM SYSTEM
   Consistent, prominent form styling for CRUD pages
   ============================================ */

.styled-form {
  /* Form container */
}

.styled-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.styled-form .form-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--color-form-text));
  line-height: 1.4;
}

.styled-form .form-input {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(var(--color-form-text));
  background-color: rgb(var(--color-form-bg));
  border: 2px solid rgb(var(--color-form-border));
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.styled-form .form-input:hover:not(:focus):not(:disabled) {
  border-color: rgb(var(--color-form-placeholder));
  background-color: rgb(var(--color-form-bg));
}

.styled-form .form-input:focus {
  outline: none;
  border-color: rgb(var(--color-form-focus-border));
  box-shadow: 0 0 0 4px rgb(var(--color-form-focus-border) / 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
  background-color: rgb(var(--color-form-bg));
}

.styled-form .form-input:disabled {
  background-color: rgb(var(--color-form-disabled-bg));
  border-color: rgb(var(--color-border));
  color: rgb(var(--color-form-placeholder));
  cursor: not-allowed;
}

.styled-form .form-input::-moz-placeholder {
  color: rgb(var(--color-form-placeholder));
  font-weight: 400;
}

.styled-form .form-input::placeholder {
  color: rgb(var(--color-form-placeholder));
  font-weight: 400;
}

/* Validation error state — swaps the neutral border for the status-error border
   token so an invalid field is visually attached to its inline error message.
   `.styled-form .form-input.form-input-error` is (0,3,0), so it outranks the
   base `.styled-form .form-input` (0,2,0) rule regardless of source order.
   Applies to selects/textareas too, which also carry `.form-input`. */

.styled-form .form-input.form-input-error {
  border-color: rgb(var(--color-error-border));
}

.styled-form .form-input.form-input-error:focus {
  border-color: rgb(var(--color-error-border));
  box-shadow: 0 0 0 4px rgb(var(--color-error-border) / 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Room for absolutely-positioned icons overlaid on an input (e.g. search
   pickers) — utilities like pl-9 lose to .styled-form .form-input's padding. */

.styled-form .form-input.form-input-leading-icon {
  padding-left: 2.5rem;
}

.styled-form .form-input.form-input-trailing-icon {
  padding-right: 2.5rem;
}

/* Select with custom arrow. CARET SYMMETRY (FIZZY-1180): .form-input pads
   `0.875rem 1rem`, so the chevron inset must equal the 1rem left padding (was
   0.875rem — the caret sat 2px closer to the edge than the text). */

.styled-form .form-select {
  padding-right: 2.75rem;
  /* inset 1 + 1.25em glyph + gap */
  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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 1rem center;
  /* == left padding 1rem (SYMMETRIC) */
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
}

/* Textarea */

.styled-form .form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Hint text below fields */

.styled-form .form-hint {
  font-size: 0.8125rem;
  color: rgb(var(--color-text-tertiary));
  line-height: 1.5;
  margin-top: 0.25rem;
}

/* Checkbox and Radio */

.styled-form input[type="checkbox"],
.styled-form input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgb(var(--color-form-border));
  border-radius: 0.25rem;
  background-color: rgb(var(--color-form-bg));
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.styled-form input[type="radio"] {
  border-radius: 50%;
}

.styled-form input[type="checkbox"]:checked,
.styled-form input[type="radio"]:checked {
  background-color: rgb(var(--color-form-focus-border));
  border-color: rgb(var(--color-form-focus-border));
  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");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.styled-form input[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='4'/%3e%3c/svg%3e");
}

.styled-form input[type="checkbox"]:focus,
.styled-form input[type="radio"]:focus {
  outline: none;
  border-color: rgb(var(--color-form-focus-border));
  box-shadow: 0 0 0 4px rgb(var(--color-form-focus-border) / 0.1);
}

/* ============================================
   END STYLED FORM SYSTEM
   ============================================ */

/* --------------------------------------------------------
   Tutorial Player — overlay, spotlight, tooltip
   -------------------------------------------------------- */

:root {
  --tutorial-overlay: rgba(0, 0, 0, 0.5);
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--tutorial-overlay);
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.tutorial-spotlight {
  position: fixed;
  z-index: 9999;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px var(--tutorial-overlay);
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}

.tutorial-spotlight--border {
  box-shadow: 0 0 0 3px rgb(var(--color-btn-primary)), 0 0 0 9999px var(--tutorial-overlay);
}

.tutorial-spotlight--pulse {
  box-shadow: 0 0 0 9999px var(--tutorial-overlay);
  animation: tutorial-pulse 1.5s ease-in-out infinite;
}

.tutorial-spotlight--arrow {
  box-shadow: 0 0 0 9999px var(--tutorial-overlay);
}

@keyframes tutorial-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(var(--color-btn-primary) / 0.4), 0 0 0 9999px var(--tutorial-overlay);
  }

  50% {
    box-shadow: 0 0 0 6px rgb(var(--color-btn-primary) / 0), 0 0 0 9999px var(--tutorial-overlay);
  }
}

.tutorial-modal-highlight {
  position: relative;
  z-index: 1;
  outline: 3px solid rgb(var(--color-btn-primary));
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 4000px var(--tutorial-overlay);
  animation: tutorial-modal-pulse 1.5s ease-in-out infinite;
}

@keyframes tutorial-modal-pulse {
  0%, 100% {
    outline-color: rgb(var(--color-btn-primary));
  }

  50% {
    outline-color: rgb(var(--color-btn-primary) / 0.5);
  }
}

/* A step that moves on only when the user clicks the highlighted element gets
   a static double ring (primary, a surface gap, primary) whatever the step's own
   highlight style, so "click this" reads differently from "look here" even with
   reduced motion; a ripple outside it animates when motion is allowed. */

.tutorial-spotlight.tutorial-spotlight--action {
  box-shadow: 0 0 0 3px rgb(var(--color-btn-primary)), 0 0 0 5px rgb(var(--color-surface)), 0 0 0 7px rgb(var(--color-btn-primary)), 0 0 0 9999px var(--tutorial-overlay);
  animation: tutorial-action-ring 1.6s ease-out infinite;
}

@keyframes tutorial-action-ring {
  0% {
    box-shadow: 0 0 0 3px rgb(var(--color-btn-primary)), 0 0 0 5px rgb(var(--color-surface)), 0 0 0 7px rgb(var(--color-btn-primary)), 0 0 0 7px rgb(var(--color-btn-primary) / 0.5), 0 0 0 9999px var(--tutorial-overlay);
  }

  100% {
    box-shadow: 0 0 0 3px rgb(var(--color-btn-primary)), 0 0 0 5px rgb(var(--color-surface)), 0 0 0 7px rgb(var(--color-btn-primary)), 0 0 0 16px rgb(var(--color-btn-primary) / 0), 0 0 0 9999px var(--tutorial-overlay);
  }
}

/* Inside a dialog or the sidebar the spotlight is not drawn (modal mode), so the
   element's own outline carries the cue: a thicker double outline (static) and a
   quicker pulse. */

.tutorial-modal-highlight.tutorial-modal-highlight--action {
  outline-style: double;
  outline-width: 6px;
  animation-duration: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-spotlight--pulse,
  .tutorial-spotlight.tutorial-spotlight--action,
  .tutorial-modal-highlight {
    animation: none;
  }
}

.tutorial-tooltip {
  position: fixed;
  z-index: 10000;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 16px;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-edge));
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transition: top 0.3s ease, left 0.3s ease;
}

.tutorial-tooltip-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-edge));
  transform: rotate(45deg);
}

.tutorial-tooltip-arrow--bottom {
  border-bottom: none;
  border-right: none;
}

.tutorial-tooltip-arrow--top {
  border-top: none;
  border-left: none;
}

.tutorial-tooltip-arrow--left {
  border-left: none;
  border-bottom: none;
}

.tutorial-tooltip-arrow--right {
  border-top: none;
  border-right: none;
}

.tutorial-fallback {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 16px;
}

.tutorial-fallback:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-fallback-card {
  width: 400px;
  max-width: 100%;
  padding: 20px;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-edge));
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .tutorial-tooltip {
    width: calc(100vw - 24px);
  }
}

/* ============================================
   Side Drawer — mobile override
   ============================================ */

@media (max-width: 639px) {
  [data-side-drawer-target="drawer"] {
    width: 100% !important;
    max-width: 100vw !important;
  }

  [data-side-drawer-target="resizeHandle"] {
    display: none !important;
  }
}

/* ============================================
   Dashboard detail panel — accordion animation
   ============================================ */

.detail-panel-accordion {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.detail-panel-accordion[data-open] {
  grid-template-rows: 1fr;
}

/* ============================================
   Oversight drawer — clickable table rows
   ============================================ */

[data-controller="oversight-drawer"] tbody tr[id] {
  cursor: pointer;
}

/* ============================================
   Keyboard shortcut badges
   ============================================ */

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  color: rgb(var(--color-content-secondary));
  background: rgb(var(--color-surface-secondary));
  border: 1px solid rgb(var(--color-edge));
  border-radius: 0.25rem;
  box-shadow: 0 1px 0 rgb(var(--color-edge-strong));
}

/* ============================================
   Text Archiving Onboarding Wizard
   ============================================ */

@keyframes wizard-slide-in-right {
  from {
    transform: translateX(60px);
    opacity: 0;
  }

  to   {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes wizard-slide-in-left {
  from {
    transform: translateX(-60px);
    opacity: 0;
  }

  to   {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes wizard-slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to   {
    transform: translateX(-60px);
    opacity: 0;
  }
}

@keyframes wizard-slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to   {
    transform: translateX(60px);
    opacity: 0;
  }
}

@keyframes wizard-reveal {
  from {
    transform: translateY(12px);
    opacity: 0;
  }

  to   {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes wizard-checkmark-draw {
  from {
    stroke-dashoffset: 48;
  }

  to   {
    stroke-dashoffset: 0;
  }
}

@keyframes wizard-circle-fill {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to   {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes wizard-confetti-fall {
  0%   {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(40px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes wizard-float {
  0%, 100% {
    transform: translateY(0);
  }

  50%      {
    transform: translateY(-6px);
  }
}

@keyframes wizard-message-appear {
  from {
    transform: scale(0.8) translateY(8px);
    opacity: 0;
  }

  to   {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes wizard-pulse-ring {
  0%   {
    transform: scale(0.9);
    opacity: 0.6;
  }

  50%  {
    transform: scale(1.05);
    opacity: 0.3;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

.wizard-slide-in-right  {
  animation: wizard-slide-in-right 0.35s ease-out forwards;
}

.wizard-slide-in-left   {
  animation: wizard-slide-in-left 0.35s ease-out forwards;
}

.wizard-slide-out-left  {
  animation: wizard-slide-out-left 0.3s ease-in forwards;
}

.wizard-slide-out-right {
  animation: wizard-slide-out-right 0.3s ease-in forwards;
}

.wizard-reveal-ready {
  animation: wizard-reveal 0.4s ease-out both;
}

.wizard-float {
  animation: wizard-float 3s ease-in-out infinite;
}

.wizard-message-appear {
  animation: wizard-message-appear 0.4s ease-out both;
}

.wizard-checkmark-draw {
  animation: wizard-checkmark-draw 0.6s ease-out forwards;
}

.wizard-circle-fill {
  animation: wizard-circle-fill 0.4s ease-out forwards;
}

.wizard-confetti {
  animation: wizard-confetti-fall 1.5s ease-out forwards;
}

.wizard-pulse-ring {
  animation: wizard-pulse-ring 2s ease-in-out infinite;
}

/* Step progress indicator states */

.wizard-step-completed > div:first-child {
  background-color: rgb(var(--color-success-solid));
  border-color: rgb(var(--color-success-solid));
  color: rgb(255 255 255);
}

.wizard-step-completed > span {
  color: rgb(var(--color-success-text));
}

.wizard-step-current > div:first-child {
  background-color: rgb(var(--color-info-solid));
  border-color: rgb(var(--color-info-solid));
  color: rgb(255 255 255);
}

.wizard-step-current > span {
  color: rgb(var(--color-link));
}

.wizard-step-pending > div:first-child {
  background-color: rgb(var(--color-surface));
  border-color: rgb(var(--color-border-strong));
  color: rgb(var(--color-text-muted));
}

.wizard-step-pending > span {
  color: rgb(var(--color-text-tertiary));
}

/* Progress bar fill transition */

.wizard-progress-fill {
  transition: width 0.5s ease-out;
}

/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {
  .wizard-slide-in-right,
  .wizard-slide-in-left,
  .wizard-slide-out-left,
  .wizard-slide-out-right,
  .wizard-reveal-ready,
  .wizard-float,
  .wizard-message-appear,
  .wizard-checkmark-draw,
  .wizard-circle-fill,
  .wizard-confetti,
  .wizard-pulse-ring,
  .agent-thinking-dots span,
  .agent-step {
    animation: none !important;
  }

  .wizard-progress-fill {
    transition: none !important;
  }
}

/* ============================================================================
   DOCKED WAVEFORM PLAYER — Recordings::WaveformPlayerComponent (FIZZY-865)

   The docked bar's colors, layout, and slide are all Tailwind utilities on the
   markup (tokens + the indigo play-button/scrub-fill family the inline player
   already uses). Only the interaction states below can't be expressed as
   utilities: the scrub handle grows on hover/drag, and the target-time tooltip
   fades in. `.scrubbing` is toggled by the Stimulus controller during a drag so
   the handle + tip stay revealed while the pointer is captured off the track.
   ============================================================================ */

/* Playback position: the controller writes --wf-progress (a percent) on the
   scrub element; fill width and handle offset both read it, so it is the single
   source of truth for the geometry. */

.wf-dock-fill {
  width: var(--wf-progress, 0%);
}

.wf-dock-handle {
  left: var(--wf-progress, 0%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
}

.wf-dock-scrub:hover .wf-dock-handle,
.wf-dock-scrub.scrubbing .wf-dock-handle {
  transform: translate(-50%, -50%) scale(1);
}

.wf-dock-tip {
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.wf-dock-scrub:hover .wf-dock-tip,
.wf-dock-scrub.scrubbing .wf-dock-tip {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wf-dock-handle,
  .wf-dock-tip {
    transition: none;
  }
}

/* Clearance while the bar is docked (body class toggled by the controller):
   pad the scroll area so the last content clears the fixed bar, and give
   transcript utterances a scroll-margin so the auto-scrolled active line is
   never hidden underneath it. */

body.waveform-docked [data-page-scroller] {
  padding-bottom: 5.5rem;
}

body.waveform-docked [data-transcript-sync-target="segment"] {
  scroll-margin-bottom: 6rem;
}

/* ============================================================================
   TEXT ARCHIVE — conversation evidence view (FIZZY-1256)

   The color-mix derivations below are the SANCTIONED near-raw values: a flagged
   bubble darkens --color-error-solid for white-text contrast, and the keyword
   chip inverts against its bubble ground. Everything else is token-driven and
   theme-correct because the tokens flip under .dark. NEVER dim evidence (House
   UI rule 20): no opacity on preserved or superseded content.
   ============================================================================ */

/* Deletion / flagged-edit bracket — the amber evidence frame. */

.ta-tomb {
  border: 1px solid rgb(var(--color-warning-border));
  background: rgb(var(--color-warning-bg) / 0.35);
  border-radius: 14px;
  padding: 10px 12px 8px;
}

.dark .ta-tomb {
  background: rgb(var(--color-warning-bg) / 0.55);
}

.ta-tomb-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--color-warning-text));
  margin-top: 8px;
}

.ta-tomb-note svg {
  flex: none;
}

/* Possible-edit note (FIZZY-1323) — a reviewable info-tinted flag under a bubble
   whose (date, date_sent) twin makes it a suspected RCS edit. Flag, never fold:
   both bubbles stay; the label carries the state (House rule 20, no opacity). */

.ta-edit-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--color-info-text));
  margin: 4px 12px 0;
}

.ta-edit-note i {
  flex: none;
}

.ta-edit-note a {
  color: inherit;
  text-decoration: underline;
}

.ta-edit-note a:hover {
  color: rgb(var(--color-info-solid));
}

/* Uppercase version micro-label inside a bracket (rule 10 micro-label carve-out). */

.ta-ver-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(var(--color-text-muted));
  margin: 2px 4px 3px;
}

/* Flagged bubbles. Solid (outbound / bracketed): error-solid darkened ~5:1 for
   white text, identical in both themes. Tinted (inbound): the error-bg family. */

.ta-bubble-flagged-solid {
  background: color-mix(in srgb, rgb(var(--color-error-solid)) 78%, black);
  color: #fff;
}

.ta-bubble-flagged-tint {
  background: rgb(var(--color-error-bg));
  border-color: rgb(var(--color-error-solid) / 0.45);
  color: rgb(var(--color-error-text));
}

/* Keyword mark. On a solid red bubble: white chip, dark-red text (chip ground is
   the bubble, theme-independent). On a tinted bubble: inverse — solid red chip,
   white text. */

.ta-kw {
  background: rgb(255 255 255 / 0.95);
  color: color-mix(in srgb, rgb(var(--color-error-solid)) 55%, black);
  border-radius: 3px;
  padding: 0 4px;
  font-weight: 600;
}

.ta-bubble-flagged-tint .ta-kw {
  background: color-mix(in srgb, rgb(var(--color-error-solid)) 85%, black);
  color: #fff;
}

/* Clean-edit revision panel — info-tinted left border, current revision emphasized,
   a flagged revision error-tinted. */

.ta-rev-panel {
  border-left: 2px solid rgb(var(--color-info-border));
}

.ta-rev-body {
  background: rgb(var(--color-surface-inset));
  border: 1px solid rgb(var(--color-border-subtle));
  color: rgb(var(--color-text-secondary));
}

.ta-rev-current .ta-rev-body {
  color: rgb(var(--color-text));
  border-color: rgb(var(--color-info-border));
}

.ta-rev-flagged .ta-rev-body {
  border-color: rgb(var(--color-error-border));
  background: rgb(var(--color-error-bg) / 0.45);
}

/* Reaction chip pinned to its target bubble. */

.ta-react {
  position: absolute;
  bottom: -10px;
  right: 8px;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
  box-shadow: var(--shadow-sm);
  color: rgb(var(--color-text-secondary));
  white-space: nowrap;
}

.ta-react-left {
  right: auto;
  left: 8px;
}

/* ── Media (FIZZY-1257) ──────────────────────────────────────────────────────
   Inline captured media in the timeline. Token-based only (no raw palette), so
   both themes and the evidence-view "never dim evidence" rule hold: media state
   is carried by labels, never by opacity. */

.ta-media {
  max-width: 260px;
}

.ta-media-img-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 12px;
}

.ta-media-img {
  display: block;
  max-width: 260px;
  max-height: 260px;
  border-radius: 12px;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-inset));
}

.ta-media-video {
  display: block;
  max-width: 260px;
  border-radius: 12px;
  border: 1px solid rgb(var(--color-border));
  background: #000;
}

.ta-media-audio-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-inset));
}

.ta-media-audio-icon {
  color: rgb(var(--color-btn-primary));
  font-size: 16px;
  flex: none;
}

.ta-media-audio {
  height: 34px;
  max-width: 210px;
}

.ta-media-cap {
  font-size: 10.5px;
  color: rgb(var(--color-text-muted));
  margin-top: 3px;
}

.ta-media-file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 12px;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-inset));
  color: rgb(var(--color-text));
  text-decoration: none;
  max-width: 260px;
}

.ta-media-file:hover {
  background: rgb(var(--color-hover));
}

.ta-media-file-icon {
  color: rgb(var(--color-text-tertiary));
  font-size: 16px;
  flex: none;
}

.ta-media-file-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ta-media-file-name {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ta-media-file-size {
  font-size: 10.5px;
  color: rgb(var(--color-text-muted));
}

.ta-media-file-dl {
  color: rgb(var(--color-text-tertiary));
  font-size: 14px;
  flex: none;
  margin-left: auto;
}

/* Metadata-only placeholder — the media was NOT retained (oversize / quarantined),
   but its existence is evidenced. Dashed frame, label carries the state. */

.ta-media-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed rgb(var(--color-border-strong));
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: rgb(var(--color-text-tertiary));
  background: rgb(var(--color-surface-inset) / 0.6);
  max-width: 320px;
}

.ta-media-meta i {
  flex: none;
}

/* Full-screen image lightbox (dependency-free; overlay is appended to <body>). */

.ta-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: rgb(0 0 0 / 0.85);
  cursor: zoom-out;
}

.ta-lightbox-img {
  max-width: 92vw;
  max-height: 84vh;
  border-radius: 8px;
  box-shadow: var(--shadow-xl);
}

.ta-lightbox-cap {
  color: rgb(255 255 255 / 0.9);
  font-size: 12.5px;
}

/* ── Search (FIZZY-1258) ──────────────────────────────────────────────────────
   The message a search result jumped to, and the matched-term emphasis in the
   results panel. Both are INFO-tinted so they read as NAVIGATION, never as the
   error-red flag marks (.ta-kw / flagged bubbles) — a distinct channel, by
   design. Token-driven, so both themes flip correctly; never opacity on the
   ringed message (House rule 20: never dim evidence). */

.ta-search-hit {
  border-radius: 18px;
  outline: 2px solid rgb(var(--color-info-solid));
  outline-offset: 4px;
  background: rgb(var(--color-info-bg) / 0.55);
  scroll-margin-top: 5rem;
  scroll-margin-bottom: 5rem;
  transition: outline-color 0.3s ease, background-color 0.3s ease;
}

.dark .ta-search-hit {
  background: rgb(var(--color-info-bg) / 0.4);
}

/* Matched-term mark inside a result snippet — info chip, distinct from .ta-kw. */

.ta-search-mark {
  background: rgb(var(--color-info-bg));
  color: rgb(var(--color-info-text));
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 600;
}

/* FIZZY-1379 — weekly calendar view loading state. While a calendar turbo-frame
   navigates, Turbo stamps [busy]/aria-busy on it: swap the live week grid for the
   skeleton columns. Unlayered (after @tailwind utilities) so it beats `.hidden`. */

turbo-frame[busy] .wk-skeleton,
turbo-frame[aria-busy="true"] .wk-skeleton {
  display: block;
}

turbo-frame[busy] .wk-live,
turbo-frame[aria-busy="true"] .wk-live {
  display: none;
}

/* ==========================================================================
   Documents browser — two-pane folder tree (FIZZY-1387)
   Semantic tokens only; the tree highlight mirrors the sidebar active state
   (--color-info-bg fill + a --color-nav-accent rail). Unlayered so the layout
   grid and the tree's is-open toggles beat Tailwind's utilities where they
   overlap (e.g. .subtree display).
   ========================================================================== */

/* Two-pane shell */

.fb-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 1rem;
  align-items: start;
}

.fb-panel {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Scoped icon button (drawer toggle / close) */

.fb-shell .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgb(var(--color-border));
  color: rgb(var(--color-text-secondary));
  transition: background-color 0.15s, color 0.15s;
}

.fb-shell .icon-btn:hover {
  background: rgb(var(--color-hover));
  color: rgb(var(--color-text));
}

/* Sidebar / folder tree */

.fb-sidebar {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
}

.fb-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid rgb(var(--color-border));
}

.fb-sidebar-head .lbl {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--color-text-tertiary));
}

.fb-shell .fb-drawer-close {
  display: none;
}

/* Root switcher (Personal / Firm) */

.fb-rootswitch {
  display: flex;
  gap: 2px;
  margin: 0.625rem 0.75rem 0.25rem;
  background: rgb(var(--color-surface-tertiary));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  padding: 2px;
}

.fb-rootswitch-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  color: rgb(var(--color-text-secondary));
  border: 1px solid transparent;
  transition: background-color 0.15s, color 0.15s;
}

.fb-rootswitch-btn:hover {
  color: rgb(var(--color-text));
}

.fb-rootswitch-btn.is-active {
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text));
  box-shadow: var(--shadow-sm);
}

.fb-rootswitch-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--color-ring));
}

.fb-tree {
  padding: 0.5rem;
  overflow-y: auto;
}

.fb-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fb-tree .subtree {
  display: none;
}

.fb-tree .node.is-open > .subtree {
  display: block;
}

/* Nested subtree lists indent one step per depth; the padding compounds down
   the nesting so each level sits further right (mirrors the mock's depth step). */

.fb-tree .subtree-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.85rem;
}

.fb-tree-empty {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: rgb(var(--color-text-tertiary));
}

.fb-tnode {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: rgb(var(--color-text-secondary));
  font-size: 0.8125rem;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 1px solid transparent;
}

.fb-tnode:hover {
  background: rgb(var(--color-hover));
  color: rgb(var(--color-text));
}

.fb-tnode .twist {
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: rgb(var(--color-text-muted));
  font-size: 0.7rem;
  transition: transform 0.15s;
}

.node.is-open > .fb-tnode .twist {
  transform: rotate(90deg);
}

.fb-tnode .twist.leaf {
  visibility: hidden;
}

.fb-tnode .ficon {
  color: rgb(var(--color-nav-accent));
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.fb-tnode .tname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

/* The label is a real <a>; it inherits the row's colour so is-current / hover
   states drive it, and drops the default underline. */

.fb-tnode a.tname {
  color: inherit;
  text-decoration: none;
}

.fb-tnode.is-current {
  background: rgb(var(--color-info-bg));
  color: rgb(var(--color-info-text));
  font-weight: 500;
}

.fb-tnode.is-current .ficon {
  color: rgb(var(--color-info-text));
}

.fb-tnode.is-current::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: rgb(var(--color-nav-accent));
}

.fb-tnode:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--color-ring));
}

/* Main content pane */

.fb-main {
  min-width: 0;
  position: relative;
}

.fb-crumbbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-secondary));
}

.fb-crumbnav {
  min-width: 0;
}

.fb-crumbs {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-wrap: wrap;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fb-crumbs .fb-crumb-item {
  display: inline-flex;
  align-items: center;
}

.fb-crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: rgb(var(--color-link));
  font-size: 0.8125rem;
  border: 1px solid transparent;
}

.fb-crumb:hover {
  background: rgb(var(--color-hover));
}

.fb-crumb.is-current {
  color: rgb(var(--color-text));
  font-weight: 500;
}

.fb-crumb-sep {
  color: rgb(var(--color-text-muted));
  font-size: 0.7rem;
  margin: 0 0.125rem;
}

.fb-content {
  padding: 0.875rem;
}

.fb-shell .fb-drawer-toggle {
  display: none;
}

/* Forced Personal/Firm chooser (first visit) */

.fb-chooser {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}

.fb-chooser-inner {
  width: 100%;
  max-width: 32rem;
}

.fb-chooser-head {
  text-align: center;
  margin-bottom: 1.5rem;
}

.fb-chooser-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: rgb(var(--color-info-bg));
  color: rgb(var(--color-info-text));
}

.fb-chooser-head h2 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.fb-chooser-head p {
  margin: 0;
  font-size: 0.875rem;
  color: rgb(var(--color-text-secondary));
}

.fb-chooser-options {
  display: grid;
  gap: 0.75rem;
}

.fb-chooser-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.fb-chooser-option:hover {
  border-color: rgb(var(--color-nav-accent));
  box-shadow: var(--shadow-md);
}

.fb-chooser-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--color-ring));
}

.fb-chooser-option-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 0.625rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: rgb(var(--color-surface-tertiary));
  color: rgb(var(--color-nav-accent));
}

.fb-chooser-option-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.fb-chooser-option-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.fb-chooser-option-desc {
  font-size: 0.8125rem;
  color: rgb(var(--color-text-secondary));
}

.fb-chooser-option-go {
  margin-left: auto;
  color: rgb(var(--color-text-muted));
}

/* Mobile drawer scrim. z-index sits above the content pane; the mobile media
   query below anchors both the scrim and the drawer beneath the app's fixed
   header (see there) so the drawer's close button stays reachable. */

.fb-scrim {
  position: fixed;
  inset: 0;
  background: rgb(var(--color-scrim));
  z-index: 45;
}

.fb-scrim.is-on {
  display: block;
}

@media (max-width: 860px) {
  .fb-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .fb-shell .fb-drawer-toggle {
    display: inline-flex;
  }

  .fb-shell .fb-drawer-close {
    display: inline-flex;
  }

  /* The drawer and scrim open BELOW the app's fixed mobile header (~3.5rem):
     the header owns its own stacking context (and paints a backdrop in dark
     mode), so anchoring the drawer under it keeps the close button and root
     switcher reachable and the behaviour identical in light and dark, instead
     of depending on out-stacking that header. */

  .fb-scrim {
    top: 3.5rem;
  }

  .fb-shell .fb-sidebar {
    position: fixed;
    top: 3.5rem;
    left: 0;
    bottom: 0;
    width: 280px;
    max-height: none;
    z-index: 46;
    border-radius: 0;
    transform: translateX(-102%);
    transition: transform 0.2s ease;
  }

  .fb-shell .fb-sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }
}

/* ==========================================================================
   Help Center — Stripe-docs three-column reading experience (FIZZY-1691)
   Ported from the approved mock docs/design_system/mockups/fizzy-1691-help-center.html.
   Every colour is a design token (rgb(var(--color-*))), so dark mode flips for
   free — the tokens are already redefined under `.dark`. The one hardcoded pair
   is the code-block pre (dark bg / light text in BOTH themes, by design — see
   bin/check-prose-theming). All structural classes are scoped under
   `.help-center`; `.help-prose` (the long-form article type spec) is standalone
   so it can be applied to any help body.
   ========================================================================== */

/* ---- shell: independent-scroll docs columns ---- */

.help-center {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: rgb(var(--color-surface));
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- left rail (Help::NavRailComponent) ---- */

.help-center .rail {
  border-right: 1px solid rgb(var(--color-border));
  padding: 20px 12px 32px 20px;
  overflow-y: auto;
  min-height: 0;
}

.help-center .rail-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgb(var(--color-form-border));
  border-radius: 8px;
  background: rgb(var(--color-form-bg));
  color: rgb(var(--color-form-placeholder));
  font-size: 13.5px;
  text-align: left;
}

.help-center .rail-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: rgb(var(--color-form-text));
}

.help-center .rail-search input::-moz-placeholder {
  color: rgb(var(--color-form-placeholder));
}

.help-center .rail-search input::placeholder {
  color: rgb(var(--color-form-placeholder));
}

/* Focus treatment on the bordered wrapper, not the inner input (house rule 9:
   ring width + colour paired). */

.help-center .rail-search:focus-within {
  border-color: rgb(var(--color-ring));
  box-shadow: 0 0 0 3px rgb(var(--color-ring) / .18);
}

.help-center .rail-search input:focus {
  outline: none;
  box-shadow: none;
}

/* Focused: the placeholder and the "/" hint step aside, as in a plain input. */

.help-center .rail-search input:focus::-moz-placeholder {
  color: transparent;
}

.help-center .rail-search input:focus::placeholder {
  color: transparent;
}

.help-center .rail-search:focus-within kbd {
  display: none;
}

.help-center .rail-search kbd {
  margin-left: auto;
  font: 500 11px/1 ui-monospace, monospace;
  color: rgb(var(--color-text-muted));
  border: 1px solid rgb(var(--color-border));
  border-radius: 4px;
  padding: 3px 5px;
}

.help-center .rail h4 {
  margin: 22px 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--color-text-tertiary));
}

.help-center .rail h4:first-of-type {
  margin-top: 20px;
}

.help-center .rail a, .help-center .rail summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13.5px;
  color: rgb(var(--color-text-secondary));
  line-height: 1.35;
}

.help-center .rail a:hover, .help-center .rail summary:hover {
  background: rgb(var(--color-hover));
  color: rgb(var(--color-text));
}

.help-center .rail a.cur {
  color: rgb(var(--color-link));
  font-weight: 600;
  background: rgb(var(--color-info-bg) / .55);
}

/* Keep every rail row on one line — the label ellipsizes, the count column and
   chevron keep their single right edge (Stripe-docs rail grain). */

.help-center .rail .lbl {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The category label is a real link inside the summary — reset the .rail a box
   styling so it lays out as the ellipsizing label, and navigates on its own. */

.help-center .rail summary a.lbl {
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-weight: inherit;
}

.help-center .rail summary a.lbl:hover {
  background: none;
  color: rgb(var(--color-link));
}

.help-center .rail .n {
  margin-left: auto;
  min-width: 2.25rem;
  text-align: right;
  font-size: 12px;
  color: rgb(var(--color-text-muted));
  font-variant-numeric: tabular-nums;
}

.help-center .rail details > summary {
  list-style: none;
  font-weight: 500;
  color: rgb(var(--color-text));
  cursor: pointer;
}

.help-center .rail details > summary::-webkit-details-marker {
  display: none;
}

.help-center .rail details > summary .chev {
  width: 1em;
  flex: none;
  margin-left: 6px;
  color: rgb(var(--color-text-muted));
  transition: transform .15s;
}

.help-center .rail details[open] > summary .chev {
  transform: rotate(90deg);
}

.help-center .rail details .sub {
  padding: 2px 0 6px 10px;
  border-left: 1px solid rgb(var(--color-border));
  margin: 2px 0 4px 15px;
}

.help-center .rail details .sub .sub {
  margin-left: 0;
  padding-left: 8px;
}

.help-center .rail details .sub .sub a {
  padding-left: 10px;
  font-size: 12.75px;
}

.help-center .rail details .sub a {
  padding-left: 12px;
  min-height: 30px;
  font-size: 13px;
  border-radius: 0;
  margin-left: -11px;
  border-left: 2px solid transparent;
}

.help-center .rail details .sub a .n {
  margin-right: calc(1em + 6px);
}

.help-center .rail details .sub a.cur {
  border-left-color: rgb(var(--color-link));
  background: none;
}

.help-center .rail details .sub a.all {
  color: rgb(var(--color-link));
  font-weight: 500;
}

.help-center .rail details .sub > summary {
  font-weight: 600;
  color: rgb(var(--color-text));
  padding-left: 12px;
  margin-left: -11px;
  min-height: 30px;
  font-size: 13px;
}

.help-center .rail .rail-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgb(var(--color-border));
}

.help-center .rail .rail-foot a {
  color: rgb(var(--color-text-tertiary));
  font-size: 13px;
}

/* FIZZY-1756: the support sentence is plain copy with inline links, so reset the
   .rail a row box (flex/min-height/padding) for its links. */

.help-center .rail .rail-support {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 5px 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgb(var(--color-text-tertiary));
}

.help-center .rail .rail-support .bi {
  line-height: 1.45;
}

.help-center .rail .rail-foot .rail-support a {
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: rgb(var(--color-link));
}

.help-center .rail .rail-foot .rail-support a:hover {
  background: none;
  text-decoration: underline;
}

/* Support sentence in page bodies (help-row, article TOC foot). */

.help-center .support-contact {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .support-contact a {
  display: inline;
  padding: 0;
  border: 0;
  margin: 0;
  color: rgb(var(--color-link));
}

.help-center .support-contact a:hover {
  text-decoration: underline;
}

/* ---- article / page column ---- */

.help-center .page {
  min-width: 0;
  overflow-y: auto;
  min-height: 0;
  padding: 32px 40px 64px;
  display: grid;
  grid-template-columns: minmax(0, 720px) 200px;
  -moz-column-gap: 48px;
       column-gap: 48px;
  justify-content: start;
}

.help-center .page.wide {
  grid-template-columns: minmax(0, 860px);
}

.help-center .page > .main {
  min-width: 0;
}

.help-center .crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.help-center .crumbs a:hover {
  color: rgb(var(--color-text));
}

.help-center .crumbs .sep {
  color: rgb(var(--color-text-muted));
}

.help-center .crumbs .here {
  color: rgb(var(--color-text-secondary));
  font-weight: 500;
}

.help-center .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--color-text-tertiary));
}

.help-center h1.title {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: rgb(var(--color-text));
  text-wrap: balance;
}

.help-center p.lead {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgb(var(--color-text-secondary));
  max-width: 62ch;
}

.help-center .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin-top: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(var(--color-border));
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .meta .dot {
  color: rgb(var(--color-text-muted));
}

.help-center .meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.help-center .meta + .help-prose {
  margin-top: 28px;
}

/* ---- prose: the type fix (standalone, applied via .help-prose) ---- */

.help-prose {
  font-size: 16px;
  line-height: 1.65;
  color: rgb(var(--color-text));
  max-width: 72ch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Vertical rhythm. ONE place owns the gap between the article's top-level
   blocks: the owl rules below. Element rules further down must not set a
   margin on p / ul / ol / blockquote / table / .codeblock / .callout / figure —
   `.help-prose p { margin: 0 }` (specificity 0,1,1) used to beat the owl
   `.help-prose > * + *` (0,1,0) and glued every paragraph to the next.
   Headings keep their own margins: more space above than below, and the block
   right after a heading sits on the heading's bottom margin alone. */

.help-prose > * {
  margin-top: 0;
  margin-bottom: 0;
}

.help-prose > * + * {
  margin-top: 1.25em;
}

.help-prose > * + :where(table, .codeblock, .callout, figure, blockquote, pre) {
  margin-top: 1.5em;
}

.help-prose > :where(table, .codeblock, .callout, figure, blockquote, pre) + * {
  margin-top: 1.5em;
}

.help-prose > * + hr, .help-prose > hr + * {
  margin-top: 2em;
}

/* `![shot](…)` renders a <figure> inside a <p>; the parser closes the <p> early
   and leaves empty siblings that would otherwise add their own gap. */

.help-prose > p:empty {
  display: none;
}

.help-prose h2 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 2.4em 0 .7em;
  scroll-margin-top: 24px;
  color: rgb(var(--color-text));
}

.help-prose h3 {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  margin: 1.8em 0 .6em;
  scroll-margin-top: 24px;
  color: rgb(var(--color-text));
}

.help-prose h4 {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  margin: 1.6em 0 .4em;
  scroll-margin-top: 24px;
  color: rgb(var(--color-text));
}

.help-prose > :is(h2, h3, h4):first-child {
  margin-top: 0;
}

.help-prose > h2 + h3, .help-prose > h3 + h4 {
  margin-top: .9em;
}

.help-prose > :is(h2, h3, h4) + :not(h2, h3, h4) {
  margin-top: 0;
}

.help-prose hr {
  height: 0;
  border: 0;
  border-top: 1px solid rgb(var(--color-border));
}

.help-prose h2 a.anchor, .help-prose h3 a.anchor {
  color: rgb(var(--color-text-muted));
  opacity: 0;
  margin-left: 8px;
  font-weight: 400;
  text-decoration: none;
}

.help-prose h2:hover a.anchor, .help-prose h3:hover a.anchor {
  opacity: 1;
}

.help-prose ul, .help-prose ol {
  padding-left: 1.4em;
}

/* Tailwind preflight sets list-style:none on ul/ol; restore markers (the mock's
   .prose ul/li rules) so article body lists actually show bullets/numbers. */

.help-prose ul {
  list-style: disc;
}

.help-prose ol {
  list-style: decimal;
}

.help-prose li {
  margin: .4em 0;
  padding-left: .15em;
}

/* Loose list items (<li><p>…</p><p>…</p></li>) and nested lists / code inside an
   item: a smaller gap than between top-level blocks so the item reads as one. */

.help-prose li > :is(p, ul, ol, blockquote, table, figure, .codeblock, .callout) {
  margin-top: .5em;
  margin-bottom: 0;
}

.help-prose li > :is(p, ul, ol, blockquote, table, figure, .codeblock, .callout):first-child {
  margin-top: 0;
}

.help-prose li::marker {
  color: rgb(var(--color-text-muted));
}

.help-prose strong {
  font-weight: 600;
  color: rgb(var(--color-text));
}

.help-prose em {
  font-style: italic;
}

.help-prose a {
  color: rgb(var(--color-link));
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(var(--color-link) / .35);
  text-underline-offset: 3px;
}

.help-prose a:hover {
  text-decoration-color: currentColor;
}

.help-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  padding: .1em .4em;
  border-radius: 5px;
  background: rgb(var(--color-surface-tertiary));
  border: 1px solid rgb(var(--color-border));
  color: rgb(var(--color-text));
}

.help-prose pre {
  margin: 0;
  padding: 14px 16px;
  border-radius: 0 0 10px 10px;
  background: #0f172a;
  color: #e6edf7;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.55;
  border: 1px solid rgb(var(--color-border));
  border-top: 0;
}

.help-prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.help-prose .codeblock .codeblock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 6px 14px;
  border: 1px solid rgb(var(--color-border));
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgb(var(--color-surface-secondary));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--color-text-tertiary));
}

.help-prose .codeblock .codeblock__bar button {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--color-text-secondary));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 0;
  background: none;
  cursor: pointer;
}

.help-prose .codeblock .codeblock__bar button:hover {
  background: rgb(var(--color-hover));
  color: rgb(var(--color-text));
}

.help-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}

.help-prose th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: rgb(var(--color-text-secondary));
  padding: 8px 12px;
  border-bottom: 1px solid rgb(var(--color-border-strong));
  background: rgb(var(--color-surface-secondary));
}

.help-prose td {
  padding: 9px 12px;
  border-bottom: 1px solid rgb(var(--color-border));
  vertical-align: top;
}

.help-prose td:first-child {
  font-weight: 500;
}

/* Phone: a table whose columns cannot shrink to the column (an unbreakable
   keyword list) scrolls sideways inside its own box instead of being clipped. */

@media (max-width: 640px) {
  .help-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

.help-prose blockquote > * + *, .help-prose .callout__body > * + * {
  margin-top: .75em;
}

.help-prose blockquote {
  padding-left: 14px;
  border-left: 3px solid rgb(var(--color-border-strong));
  color: rgb(var(--color-text-secondary));
}

.help-prose .callout {
  display: flex;
  gap: 12px;
  padding: 12px 16px 13px 14px;
  border-radius: 8px;
  border: 1px solid rgb(var(--color-border));
  border-left: 3px solid;
  background: rgb(var(--color-surface-secondary));
  font-size: 15px;
  line-height: 1.6;
}

.help-prose .callout__icon {
  margin-top: 2px;
  font-size: 15px;
  flex: none;
}

.help-prose .callout__body {
  min-width: 0;
}

.help-prose .callout__body p {
  color: rgb(var(--color-text));
}

.help-prose .callout__body strong {
  font-weight: 600;
}

.help-prose .callout--info {
  border-left-color: rgb(var(--color-info-text));
}

.help-prose .callout--info .callout__icon, .help-prose .callout--info .callout__body strong {
  color: rgb(var(--color-info-text));
}

.help-prose .callout--warning {
  border-left-color: rgb(var(--color-warning-solid));
}

.help-prose .callout--warning .callout__icon, .help-prose .callout--warning .callout__body strong {
  color: rgb(var(--color-warning-text));
}

.help-prose .callout--success {
  border-left-color: rgb(var(--color-success-text));
}

.help-prose .callout--success .callout__icon, .help-prose .callout--success .callout__body strong {
  color: rgb(var(--color-success-text));
}

.help-prose figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(var(--color-border));
  border-radius: 10px;
  background: rgb(var(--color-surface-secondary));
}

.help-prose figure .shot-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  border-radius: 10px;
  border: 1px dashed rgb(var(--color-border-strong));
  background: rgb(var(--color-surface-secondary));
  color: rgb(var(--color-text-muted));
}

.help-prose figure .shot-missing .shot-missing__title {
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--color-text-secondary));
}

.help-prose figure .shot-missing .shot-missing__path {
  font-size: 12px;
  color: rgb(var(--color-text-tertiary));
  font-family: ui-monospace, monospace;
}

.help-prose figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.help-prose figcaption i {
  margin-top: 2px;
  flex: none;
}

/* ---- table of contents (right rail) ---- */

.help-center .toc {
  position: sticky;
  top: 24px;
  align-self: start;
  font-size: 13px;
}

.help-center .toc .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.help-center .toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid rgb(var(--color-border));
}

.help-center .toc a {
  display: block;
  padding: 5px 0 5px 12px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: rgb(var(--color-text-tertiary));
  line-height: 1.4;
}

.help-center .toc a:hover {
  color: rgb(var(--color-text));
}

.help-center .toc a.cur {
  color: rgb(var(--color-link));
  border-left-color: rgb(var(--color-link));
  font-weight: 500;
}

.help-center .toc li.l3 a {
  padding-left: 24px;
  font-size: 12.5px;
}

.help-center .toc .toc-progress {
  margin-top: 10px;
  font-size: 12px;
  color: rgb(var(--color-text-muted));
  font-variant-numeric: tabular-nums;
}

.help-center .toc .toc-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--color-border));
  display: grid;
  gap: 8px;
}

.help-center .toc .toc-foot a {
  padding: 0;
  border: 0;
  margin: 0;
  color: rgb(var(--color-text-secondary));
  display: flex;
  align-items: center;
  gap: 7px;
}

.help-center .toc .toc-foot a:hover {
  color: rgb(var(--color-link));
}

.help-center .toc .toc-foot .support-contact {
  font-size: 13px;
  line-height: 1.45;
}

.help-center .toc .toc-foot .support-contact a {
  display: inline;
  color: rgb(var(--color-link));
  border-left: 0;
}

/* ---- article footer ---- */

.help-center .afoot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgb(var(--color-border));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.help-center .vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 14px;
  color: rgb(var(--color-text-secondary));
}

.help-center .vote .vote__q {
  font-weight: 500;
  color: rgb(var(--color-text));
}

.help-center .vote .btns {
  display: flex;
  gap: 6px;
}

.help-center .vote .done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--color-success-text));
  font-weight: 500;
}

.help-center .pn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.help-center .pn a {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgb(var(--color-border));
  border-radius: 10px;
}

.help-center .pn a:hover {
  border-color: rgb(var(--color-border-strong));
  background: rgb(var(--color-hover));
}

.help-center .pn a .k {
  font-size: 12px;
  color: rgb(var(--color-text-tertiary));
  display: flex;
  align-items: center;
  gap: 5px;
}

.help-center .pn a .t {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--color-text));
}

.help-center .pn a.next {
  text-align: right;
}

.help-center .pn a.next .k {
  justify-content: flex-end;
}

.help-center .rel h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.help-center .rel p.sub {
  margin: 0 0 10px;
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .rel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgb(var(--color-border));
}

.help-center .rel li a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid rgb(var(--color-border));
  font-size: 14px;
}

.help-center .rel li a .t {
  font-weight: 500;
  color: rgb(var(--color-text));
}

.help-center .rel li a:hover .t {
  color: rgb(var(--color-link));
}

.help-center .rel li a .d {
  color: rgb(var(--color-text-tertiary));
  font-size: 13px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-center .rel li a .m {
  color: rgb(var(--color-text-muted));
  font-size: 12px;
  white-space: nowrap;
}

.help-center .copilot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .copilot .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-accent-border));
  color: rgb(var(--color-accent-text));
  font-size: 12.5px;
  font-weight: 500;
  background: rgb(var(--color-surface));
}

.help-center .copilot .chip:hover {
  background: rgb(var(--color-accent-bg));
}

/* ---- landing ---- */

.help-center .hero {
  padding: 8px 0 28px;
  border-bottom: 1px solid rgb(var(--color-border));
}

.help-center .hero h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: rgb(var(--color-text));
}

.help-center .hero > p {
  margin: 8px 0 0;
  font-size: 16px;
  color: rgb(var(--color-text-secondary));
}

.help-center .bigsearch {
  position: relative;
  margin-top: 22px;
  max-width: 640px;
}

.help-center .bigsearch .field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgb(var(--color-form-border));
  border-radius: 10px;
  background: rgb(var(--color-form-bg));
  color: rgb(var(--color-text));
  font-size: 15px;
  box-shadow: var(--shadow-sm);
}

.help-center .bigsearch .field:focus-within {
  border-color: rgb(var(--color-ring));
  box-shadow: 0 0 0 3px rgb(var(--color-ring) / .18);
}

.help-center .bigsearch .field .search-icon {
  color: rgb(var(--color-text-muted));
  font-size: 16px;
  flex: none;
}

.help-center .bigsearch .field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: rgb(var(--color-text));
}

.help-center .bigsearch .field input::-moz-placeholder {
  color: rgb(var(--color-form-placeholder));
}

.help-center .bigsearch .field input::placeholder {
  color: rgb(var(--color-form-placeholder));
}

.help-center .bigsearch .field input:focus {
  outline: none;
  box-shadow: none;
}

.help-center .bigsearch .field input:focus::-moz-placeholder {
  color: transparent;
}

.help-center .bigsearch .field input:focus::placeholder {
  color: transparent;
}

.help-center .bigsearch .field:focus-within kbd {
  display: none;
}

.help-center .bigsearch .field kbd {
  margin-left: auto;
  font: 500 11px/1 ui-monospace, monospace;
  color: rgb(var(--color-text-muted));
  border: 1px solid rgb(var(--color-border));
  border-radius: 4px;
  padding: 3px 5px;
}

.help-center .section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 12px;
}

.help-center .section-h h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgb(var(--color-text));
}

.help-center .section-h .hint {
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}

.help-center .cat {
  padding: 22px 0;
  border-top: 1px solid rgb(var(--color-border));
}

.help-center .cat .hd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.help-center .cat .hd .ic {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgb(var(--color-surface-tertiary));
  color: rgb(var(--color-text-secondary));
  font-size: 17px;
  flex: none;
}

.help-center .cat .hd h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--color-text));
  flex-wrap: wrap;
}

.help-center .cat .hd p {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .cat ul {
  list-style: none;
  margin: 12px 0 0 48px;
  padding: 0;
}

.help-center .cat li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  color: rgb(var(--color-text-secondary));
}

.help-center .cat li a > i {
  color: rgb(var(--color-text-muted));
  flex: none;
}

.help-center .cat li a:hover {
  color: rgb(var(--color-link));
}

.help-center .cat li a:hover > i {
  color: rgb(var(--color-text-muted));
}

.help-center .cat li a .n {
  margin-left: auto;
  font-size: 12px;
  color: rgb(var(--color-text-muted));
  font-variant-numeric: tabular-nums;
}

.help-center .cat li a.more {
  color: rgb(var(--color-link));
  font-weight: 500;
  font-size: 13px;
}

.help-center .list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgb(var(--color-border));
}

.help-center .list li a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 12px 2px;
  border-bottom: 1px solid rgb(var(--color-border));
  align-items: baseline;
}

.help-center .list li a:hover .t {
  color: rgb(var(--color-link));
}

.help-center .list .t {
  font-size: 15px;
  font-weight: 500;
  color: rgb(var(--color-text));
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.help-center .list .d {
  grid-column: 1;
  font-size: 14px;
  color: rgb(var(--color-text-secondary));
  line-height: 1.5;
}

.help-center .list .m {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 12.5px;
  color: rgb(var(--color-text-muted));
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.help-center .list .m .rev {
  display: block;
  color: rgb(var(--color-text-tertiary));
}

.help-center .unreviewed-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgb(var(--color-text-muted));
  font-variant-numeric: tabular-nums;
}

.help-center .help-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 40px;
  padding: 18px 20px;
  border: 1px solid rgb(var(--color-border));
  border-radius: 12px;
  background: rgb(var(--color-surface-secondary));
}

.help-center .help-row .ic {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  color: rgb(var(--color-text-secondary));
  flex: none;
}

.help-center .help-row h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.help-center .help-row p {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .help-row .acts {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- section page ---- */

.help-center .tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid rgb(var(--color-border));
  margin-top: 20px;
  scrollbar-width: none;
  /* Right-edge fade cues that the strip scrolls when the sections overflow. The
     mask is anchored to the visible edge, so it stays put as you scroll. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.help-center .tabs::-webkit-scrollbar {
  display: none;
}

.help-center .tabs a {
  white-space: nowrap;
  padding: 9px 12px 11px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--color-text-tertiary));
  display: flex;
  gap: 6px;
  align-items: center;
}

.help-center .tabs a .n {
  font-size: 12px;
  color: rgb(var(--color-text-muted));
  font-variant-numeric: tabular-nums;
}

.help-center .tabs a:hover {
  color: rgb(var(--color-text));
}

.help-center .tabs a.cur {
  color: rgb(var(--color-text));
  border-bottom-color: rgb(var(--color-text));
}

.help-center .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 6px;
}

.help-center .toolbar .count {
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .toolbar .grow {
  flex: 1;
}

.help-center .toolbar form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.help-center .toolbar .fld {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgb(var(--color-form-border));
  border-radius: 8px;
  background: rgb(var(--color-form-bg));
  font-size: 13.5px;
  color: rgb(var(--color-form-placeholder));
  min-width: 220px;
}

.help-center .toolbar .fld input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: rgb(var(--color-form-text));
}

.help-center .toolbar .fld input::-moz-placeholder {
  color: rgb(var(--color-form-placeholder));
}

.help-center .toolbar .fld input::placeholder {
  color: rgb(var(--color-form-placeholder));
}

.help-center .toolbar .fld input:focus {
  outline: none;
}

.help-center .toolbar .sel {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgb(var(--color-form-border));
  border-radius: 8px;
  background: rgb(var(--color-form-bg));
  font-size: 13.5px;
  color: rgb(var(--color-form-text));
}

.help-center .toolbar .sel select {
  border: 0;
  background: none;
  font: inherit;
  color: rgb(var(--color-form-text));
  padding: 0;
}

.help-center .toolbar .sel select:focus {
  outline: none;
}

.help-center .pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .pager .pg {
  display: flex;
  gap: 4px;
  align-items: center;
}

.help-center .pager .pg .pg-item {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: rgb(var(--color-text-secondary));
  font-weight: 500;
  text-decoration: none;
}

.help-center .pager .pg .pg-item.cur {
  border-color: rgb(var(--color-border-strong));
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text));
}

.help-center .pager .pg a.pg-item:hover {
  background: rgb(var(--color-hover));
  color: rgb(var(--color-text));
}

.help-center .empty {
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed rgb(var(--color-border-strong));
  border-radius: 12px;
  color: rgb(var(--color-text-tertiary));
  font-size: 14px;
  margin-top: 12px;
}

.help-center .empty .empty__icon {
  font-size: 24px;
  color: rgb(var(--color-text-muted));
  display: block;
  margin: 0 auto 10px;
}

.help-center .empty b {
  display: block;
  color: rgb(var(--color-text-secondary));
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 15px;
}

.help-center .empty a {
  color: rgb(var(--color-link));
  font-weight: 500;
}

/* ---- search results: category filter chips + degraded notice ---- */

.help-center .filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
}

.help-center .fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-border));
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--color-text-secondary));
  background: rgb(var(--color-surface));
}

.help-center .fchip:hover {
  border-color: rgb(var(--color-border-strong));
  color: rgb(var(--color-text));
}

.help-center .fchip.cur {
  background: rgb(var(--color-info-bg));
  border-color: rgb(var(--color-info-border));
  color: rgb(var(--color-info-text));
}

.help-center .fchip .n {
  font-variant-numeric: tabular-nums;
}

.help-center .degraded {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgb(var(--color-warning-border));
  border-left: 3px solid rgb(var(--color-warning-solid));
  background: rgb(var(--color-surface-secondary));
  font-size: 14px;
  line-height: 1.55;
  color: rgb(var(--color-text));
}

.help-center .degraded i {
  color: rgb(var(--color-warning-text));
  margin-top: 2px;
  flex: none;
}

.help-center .degraded .grow {
  flex: 1;
  min-width: 0;
}

.help-center .results-count {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
  font-variant-numeric: tabular-nums;
}

/* ---- typeahead / search suggestion panel chrome ---- */

.help-center .ta-panel {
  background: rgb(var(--color-surface-overlay));
  border: 1px solid rgb(var(--color-border));
  border-radius: 10px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.help-center .ta-panel .ta-hd {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--color-text-tertiary));
  border-bottom: 1px solid rgb(var(--color-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.help-center .ta-panel .ta-ft {
  padding: 8px 14px;
  font-size: 12px;
  color: rgb(var(--color-text-tertiary));
  background: rgb(var(--color-surface-secondary));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.help-center .ta-panel .ta-ft kbd {
  font: 500 11px/1 ui-monospace, monospace;
  border: 1px solid rgb(var(--color-border));
  border-radius: 4px;
  padding: 2px 4px;
  margin: 0 2px;
}

.help-center .ta-panel .ta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid rgb(var(--color-border-subtle));
  font-size: 14px;
}

.help-center .ta-panel .ta-item:last-child {
  border-bottom: 0;
}

.help-center .ta-panel .ta-item:hover, .help-center .ta-panel .ta-item[aria-selected="true"] {
  background: rgb(var(--color-hover));
}

.help-center .ta-panel .ta-item .ta-icon {
  color: rgb(var(--color-text-muted));
  flex: none;
}

.help-center .ta-panel .ta-item .t {
  font-weight: 500;
  color: rgb(var(--color-text));
  min-width: 0;
}

.help-center .ta-panel .ta-item .t mark {
  background: rgb(var(--color-warning-bg));
  color: rgb(var(--color-warning-text));
  border-radius: 3px;
  padding: 0 1px;
}

.help-center .ta-panel .ta-item .p {
  margin-left: auto;
  font-size: 12px;
  color: rgb(var(--color-text-muted));
  white-space: nowrap;
}

.help-center .ta-panel .ta-empty {
  padding: 14px;
  font-size: 13.5px;
  color: rgb(var(--color-text-secondary));
}

/* Rail typeahead as an overlay (help-search overlay mode). The rail's scroll box
   would clip an in-flow dropdown to ~216px, so the panel is fixed and the
   controller sets top/left/width/max-height from the search box. z-30: above
   the article column, below dropdowns, the drawer and modals (z-50+). */

.help-center .ta-overlay {
  position: fixed;
  z-index: 30;
}

.help-center .ta-overlay .ta-panel {
  max-height: inherit;
  overflow-y: auto;
}

.help-center .ta-overlay .ta-item {
  align-items: flex-start;
}

.help-center .ta-overlay .ta-item .ta-icon {
  margin-top: 2px;
}

.help-center .ta-overlay .ta-item .t {
  flex: 1 1 auto;
  white-space: normal;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.help-center .ta-overlay .ta-item .p {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.help-center .ta-overlay .ta-hd > span, .help-center .ta-overlay .ta-ft > * {
  white-space: nowrap;
}

.help-center .ta-overlay .ta-hd > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- support requests: new-request form + ticket conversation ----
   The thread entries themselves (help/support_tickets/_message) use token
   utilities because the admin ticket page and the reply broadcast render them
   outside .help-center; only the page frame lives here. */

.help-center .ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

@media (min-width: 1280px) {
  .help-center .ticket-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

.help-center .ticket-thread {
  border: 1px solid rgb(var(--color-border));
  border-radius: 12px;
  background: rgb(var(--color-surface));
  overflow: hidden;
}

.help-center .ticket-thread #comments > * {
  border-top: 1px solid rgb(var(--color-border));
}

.help-center .ticket-empty, .help-center .ticket-closed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 20px;
  border-top: 1px solid rgb(var(--color-border));
  font-size: 13.5px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .ticket-empty .bi, .help-center .ticket-closed .bi {
  color: rgb(var(--color-text-muted));
}

.help-center .ticket-closed {
  flex-wrap: wrap;
  background: rgb(var(--color-surface-secondary));
}

.help-center .ticket-closed a {
  color: rgb(var(--color-link));
  font-weight: 500;
}

/* The empty note steps aside once any reply is in the thread, live ones included. */

.help-center .ticket-thread:has(#comments > *) .ticket-empty {
  display: none;
}

.help-center .ticket-aside {
  display: grid;
  gap: 16px;
}

.help-center .ticket-card {
  border: 1px solid rgb(var(--color-border));
  border-radius: 12px;
  background: rgb(var(--color-surface));
  padding: 16px;
}

.help-center .ticket-card h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--color-text-tertiary));
}

.help-center .ticket-card p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgb(var(--color-text-secondary));
}

.help-center .ticket-card p:last-child {
  margin-bottom: 0;
}

.help-center .ticket-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.help-center .ticket-card li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgb(var(--color-text-secondary));
}

.help-center .ticket-card li > .bi {
  color: rgb(var(--color-text-muted));
  margin-top: 1px;
  flex: none;
}

.help-center .ticket-card li a {
  color: rgb(var(--color-link));
  font-weight: 500;
}

.help-center .ticket-card li a:hover {
  text-decoration: underline;
}

.help-center .ticket-details dl {
  margin: 0;
  display: grid;
  gap: 0;
}

.help-center .ticket-details dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgb(var(--color-border-subtle));
}

.help-center .ticket-details dl > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.help-center .ticket-details dt {
  font-size: 13px;
  color: rgb(var(--color-text-tertiary));
}

.help-center .ticket-details dd {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--color-text));
  text-align: right;
}

.help-center .ticket-copilot {
  background: rgb(var(--color-surface-secondary));
}

.help-center .ticket-copilot h2 {
  color: rgb(var(--color-text-secondary));
}

/* New request form: request-type choice cards (a visually hidden radio per card). */

.help-center .ticket-form {
  border: 1px solid rgb(var(--color-border));
  border-radius: 12px;
  background: rgb(var(--color-surface));
  overflow: hidden;
}

.help-center .ticket-form .body {
  padding: 20px;
  display: grid;
  gap: 22px;
}

.help-center .ticket-form .foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-secondary));
}

.help-center .ticket-form .foot a {
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--color-text-secondary));
}

.help-center .ticket-form .foot a:hover {
  color: rgb(var(--color-text));
}

.help-center .ticket-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.help-center .ticket-form .lbl {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.help-center .ticket-form .hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgb(var(--color-text-tertiary));
}

.help-center .type-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-center .type-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  cursor: pointer;
  border: 1px solid rgb(var(--color-border));
  border-radius: 10px;
  background: rgb(var(--color-surface));
}

.help-center .type-opt:hover {
  border-color: rgb(var(--color-border-strong));
  background: rgb(var(--color-hover));
}

.help-center .type-opt .bi {
  font-size: 17px;
  color: rgb(var(--color-text-muted));
}

.help-center .type-opt .t {
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.help-center .type-opt .d {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgb(var(--color-text-tertiary));
}

.help-center .type-opt:has(input:checked) {
  border-color: rgb(var(--color-info-border));
  background: rgb(var(--color-info-bg));
  box-shadow: inset 0 0 0 1px rgb(var(--color-info-border));
}

.help-center .type-opt:has(input:checked) .bi {
  color: rgb(var(--color-info-text));
}

.help-center .type-opt:has(input:focus-visible) {
  outline: 2px solid rgb(var(--color-ring));
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .help-center .type-opts {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-center .type-opt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 2px;
    align-items: center;
  }

  .help-center .type-opt .d {
    grid-column: 2;
  }
}

/* ---- role gate pill in a list/title row (BadgeComponent handles colours) ---- */

.help-center .list .t .badge-slot, .help-center .cat .hd h3 .badge-slot {
  display: inline-flex;
}

/* ---- mobile disclosures + responsive folds ---- */

.help-center .mobile-only {
  display: none;
}

.help-center .disc {
  border: 1px solid rgb(var(--color-border));
  border-radius: 10px;
  margin-bottom: 12px;
  background: rgb(var(--color-surface));
}

.help-center .disc > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: rgb(var(--color-text));
}

.help-center .disc > summary::-webkit-details-marker {
  display: none;
}

.help-center .disc > summary .chev {
  margin-left: auto;
  color: rgb(var(--color-text-muted));
}

.help-center .disc .body {
  border-top: 1px solid rgb(var(--color-border));
  padding: 10px 14px;
}

.help-center .disc .body a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: rgb(var(--color-text-secondary));
}

.help-center .disc .body a.cur {
  color: rgb(var(--color-link));
  font-weight: 600;
}

@media (max-width: 1180px) {
  .help-center .page {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-center .toc {
    display: none;
  }

  .help-center .mobile-only.toc-m {
    display: block;
  }
}

@media (max-width: 960px) {
  .help-center {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-center .rail {
    display: none;
  }

  .help-center .mobile-only.rail-m {
    display: block;
  }

  .help-center .cats {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-center .pn {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-center .page {
    padding: 24px 20px 48px;
  }
}

@media (max-width: 640px) {
  .help-center .page {
    padding: 20px 16px 40px;
  }

  .help-center .list li a {
    grid-template-columns: 1fr;
  }

  .help-center .list .m {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .help-center .list .m .rev {
    display: inline;
    margin-left: 8px;
  }
}

/* ============================================================================
   FILL-IN FLOW — FormBuilder::StepProgressComponent (FormFill step pages)

   A step that an answer just added pulses once (the "Step added" announcement
   names it). Colours and layout are Tailwind token utilities on the markup;
   only the one-off pulse needs a keyframe. Reduced motion: no pulse, and the
   bar's width change is instant.
   ============================================================================ */

.step-progress-flash {
  animation: step-progress-flash 1.6s ease;
}

@keyframes step-progress-flash {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--color-info-solid) / 0.6);
  }

  60% {
    box-shadow: 0 0 0 8px rgb(var(--color-info-solid) / 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(var(--color-info-solid) / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-progress-flash {
    animation: none;
  }

  .step-progress-fill {
    transition: none;
  }
}

/* ============================================================================
   FILL-IN FLOW — FormBuilder::StepNavigationComponent (staff variant)

   The staff bar, fixed to the bottom of the viewport. Lives here rather than
   inline in the template: autosave morphs `#form-step-navigation` in place
   (FormFillFlow#fill_answer_streams), so a \3c style> beside that div would be
   appended again on every autosave.
   Phones (below md): full width, sitting on top of the app's bottom tab bar
   (Mobile::BottomTabBarComponent: fixed, h-14 = 3.5rem plus the safe-area
   inset, z-40), so neither covers the other.
   md and up: right of the sidebar (fixed w-64 = 16rem; the layout's main
   column is md:ml-64 at every sidebar state) at the very bottom.
   ============================================================================ */

.step-navigation-fixed {
  /* placed by the shared bottom-bar rule (BOTTOM BARS, below) */
  background: rgb(var(--color-surface));
  border-top: 1px solid rgb(var(--color-border));
  box-shadow: var(--shadow-md);
  padding: 0.75rem 0;
  z-index: 30;
}

/* Center content and apply max-width to match page content */

.step-navigation-fixed .navigation-content {
  max-width: 56rem;
  /* max-w-4xl */
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .step-navigation-fixed {
    padding: 1.25rem 0;
  }

  .step-navigation-fixed .navigation-content {
    padding: 0 2rem;
    /* px-8 to match page padding */
  }
}

/* ============================================================================
   BOTTOM BARS — the bars fixed to the bottom of the screen: the staff step
   navigation (FormBuilder::StepNavigationComponent), the form review
   Approve/Reject bar (Forms::FormReviewActionsComponent) and the advisor's
   sent-back edit bar (Forms::FormEditActionsComponent). FIZZY-2039/2065.

   One placement for all three: on phones (below md) full width, sitting on
   top of the app's bottom tab bar (Mobile::BottomTabBarComponent: fixed,
   h-14 = 3.5rem plus the safe-area inset), so neither covers the other; md
   and up right of the sidebar (fixed w-64 = 16rem; the main column is md:ml-64
   at every sidebar state) at the very bottom.

   The review and edit bars (.bottom-bar-fixed) have a set height,
   --bottom-bar-height: two rows on phones (their controls stack), one 69px
   row from md. Their in-flow spacer (.bottom-bar-spacer) reads the same
   variable, so page content always clears the bar. Their conversation panel
   sits inside the bar (absolute, bottom-full), so it opens just above it.
   ============================================================================ */

:root {
  --bottom-bar-height: 7rem;
}

.bottom-bar-fixed,
.step-navigation-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
}

.bottom-bar-fixed {
  z-index: 40;
  height: var(--bottom-bar-height);
}

.bottom-bar-spacer {
  height: var(--bottom-bar-height);
}

@media (min-width: 768px) {
  :root {
    --bottom-bar-height: 69px;
  }

  .bottom-bar-fixed,
  .step-navigation-fixed {
    left: 16rem;
    bottom: 0;
  }
}

/* ============================================================================
   FILL-IN FLOW — FormBuilder::StepContentComponent (the step form, #step-form)

   Moved here from an inline \3c style> in the component template. Every question
   rule is scoped with `:where(#step-form)`: the `.question-*` class names are
   shared with FormBuilder::FormRendererComponent and the preview/display
   components, which must not pick these rules up, and `:where()` adds no
   specificity, so each rule keeps the (0,2,0)-style weight it had inline
   (see "FORM INPUT COLOR-SCHEME PIN + CORRECT-BY-DEFAULT BASE" above). This block sits at the
   end of the file, so it still follows every earlier rule in source order, as
   the inline block did.
   ============================================================================ */

/* Pin the native color-scheme to the app's class-based theme, so this subtree
 * opts out of Chrome's Auto Dark Mode and the UA paints the widgets we cannot
 * repaint (checkbox/radio glyphs, the date picker, select popups) from the app
 * theme rather than the OS. Text-ish controls also get explicit colours below;
 * this covers the ones no background can reach. Scoped to the step form so the
 * data-source controls above the questions are covered too.
 *
 * Mechanism, measurements, and why the pre-paint meta is NOT the lever it looks
 * like: see "FORM INPUT COLOR-SCHEME PIN + CORRECT-BY-DEFAULT BASE" above. Read it before
 * changing this. */

#step-form {
  color-scheme: light;
}

.dark #step-form {
  color-scheme: dark;
}

/* Form questions styling */

:where(#step-form) .form-questions {
  padding: 0;
}

:where(#step-form) .question-container {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: flex-start;
  gap: 1rem;
}

:where(#step-form) .question-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: rgb(var(--color-ring));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  margin-top: 0.125rem;
}

:where(#step-form) .question-content {
  flex: 1;
  min-width: 0;
}

:where(#step-form) .question-content .form-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgb(var(--color-text));
  margin-bottom: 0.375rem;
  display: block;
}

/* The required marker in the danger token (the field components carry a
 * Bootstrap `text-danger` class this app does not define). */

:where(#step-form) .question-content .required-indicator {
  color: rgb(var(--color-error-text));
  margin-left: 0.125rem;
}

/* Radio and checkbox options: the control centred on the first line of its
 * label (a 1.5rem line box: (1.5rem - 1rem) / 2 = 0.25rem), with no UA
 * margin pushing it above the text. The options' row is items-start, so a
 * label that wraps keeps the control beside its first line. Only an option
 * with its label beside it: a data-source table's checkboxes keep theirs. */

:where(#step-form) .question-content input[type="radio"]:has(+ .compliance-check-label),
:where(#step-form) .question-content input[type="checkbox"]:has(+ .compliance-check-label) {
  width: 1rem;
  height: 1rem;
  margin: 0.25rem 0 0;
  flex-shrink: 0;
  accent-color: rgb(var(--color-link));
}

:where(#step-form) .question-content .compliance-check-label {
  font-size: 0.95rem;
  line-height: 1.5rem;
  color: rgb(var(--color-text));
  cursor: pointer;
}

:where(#step-form) .question-content .field-description {
  font-size: 0.85rem;
  color: rgb(var(--color-text-tertiary));
  margin-bottom: 0.5rem;
}

/* State the app's own colours outright so a text-ish control never depends on
 * the UA's or Chrome's interpretation of the page. This is the half that was
 * measurably load-bearing for `color`: with these reverted, an OS-dark browser
 * rendered this input's text grey on the light page.
 *
 * The class scoping, the `--color-form-*` token family and the `:disabled`
 * restatement below are all required by the contract documented next to
 * "FORM INPUT COLOR-SCHEME PIN + CORRECT-BY-DEFAULT BASE" above (grep the heading, not a line
 * number). Read it before widening these selectors.
 *
 * Local detail: `.form-select` is styled here too — selects previously got no
 * border or padding on this surface, unlike the preview. */

:where(#step-form) .question-content .form-control,
:where(#step-form) .question-content .form-select {
  border: 1px solid rgb(var(--color-border-strong));
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  width: 100%;
  background-color: rgb(var(--color-form-bg));
  color: rgb(var(--color-form-text));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Individual fields can be disabled (e.g. conditional/locked options), and this
 * block's background otherwise outranks `.dark select:disabled`. */

:where(#step-form) .question-content .form-control:disabled,
:where(#step-form) .question-content .form-select:disabled {
  background-color: rgb(var(--color-form-disabled-bg));
  color: rgb(var(--color-form-placeholder));
}

:where(#step-form) .question-content .form-control:focus,
:where(#step-form) .question-content .form-select:focus {
  border-color: rgb(var(--color-ring));
  box-shadow: 0 0 0 3px rgb(var(--color-ring) / 0.1);
  outline: none;
}

/* A question the last Continue or Submit turned away: its control takes the
 * error border and the message sits under it (the error summary above the
 * questions links here). */

:where(#step-form) .question-container.has-error .form-control,
:where(#step-form) .question-container.has-error .form-select {
  border-color: rgb(var(--color-error-solid));
}

:where(#step-form) .question-content .field-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: rgb(var(--color-error-text));
}

/* Header and paragraph field types - no number circle needed */

:where(#step-form) .question-container[data-field-type="header"] .question-content,
:where(#step-form) .question-container[data-field-type="paragraph"] .question-content,
:where(#step-form) .question-container[data-field-type="rich_text"] .question-content {
  width: 100%;
}

:where(#step-form) .question-container[data-field-type="header"] {
  margin-bottom: 1rem;
}

:where(#step-form) .question-container[data-field-type="paragraph"],
:where(#step-form) .question-container[data-field-type="rich_text"] {
  margin-bottom: 0.75rem;
}

/* FIZZY-1895: the chosen booking date / time slot, painted in the firm's accent.
   Defined here (not only in Shared::ExternalBrandingComponent) so it is present
   on every layout that uses the booking calendar + shared booking-page Stimulus
   controller — including the demo booking layout, which does not render that
   component. The accent/contrast variables come from the component on a branded
   page; the fallbacks apply where they are unset (e.g. demo bookings). Unlayered
   so it wins over the base status utilities regardless of layer ordering. */

.brand-selected {
  background-color: var(--brand-accent, #2563eb);
  border-color: var(--brand-accent, #2563eb);
  color: var(--brand-accent-contrast, #ffffff);
}

/* ============================================================================
   CONTENT HEADER — phone back link and header actions
   (Shared::ContentHeaderComponent + mobile_header_actions_controller.js)

   Below md the breadcrumb is hidden, so a detail header shows a "‹ <label>"
   back link left of the actions. The top row's data-mobile-actions (set by
   the server so the first paint is right, kept current by the controller)
   says how the actions show there:
     inline  three or fewer: beside the back link. The link truncates down to
             its min-width before the actions wrap.
     expand  more than three, no ⋮ menu: back link + kebab. The kebab slides
             the actions in over the back link (data-open), 200ms ease-out.
     fold    more than three with a ⋮ menu: only that menu shows; the other
             actions are listed inside it (built by the controller).
   The rule itself (what counts as an action, the limit, what is hidden) is
   defined in ContentHeaderComponent; the selectors below repeat its shapes:
   an action is an a/button/submit input outside a [role=menu] or [role=dialog], and the
   ⋮ menu is a [data-controller~=dropdown] that :has([role=menu]).
   Modals rendered inside the actions (a [role=dialog] beside its trigger,
   e.g. Escalate) are never hidden or transformed: expand hides the actions
   one by one rather than their container, so an open modal stays visible.
   :has() needs Safari/iOS 15.4+, Chrome 105+, Firefox 121+.
   md and up: nothing here applies, the header renders as it always has.
   Unlayered (after @tailwind utilities) so it wins over .flex / .ml-auto.
   ============================================================================ */

.content-header-back {
  flex: 0 1000 auto;
  min-width: 4.5rem;
}

.content-header-actions-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  .content-header-row {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }

  .content-header-row > #content-header-actions {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* expand: the back link and the actions share one grid cell; the kebab
     sits in column 2. */

  .content-header-row[data-mobile-actions="expand"] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .content-header-row[data-mobile-actions="expand"] > .content-header-back,
  .content-header-row[data-mobile-actions="expand"] > #content-header-actions {
    grid-area: 1 / 1;
  }

  .content-header-row[data-mobile-actions="expand"] > .content-header-back {
    justify-self: start;
    max-width: 100%;
  }

  .content-header-row[data-mobile-actions="expand"] > #content-header-actions {
    justify-self: end;
    margin-left: 0;
  }

  .content-header-row[data-mobile-actions="expand"] > .content-header-actions-toggle {
    display: inline-flex;
    grid-area: 1 / 2;
  }

  /* What slides: the back link, and each action. An action is a direct child
     of the container, unless that child holds a modal, in which case its own
     a/buttons slide and the wrapper (and the modal) stay put. */

  .content-header-row[data-mobile-actions="expand"] > .content-header-back,
  .content-header-row[data-mobile-actions="expand"] > #content-header-actions > :not([role="dialog"]):not(:has([role="dialog"])),
  .content-header-row[data-mobile-actions="expand"] > #content-header-actions > :has([role="dialog"]) :is(a, button, input[type="submit"]):not([role="dialog"] *) {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
  }

  /* Collapsed: the container is out of flow and lets taps through; the
     actions are invisible and unfocusable. A modal inside takes taps again. */

  .content-header-row[data-mobile-actions="expand"]:not([data-open]) > #content-header-actions {
    position: absolute;
    top: 0;
    right: 2.75rem;
    flex-wrap: nowrap;
    pointer-events: none;
  }

  .content-header-row[data-mobile-actions="expand"]:not([data-open]) > #content-header-actions [role="dialog"] {
    pointer-events: auto;
  }

  .content-header-row[data-mobile-actions="expand"]:not([data-open]) > #content-header-actions > :not([role="dialog"]):not(:has([role="dialog"])),
  .content-header-row[data-mobile-actions="expand"]:not([data-open]) > #content-header-actions > :has([role="dialog"]) :is(a, button, input[type="submit"]):not([role="dialog"] *) {
    opacity: 0;
    transform: translateX(16px);
    visibility: hidden;
  }

  /* Expanded: the back link fades out to the left. */

  .content-header-row[data-mobile-actions="expand"][data-open] > .content-header-back {
    opacity: 0;
    transform: translateX(-12px);
    visibility: hidden;
    pointer-events: none;
  }

  /* Whatever is becoming visible shows at once (no visibility delay). */

  .content-header-row[data-mobile-actions="expand"][data-open] > #content-header-actions > :not([role="dialog"]):not(:has([role="dialog"])),
  .content-header-row[data-mobile-actions="expand"][data-open] > #content-header-actions > :has([role="dialog"]) :is(a, button, input[type="submit"]):not([role="dialog"] *),
  .content-header-row[data-mobile-actions="expand"]:not([data-open]) > .content-header-back {
    transition-delay: 0s, 0s, 0s;
  }

  /* Icon-only actions: in expand mode every action that has an icon shows
     just the icon (collapsed or open, so nothing reflows as it slides in), so
     the row fits on one line. The text stays in the DOM for desktop; the
     controller gives each such action an aria-label from that text. An action
     with no icon keeps its text. Each is at least the 36px of the kebab (h-9),
     icon centred; button padding is unchanged, so they match the alert
     page's icon buttons. */

  .content-header-row[data-mobile-actions="expand"] > #content-header-actions :is(a, button):has(> i.bi):not([role="dialog"] *) {
    font-size: 0;
    gap: 0;
    min-height: 2.25rem;
    min-width: 2.25rem;
    justify-content: center;
    align-items: center;
  }

  /* Text in a child element with its own size (a <span class="text-sm">)
     would come back: hide every child but the icon (screen-reader text stays). */

  .content-header-row[data-mobile-actions="expand"] > #content-header-actions :is(a, button):has(> i.bi):not([role="dialog"] *) > :not(i.bi):not(.sr-only) {
    display: none;
  }

  /* Zero specificity (:where) so a link that is not already flex becomes
     one, yet .hidden on an action still wins; and so the icon gets back the
     size font-size:0 took from it (text-sm, as on the buttons) while an icon
     with its own size class (text-lg) keeps that. */

  :where(.content-header-row[data-mobile-actions="expand"] > #content-header-actions :is(a, button):has(> i.bi):not([role="dialog"] *)) {
    display: inline-flex;
  }

  :where(.content-header-row[data-mobile-actions="expand"] > #content-header-actions :is(a, button):has(> i.bi):not([role="dialog"] *) > i.bi) {
    font-size: 0.875rem;
  }

  .content-header-actions-toggle i {
    transition: transform 0.2s ease-out;
  }

  .content-header-row[data-open] > .content-header-actions-toggle i {
    transform: rotate(90deg);
  }

  /* fold: hide every action except the ⋮ menu. Direct children that hold an
     action but neither the menu nor a modal go; the actions inside a wrapper
     that keeps the menu or a modal go one by one. Badges and text stay. */

  .content-header-row[data-mobile-actions="fold"] > #content-header-actions > :is(a, button, input[type="submit"], :has(a, button, input[type="submit"])):not([data-controller~="dropdown"]:has([role="menu"])):not(:has([data-controller~="dropdown"] [role="menu"], [role="dialog"])),
  .content-header-row[data-mobile-actions="fold"] #content-header-actions :is(a, button, input[type="submit"]):not([role="menu"] *):not([role="dialog"] *):not([data-controller~="dropdown"]:has([role="menu"]) *) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-header-row > .content-header-back,
  .content-header-row > #content-header-actions *,
  .content-header-actions-toggle i {
    transition: none !important;
  }
}

/* API reference descriptions (ApiDocs::DescriptionMarkdown, rendered inside
   `prose`). Inline code reads as the page's own chips rather than prose's
   backtick-wrapped bold code, and a wide table (the filter predicates in the
   introduction) scrolls inside its column instead of widening the page. */

.prose.api-docs-prose :where(code):not(:where(pre *)) {
  font-weight: 400;
  background-color: rgb(var(--color-surface-secondary));
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
}

.prose.api-docs-prose :where(code):not(:where(pre *))::before,
.prose.api-docs-prose :where(code):not(:where(pre *))::after {
  content: none;
}

.prose.api-docs-prose :where(table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.questionnaire-form .relative .after\:absolutespan::after {
  content: var(--tw-content);
  font-size: 1rem;
  color: rgb(var(--color-text-tertiary));
  font-weight: 500;
}

.empty\:hidden:empty.tab-content-overlay {
  display: none;
}

.empty\:hidden:empty.table-loading-overlay {
  display: none;
}

.empty\:hidden:empty.collapsible-content {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

.group\/pkg[open] .group-open\/pkg\:rotate-180.step-card__help-chevron {
  transform: rotate(180deg);
}

.group[open] .group-open\:rotate-180.step-card__help-chevron {
  transform: rotate(180deg);
}

.peer[data-state="preparing"] ~ .peer-data-\[state\=preparing\]\:hidden.tab-content-overlay {
  display: none;
}

.peer[data-state="preparing"] ~ .peer-data-\[state\=preparing\]\:hidden.table-loading-overlay {
  display: none;
}

.peer[data-state="preparing"] ~ .peer-data-\[state\=preparing\]\:hidden.collapsible-content {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

.questionnaire-form .peer[data-state="preparing"] ~ .peer-data-\[state\=preparing\]\:flex.items-center label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

@container (min-width: 28rem) {
  .questionnaire-form .\@md\:items-center.flex label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }
}

.dark\:hidden:is(.dark *).tab-content-overlay {
  display: none;
}

.dark\:hidden:is(.dark *).table-loading-overlay {
  display: none;
}

.dark\:hidden:is(.dark *).collapsible-content {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

@media not all and (min-width: 1024px) {
  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.tab-content-overlay {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.tab-content-overlay {
    display: none;
  }

  .max-lg\:hidden.table-loading-overlay {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.tab-content-overlay {
    display: none;
  }

  .max-lg\:hidden.table-loading-overlay {
    display: none;
  }

  .max-lg\:hidden.collapsible-content {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
  }

  .max-lg\:items-center {
    align-items: center;
  }

  .questionnaire-form .max-lg\:items-center.flex label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }
}

@media not all and (min-width: 768px) {
  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.tab-content-overlay {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.tab-content-overlay {
    display: none;
  }

  .max-md\:hidden.table-loading-overlay {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.tab-content-overlay {
    display: none;
  }

  .max-md\:hidden.table-loading-overlay {
    display: none;
  }

  .max-md\:hidden.collapsible-content {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:hidden {
    display: none;
  }

  .max-sm\:hidden.tab-content-overlay {
    display: none;
  }

  .max-sm\:hidden {
    display: none;
  }

  .max-sm\:hidden.tab-content-overlay {
    display: none;
  }

  .max-sm\:hidden.table-loading-overlay {
    display: none;
  }

  .max-sm\:hidden {
    display: none;
  }

  .max-sm\:hidden.tab-content-overlay {
    display: none;
  }

  .max-sm\:hidden.table-loading-overlay {
    display: none;
  }

  .max-sm\:hidden.collapsible-content {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
  }
}

@media (min-width: 640px) {
  .sm\:hidden.tab-content-overlay {
    display: none;
  }

  .sm\:hidden.table-loading-overlay {
    display: none;
  }

  .sm\:hidden.collapsible-content {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
  }

  .questionnaire-form .sm\:flex.items-center label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }

  .questionnaire-form .sm\:items-center.flex label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }

  .questionnaire-form .group:hover .sm\:group-hover\:flex.items-center label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }
}

@media (min-width: 768px) {
  .md\:\!hidden.tab-content-overlay {
    display: none !important;
  }

  .md\:hidden.tab-content-overlay {
    display: none;
  }

  .md\:\!hidden.table-loading-overlay {
    display: none !important;
  }

  .md\:hidden.table-loading-overlay {
    display: none;
  }

  .md\:\!hidden.collapsible-content {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  .md\:hidden.collapsible-content {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
  }

  .questionnaire-form .md\:flex.items-center label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }

  .questionnaire-form .md\:items-center.flex label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }
}

@media (min-width: 1024px) {
  .lg\:hidden.tab-content-overlay {
    display: none;
  }

  .lg\:hidden.table-loading-overlay {
    display: none;
  }

  .lg\:hidden.collapsible-content {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
  }

  .questionnaire-form .lg\:flex.items-center label {
    display: inline;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }
}

@media print {
  .print\:hidden.tab-content-overlay {
    display: none;
  }

  .print\:hidden.table-loading-overlay {
    display: none;
  }

  .print\:hidden.collapsible-content {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden.tab-content-overlay::-webkit-details-marker {
  display: none;
}

.\[\&\:\:-webkit-details-marker\]\:hidden.table-loading-overlay::-webkit-details-marker {
  display: none;
}

.\[\&\:\:-webkit-details-marker\]\:hidden.collapsible-content::-webkit-details-marker {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

.\[\&\[aria-expanded\=true\]_i\]\:rotate-180[aria-expanded=true] i.step-card__help-chevron {
  transform: rotate(180deg);
}

.marker\:font-semibold *::marker {
  font-weight: 600;
}

.marker\:text-content-tertiary *::marker {
  color: rgb(var(--color-text-tertiary) );
}

.marker\:font-semibold::marker {
  font-weight: 600;
}

.marker\:text-content-tertiary::marker {
  color: rgb(var(--color-text-tertiary) );
}

.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}

.file\:mr-4::file-selector-button {
  margin-right: 1rem;
}

.file\:cursor-pointer::file-selector-button {
  cursor: pointer;
}

.file\:rounded::file-selector-button {
  border-radius: 0.25rem;
}

.file\:rounded-lg::file-selector-button {
  border-radius: 0.5rem;
}

.file\:rounded-md::file-selector-button {
  border-radius: 0.375rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-blue-50::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.file\:bg-btn-primary::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
}

.file\:bg-status-accent-bg::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-bg) / var(--tw-bg-opacity, 1));
}

.file\:bg-surface-secondary::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
}

.file\:bg-surface-tertiary::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
}

.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:px-4::file-selector-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:py-1::file-selector-button {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.file\:py-2::file-selector-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:font-semibold::file-selector-button {
  font-weight: 600;
}

.file\:text-blue-700::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.file\:text-content::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-opacity, 1));
}

.file\:text-content-secondary::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
}

.file\:text-status-accent-text::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-text) / var(--tw-text-opacity, 1));
}

.file\:text-white::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.placeholder\:text-content-muted::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-text-opacity, 1));
}

.placeholder\:text-content-muted::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-text-opacity, 1));
}

.placeholder\:text-content-tertiary::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity, 1));
}

.placeholder\:text-content-tertiary::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity, 1));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}

.after\:start-\[2px\]::after {
  content: var(--tw-content);
  inset-inline-start: 2px;
}

.after\:top-\[2px\]::after {
  content: var(--tw-content);
  top: 2px;
}

.after\:h-4::after {
  content: var(--tw-content);
  height: 1rem;
}

.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}

.after\:w-4::after {
  content: var(--tw-content);
  width: 1rem;
}

.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}

.after\:border-edge-strong::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-strong) / var(--tw-border-opacity, 1));
}

.after\:bg-surface::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:mt-0:first-child {
  margin-top: 0px;
}

.first\:border-l-0:first-child {
  border-left-width: 0px;
}

.first\:border-t-0:first-child {
  border-top-width: 0px;
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.last\:rounded-b-xl:last-child {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:border-r-0:last-child {
  border-right-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.empty\:hidden:empty {
  display: none;
}

.empty\:before\:text-content-muted:empty::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-text-opacity, 1));
}

.empty\:before\:text-content-tertiary:empty::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity, 1));
}

.empty\:before\:content-\[attr\(data-placeholder\)\]:empty::before {
  --tw-content: attr(data-placeholder);
  content: var(--tw-content);
}

.focus-within\:border-purple-400:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.focus-within\:border-status-accent-border:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-border) / var(--tw-border-opacity, 1));
}

.focus-within\:border-th-ring:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-ring) / var(--tw-border-opacity, 1));
}

.focus-within\:shadow-theme-lg:focus-within {
  --tw-shadow: var(--shadow-lg);
  --tw-shadow-colored: var(--shadow-lg);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus-within\:outline-none:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-within\:ring-1:focus-within {
  --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-within\:ring-2:focus-within {
  --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-within\:ring-purple-400\/20:focus-within {
  --tw-ring-color: rgb(192 132 252 / 0.2);
}

.focus-within\:ring-th-ring:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.focus-within\:ring-th-ring\/20:focus-within {
  --tw-ring-color: rgb(var(--color-ring) / 0.2);
}

.focus-within\:ring-violet-500:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity, 1));
}

.hover\:scale-105: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));
}

.hover\:border-\[rgb\(var\(--color-form-placeholder\)\)\]:hover {
  border-color: rgb(var(--color-form-placeholder));
}

.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.hover\:border-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.hover\:border-brand\/30:hover {
  border-color: rgb(59 130 246 / 0.3);
}

.hover\:border-content-tertiary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-text-tertiary) / var(--tw-border-opacity, 1));
}

.hover\:border-edge:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
}

.hover\:border-edge-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-strong) / var(--tw-border-opacity, 1));
}

.hover\:border-purple-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}

.hover\:border-status-accent-border:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-border) / var(--tw-border-opacity, 1));
}

.hover\:border-status-accent-solid:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-solid) / var(--tw-border-opacity, 1));
}

.hover\:border-status-error-border:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-border) / var(--tw-border-opacity, 1));
}

.hover\:border-status-info-border:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-border) / var(--tw-border-opacity, 1));
}

.hover\:border-status-success-border:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success-border) / var(--tw-border-opacity, 1));
}

.hover\:border-th-link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-link) / var(--tw-border-opacity, 1));
}

.hover\:border-th-ring:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-ring) / var(--tw-border-opacity, 1));
}

.hover\:border-white\/20:hover {
  border-color: rgb(255 255 255 / 0.2);
}

.hover\:border-l-slate-300:hover {
  --tw-border-opacity: 1;
  border-left-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.hover\:bg-amber-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 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-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand\/20:hover {
  background-color: rgb(59 130 246 / 0.2);
}

.hover\:bg-btn-danger-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-danger-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-btn-info-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-info-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-btn-primary-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-btn-success-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-success-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-btn-warning-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-warning-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-cyan-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 116 144 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-50\/50:hover {
  background-color: rgb(236 253 245 / 0.5);
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / 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-slate-50\/50:hover {
  background-color: rgb(248 250 252 / 0.5);
}

.hover\:bg-slate-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.hover\:bg-status-accent-bg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-status-accent-solid\/90:hover {
  background-color: rgb(var(--color-accent-solid) / 0.9);
}

.hover\:bg-status-error-bg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-status-info-bg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-status-info-bg\/30:hover {
  background-color: rgb(var(--color-info-bg) / 0.3);
}

.hover\:bg-status-info-border:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-border) / var(--tw-bg-opacity, 1));
}

.hover\:bg-status-info-solid\/90:hover {
  background-color: rgb(var(--color-info-solid) / 0.9);
}

.hover\:bg-status-success-bg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-status-success-bg\/50:hover {
  background-color: rgb(var(--color-success-bg) / 0.5);
}

.hover\:bg-status-success-solid\/90:hover {
  background-color: rgb(var(--color-success-solid) / 0.9);
}

.hover\:bg-status-warning-bg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-bg) / var(--tw-bg-opacity, 1));
}

.hover\:bg-status-warning-bg\/40:hover {
  background-color: rgb(var(--color-warning-bg) / 0.4);
}

.hover\:bg-status-warning-solid\/90:hover {
  background-color: rgb(var(--color-warning-solid) / 0.9);
}

.hover\:bg-surface:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-inset:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-inset) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-secondary\/50:hover {
  background-color: rgb(var(--color-surface-secondary) / 0.5);
}

.hover\:bg-surface-secondary\/60:hover {
  background-color: rgb(var(--color-surface-secondary) / 0.6);
}

.hover\:bg-surface-tertiary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface\/50:hover {
  background-color: rgb(var(--color-surface) / 0.5);
}

.hover\:bg-teal-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.hover\:bg-teal-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 94 89 / var(--tw-bg-opacity, 1));
}

.hover\:bg-th-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-th-ring:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-ring) / var(--tw-bg-opacity, 1));
}

.hover\:bg-violet-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
}

.hover\:bg-violet-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(91 33 182 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-opacity-10:hover {
  --tw-bg-opacity: 0.1;
}

.hover\:text-amber-800:hover {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-400:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.hover\:text-content:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-opacity, 1));
}

.hover\:text-content-secondary:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
}

.hover\:text-content-tertiary:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-500:hover {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-600:hover {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-800:hover {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-900:hover {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-200:hover {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.hover\:text-status-accent-text:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-text) / var(--tw-text-opacity, 1));
}

.hover\:text-status-error-text:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-text) / var(--tw-text-opacity, 1));
}

.hover\:text-status-error-text\/80:hover {
  color: rgb(var(--color-error-text) / 0.8);
}

.hover\:text-status-info-text:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-text) / var(--tw-text-opacity, 1));
}

.hover\:text-status-success-text:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-text) / var(--tw-text-opacity, 1));
}

.hover\:text-status-warning-text:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-text) / var(--tw-text-opacity, 1));
}

.hover\:text-th-link:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-link) / var(--tw-text-opacity, 1));
}

.hover\:text-th-link-hover:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-link-hover) / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-600:hover {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:decoration-slate-600:hover {
  text-decoration-color: #475569;
}

.hover\:decoration-solid:hover {
  text-decoration-style: solid;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -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);
}

.hover\:shadow-theme-lg:hover {
  --tw-shadow: var(--shadow-lg);
  --tw-shadow-colored: var(--shadow-lg);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-theme-md:hover {
  --tw-shadow: var(--shadow-md);
  --tw-shadow-colored: var(--shadow-md);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-theme-sm:hover {
  --tw-shadow: var(--shadow-sm);
  --tw-shadow-colored: var(--shadow-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-1: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(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);
}

.hover\:ring-2: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(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);
}

.hover\:ring-4: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(4px + 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\:ring-status-info-border:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-border) / var(--tw-ring-opacity, 1));
}

.hover\:ring-th-ring:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.hover\:ring-th-ring\/25:hover {
  --tw-ring-color: rgb(var(--color-ring) / 0.25);
}

.hover\:file\:bg-blue-100::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:file\:bg-btn-primary-hover::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary-hover) / var(--tw-bg-opacity, 1));
}

.hover\:file\:bg-status-accent-bg::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-bg) / var(--tw-bg-opacity, 1));
}

.hover\:file\:bg-surface-tertiary::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
}

.hover\:file\:bg-th-hover::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-hover) / var(--tw-bg-opacity, 1));
}

.focus\:border-blue-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-brand:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-emerald-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}

.focus\:border-purple-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.focus\:border-status-accent-border:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-border) / var(--tw-border-opacity, 1));
}

.focus\:border-status-error-border:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-border) / var(--tw-border-opacity, 1));
}

.focus\:border-status-info-border:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-border) / var(--tw-border-opacity, 1));
}

.focus\:border-status-success-border:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success-border) / var(--tw-border-opacity, 1));
}

.focus\:border-th-link:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-link) / var(--tw-border-opacity, 1));
}

.focus\:border-th-ring:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-ring) / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:bg-surface:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.focus\:bg-surface-inset:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-inset) / var(--tw-bg-opacity, 1));
}

.focus\:bg-surface-secondary:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
}

.focus\:bg-surface-tertiary:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
}

.focus\:underline:focus {
  text-decoration-line: underline;
}

.focus\:placeholder-content-muted:focus::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-placeholder-opacity, 1));
}

.focus\:placeholder-content-muted:focus::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-placeholder-opacity, 1));
}

.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\: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-amber-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-emerald-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 250 229 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}

.focus\:ring-purple-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.focus\:ring-status-accent-border:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent-border) / var(--tw-ring-opacity, 1));
}

.focus\:ring-status-error-border:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-error-border) / var(--tw-ring-opacity, 1));
}

.focus\:ring-status-info-border:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-border) / var(--tw-ring-opacity, 1));
}

.focus\:ring-status-info-solid:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-solid) / var(--tw-ring-opacity, 1));
}

.focus\:ring-status-info-text:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-text) / var(--tw-ring-opacity, 1));
}

.focus\:ring-status-success-border:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-success-border) / var(--tw-ring-opacity, 1));
}

.focus\:ring-status-warning-border:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-warning-border) / var(--tw-ring-opacity, 1));
}

.focus\:ring-th-link:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-link) / var(--tw-ring-opacity, 1));
}

.focus\:ring-th-link\/40:focus {
  --tw-ring-color: rgb(var(--color-link) / 0.4);
}

.focus\:ring-th-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.focus\:ring-th-ring\/20:focus {
  --tw-ring-color: rgb(var(--color-ring) / 0.2);
}

.focus\:ring-offset-1:focus {
  --tw-ring-offset-width: 1px;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-dashed:focus-visible {
  outline-style: dashed;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:-outline-offset-2:focus-visible {
  outline-offset: -2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-offset-\[6px\]:focus-visible {
  outline-offset: 6px;
}

.focus-visible\:outline-content:focus-visible {
  outline-color: rgb(var(--color-text) / 1);
}

.focus-visible\:outline-th-ring:focus-visible {
  outline-color: rgb(var(--color-ring) / 1);
}

.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-4: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(4px + 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-th-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

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

.active\:scale-\[\.99\]:active {
  --tw-scale-x: .99;
  --tw-scale-y: .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\:bg-surface-tertiary:active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:bg-purple-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(216 180 254 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-surface-secondary:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
}

.disabled\:text-content-muted:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-text-opacity, 1));
}

.disabled\:text-content-secondary:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group\/archived[open] .group-open\/archived\: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\/chunk[open] .group-open\/chunk\: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\/frozen[open] .group-open\/frozen\: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\/pkg[open] .group-open\/pkg\: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-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:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:block {
  display: block;
}

.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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-1 {
  --tw-translate-x: 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));
}

.group:hover .group-hover\:bg-btn-primary-hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary-hover) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-surface-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-surface-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-th-hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-hover) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-th-ring {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-ring) / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-th-ring\/20 {
  background-color: rgb(var(--color-ring) / 0.2);
}

.group:hover .group-hover\:text-content {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-content-secondary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-status-error-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-text) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-status-info-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-text) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-status-success-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-text) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-th-link {
  --tw-text-opacity: 1;
  color: rgb(var(--color-link) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-th-link-hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-link-hover) / 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\:opacity-100 {
  opacity: 1;
}

.peer:checked ~ .peer-checked\:border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:border-status-accent-solid {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-solid) / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:border-th-link {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-link) / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-btn-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-danger) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-primary) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-btn-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-warning) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-status-accent-solid {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-solid) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-status-info-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-bg) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-status-success-solid {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-solid) / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:text-th-link {
  --tw-text-opacity: 1;
  color: rgb(var(--color-link) / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  content: var(--tw-content);
  --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));
}

.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.peer:focus ~ .peer-focus\:outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.peer:focus ~ .peer-focus\: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 ~ .peer-focus\:ring-4 {
  --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(4px + 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 ~ .peer-focus\:ring-status-accent-border {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent-border) / var(--tw-ring-opacity, 1));
}

.peer:focus ~ .peer-focus\:ring-status-error-border {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-error-border) / var(--tw-ring-opacity, 1));
}

.peer:focus ~ .peer-focus\:ring-status-info-border {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info-border) / var(--tw-ring-opacity, 1));
}

.peer:focus ~ .peer-focus\:ring-status-warning-border {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-warning-border) / var(--tw-ring-opacity, 1));
}

.peer:focus ~ .peer-focus\:ring-th-ring {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.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-th-ring {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.has-\[\:checked\]\:border-status-accent-solid:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent-solid) / var(--tw-border-opacity, 1));
}

.has-\[\:checked\]\:border-status-info-border:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-border) / var(--tw-border-opacity, 1));
}

.has-\[\:checked\]\:border-th-link:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-link) / var(--tw-border-opacity, 1));
}

.has-\[input\[type\=radio\]\:checked\]\:border-th-link:has(input[type=radio]:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-link) / var(--tw-border-opacity, 1));
}

.has-\[\:checked\]\:bg-status-info-bg:has(:checked) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-bg) / var(--tw-bg-opacity, 1));
}

.has-\[\:checked\]\:bg-status-info-bg\/40:has(:checked) {
  background-color: rgb(var(--color-info-bg) / 0.4);
}

.has-\[input\[type\=radio\]\:checked\]\:bg-status-info-bg:has(input[type=radio]:checked) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-bg) / var(--tw-bg-opacity, 1));
}

.has-\[\:checked\]\:ring-2: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(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);
}

.has-\[\:focus-visible\]\:ring-2:has(: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);
}

.has-\[\:checked\]\:ring-status-accent-bg:has(:checked) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent-bg) / var(--tw-ring-opacity, 1));
}

.has-\[\:focus-visible\]\:ring-th-ring:has(:focus-visible) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-ring) / var(--tw-ring-opacity, 1));
}

.aria-busy\:opacity-60[aria-busy="true"] {
  opacity: 0.6;
}

.aria-pressed\:border-status-info-border[aria-pressed="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info-border) / var(--tw-border-opacity, 1));
}

.aria-pressed\:bg-status-info-bg[aria-pressed="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-bg) / var(--tw-bg-opacity, 1));
}

.aria-pressed\:text-status-info-text[aria-pressed="true"] {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-text) / var(--tw-text-opacity, 1));
}

.peer[data-state="preparing"] ~ .peer-data-\[state\=preparing\]\:flex {
  display: flex;
}

.peer[data-state="preparing"] ~ .peer-data-\[state\=preparing\]\:hidden {
  display: none;
}

.prose-headings\:mb-2 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-bottom: 0.5rem;
}

.prose-headings\:mt-4 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 1rem;
}

.prose-headings\:text-sm :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.prose-headings\:font-semibold :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-p\:my-1 :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.prose-p\:text-sm :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.prose-ul\:my-1 :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.prose-li\:my-0\.5 :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.prose-li\:text-sm :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@container (min-width: 28rem) {
  .\@md\:flex-row {
    flex-direction: row;
  }

  .\@md\:items-center {
    align-items: center;
  }

  .\@md\:justify-between {
    justify-content: space-between;
  }
}

@container (min-width: 42rem) {
  .\@2xl\:mt-8 {
    margin-top: 2rem;
  }

  .\@2xl\:w-auto {
    width: auto;
  }

  .\@2xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .\@2xl\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .\@2xl\:justify-end {
    justify-content: flex-end;
  }

  .\@2xl\:gap-8 {
    gap: 2rem;
  }

  .\@2xl\:pl-0 {
    padding-left: 0px;
  }

  .\@2xl\:pt-6 {
    padding-top: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

.dark\:block:is(.dark *) {
  display: block;
}

.dark\:hidden:is(.dark *) {
  display: none;
}

.dark\:border-amber-500:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-800\/60:is(.dark *) {
  border-color: rgb(146 64 14 / 0.6);
}

.dark\:border-amber-900\/50:is(.dark *) {
  border-color: rgb(120 53 15 / 0.5);
}

.dark\:border-blue-800\/30:is(.dark *) {
  border-color: rgb(30 64 175 / 0.3);
}

.dark\:border-blue-900\/50:is(.dark *) {
  border-color: rgb(30 58 138 / 0.5);
}

.dark\:border-cyan-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(14 116 144 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:border-green-900\/50:is(.dark *) {
  border-color: rgb(20 83 45 / 0.5);
}

.dark\:border-indigo-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(67 56 202 / var(--tw-border-opacity, 1));
}

.dark\:border-indigo-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 48 163 / var(--tw-border-opacity, 1));
}

.dark\:border-orange-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(194 65 12 / var(--tw-border-opacity, 1));
}

.dark\:border-orange-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(154 52 18 / var(--tw-border-opacity, 1));
}

.dark\:border-purple-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(126 34 206 / var(--tw-border-opacity, 1));
}

.dark\:border-purple-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));
}

.dark\:border-red-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:border-rose-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(159 18 57 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.dark\:border-teal-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(15 118 110 / var(--tw-border-opacity, 1));
}

.dark\:border-yellow-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}

.dark\:bg-amber-900\/10:is(.dark *) {
  background-color: rgb(120 53 15 / 0.1);
}

.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: rgb(120 53 15 / 0.2);
}

.dark\:bg-amber-900\/30:is(.dark *) {
  background-color: rgb(120 53 15 / 0.3);
}

.dark\:bg-amber-900\/40:is(.dark *) {
  background-color: rgb(120 53 15 / 0.4);
}

.dark\:bg-amber-900\/50:is(.dark *) {
  background-color: rgb(120 53 15 / 0.5);
}

.dark\:bg-amber-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-950\/30:is(.dark *) {
  background-color: rgb(69 26 3 / 0.3);
}

.dark\:bg-blue-900\/20:is(.dark *) {
  background-color: rgb(30 58 138 / 0.2);
}

.dark\:bg-blue-900\/30:is(.dark *) {
  background-color: rgb(30 58 138 / 0.3);
}

.dark\:bg-blue-900\/40:is(.dark *) {
  background-color: rgb(30 58 138 / 0.4);
}

.dark\:bg-blue-950\/30:is(.dark *) {
  background-color: rgb(23 37 84 / 0.3);
}

.dark\:bg-cyan-900\/30:is(.dark *) {
  background-color: rgb(22 78 99 / 0.3);
}

.dark\:bg-cyan-900\/50:is(.dark *) {
  background-color: rgb(22 78 99 / 0.5);
}

.dark\:bg-emerald-900\/20:is(.dark *) {
  background-color: rgb(6 78 59 / 0.2);
}

.dark\:bg-emerald-900\/30:is(.dark *) {
  background-color: rgb(6 78 59 / 0.3);
}

.dark\:bg-emerald-900\/40:is(.dark *) {
  background-color: rgb(6 78 59 / 0.4);
}

.dark\:bg-emerald-900\/50:is(.dark *) {
  background-color: rgb(6 78 59 / 0.5);
}

.dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-900\/20:is(.dark *) {
  background-color: rgb(20 83 45 / 0.2);
}

.dark\:bg-green-950\/30:is(.dark *) {
  background-color: rgb(5 46 22 / 0.3);
}

.dark\:bg-indigo-500:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.dark\:bg-indigo-800\/50:is(.dark *) {
  background-color: rgb(55 48 163 / 0.5);
}

.dark\:bg-indigo-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(49 46 129 / var(--tw-bg-opacity, 1));
}

.dark\:bg-indigo-900\/20:is(.dark *) {
  background-color: rgb(49 46 129 / 0.2);
}

.dark\:bg-indigo-900\/30:is(.dark *) {
  background-color: rgb(49 46 129 / 0.3);
}

.dark\:bg-indigo-900\/40:is(.dark *) {
  background-color: rgb(49 46 129 / 0.4);
}

.dark\:bg-indigo-900\/50:is(.dark *) {
  background-color: rgb(49 46 129 / 0.5);
}

.dark\:bg-orange-900\/30:is(.dark *) {
  background-color: rgb(124 45 18 / 0.3);
}

.dark\:bg-orange-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(67 20 7 / var(--tw-bg-opacity, 1));
}

.dark\:bg-purple-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}

.dark\:bg-purple-900\/20:is(.dark *) {
  background-color: rgb(88 28 135 / 0.2);
}

.dark\:bg-purple-900\/30:is(.dark *) {
  background-color: rgb(88 28 135 / 0.3);
}

.dark\:bg-purple-900\/50:is(.dark *) {
  background-color: rgb(88 28 135 / 0.5);
}

.dark\:bg-purple-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 7 100 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-900\/40:is(.dark *) {
  background-color: rgb(127 29 29 / 0.4);
}

.dark\:bg-red-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-950\/20:is(.dark *) {
  background-color: rgb(69 10 10 / 0.2);
}

.dark\:bg-rose-900\/50:is(.dark *) {
  background-color: rgb(136 19 55 / 0.5);
}

.dark\:bg-rose-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(76 5 25 / var(--tw-bg-opacity, 1));
}

.dark\:bg-sky-900\/20:is(.dark *) {
  background-color: rgb(12 74 110 / 0.2);
}

.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.dark\:bg-surface:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.dark\:bg-teal-900\/30:is(.dark *) {
  background-color: rgb(19 78 74 / 0.3);
}

.dark\:bg-yellow-900\/20:is(.dark *) {
  background-color: rgb(113 63 18 / 0.2);
}

.dark\:from-blue-900\/20:is(.dark *) {
  --tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-blue-950\/30:is(.dark *) {
  --tw-gradient-from: rgb(23 37 84 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 37 84 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-indigo-900\/30:is(.dark *) {
  --tw-gradient-from: rgb(49 46 129 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(49 46 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-indigo-950:is(.dark *) {
  --tw-gradient-from: #1e1b4b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:to-blue-950:is(.dark *) {
  --tw-gradient-to: #172554 var(--tw-gradient-to-position);
}

.dark\:to-cyan-900\/20:is(.dark *) {
  --tw-gradient-to: rgb(22 78 99 / 0.2) var(--tw-gradient-to-position);
}

.dark\:to-indigo-950\/30:is(.dark *) {
  --tw-gradient-to: rgb(30 27 75 / 0.3) var(--tw-gradient-to-position);
}

.dark\:to-purple-900\/30:is(.dark *) {
  --tw-gradient-to: rgb(88 28 135 / 0.3) var(--tw-gradient-to-position);
}

.dark\:text-amber-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-cyan-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}

.dark\:text-cyan-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.dark\:text-purple-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.dark\:text-purple-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

.dark\:text-sky-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.dark\:text-teal-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}

.dark\:text-teal-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.dark\:ring-slate-600:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity, 1));
}

.dark\:hover\:border-purple-700:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(126 34 206 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-amber-800\/50:hover:is(.dark *) {
  background-color: rgb(146 64 14 / 0.5);
}

.dark\:hover\:bg-blue-900\/20:hover:is(.dark *) {
  background-color: rgb(30 58 138 / 0.2);
}

.dark\:hover\:bg-indigo-600:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-indigo-900\/30:hover:is(.dark *) {
  background-color: rgb(49 46 129 / 0.3);
}

.dark\:hover\:bg-indigo-900\/50:hover:is(.dark *) {
  background-color: rgb(49 46 129 / 0.5);
}

.dark\:hover\:text-amber-200:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-indigo-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-indigo-400:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-red-400:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.group:hover .dark\:group-hover\:text-indigo-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.peer:checked ~ .dark\:peer-checked\:bg-purple-900\/20:is(.dark *) {
  background-color: rgb(88 28 135 / 0.2);
}

@media not all and (min-width: 1024px) {
  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:min-h-\[24rem\] {
    min-height: 24rem;
  }

  .max-lg\:min-h-\[28rem\] {
    min-height: 28rem;
  }

  .max-lg\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .max-lg\:items-center {
    align-items: center;
  }

  .max-lg\:border-b {
    border-bottom-width: 1px;
  }

  .max-lg\:border-r-0 {
    border-right-width: 0px;
  }

  .max-lg\:border-edge {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
  }

  .max-lg\:last\:border-b-0:last-child {
    border-bottom-width: 0px;
  }
}

@media not all and (min-width: 768px) {
  .max-md\:line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .max-md\:hidden {
    display: none;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .max-sm\:block {
    display: block;
  }

  .max-sm\:hidden {
    display: none;
  }

  .max-sm\:w-full {
    width: 100%;
  }

  .max-sm\:rounded-lg {
    border-radius: 0.5rem;
  }

  .max-sm\:border {
    border-width: 1px;
  }

  .max-sm\:border-edge {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
  }

  .max-sm\:p-3 {
    padding: 0.75rem;
  }

  .max-sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .max-sm\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .max-sm\:text-left {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .max-\[640px\]\:ml-0 {
    margin-left: 0px;
  }

  .max-\[640px\]\:w-full {
    width: 100%;
  }

  .max-\[640px\]\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .max-\[640px\]\:flex-wrap {
    flex-wrap: wrap;
  }

  .max-\[640px\]\:border-l-0 {
    border-left-width: 0px;
  }

  .max-\[640px\]\:border-t {
    border-top-width: 1px;
  }
}

@media (min-width: 640px) {
  .sm\:not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .sm\:order-first {
    order: -9999;
  }

  .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\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:col-start-3 {
    grid-column-start: 3;
  }

  .sm\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .sm\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .sm\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .sm\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .sm\:ml-1\.5 {
    margin-left: 0.375rem;
  }

  .sm\:ml-2 {
    margin-left: 0.5rem;
  }

  .sm\:ml-auto {
    margin-left: auto;
  }

  .sm\:mr-1\.5 {
    margin-right: 0.375rem;
  }

  .sm\:mr-3 {
    margin-right: 0.75rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-1 {
    margin-top: 0.25rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-auto {
    height: auto;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-80 {
    width: 20rem;
  }

  .sm\:w-96 {
    width: 24rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:min-w-\[10rem\] {
    min-width: 10rem;
  }

  .sm\:min-w-\[11rem\] {
    min-width: 11rem;
  }

  .sm\:max-w-2xl {
    max-width: 42rem;
  }

  .sm\:max-w-\[45\%\] {
    max-width: 45%;
  }

  .sm\:max-w-\[70\%\] {
    max-width: 70%;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:shrink-0 {
    flex-shrink: 0;
  }

  .sm\:basis-auto {
    flex-basis: auto;
  }

  .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-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[140px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 140px minmax(0,1fr);
  }

  .sm\:grid-cols-\[28px_1fr_auto\] {
    grid-template-columns: 28px 1fr auto;
  }

  .sm\:grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

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

  .sm\:whitespace-nowrap {
    white-space: nowrap;
  }

  .sm\:border-b-0 {
    border-bottom-width: 0px;
  }

  .sm\:border-r {
    border-right-width: 1px;
  }

  .sm\:p-0 {
    padding: 0px;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:pl-0 {
    padding-left: 0px;
  }

  .sm\:pl-10 {
    padding-left: 2.5rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .group:hover .sm\:group-hover\:block {
    display: block;
  }

  .group:hover .sm\:group-hover\:flex {
    display: flex;
  }

  .group:focus-visible .sm\:group-focus-visible\:block {
    display: block;
  }
}

@media (min-width: 768px) {
  .md\:bottom-0 {
    bottom: 0px;
  }

  .md\:bottom-4 {
    bottom: 1rem;
  }

  .md\:bottom-6 {
    bottom: 1.5rem;
  }

  .md\:bottom-auto {
    bottom: auto;
  }

  .md\:left-64 {
    left: 16rem;
  }

  .md\:left-auto {
    left: auto;
  }

  .md\:right-6 {
    right: 1.5rem;
  }

  .md\:top-20 {
    top: 5rem;
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .md\:-mb-6 {
    margin-bottom: -1.5rem;
  }

  .md\:-mt-6 {
    margin-top: -1.5rem;
  }

  .md\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .md\:mb-4 {
    margin-bottom: 1rem;
  }

  .md\:ml-0 {
    margin-left: 0px;
  }

  .md\:ml-4 {
    margin-left: 1rem;
  }

  .md\:ml-64 {
    margin-left: 16rem;
  }

  .md\:ml-auto {
    margin-left: auto;
  }

  .md\:mr-2 {
    margin-right: 0.5rem;
  }

  .md\:ms-auto {
    margin-inline-start: auto;
  }

  .md\:mt-3 {
    margin-top: 0.75rem;
  }

  .md\:mt-4 {
    margin-top: 1rem;
  }

  .md\:mt-6 {
    margin-top: 1.5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:table {
    display: table;
  }

  .md\:grid {
    display: grid;
  }

  .md\:\!hidden {
    display: none !important;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-10 {
    height: 2.5rem;
  }

  .md\:h-14 {
    height: 3.5rem;
  }

  .md\:h-20 {
    height: 5rem;
  }

  .md\:h-24 {
    height: 6rem;
  }

  .md\:h-\[69px\] {
    height: 69px;
  }

  .md\:h-full {
    height: 100%;
  }

  .md\:min-h-0 {
    min-height: 0px;
  }

  .md\:w-10 {
    width: 2.5rem;
  }

  .md\:w-14 {
    width: 3.5rem;
  }

  .md\:w-36 {
    width: 9rem;
  }

  .md\:w-48 {
    width: 12rem;
  }

  .md\:w-56 {
    width: 14rem;
  }

  .md\:w-64 {
    width: 16rem;
  }

  .md\:w-\[400px\] {
    width: 400px;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:min-w-0 {
    min-width: 0px;
  }

  .md\:min-w-\[12rem\] {
    min-width: 12rem;
  }

  .md\:max-w-xs {
    max-width: 20rem;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:flex-\[2\] {
    flex: 2;
  }

  .md\:flex-none {
    flex: none;
  }

  .md\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .md\: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));
  }

  .md\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .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-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:grid-cols-\[12rem_1fr_1fr_auto\] {
    grid-template-columns: 12rem 1fr 1fr auto;
  }

  .md\:grid-cols-\[minmax\(0\2c 1\.2fr\)_220px_130px_minmax\(0\2c 2fr\)\] {
    grid-template-columns: minmax(0,1.2fr) 220px 130px minmax(0,2fr);
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_240px\] {
    grid-template-columns: minmax(0,1fr) 240px;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

  .md\:gap-2 {
    gap: 0.5rem;
  }

  .md\:gap-3 {
    gap: 0.75rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .md\: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));
  }

  .md\: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)));
  }

  .md\:justify-self-auto {
    justify-self: auto;
  }

  .md\:overflow-hidden {
    overflow: hidden;
  }

  .md\:overflow-y-auto {
    overflow-y: auto;
  }

  .md\:p-1\.5 {
    padding: 0.375rem;
  }

  .md\:p-2 {
    padding: 0.5rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .md\:pl-16 {
    padding-left: 4rem;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:pt-4 {
    padding-top: 1rem;
  }

  .md\:pt-6 {
    padding-top: 1.5rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-right {
    text-align: right;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:opacity-0 {
    opacity: 0;
  }

  .md\:focus-visible\:opacity-100:focus-visible {
    opacity: 1;
  }

  .group:hover .md\:group-hover\:opacity-100 {
    opacity: 1;
  }
}

@media (min-width: 1000px) {
  .min-\[1000px\]\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] {
    grid-template-columns: minmax(0,1fr) 340px;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-6 {
    top: 1.5rem;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:ml-4 {
    margin-left: 1rem;
  }

  .lg\:mt-8 {
    margin-top: 2rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-28 {
    height: 7rem;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:min-h-\[20rem\] {
    min-height: 20rem;
  }

  .lg\:min-h-\[70px\] {
    min-height: 70px;
  }

  .lg\:w-2\/5 {
    width: 40%;
  }

  .lg\:w-\[28rem\] {
    width: 28rem;
  }

  .lg\:w-\[500px\] {
    width: 500px;
  }

  .lg\:max-w-md {
    max-width: 28rem;
  }

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:flex-shrink {
    flex-shrink: 1;
  }

  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .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-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[280px_1fr\] {
    grid-template-columns: 280px 1fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_360px\] {
    grid-template-columns: minmax(0,1fr) 360px;
  }

  .lg\:grid-rows-\[auto_1fr\] {
    grid-template-rows: auto 1fr;
  }

  .lg\:grid-rows-subgrid {
    grid-template-rows: subgrid;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .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\:overflow-hidden {
    overflow: hidden;
  }

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:border-b-2 {
    border-bottom-width: 2px;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:border-b-edge-strong {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(var(--color-border-strong) / var(--tw-border-opacity, 1));
  }

  .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;
    padding-right: 2.5rem;
  }

  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .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\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .lg\:pt-0 {
    padding-top: 0px;
  }

  .lg\:pt-6 {
    padding-top: 1.5rem;
  }

  .lg\:pt-8 {
    padding-top: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .group:hover .lg\:group-hover\:inline-flex {
    display: inline-flex;
  }
}

@media (min-width: 1280px) {
  .xl\:sticky {
    position: sticky;
  }

  .xl\:top-4 {
    top: 1rem;
  }

  .xl\:z-auto {
    z-index: auto;
  }

  .xl\:table-cell {
    display: table-cell;
  }

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_20rem\] {
    grid-template-columns: minmax(0,1fr) 20rem;
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_330px\] {
    grid-template-columns: minmax(0,1fr) 330px;
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_360px\] {
    grid-template-columns: minmax(0,1fr) 360px;
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(330px\2c 26rem\)\] {
    grid-template-columns: minmax(0,1fr) minmax(330px,26rem);
  }

  .xl\:self-start {
    align-self: flex-start;
  }
}

@media (min-width: 1536px) {
  .\32xl\:table-cell {
    display: table-cell;
  }

  .\32xl\:h-\[calc\(80vh-80px\)\] {
    height: calc(80vh - 80px);
  }

  .\32xl\:max-w-\[18rem\] {
    max-width: 18rem;
  }

  .\32xl\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.peer:checked ~ .rtl\:peer-checked\:after\:-translate-x-full:where([dir="rtl"], [dir="rtl"] *)::after {
  content: var(--tw-content);
  --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));
}

@media print {
  .print\:block {
    display: block;
  }

  .print\:hidden {
    display: none;
  }

  .print\:max-w-none {
    max-width: none;
  }

  .print\:border-0 {
    border-width: 0px;
  }

  .print\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .print\:p-0 {
    padding: 0px;
  }

  .print\:text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  }

  .print\: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);
  }
}

.\[\&\.is-active\]\:border-transparent.is-active {
  border-color: transparent;
}

.\[\&\.is-active\]\:bg-status-info-solid.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-solid) / var(--tw-bg-opacity, 1));
}

.\[\&\.is-active\]\:text-white.is-active {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\[aria-expanded\=true\]_i\]\:rotate-180[aria-expanded=true] i {
  --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));
}

.\[\&\[busy\]\]\:pointer-events-none[busy] {
  pointer-events: none;
}

.\[\&\[busy\]\]\:opacity-50[busy] {
  opacity: 0.5;
}

.\[\&_p\+p\]\:mt-3 p+p {
  margin-top: 0.75rem;
}

@media(hover:hover) {
  .\[\@media\(hover\:hover\)\]\:hover\:bg-surface-tertiary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity, 1));
  }

  .\[\@media\(hover\:hover\)\]\:hover\:text-content-secondary:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
  }
}