/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--font-sans","display":"swap"}],"variableName":"inter"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_d8ebd1 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_d8ebd1 {--font-sans: 'Inter', 'Inter Fallback'
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"IBM_Plex_Mono","arguments":[{"subsets":["latin"],"weight":["400","500","600"],"variable":"--font-data","display":"swap"}],"variableName":"plexMono"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/58f386aa6b1a2a92-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/011e180705008d6f-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7ba5fb2a8c88521c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/92eeb95d069020cc-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/d3ebbfd689654d3a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ef4d5661765d0e49-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/d29838c109ef09b4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e40af3453d7c920a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/99dcf268bda04fe5-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/98e207f02528a563-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/73cb51aac9c97f90-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/d26bbd13d6b70f89-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/20535187d867b7b9-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/5356a6a4f2c8c8d8-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/db96af6b531dc71f-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'IBM Plex Mono Fallback';src: local("Arial");ascent-override: 76.16%;descent-override: 20.43%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_aa62b7 {font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback';font-style: normal
}.__variable_aa62b7 {--font-data: 'IBM Plex Mono', 'IBM Plex Mono Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
*, ::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: var(--font-sans), system-ui, sans-serif; /* 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: var(--font-data), ui-monospace, 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 {
    /* Neutrals (light, warm-biased for the copper accent) */
    --clm-canvas: #f8f6f2;
    --clm-surface: #ffffff;
    --clm-surface-sunken: #f1eee7;
    --clm-border: #e8e2d8;
    --clm-border-strong: #d3c9ba;
    --clm-text-primary: #211d17;
    --clm-text-secondary: #55504a;
    --clm-text-muted: #7a746b;
    --clm-text-disabled: #a29a8f;

    /* Status chips (light) -- design doc §2.4. Fixed semantics, untouched
       by the cyan re-theme. */
    --chip-draft-bg: #eef1f5;
    --chip-draft-text: #475467;
    --chip-in_review-bg: #f2eefb;
    --chip-in_review-text: #6b3fa0;
    --chip-pending_approval-bg: #fdf1e8;
    --chip-pending_approval-text: #a04b08;
    /* Phase 3a: the approval-gate's resolved-in-favor outcome -- a lime/olive
       green, deliberately NOT `executed`'s mint-forest green (#157a45, hue
       ~150°) or `renewed`'s teal (#1a5551, hue ~180°): "approved" is a
       ready-to-send signal, not a completed/archival one, so it sits at a
       distinct, warmer green hue (~85°) nothing else in the chip set uses. */
    --chip-approved-bg: #f4faea;
    --chip-approved-text: #4d7c0f;
    --chip-pending_signature-bg: #eaf1fc;
    --chip-pending_signature-text: #1d5fb0;
    --chip-executed-bg: #e9f7ef;
    --chip-executed-text: #157a45;
    --chip-expired-bg: #fceceb;
    --chip-expired-text: #b13a2e;
    --chip-renewed-bg: #e6f5f3;
    --chip-renewed-text: #1a5551;
    --chip-terminated-bg: #e7e9ec;
    --chip-terminated-text: #384250;

    /* Phase 4b Task D4 (design-gate polish): the redline's OWN dedicated
       "suggested change" colour language -- deliberately NOT a `--chip-*`
       alias. One hue (indigo/violet, ~hue 253°) unclaimed by any status
       chip above and clear of both surfaces' own accents (tenant Flux-
       magenta `#cd1f7c` ~330°, portal seal-teal `--portal-accent-500`
       `#0e6d66` ~175°) -- close enough to nothing else in the app to read
       as its own signal the instant it appears inline in contract prose.
       Defined ONCE here, never re-pointed inside `.clm-portal` below: the
       `DocEditor` canvas itself stays literal white on BOTH planes
       (`--clm-surface` is `#ffffff` at :root AND inside `.clm-portal`), so
       one token set is legible everywhere a redline mark can actually
       render -- the same "define once, used everywhere" precedent
       `--chip-*` already set. See `.clm-cr-mark-*` below (@layer base) for
       how STYLE (dashed/solid/struck/faded), not a hue swap, carries the
       open/accepted/rejected/superseded distinction within this one hue. */
    --redline-accent: #4b3aa8;
    --redline-accent-muted: #9791c2;
    --redline-wash: #efecfb;
    --redline-wash-strong: #e0d8f7;

    /* Tracked mode part 1 (2026-08-04): the tenant's OWN in-progress typing.
       A separate ink from `--redline-*` because the two say different things
       and must not be confused at a glance: a redline is a proposal ABOUT the
       text, an annotation laid over it; a tracked edit IS the text, caught
       mid-change. The styling below carries that distinction structurally --
       a redline wears a wash, a tracked edit never does at rest.

       Deep teal, chosen by elimination rather than taste: clear of the
       redline indigo (~255deg), clear of the copper accent (~18deg, and
       copper is CHROME -- using it inside contract prose would blur the line
       between the app and the document), and clear of the portal's claret.
       6.47:1 on `--clm-surface`, so it holds AA at the document's serif body
       size, which a lighter "highlight" teal would not. */
    --tracked-ink: #0b6a60;
    --tracked-ink-muted: #5f9e97;
    --tracked-wash: #e6f2f0;

    /* Phase 4c Task F1: the tenant-side "External" badge -- marks an
       approval-chain approver as a counterparty CONTACT rather than an org
       member (`ChainBuilder`'s approver rows, `ApprovalPanel`'s submitted
       run view). Deliberately NOT a `--chip-*` (those encode CONTRACT
       lifecycle status, a different axis -- an external approver's STEP
       still gets its own status chip alongside this badge).

       Migrated teal -> WINE (2026-07-22, spec decision #6). Wine is this
       product's single "other side of the table" hue: the portal plane wears
       it, the redline voice edges wear it, and an EXTERNAL approver is that
       same idea reaching into the approvals surface. The teal was a leftover
       from the portal's pre-redesign accent, so keeping it would have meant
       two different colours for one concept. Identical to
       `--voice-cp-badge-*` below -- one counterparty hue, defined twice for
       two consumers rather than one alias, matching how `--chip-*` pairs are
       kept literal. */
    --external-badge-bg: #fbe0eb;
    --external-badge-text: #6b0f2a;

    /* -------------------------------------------------------------------
       Redline reply threads (2026-07-22): the VOICE system. Every redline
       card and every reply in its thread carries a 3px left edge naming
       whose voice it is -- one rule, read identically on both planes.

       Counterparty = WINE, the portal plane's own accent. The other side
       wears the other side's color, so a counterparty voice looks the same
       to both parties. Values track `--portal-accent-500/-100/-700`
       literally (not `var()`) because `.clm-portal` re-points the
       `--clm-*` namespace and these must NOT flip with it -- wine means
       "counterparty" on the tenant plane and on the portal alike.

       Own team = WARM SAND, a deliberate override of the concept mock's
       copper. Copper is this product's spice: it earns attention on the
       primary action, and spending it on a structural edge that appears on
       every card would spend it into wallpaper. Sand reads as "us, quietly"
       against the wine's "them". The avatar tone is darkened to #6f6456
       so white initials clear 4.5:1 -- the border tone alone would not. */
    --voice-cp-edge: #9f1239;
    --voice-cp-avatar: #9f1239;
    --voice-cp-badge-bg: #fbe0eb;
    --voice-cp-badge-text: #6b0f2a;
    --voice-team-edge: #c4b7a3;
    --voice-team-avatar: #6f6456;

    /* The 1.2s flash a redline span wears when its panel card is clicked
       (`DocEditorHandle.scrollToSpan`). Scroll alone is easy to miss on a
       dense page — the flash answers "which one did I just click?" without
       adding a persistent state the reader then has to dismiss. */
    --redline-flash-bg: #e0d8f7;

    /* The internal note's STRAW. A hue neither plane owns -- not copper's
       peach, not the open-chip's orange-amber -- so "only your team sees
       this" is never confused with a status. Paired with a dashed border,
       the app's existing idiom for "not part of the shared record". */
    --internal-note-bg: #f9f4dc;
    --internal-note-border: #d9cc98;
    --internal-note-text: #7a670f;
    --internal-note-chip-bg: #f1e8bd;

    /* SUPPORT SESSION (migration 0067) -- a platform superadmin signed in as a
       member of this workspace. This is the one state where the operator is not
       who the workspace thinks they are, so it needs a colour that exists
       nowhere else in the product: not copper (the workspace's own spice), not
       wine (the counterparty's voice), and emphatically not a `--chip-*` value,
       which encode CONTRACT STATUS -- borrowing one would say something false
       about the document on screen. Aubergine is cool where this plane is warm,
       and dark enough that the bar reads as chrome from another system rather
       than a notice inside this one. The edge tone is the same hue lifted, used
       for the frame that stays visible after the bar scrolls away. */
    --support-bg: #3d2b4f;
    --support-text: #f3edf7;
    --support-text-muted: #c9b8d6;
    --support-edge: #6b4e86;
  }

  /* ---------------------------------------------------------------------
     Phase 4a Task E2: the counterparty PORTAL's own visual surface --
     `frontend-design` skill, "secure document exchange" register. This is
     the external, non-tenant face of the product (an invited counterparty
     contact, not org staff): calm, trustworthy, deliberately NOT the Flux-
     magenta ops workspace above. Scoped entirely to `.clm-portal` (the
     portal layout's root wrapper, `app/portal/[org]/layout.tsx`) by
     RE-POINTING the SAME `--clm-*` custom properties `:root` defines above
     -- every existing utility this app already has (`bg-canvas`, `.card`,
     `text-ink`/`text-ink-secondary`/`text-ink-muted`/`text-ink-disabled`)
     and the read-only `DocEditor` instance the portal reuses verbatim
     therefore re-theme automatically for free, with no second component
     tree. `--portal-accent-*` is a NEW, portal-only namespace -- the
     tenant `accent-*` Tailwind scale is literal hex (not var-backed), so
     it can't be re-pointed this way; see the `.portal-btn-primary`/
     `.portal-input-field`/`.portal-tab` primitives below (@layer
     components) for how it's consumed. Cool ink-teal, not the tenant's
     magenta and not a warm cream/terracotta "trust" cliché -- a teal seal
     ink reads as "verified/secure" (registrar, notarization, data-room)
     without borrowing the tenant's own brand hue. */
  .clm-portal {
    --clm-canvas: #eef2f5;
    --clm-surface: #ffffff;
    --clm-surface-sunken: #e1e8ee;
    --clm-border: #d0d9e1;
    --clm-border-strong: #a9b8c6;
    --clm-text-primary: #10233a;
    --clm-text-secondary: #3c5268;
    --clm-text-muted: #5e7488;
    --clm-text-disabled: #94a5b5;

    /* WINE accent (locked 2026-07-21, portal redesign). Re-skins the portal's
       own `--portal-accent-*` namespace from the former seal-teal to a
       claret/wine scale -- the ONLY thing that changes; the cool-ink neutrals
       above and the shared `--chip-*` status palette stay exactly as they
       were. Reference target: `public/portal-concepts-wine.html`. The
       accent-200 tint (`#f5b8cf`, card borders / redline hover) and the
       -bright focus stop (`#be123c`, crisp focus outlines) are new stops the
       redesign's workspace primitives read. The logo is deliberately NOT
       wine -- it stays ink (see `brand/Logo.tsx` `ink` variant); wine is the
       accent, the mark is neutral. */
    --portal-accent-50: #fdf2f6;
    --portal-accent-100: #fbe0eb;
    --portal-accent-200: #f5b8cf;
    --portal-accent-500: #9f1239;
    --portal-accent-600: #881337;
    --portal-accent-700: #6b0f2a;
    --portal-accent-bright: #be123c;
  }

  * {
    font-variant-numeric: normal;
  }

  ::-moz-selection {
    background-color: var(--chip-pending_signature-bg);
    color: var(--clm-text-primary);
  }

  ::selection {
    background-color: var(--chip-pending_signature-bg);
    color: var(--clm-text-primary);
  }

  /* Thin, low-contrast scrollbars for dense scroll containers (sidebar,
     table overflow). Reused verbatim from the SignForge reference -- a
     generic, non-branded utility (docs/clm-design-direction.md §7). */
  .sf-scroll-subtle {
    scrollbar-width: thin;
    scrollbar-color: var(--clm-border-strong) transparent;
  }
  .sf-scroll-subtle::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .sf-scroll-subtle::-webkit-scrollbar-track {
    background: transparent;
  }
  .sf-scroll-subtle::-webkit-scrollbar-thumb {
    background: var(--clm-border-strong);
    border-radius: 999px;
  }
.\!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;
  }
}
/* Structural button/input classes -- reused from the SignForge reference,
     gold->accent, radius lg->md, shadow-lift dropped (design doc §7). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  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;
  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;
}
.btn:focus-visible {
  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(232 195 167 / var(--tw-ring-opacity, 1));
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  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;
  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;
}
.btn-primary:focus-visible {
  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(232 195 167 / var(--tw-ring-opacity, 1));
}
.btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-primary {
  background-color: var(--clm-text-primary);
  --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: 150ms;
}
.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(176 90 52 / var(--tw-bg-opacity, 1));
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  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;
  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;
}
.btn-secondary:focus-visible {
  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(232 195 167 / var(--tw-ring-opacity, 1));
}
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-secondary {
  border-width: 1px;
  border-color: var(--clm-border);
  background-color: var(--clm-surface);
  color: var(--clm-text-primary);
}
.btn-secondary:hover {
  background-color: var(--clm-surface-sunken);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  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;
  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;
}
.btn-ghost:focus-visible {
  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(232 195 167 / var(--tw-ring-opacity, 1));
}
.btn-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-ghost {
  color: var(--clm-text-secondary);
}
.btn-ghost:hover {
  background-color: var(--clm-surface-sunken);
  color: var(--clm-text-primary);
}
.input-field {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--clm-border);
  background-color: var(--clm-surface);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--clm-text-primary);
  outline: 2px solid transparent;
  outline-offset: 2px;
  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;
}
.input-field::-moz-placeholder {
  color: var(--clm-text-disabled);
}
.input-field::placeholder {
  color: var(--clm-text-disabled);
}
.input-field:focus {
  --tw-border-opacity: 1;
  border-color: rgb(176 90 52 / 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(244 223 208 / var(--tw-ring-opacity, 1));
}
/* Flat bordered card -- no shadow on static content (design doc §4:
     "Shadows -- flatten"). Elevation is reserved for transient overlays. */
.card {
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--clm-border);
  background-color: var(--clm-surface);
}
/* Status chip base shape -- rounded-md + a leading dot, NOT SignForge's
     rounded-full pill (design doc §2.4). Color is applied inline per state
     via CSS vars (see components/StatusChip.tsx) since the 8-state palette
     doesn't map cleanly onto a small, fixed set of Tailwind utility names. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.chip-dot {
  height: 0.375rem;
  width: 0.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
}
/* Document editor (Task 12 -- DocEditor.tsx port of SignForge's
     TipTapEditor). The editable surface keeps a Georgia serif "print"
     register deliberately distinct from the Inter UI chrome around it --
     it mirrors the serif body api/app/services/render.py's WeasyPrint
     stylesheet renders to PDF, so on-screen editing previews roughly what
     gets signed. */
/* The format painter's armed state, said on the surface it acts on. The
     toolbar button reads pressed, but the author is looking at the paper, and
     the paper is where the next drag will behave differently -- so it takes a
     copy cursor for as long as the brush is loaded. Children are included
     because `cursor` is inherited but the editable host's own UA `text` cursor
     would otherwise win back on every text node the mouse crosses. */
.clm-painting,
  .clm-painting * {
    cursor: copy;
  }
.clm-editor-content {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.5;
    color: var(--clm-text-primary);
    outline: none;
    /* F80: Tab types a real tab character; render it at a Word-like half-inch
       feel rather than the browser's 8-space default. */
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
  }
.clm-editor-content h1 {
    margin: 0 0 12pt 0;
    font-size: 14pt;
    font-weight: 700;
    text-align: center;
    /* No text-transform (2026-08-05): the stored text IS the document — an
       imported title must display with the casing its author wrote, not a
       house-style uppercase the export would then contradict. */
    letter-spacing: 0.5px;
  }
.clm-editor-content h2 {
    margin: 10pt 0 5pt 0;
    border-bottom: 0.5px solid var(--clm-border-strong);
    padding-bottom: 3pt;
    font-size: 11.5pt;
    font-weight: 700;
  }
.clm-editor-content h3 {
    margin: 8pt 0 4pt 0;
    font-size: 11pt;
    font-weight: 700;
  }
.clm-editor-content p {
    margin: 0 0 6pt 0;
    text-align: justify;
  }
.clm-editor-content ul,
  .clm-editor-content ol {
    margin: 0 0 6pt 0;
    padding-left: 20pt;
  }
/* Tailwind's preflight resets `list-style` to none on every ul/ol; without
     restoring it here a list renders as bare indented text (the "numbered
     list does nothing" walkthrough finding, F17). ol is legacy display only —
     the editor no longer creates orderedList (native-numbering spec
     2026-07-30); numbered authoring is `numberedClause` below. */
.clm-editor-content ul {
    list-style: disc outside;
  }
.clm-editor-content ul ul {
    list-style-type: circle;
  }
.clm-editor-content ol {
    list-style: decimal outside;
  }
.clm-editor-content ol ol {
    list-style-type: lower-alpha;
  }
.clm-editor-content li {
    margin-bottom: 2pt;
  }
.clm-editor-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 8pt 0;
  }
.clm-editor-content th,
  .clm-editor-content td {
    border: 1px solid var(--clm-border-strong);
    padding: 4pt 6pt;
    text-align: left;
    font-size: 10pt;
  }
.clm-editor-content th {
    background-color: var(--clm-surface-sunken);
    font-weight: 700;
  }
.clm-editor-content hr {
    margin: 12pt 0;
    border: none;
    border-top: 1px solid var(--clm-border);
  }
.clm-editor-content p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--clm-text-disabled);
    font-style: italic;
    pointer-events: none;
  }
/* `variable` chip -- Task 12 node contract. Sans-serif on purpose (breaks
     from the surrounding serif body) so it unmistakably reads as an inline
     UI token, not typed prose. An unresolved `{{key}}` fallback (no label
     yet -- `data-empty`, set only in DocEditor's renderHTML, never
     round-tripped back into node attrs) switches to `font-mono`, the same
     face the rest of the app reserves for data/IDs, so a raw token visibly
     reads as "unresolved," not as a typo. */
.clm-variable-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
  white-space: nowrap;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(232 195 167 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(251 243 236 / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.9em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(124 61 36 / var(--tw-text-opacity, 1));
    cursor: default;
}
.clm-variable-chip[data-empty="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(244 223 208 / var(--tw-border-opacity, 1));
  background-color: transparent;
  font-family: var(--font-data), ui-monospace, monospace;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(151 74 42 / var(--tw-text-opacity, 1));
}
/* An answered variable reads as document content -- its value in normal ink
     weight, with only a faint copper wash + no border so you can still tell it
     was a merge field, without it shouting like an unfilled placeholder. */
.clm-variable-chip[data-filled="true"] {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(251 243 236 / var(--tw-bg-opacity, 1));
  font-weight: 400;
  color: var(--clm-text-primary);
}
/* `clauseBlock` wrapper -- Task 12 node contract. A quiet left rule +
     small caption, NOT a callout/card: a clause is real contract text, so
     the chrome has to stay out of the way of reading it (design doc:
     flatten shadows / no static-content elevation). The caption text binds
     directly to the real `data-clause-title` attribute (no shadow state) --
     when a template slot has no title yet it degrades to a bare "Clause —"
     label rather than disappearing silently. */
.clm-clause-block {
  position: relative;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(232 195 167 / var(--tw-border-opacity, 1));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
}
.clm-clause-block::before {
    content: "Clause — " attr(data-clause-title);
    margin-bottom: 0.25rem;
    display: block;
    font-size: 0.6875rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(124 61 36 / var(--tw-text-opacity, 1));
  }
/* --- SP2b-1 DOCX import nodes -------------------------------------------
     Same discipline as .clm-clause-block above: quiet structural chrome that
     stays out of the way of reading real contract prose -- no cards, no
     elevation. */
/* `numberedClause` -- an outline-numbered paragraph. The number is a muted
     NEUTRAL hanging marker (a legal doc has hundreds of these; copper stays a
     single spice, so numbers don't get it), sitting in a fixed left column so
     the clause text keeps a clean edge. Depth is a left indent off data-level. */
.clm-numbered-clause {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  line-height: 1.625;
}
.clm-numbered-clause::before {
    content: attr(data-clause-number);
    margin-right: 0.75rem;
    display: inline-block;
    vertical-align: baseline;
    font-weight: 500;
    min-width: 2rem;
    color: var(--clm-text-muted);
  }
.clm-numbered-clause[data-level="1"] { margin-left: 1.5rem; }
.clm-numbered-clause[data-level="2"] { margin-left: 3rem; }
.clm-numbered-clause[data-level="3"] { margin-left: 4.5rem; }
.clm-numbered-clause[data-level="4"] { margin-left: 6rem; }
.clm-numbered-clause[data-level="5"] { margin-left: 7.5rem; }
.clm-numbered-clause[data-level="6"] { margin-left: 9rem; }
.clm-numbered-clause[data-level="7"] { margin-left: 10.5rem; }
.clm-numbered-clause[data-level="8"] { margin-left: 12rem; }
/* `pageBreak` -- a labelled hairline divider in the continuous-flow editor
     (the real page break happens at PDF export). A signpost, not a section
     break: thin rules flanking a small muted centred label. */
.clm-page-break {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
    color: var(--clm-text-muted);
}
.clm-page-break::before,
  .clm-page-break::after {
    content: "";
    height: 1px;
    flex: 1 1 0%;
    background: var(--clm-border-strong);
  }
.clm-page-break-label {
  flex-shrink: 0;
}
/* `unsupportedBlock` -- a construct SP2b can't yet model (image/footnote/…):
     PRESERVED (kept in the retained original .docx) and flagged, never editable
     here. A muted dashed inset chip -- informational, deliberately NOT an error
     colour. */
.clm-unsupported {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: dashed;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
    font-size: 0.85em;
    color: var(--clm-text-muted);
    border-color: var(--clm-border-strong);
    background: var(--clm-surface-sunken);
}
.clm-unsupported::before {
    content: "⧉";
    opacity: 0.7;
  }
/* SP2b-2a `image` -- a first-class imported image. Displayed via the
     `ImageNodeView` (async blob fetch). The frame is deliberately quiet: a
     hairline border + faint shadow so the picture reads as laid on the paper,
     never a heavy card. */
.clm-image {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: center;
}
.clm-image img {
    max-width: 100%;
    height: auto;
    border: 0.5px solid var(--clm-border);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgb(33 29 23 / 0.06);
  }
/* Loading: a quiet pulsing block, sized like a modest image area -- not a
     spinner (which reads as generic). Pulse is stilled under reduced motion. */
.clm-image-loading {
  display: block;
  width: 100%;
    height: 8rem;
    max-width: 20rem;
    border-radius: 3px;
    background: var(--clm-surface-sunken);
    animation: clm-image-pulse 1.6s ease-in-out infinite;
}
@keyframes clm-image-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
@media (prefers-reduced-motion: reduce) {
    .clm-image-loading { animation: none; }
  }
/* Amanda's busy row (F74): a typing-indicator ellipsis. Three dots rise
     and fade in sequence — the familiar chat signal that a long model call
     is genuinely in flight, replacing a static "…" nobody read as activity.
     Inherits currentColor (ink-muted at the call site), so no new color. */
.clm-thinking-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: 1px;
  }
.clm-thinking-dots span {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: currentColor;
    animation: clm-thinking-dot 1.2s ease-in-out infinite;
  }
.clm-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.clm-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes clm-thinking-dot {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
  }
@media (prefers-reduced-motion: reduce) {
    .clm-thinking-dots span { animation: none; }
  }
/* Non-previewable format (EMF/WMF/TIFF) or a failed fetch: reuse the
     preserved-and-flagged chip DNA (like `.clm-unsupported`) -- informational,
     honest, never an error. The image still round-trips on export. */
.clm-image-placeholder {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: dashed;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
    font-size: 0.85em;
    color: var(--clm-text-muted);
    border-color: var(--clm-border-strong);
    background: var(--clm-surface-sunken);
}
.clm-image-placeholder::before {
    content: "▢";
    opacity: 0.7;
  }
/* Phase 4b Task D1 (re-themed Task D4): read-only change-request
     (redline) marks -- `components/editor/changeRequestDecorations.ts`'s
     `Decoration.inline`/`.widget` output. Task D4 design-gate correction:
     these used to reuse the `--chip-*` status-chip vocabulary verbatim;
     the user directed a DEDICATED "suggested change" colour language
     instead (distinct from a status chip's multi-hue vocabulary), so this
     now keys off the `--redline-*` tokens defined at the top of this file
     -- ONE hue throughout, with open/accepted/rejected/superseded carried
     by STYLE (dashed vs solid underline, struck-through text, faded
     opacity), never a hue swap: a redline mark reads as "a redline" first,
     its disposition second. `ChangeRequestPanel`'s own list-row status
     chip (`ChangeStatusChip`, a DIFFERENT element -- a pill in the side
     list, not an in-document mark) intentionally keeps the app's ordinary
     `--chip-*` vocabulary; only the IN-DOCUMENT mark gets the new
     language. Still a quiet background wash + underline, never a
     shadow/pill -- this sits inline inside real contract prose, so the
     chrome has to stay out of the way of reading it, the same discipline
     `.clm-clause-block` above documents. */
.clm-cr-mark {
    border-radius: 2px;
    padding: 0 1px;
    border-bottom: 2px solid transparent;
    cursor: default;
  }
.clm-cr-mark-open {
    background-color: var(--redline-wash);
    border-bottom-color: var(--redline-accent);
    border-bottom-style: dashed;
  }
.clm-cr-mark-accepted {
    background-color: var(--redline-wash-strong);
    border-bottom-color: var(--redline-accent);
  }
.clm-cr-mark-rejected {
    /* NO line-through (removed 2026-08-08, operator evidence SECF-0039):
       rejection means the covered text SURVIVES — striking it in the canvas
       reads as "this text is deleted", and because this is a positional
       Decoration.inline, the strike also swallowed brand-new typing inside
       the range. The struck rendering of what was PROPOSED belongs to the
       panel's quotation; the canvas keeps only a muted trace of the span. */
    background-color: transparent;
    border-bottom-color: var(--redline-accent-muted);
    border-bottom-style: dotted;
    opacity: 0.9;
  }
/* The `redline` MARK is status-blind (crId/kind/side only) and nests INSIDE
     the status decoration span, so its live-proposal wash and — for
     kind="delete" — its strike would keep painting rejected text as a live
     redline. The status-aware wrapper is the one place that knows better:
     rejection releases the text (same 2026-08-08 evidence). */
.clm-cr-mark-rejected .redline-mark,
  .clm-cr-mark-rejected .redline-mark[data-kind="delete"] {
    /* The [data-kind="delete"] variant is listed explicitly: the mark's own
       strike rule below ties this selector's specificity and would win on
       source order otherwise. */
    background-color: transparent;
    border-bottom-color: var(--redline-accent-muted);
    border-bottom-style: dotted;
    text-decoration: none;
  }
.clm-cr-mark-superseded {
    background-color: transparent;
    border-bottom-color: var(--redline-accent-muted);
    border-bottom-style: dashed;
    opacity: 0.55;
  }
/* Handled by hand (spec 2026-09-10 R13): settled like a rejection -- the
     tenant made the change themselves, so the span is released and keeps
     only the muted trace. Same tone as rejected, deliberately. */
.clm-cr-mark-handled {
    background-color: transparent;
    border-bottom-color: var(--redline-accent-muted);
    border-bottom-style: dotted;
    opacity: 0.9;
  }
.clm-cr-mark-handled .redline-mark,
  .clm-cr-mark-handled .redline-mark[data-kind="delete"] {
    background-color: transparent;
    border-bottom-color: var(--redline-accent-muted);
    border-bottom-style: dotted;
    text-decoration: none;
  }
/* An insertion's ADDRESS (spec 2026-09-10 R8): the `redlinePoint` atom the
     server places at the seam. Zero width to every reader; on the canvas a
     2 px caret in the redline ink, so the tenant sees where the words will
     go -- the editable-canvas twin of the read-only `.clm-cr-marker` dot
     below, same ink, same state-by-opacity. The status decoration lands on
     the atom's own element (a one-position inline decoration), so the
     `.clm-cr-mark-*` classes tint it; the two-class selectors win over the
     single-class mark rules above without `!important`. `pointer-events:
     none` keeps the caret out of the way of placing the text cursor beside
     it; ProseMirror's own delete capture still removes it. */
.clm-redline-point,
  .clm-redline-point.clm-cr-mark {
    position: relative;
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin: 0 1px;
    padding: 0;
    border: 0;
    border-radius: 1px;
    vertical-align: -0.2em;
    background-color: var(--redline-accent);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: none;
  }
/* F113 (prod ACMC-0046): a 2 px stem at the first character of a title was
     missed entirely. The stem keeps a HEAD -- the read-only `.clm-cr-marker`
     dot below, sat on top of the caret -- so an address reads at a glance.
     `inherit` takes the stem's ink, muted states included; the element's
     opacity already covers the pseudo-element, so state-by-opacity needs no
     second rule. No motion, so reduced-motion needs nothing here. */
.clm-redline-point::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background-color: inherit;
  }
.clm-redline-point.clm-cr-mark-open {
    opacity: 0.85;
  }
.clm-redline-point.clm-cr-mark-accepted {
    opacity: 1;
  }
.clm-redline-point.clm-cr-mark-rejected,
  .clm-redline-point.clm-cr-mark-handled,
  .clm-redline-point.clm-cr-mark-superseded {
    background-color: var(--redline-accent-muted);
    opacity: 0.55;
  }
/* The INLINE redline mark (marks arc, spec 2026-08-02 §2.1). Deliberately
     wears the SAME language as `.clm-cr-mark-*` above -- quiet wash + a
     coloured underline, never a pill or shadow, because it sits inside real
     contract prose. A reader must not be able to tell that a redline's place
     moved from a stored offset into the document itself; that migration is
     invisible by design.

     What it encodes differs from the decoration layer, and the styling says
     so honestly: the decoration was keyed on STATUS (which still lives on the
     row, and the Changes panel still shows), while a mark carries KIND and
     SIDE. Deletions read struck through -- the one convention every Word user
     already knows -- comments sit lighter because no text is changing, and
     the tenant's own tracked edits use the muted accent so the counterparty's
     proposals stay the louder voice on the page. */
.redline-mark {
    border-radius: 2px;
    padding: 0 1px;
    background-color: var(--redline-wash);
    border-bottom: 2px solid var(--redline-accent);
    cursor: default;
  }
.redline-mark[data-kind="delete"] {
    text-decoration: line-through;
    text-decoration-color: var(--redline-accent);
  }
.redline-mark[data-kind="comment"] {
    background-color: transparent;
    border-bottom-style: dotted;
  }
.redline-mark[data-side="tenant"] {
    border-bottom-color: var(--redline-accent-muted);
  }
/* An insert-kind mark only ever wraps a `redlinePoint` (an insertion
     replaces no text), and the caret carries the ink itself -- so the mark
     wrapper paints nothing, or the seam would wear a washed, underlined box
     around a 2 px bar. The tenant's own caret takes the muted ink. */
.redline-mark[data-kind="insert"] {
    background-color: transparent;
    border-bottom: 0;
    padding: 0;
  }
.redline-mark[data-side="tenant"] > .clm-redline-point {
    background-color: var(--redline-accent-muted);
  }
/* Clickable spans (Task 8's document -> panel jump). Only applied when a
     caller wires `onSpanClick`; the class is added by the decoration layer
     itself, so a read-only surface with no handler keeps `cursor: default`
     and no hover affordance -- nothing looks clickable that isn't. */
.clm-cr-mark-clickable,
  .clm-cr-marker.clm-cr-mark-clickable {
    cursor: pointer;
  }
.clm-cr-mark-clickable:hover {
    background-color: var(--redline-wash-strong);
  }
/* The 1.2s flash after a panel -> document jump. Transition on the way
     OUT as well as in, so the highlight recedes rather than snapping off
     and reading as a glitch. Suppressed under reduced-motion, where an
     abrupt colour change is exactly what the setting exists to avoid --
     the scroll still lands on the span, which is the actual information. */
.clm-cr-mark,
  .clm-cr-marker {
    transition: background-color 0.35s ease-out, box-shadow 0.35s ease-out;
  }
.clm-cr-flash {
    background-color: var(--redline-flash-bg) !important;
    box-shadow: 0 0 0 3px var(--redline-flash-bg);
  }
@media (prefers-reduced-motion: reduce) {
    .clm-cr-mark,
    .clm-cr-marker {
      transition: none;
    }
    .clm-cr-flash {
      box-shadow: none;
    }
  }
/* Tracked-change marks (tracked mode part 1). The one convention every
     Word user already reads without being taught: inserted text underlined,
     deleted text struck through, both in one author ink.

     NO background wash, deliberately, and this is the whole differentiator
     from `.redline-mark` directly above. A redline is an annotation ABOUT the
     prose, so a wash is right -- it reads as something laid over the words. A
     tracked edit is the prose, mid-change, so it is drawn as ink ON the words
     instead. Two mark languages share this canvas and a reader has to tell
     them apart in a glance, without a legend.

     No gutter bar, also deliberately. The margin belongs to redline
     AUTHORSHIP (locked decision #10, below) and a second bar there would make
     the gutter mean two different things depending on its colour. Finding
     unsettled edits is handled explicitly instead, by the step-through in
     `TrackedChangesBar` -- which is keyboard-reachable, unlike a stripe. */
.tracked-insert {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    text-decoration-color: var(--tracked-ink);
    color: var(--tracked-ink);
  }
.tracked-delete {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--tracked-ink);
    color: var(--tracked-ink-muted);
  }
/* Struck text is the one thing here a screen reader would otherwise read as
     ordinary prose; `<del>`/`<ins>` (B17) carry that, and this only makes the
     visual match. A tracked edit under the caret gets the wash the resting
     state refuses -- movement, not decoration. */
.tracked-insert:focus-within,
  .tracked-delete:focus-within {
    background-color: var(--tracked-wash);
  }
/* A quotation of the document, INSIDE the UI. `TrackedChangesBar`'s excerpt
     is set in the document's own serif rather than the Inter chrome around it,
     so the chip reads as the contract's words rather than as a label the app
     wrote about them. Same family as `.clm-editor-content` (which mirrors
     api/app/services/render.py's PDF stylesheet) -- one register for
     everything that is the document. */
.clm-doc-specimen {
    font-family: Georgia, "Times New Roman", serif;
  }
/* The margin change-bar: authorship rides the GUTTER, never the prose
     (locked decision #10). The in-document redline language stays one
     indigo; who proposed it is a voice-hued bar in the margin, so the two
     signals never compete inside the sentence itself. */
/* The bar marks the BLOCK the redline sits in, spanning its full height
     the way the concept mock does — not the single line the anchor starts
     on. A redline routinely wraps, and a bar that tracked only its first
     line would read as pointing at the wrong sentence. Absolute against the
     block below, which is why these blocks are made positioned. */
.ProseMirror p,
  .ProseMirror li,
  .ProseMirror h1,
  .ProseMirror h2,
  .ProseMirror h3,
  .ProseMirror blockquote {
    position: relative;
  }
.clm-cr-voice-bar {
    position: absolute;
    left: -16px;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 999px;
    pointer-events: none;
  }
.clm-cr-voice-bar-cp {
    background-color: var(--voice-cp-edge);
  }
.clm-cr-voice-bar-team {
    background-color: var(--voice-team-edge);
  }
/* A zero-length (`insert`-kind) anchor has no text to underline -- a
     small inline dot marks the insertion point instead, using the same
     `--redline-*` ink (a solid fill rather than a wash, since there's no
     text underneath it to keep legible). Open reads slightly softer
     (still pending) than accepted (landed) via opacity, not a colour
     change -- the same "style carries state" discipline as the marks
     above. */
.clm-cr-marker {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 1px;
    border-radius: 999px;
    vertical-align: middle;
  }
.clm-cr-marker.clm-cr-mark-open {
    background-color: var(--redline-accent);
    opacity: 0.7;
  }
.clm-cr-marker.clm-cr-mark-accepted {
    background-color: var(--redline-accent);
  }
.clm-cr-marker.clm-cr-mark-rejected {
    background-color: var(--redline-accent-muted);
  }
.clm-cr-marker.clm-cr-mark-superseded {
    background-color: var(--redline-accent-muted);
    opacity: 0.55;
  }
/* Phase 4b Task D3: a ONE-SHOT "list <-> document" focus flash on a
     change-request's inline decoration span/marker when its row in the
     counterparty PORTAL's `PortalChangeRequestList` is clicked (rows and
     decorations share one `data-cr-id`). The tenant-side twin
     (`.clm-cr-focus`, Task D2) was retired 2026-07-22 with
     `ChangeRequestPanel`'s in-panel preview -- the portal keeps its own
     document view, so this one stays. Portal-scoped ring in the portal's
     own accent (see the `.portal-btn-primary` block's comment on why
     `--portal-accent-*` exists as its own var namespace). One-shot: added
     by `PortalSuggestEdit.focusRequest` and removed once the animation
     finishes (unlike `.clm-portal-seal-pulse`'s ambient `infinite`
     breathing below). */
.clm-cr-focus-portal {
    animation: clm-cr-focus-portal-flash 900ms ease-out;
    border-radius: 3px;
  }
/* Mobile nav slide-over sheet (Task 17 / A1) -- AppShell.tsx. Entrance-only
     (slide+fade in on mount); closing just unmounts the sheet outright --
     deliberately asymmetric, a snappier close reads fine for a nav drawer
     and skips a second state machine just for the exit transition. Elevation
     or motion "is reserved for transient overlays" (design doc §4/§7) --
     this sheet is exactly that, the app's static content stays flat. */
.clm-mobile-sheet-enter {
    animation: clm-sheet-slide-in 200ms ease-out;
  }
.clm-mobile-backdrop-enter {
    animation: clm-backdrop-fade-in 200ms ease-out;
  }
/* Centered dialog entrance (Phase 4a Task E1 -- `InviteContactDialog`,
     the app's first true centered modal). A quiet pop+fade, same
     "transient overlay only" motion budget as the mobile sheet above --
     the backdrop reuses `clm-mobile-backdrop-enter` verbatim (it's already
     a generic fade, not sheet-specific despite its name). */
.clm-dialog-enter {
    animation: clm-dialog-pop-in 160ms ease-out;
  }
/* Phase 4a Task E2: portal-only button/input/tab primitives -- deliberately
     NOT `.btn-primary`/`.input-field` (those bake in the tenant's literal
     `accent-500` magenta hex, which `.clm-portal`'s var override above
     cannot re-point -- see that block's comment). Named with a `portal-`
     prefix so they can never collide with the tenant primitives; only ever
     used under `app/portal/**`, always nested inside the `.clm-portal`
     ancestor that defines the `--portal-accent-*` vars they read. */
.portal-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  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;
}
.portal-btn-primary:focus-visible {
  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);
}
.portal-btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.portal-btn-primary {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background-color: var(--portal-accent-500);
    box-shadow: 0 1px 2px rgba(107, 15, 42, 0.18);
}
.portal-btn-primary:hover:not(:disabled) {
    background-color: var(--portal-accent-600);
  }
.portal-btn-primary:focus-visible {
    box-shadow: 0 0 0 3px var(--portal-accent-100);
  }
.portal-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  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;
}
.portal-btn-secondary:focus-visible {
  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);
}
.portal-btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.portal-btn-secondary {
  background-color: var(--clm-surface);
  color: var(--clm-text-primary);
    border: 1px solid var(--clm-border);
}
.portal-btn-secondary:hover:not(:disabled) {
    background-color: var(--clm-surface-sunken);
  }
.portal-btn-secondary:focus-visible {
    box-shadow: 0 0 0 3px var(--portal-accent-100);
  }
.portal-input-field {
  width: 100%;
  border-radius: 0.375rem;
  background-color: var(--clm-surface);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--clm-text-primary);
  outline: 2px solid transparent;
  outline-offset: 2px;
  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;
}
.portal-input-field::-moz-placeholder {
  color: var(--clm-text-disabled);
}
.portal-input-field::placeholder {
  color: var(--clm-text-disabled);
}
.portal-input-field {
    border: 1px solid var(--clm-border);
  }
.portal-input-field:focus {
    border-color: var(--portal-accent-500);
    box-shadow: 0 0 0 3px var(--portal-accent-100);
  }
/* The login screen's password / email-link segmented control -- two
     equal-width tabs, active one filled solid with the seal-teal (never a
     hairline underline: this is the one moment the portal asks a visitor to
     make a real choice, so it reads as a toggle, not a passive tab bar). */
.portal-tab {
  flex: 1 1 0%;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  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;
}
.portal-tab:focus-visible {
  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);
}
.portal-tab[data-active="true"] {
    background-color: var(--portal-accent-500);
    color: #fff;
  }
.portal-tab[data-active="false"] {
  color: var(--clm-text-secondary);
}
.portal-tab[data-active="false"]:hover {
    background-color: var(--clm-surface-sunken);
  }
.portal-tab:focus-visible {
    box-shadow: 0 0 0 3px var(--portal-accent-100);
  }
/* Portal redesign (2026-07-21): the workspace's signature redline
     affordance -- a floating "Suggest edit" button anchored just above a live
     text selection (Google-Docs register), the primary, discoverable entry
     into the propose flow. Wine fill + a downward caret + a slow attention
     pulse (reduced-motion below stills it). Positioned by the mounting
     component (absolute within the scrolling doc wrapper). */
.portal-suggest-float {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 9px));
    background-color: var(--portal-accent-500);
    color: #fff;
    font-size: 12.5px;
    font-weight: 650;
    padding: 8px 13px;
    border-radius: 9px;
    border: 0;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(107, 15, 42, 0.6);
    animation: portal-suggest-pulse 2.4s ease-out infinite;
  }
.portal-suggest-float:hover {
    background-color: var(--portal-accent-600);
  }
.portal-suggest-float:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
.portal-suggest-float::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--portal-accent-500);
  }
/* The propose-confirmation toast -- slides up from the workspace's bottom
     edge on a successful suggestion, then retracts. A dark wine-ink chip so it
     reads over both the canvas and the paper. */
.portal-ws-toast {
    transform: translate(-50%, 160%);
    transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
.portal-ws-toast[data-open="true"] {
    transform: translate(-50%, 0);
  }
/* `PortalSeal`'s quiet "verifying" pulse (magic-link redeem) -- an ambient
     breathing glow on the ring only, never the glyph (a static provenance
     mark shouldn't itself look uncertain). Respects reduced-motion below. */
.clm-portal-seal-pulse {
    animation: clm-portal-seal-pulse 1.8s ease-in-out infinite;
  }
/* Login (Ink Immersive) atmosphere -- scoped to `app/login/page.tsx`, the
     one full-bleed dark surface in the tenant app. A slow-drifting copper glow
     sits behind a floating white form card on a warm-ink field; the card gets
     a single settle-in on load. Both are stilled under reduced-motion below.
     Its resting position (animation paused) already matches the intended
     composition, so nothing jumps when motion is off. */
.clm-login-glow {
    animation: clm-login-glow-drift 16s ease-in-out infinite;
  }
.clm-login-rise {
    animation: clm-login-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
.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;
}
.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-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.inset-y-1\.5 {
  top: 0.375rem;
  bottom: 0.375rem;
}
.inset-y-2 {
  top: 0.5rem;
  bottom: 0.5rem;
}
.-left-\[3\.5px\] {
  left: -3.5px;
}
.-right-1 {
  right: -0.25rem;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-\[30\%\] {
  top: -30%;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-6 {
  bottom: 1.5rem;
}
.bottom-full {
  bottom: 100%;
}
.end-1 {
  inset-inline-end: 0.25rem;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-6 {
  left: 1.5rem;
}
.left-\[52\%\] {
  left: 52%;
}
.left-\[54\%\] {
  left: 54%;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-4 {
  right: 1rem;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-11 {
  top: 2.75rem;
}
.top-4 {
  top: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.top-8 {
  top: 2rem;
}
.top-\[-32\%\] {
  top: -32%;
}
.top-\[2px\] {
  top: 2px;
}
.top-\[34px\] {
  top: 34px;
}
.top-\[5px\] {
  top: 5px;
}
.top-full {
  top: 100%;
}
.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-\[60\] {
  z-index: 60;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.m-0 {
  margin: 0px;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-my-6 {
  margin-top: -1.5rem;
  margin-bottom: -1.5rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-2\.5 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
.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-2\.5 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-1\.5 {
  margin-left: -0.375rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-\[2px\] {
  margin-left: 2px;
}
.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;
}
.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-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-28 {
  margin-top: 7rem;
}
.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-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-auto {
  margin-top: auto;
}
.mt-px {
  margin-top: 1px;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.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-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[11px\] {
  height: 11px;
}
.h-\[13px\] {
  height: 13px;
}
.h-\[15px\] {
  height: 15px;
}
.h-\[17px\] {
  height: 17px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[320px\] {
  height: 320px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[520px\] {
  height: 520px;
}
.h-\[5px\] {
  height: 5px;
}
.h-\[600px\] {
  height: 600px;
}
.h-\[60px\] {
  height: 60px;
}
.h-\[76px\] {
  height: 76px;
}
.h-\[820px\] {
  height: 820px;
}
.h-\[840px\] {
  height: 840px;
}
.h-\[calc\(100dvh-3\.5rem\)\] {
  height: calc(100dvh - 3.5rem);
}
.h-\[calc\(100vh-3rem\)\] {
  height: calc(100vh - 3rem);
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-0 {
  max-height: 0px;
}
.max-h-24 {
  max-height: 6rem;
}
.max-h-36 {
  max-height: 9rem;
}
.max-h-44 {
  max-height: 11rem;
}
.max-h-52 {
  max-height: 13rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-\[40vh\] {
  max-height: 40vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-3 {
  min-height: 0.75rem;
}
.min-h-7 {
  min-height: 1.75rem;
}
.min-h-8 {
  min-height: 2rem;
}
.min-h-\[1056px\] {
  min-height: 1056px;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.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-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-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-96 {
  width: 24rem;
}
.w-\[1\.5px\] {
  width: 1.5px;
}
.w-\[10\%\] {
  width: 10%;
}
.w-\[104px\] {
  width: 104px;
}
.w-\[11\%\] {
  width: 11%;
}
.w-\[11px\] {
  width: 11px;
}
.w-\[12\%\] {
  width: 12%;
}
.w-\[13\%\] {
  width: 13%;
}
.w-\[13px\] {
  width: 13px;
}
.w-\[14\%\] {
  width: 14%;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[15\%\] {
  width: 15%;
}
.w-\[16\%\] {
  width: 16%;
}
.w-\[160px\] {
  width: 160px;
}
.w-\[178px\] {
  width: 178px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[20\%\] {
  width: 20%;
}
.w-\[22\%\] {
  width: 22%;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[28\%\] {
  width: 28%;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[30px\] {
  width: 30px;
}
.w-\[32\%\] {
  width: 32%;
}
.w-\[34\%\] {
  width: 34%;
}
.w-\[36px\] {
  width: 36px;
}
.w-\[38\%\] {
  width: 38%;
}
.w-\[38px\] {
  width: 38px;
}
.w-\[3px\] {
  width: 3px;
}
.w-\[42\%\] {
  width: 42%;
}
.w-\[5\%\] {
  width: 5%;
}
.w-\[54px\] {
  width: 54px;
}
.w-\[5px\] {
  width: 5px;
}
.w-\[68px\] {
  width: 68px;
}
.w-\[8\%\] {
  width: 8%;
}
.w-\[820px\] {
  width: 820px;
}
.w-\[840px\] {
  width: 840px;
}
.w-\[9\%\] {
  width: 9%;
}
.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-5 {
  min-width: 1.25rem;
}
.min-w-\[10rem\] {
  min-width: 10rem;
}
.min-w-\[11rem\] {
  min-width: 11rem;
}
.min-w-\[1200px\] {
  min-width: 1200px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[13rem\] {
  min-width: 13rem;
}
.min-w-\[14rem\] {
  min-width: 14rem;
}
.min-w-\[15px\] {
  min-width: 15px;
}
.min-w-\[16rem\] {
  min-width: 16rem;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.min-w-\[190px\] {
  min-width: 190px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[40rem\] {
  min-width: 40rem;
}
.min-w-\[720px\] {
  min-width: 720px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[9rem\] {
  min-width: 9rem;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.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-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[140vw\] {
  max-width: 140vw;
}
.max-w-\[20rem\] {
  max-width: 20rem;
}
.max-w-\[22rem\] {
  max-width: 22rem;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[24ch\] {
  max-width: 24ch;
}
.max-w-\[24rem\] {
  max-width: 24rem;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[380px\] {
  max-width: 380px;
}
.max-w-\[392px\] {
  max-width: 392px;
}
.max-w-\[440px\] {
  max-width: 440px;
}
.max-w-\[46ch\] {
  max-width: 46ch;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[52ch\] {
  max-width: 52ch;
}
.max-w-\[56ch\] {
  max-width: 56ch;
}
.max-w-\[680px\] {
  max-width: 680px;
}
.max-w-\[68ch\] {
  max-width: 68ch;
}
.max-w-\[760px\] {
  max-width: 760px;
}
.max-w-\[80vw\] {
  max-width: 80vw;
}
.max-w-\[820px\] {
  max-width: 820px;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-\[9rem\] {
  max-width: 9rem;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.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-none {
  flex: none;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.table-fixed {
  table-layout: fixed;
}
.border-collapse {
  border-collapse: collapse;
}
.border-separate {
  border-collapse: separate;
}
.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.-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));
}
.-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-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-\[18px\] {
  --tw-translate-x: 18px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 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-\[2px\] {
  --tw-translate-x: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.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));
}
.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));
}
.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-col-resize {
  cursor: col-resize;
}
.cursor-default {
  cursor: default;
}
.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-10 {
  scroll-margin-top: 2.5rem;
}
.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-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-\[1fr_54px\] {
  grid-template-columns: 1fr 54px;
}
.grid-cols-\[1fr_54px_400px\] {
  grid-template-columns: 1fr 54px 400px;
}
.grid-cols-\[repeat\(auto-fit\2c minmax\(15rem\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-14 {
  gap: 3.5rem;
}
.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-\[2px\] {
  gap: 2px;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.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-7 {
  -moz-column-gap: 1.75rem;
       column-gap: 1.75rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-x-\[10px\] {
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.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-3 {
  row-gap: 0.75rem;
}
.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));
}
.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-hairline > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--clm-border);
}
.self-end {
  align-self: flex-end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[5px\] {
  border-radius: 5px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-\[7px\] {
  border-radius: 7px;
}
.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-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#e5b5b0\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 181 176 / var(--tw-border-opacity, 1));
}
.border-\[var\(--clm-border\)\] {
  border-color: var(--clm-border);
}
.border-\[var\(--clm-border-strong\)\] {
  border-color: var(--clm-border-strong);
}
.border-\[var\(--internal-note-border\)\] {
  border-color: var(--internal-note-border);
}
.border-\[var\(--portal-accent-200\)\] {
  border-color: var(--portal-accent-200);
}
.border-\[var\(--portal-accent-500\)\] {
  border-color: var(--portal-accent-500);
}
.border-\[var\(--redline-wash\)\] {
  border-color: var(--redline-wash);
}
.border-accent-200 {
  --tw-border-opacity: 1;
  border-color: rgb(232 195 167 / var(--tw-border-opacity, 1));
}
.border-accent-300 {
  --tw-border-opacity: 1;
  border-color: rgb(215 160 122 / var(--tw-border-opacity, 1));
}
.border-accent-500 {
  --tw-border-opacity: 1;
  border-color: rgb(176 90 52 / var(--tw-border-opacity, 1));
}
.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}
.border-hairline {
  border-color: var(--clm-border);
}
.border-hairline-strong {
  border-color: var(--clm-border-strong);
}
.border-ink {
  border-color: var(--clm-text-primary);
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-surface {
  border-color: var(--clm-surface);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-l-\[var\(--voice-cp-edge\)\] {
  border-left-color: var(--voice-cp-edge);
}
.border-l-\[var\(--voice-team-edge\)\] {
  border-left-color: var(--voice-team-edge);
}
.border-t-accent-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(176 90 52 / var(--tw-border-opacity, 1));
}
.bg-\[\#1a1611\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 22 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#211d17\] {
  --tw-bg-opacity: 1;
  background-color: rgb(33 29 23 / var(--tw-bg-opacity, 1));
}
.bg-\[\#33691a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(51 105 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#B42318\]\/70 {
  background-color: rgb(180 35 24 / 0.7);
}
.bg-\[\#c0662f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(192 102 47 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4faea\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 250 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbfaff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 250 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fceceb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 236 235 / var(--tw-bg-opacity, 1));
}
.bg-\[color\:var\(--chip-executed-bg\)\] {
  background-color: var(--chip-executed-bg);
}
.bg-\[color\:var\(--chip-expired-bg\)\] {
  background-color: var(--chip-expired-bg);
}
.bg-\[color\:var\(--chip-expired-text\)\] {
  background-color: var(--chip-expired-text);
}
.bg-\[rgba\(16\2c 24\2c 40\2c 0\.4\)\] {
  background-color: rgba(16,24,40,0.4);
}
.bg-\[var\(--internal-note-bg\)\] {
  background-color: var(--internal-note-bg);
}
.bg-\[var\(--internal-note-chip-bg\)\] {
  background-color: var(--internal-note-chip-bg);
}
.bg-\[var\(--internal-note-text\)\] {
  background-color: var(--internal-note-text);
}
.bg-\[var\(--portal-accent-100\)\] {
  background-color: var(--portal-accent-100);
}
.bg-\[var\(--portal-accent-50\)\] {
  background-color: var(--portal-accent-50);
}
.bg-\[var\(--portal-accent-500\)\] {
  background-color: var(--portal-accent-500);
}
.bg-\[var\(--portal-accent-soft\2c \#fdf2f4\)\] {
  background-color: var(--portal-accent-soft,#fdf2f4);
}
.bg-\[var\(--redline-wash\)\] {
  background-color: var(--redline-wash);
}
.bg-\[var\(--voice-cp-badge-bg\)\] {
  background-color: var(--voice-cp-badge-bg);
}
.bg-\[var\(--voice-cp-edge\)\] {
  background-color: var(--voice-cp-edge);
}
.bg-accent-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 223 208 / var(--tw-bg-opacity, 1));
}
.bg-accent-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(232 195 167 / var(--tw-bg-opacity, 1));
}
.bg-accent-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(215 160 122 / var(--tw-bg-opacity, 1));
}
.bg-accent-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 243 236 / var(--tw-bg-opacity, 1));
}
.bg-accent-50\/40 {
  background-color: rgb(251 243 236 / 0.4);
}
.bg-accent-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(176 90 52 / var(--tw-bg-opacity, 1));
}
.bg-canvas {
  background-color: var(--clm-canvas);
}
.bg-current {
  background-color: currentColor;
}
.bg-hairline {
  background-color: var(--clm-border);
}
.bg-hairline-strong {
  background-color: var(--clm-border-strong);
}
.bg-ink {
  background-color: var(--clm-text-primary);
}
.bg-ink-muted {
  background-color: var(--clm-text-muted);
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-surface {
  background-color: var(--clm-surface);
}
.bg-surface-sunken {
  background-color: var(--clm-surface-sunken);
}
.bg-transparent {
  background-color: transparent;
}
.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\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.fill-\[color\:var\(--clm-text-muted\)\] {
  fill: var(--clm-text-muted);
}
.fill-\[color\:var\(--clm-text-primary\)\] {
  fill: var(--clm-text-primary);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.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-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.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;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-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-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-3\.5 {
  padding-bottom: 0.875rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-3\.5 {
  padding-left: 0.875rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[18px\] {
  padding-left: 18px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-20 {
  padding-top: 5rem;
}
.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;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.font-mono {
  font-family: var(--font-data), ui-monospace, monospace;
}
.font-sans {
  font-family: var(--font-sans), system-ui, sans-serif;
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.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-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[27px\] {
  font-size: 27px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[36px\] {
  font-size: 36px;
}
.text-\[40px\] {
  font-size: 40px;
}
.text-\[44px\] {
  font-size: 44px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9\.5px\] {
  font-size: 9.5px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-body {
  font-size: 0.9375rem;
  line-height: 1.65;
}
.text-display {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
}
.text-heading {
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 600;
}
.text-kpi-number {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-meta {
  font-size: 0.75rem;
  line-height: 1.4;
}
.text-micro {
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-table {
  font-size: 0.8125rem;
  line-height: 1.45;
}
.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-extrabold {
  font-weight: 800;
}
.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;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-8 {
  line-height: 2rem;
}
.leading-\[1\.04\] {
  line-height: 1.04;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.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-\[-0\.01em\] {
  letter-spacing: -0.01em;
}
.tracking-\[-0\.025em\] {
  letter-spacing: -0.025em;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}
.tracking-\[0\.04em\] {
  letter-spacing: 0.04em;
}
.tracking-\[0\.055em\] {
  letter-spacing: 0.055em;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
.tracking-\[0\.07em\] {
  letter-spacing: 0.07em;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.13em\] {
  letter-spacing: 0.13em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.45em\] {
  letter-spacing: 0.45em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-\[\#157a45\] {
  --tw-text-opacity: 1;
  color: rgb(21 122 69 / var(--tw-text-opacity, 1));
}
.text-\[\#4d7c0f\] {
  --tw-text-opacity: 1;
  color: rgb(77 124 15 / var(--tw-text-opacity, 1));
}
.text-\[\#a99e8e\] {
  --tw-text-opacity: 1;
  color: rgb(169 158 142 / var(--tw-text-opacity, 1));
}
.text-\[\#b13a2e\] {
  --tw-text-opacity: 1;
  color: rgb(177 58 46 / var(--tw-text-opacity, 1));
}
.text-\[\#c0662f\] {
  --tw-text-opacity: 1;
  color: rgb(192 102 47 / var(--tw-text-opacity, 1));
}
.text-\[\#c9793f\] {
  --tw-text-opacity: 1;
  color: rgb(201 121 63 / var(--tw-text-opacity, 1));
}
.text-\[\#d98a54\] {
  --tw-text-opacity: 1;
  color: rgb(217 138 84 / var(--tw-text-opacity, 1));
}
.text-\[\#f0a99b\] {
  --tw-text-opacity: 1;
  color: rgb(240 169 155 / var(--tw-text-opacity, 1));
}
.text-\[\#f2ede4\] {
  --tw-text-opacity: 1;
  color: rgb(242 237 228 / var(--tw-text-opacity, 1));
}
.text-\[\#f8f6f2\] {
  --tw-text-opacity: 1;
  color: rgb(248 246 242 / var(--tw-text-opacity, 1));
}
.text-\[color\:var\(--chip-executed-text\)\] {
  color: var(--chip-executed-text);
}
.text-\[color\:var\(--chip-expired-text\)\] {
  color: var(--chip-expired-text);
}
.text-\[var\(--chip-approved-text\)\] {
  color: var(--chip-approved-text);
}
.text-\[var\(--chip-approved-text\2c \#4d7c0f\)\] {
  color: var(--chip-approved-text,#4d7c0f);
}
.text-\[var\(--chip-expired-text\)\] {
  color: var(--chip-expired-text);
}
.text-\[var\(--clm-danger\2c \#9b2c1f\)\] {
  color: var(--clm-danger,#9b2c1f);
}
.text-\[var\(--clm-text-muted\)\] {
  color: var(--clm-text-muted);
}
.text-\[var\(--internal-note-text\)\] {
  color: var(--internal-note-text);
}
.text-\[var\(--portal-accent-500\)\] {
  color: var(--portal-accent-500);
}
.text-\[var\(--portal-accent-600\)\] {
  color: var(--portal-accent-600);
}
.text-\[var\(--portal-accent-700\)\] {
  color: var(--portal-accent-700);
}
.text-\[var\(--portal-accent-strong\2c \#9f1239\)\] {
  color: var(--portal-accent-strong,#9f1239);
}
.text-\[var\(--redline-accent\)\] {
  color: var(--redline-accent);
}
.text-\[var\(--redline-accent\2c \#4b3aa8\)\] {
  color: var(--redline-accent,#4b3aa8);
}
.text-\[var\(--voice-cp-badge-text\)\] {
  color: var(--voice-cp-badge-text);
}
.text-\[var\(--voice-cp-edge\)\] {
  color: var(--voice-cp-edge);
}
.text-accent-500 {
  --tw-text-opacity: 1;
  color: rgb(176 90 52 / var(--tw-text-opacity, 1));
}
.text-accent-600 {
  --tw-text-opacity: 1;
  color: rgb(151 74 42 / var(--tw-text-opacity, 1));
}
.text-accent-700 {
  --tw-text-opacity: 1;
  color: rgb(124 61 36 / var(--tw-text-opacity, 1));
}
.text-accent-700\/70 {
  color: rgb(124 61 36 / 0.7);
}
.text-canvas {
  color: var(--clm-canvas);
}
.text-ink {
  color: var(--clm-text-primary);
}
.text-ink-disabled {
  color: var(--clm-text-disabled);
}
.text-ink-muted {
  color: var(--clm-text-muted);
}
.text-ink-secondary {
  color: var(--clm-text-secondary);
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/25 {
  color: rgb(255 255 255 / 0.25);
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-\[var\(--redline-accent\)\] {
  text-decoration-color: var(--redline-accent);
}
.decoration-\[var\(--redline-accent\2c \#4b3aa8\)\] {
  text-decoration-color: var(--redline-accent,#4b3aa8);
}
.decoration-accent-200 {
  text-decoration-color: #e8c3a7;
}
.decoration-accent-500 {
  text-decoration-color: #b05a34;
}
.decoration-hairline-strong {
  text-decoration-color: var(--clm-border-strong);
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-\[color\:var\(--clm-text-primary\)\] {
  accent-color: var(--clm-text-primary);
}
.accent-\[color\:var\(--support-bg\)\] {
  accent-color: var(--support-bg);
}
.accent-\[var\(--clm-text-primary\)\] {
  accent-color: var(--clm-text-primary);
}
.accent-accent-500 {
  accent-color: #b05a34;
}
.accent-ink {
  accent-color: var(--clm-text-primary);
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-45 {
  opacity: 0.45;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-55 {
  opacity: 0.55;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.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-\[-16px_0_48px_rgba\(70\2c 45\2c 25\2c 0\.14\)\] {
  --tw-shadow: -16px 0 48px rgba(70,45,25,0.14);
  --tw-shadow-colored: -16px 0 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_3px_var\(--tw-shadow-color\)\] {
  --tw-shadow: 0 0 0 3px var(--tw-shadow-color);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_32px_-10px_rgba\(33\2c 29\2c 23\2c 0\.45\)\] {
  --tw-shadow: 0 12px 32px -10px rgba(33,29,23,0.45);
  --tw-shadow-colored: 0 12px 32px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_32px_rgba\(16\2c 35\2c 58\2c 0\.16\)\] {
  --tw-shadow: 0 12px 32px rgba(16,35,58,0.16);
  --tw-shadow-colored: 0 12px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_16px_40px_-12px_rgba\(33\2c 29\2c 23\2c 0\.35\)\] {
  --tw-shadow: 0 16px 40px -12px rgba(33,29,23,0.35);
  --tw-shadow-colored: 0 16px 40px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_16px_40px_-14px_rgba\(33\2c 29\2c 23\2c 0\.32\)\] {
  --tw-shadow: 0 16px 40px -14px rgba(33,29,23,0.32);
  --tw-shadow-colored: 0 16px 40px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_16px_40px_-16px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-shadow: 0 16px 40px -16px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 16px 40px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_16px_48px_rgba\(70\2c 45\2c 25\2c 0\.18\)\] {
  --tw-shadow: 0 16px 48px rgba(70,45,25,0.18);
  --tw-shadow-colored: 0 16px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_3px_rgba\(16\2c 35\2c 58\2c 0\.06\)\] {
  --tw-shadow: 0 1px 3px rgba(16,35,58,0.06);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_3px_rgba\(70\2c 45\2c 25\2c 0\.14\)\] {
  --tw-shadow: 0 1px 3px rgba(70,45,25,0.14);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_50px_-18px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 24px 50px -18px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 24px 50px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_60px_-16px_rgba\(33\2c 29\2c 23\2c 0\.5\)\] {
  --tw-shadow: 0 24px 60px -16px rgba(33,29,23,0.5);
  --tw-shadow-colored: 0 24px 60px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_40px_90px_-30px_rgba\(0\2c 0\2c 0\2c 0\.65\)\] {
  --tw-shadow: 0 40px 90px -30px rgba(0,0,0,0.65);
  --tw-shadow-colored: 0 40px 90px -30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_44px_96px_-34px_rgba\(0\2c 0\2c 0\2c \.7\)\] {
  --tw-shadow: 0 44px 96px -34px rgba(0,0,0,.7);
  --tw-shadow-colored: 0 44px 96px -34px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_22px_-14px_rgba\(33\2c 29\2c 23\2c 0\.28\)\] {
  --tw-shadow: 0 6px 22px -14px rgba(33,29,23,0.28);
  --tw-shadow-colored: 0 6px 22px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_-8px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_-8px_rgba\(16\2c 24\2c 40\2c 0\.25\)\] {
  --tw-shadow: 0 8px 24px -8px rgba(16,24,40,0.25);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_-8px_rgba\(33\2c 29\2c 23\2c 0\.28\)\] {
  --tw-shadow: 0 8px 24px -8px rgba(33,29,23,0.28);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_rgba\(70\2c 45\2c 25\2c 0\.12\)\] {
  --tw-shadow: 0 8px 24px rgba(70,45,25,0.12);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_-2px_0_\#b05a34\] {
  --tw-shadow: inset 0 -2px 0 #b05a34;
  --tw-shadow-colored: inset 0 -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-\[inset_3px_0_0_\#b05a34\] {
  --tw-shadow: inset 3px 0 0 #b05a34;
  --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-accent-100 {
  --tw-shadow-color: #f4dfd0;
  --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-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-accent-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(244 223 208 / var(--tw-ring-opacity, 1));
}
.ring-accent-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(176 90 52 / var(--tw-ring-opacity, 1));
}
.ring-canvas {
  --tw-ring-color: var(--clm-canvas);
}
.ring-ink {
  --tw-ring-color: var(--clm-text-primary);
}
.ring-surface {
  --tw-ring-color: var(--clm-surface);
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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) !important;
}
.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);
}
.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-\[max-height\2c opacity\2c margin\] {
  transition-property: max-height,opacity,margin;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c transform\] {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[stroke-width\] {
  transition-property: stroke-width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c background-color\] {
  transition-property: width,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-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-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------
   SignForge CLM theme tokens -- copper + ink, light-only
   (docs/2026-07-17-clm-theme-copper-ink.md).

   LIGHT-ONLY: this app ships exactly one theme. Neutrals, surfaces and
   status-chip colors live here as CSS custom properties (not baked into
   tailwind.config.ts) so utility classes like `bg-canvas`/`text-ink` stay a
   single indirection point, but there is deliberately no dark variant --
   no `prefers-color-scheme` block, no `data-theme` override, no `dark:`
   Tailwind variant anywhere in the app.

   COPPER + INK: a warm-neutral workspace. The neutrals below carry a slight
   warm bias so they sit with the copper accent (`accent-*`, tailwind.config)
   rather than fighting it; the primary button stays INK (`bg-ink`), copper is
   a restrained spice on nav/links/focus/wordmark/highlights only.
   ------------------------------------------------------------------- */

@keyframes clm-sheet-slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

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

@keyframes clm-dialog-pop-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes clm-portal-seal-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Portal redesign: the floating "Suggest edit" button's attention halo -- a
   soft wine ring that breathes out and fades, drawing the eye to the primary
   redline action the instant a selection is made. Stilled under reduced
   motion (below). */
@keyframes portal-suggest-pulse {
  0%,
  100% {
    box-shadow: 0 10px 24px -8px rgba(107, 15, 42, 0.6), 0 0 0 0 rgba(159, 18, 57, 0.5);
  }
  50% {
    box-shadow: 0 10px 24px -8px rgba(107, 15, 42, 0.6), 0 0 0 7px rgba(159, 18, 57, 0);
  }
}

/* Login glow drift + card settle -- `.clm-login-glow` / `.clm-login-rise`
   above. The glow's resting transform is identity, so pausing the animation
   (reduced-motion) leaves it exactly where the composition wants it. */
@keyframes clm-login-glow-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-40px, 26px) scale(1.06);
  }
}

@keyframes clm-login-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Phase 4b Task D3 -- `.clm-cr-focus-portal` above. `--portal-accent-500`
   (#9f1239, wine) as an rgba box-shadow ring, hardcoded literally because a
   `box-shadow` can't read a CSS custom property's alpha channel separately,
   so the color is inlined here rather than referencing the var. */
@keyframes clm-cr-focus-portal-flash {
  0% {
    box-shadow: 0 0 0 3px rgba(159, 18, 57, 0.4);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(159, 18, 57, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clm-mobile-sheet-enter,
  .clm-mobile-backdrop-enter,
  .clm-dialog-enter,
  .clm-portal-seal-pulse,
  .clm-cr-focus-portal,
  .clm-login-glow,
  .clm-login-rise,
  .portal-suggest-float {
    animation: none;
  }
  .portal-ws-toast {
    transition: none;
  }
}

.placeholder\:text-ink-disabled::-moz-placeholder {
  color: var(--clm-text-disabled);
}

.placeholder\:text-ink-disabled::placeholder {
  color: var(--clm-text-disabled);
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:-left-\[15px\]::before {
  content: var(--tw-content);
  left: -15px;
}

.before\:-left-\[17px\]::before {
  content: var(--tw-content);
  left: -17px;
}

.before\:top-\[3px\]::before {
  content: var(--tw-content);
  top: 3px;
}

.before\:top-\[7px\]::before {
  content: var(--tw-content);
  top: 7px;
}

.before\:h-\[5px\]::before {
  content: var(--tw-content);
  height: 5px;
}

.before\:h-\[9px\]::before {
  content: var(--tw-content);
  height: 9px;
}

.before\:h-px::before {
  content: var(--tw-content);
  height: 1px;
}

.before\:w-\[5px\]::before {
  content: var(--tw-content);
  width: 5px;
}

.before\:w-\[9px\]::before {
  content: var(--tw-content);
  width: 9px;
}

.before\:flex-1::before {
  content: var(--tw-content);
  flex: 1 1 0%;
}

.before\:rounded-full::before {
  content: var(--tw-content);
  border-radius: 9999px;
}

.before\:border-2::before {
  content: var(--tw-content);
  border-width: 2px;
}

.before\:border-\[var\(--portal-accent-500\)\]::before {
  content: var(--tw-content);
  border-color: var(--portal-accent-500);
}

.before\:border-accent-600::before {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(151 74 42 / var(--tw-border-opacity, 1));
}

.before\:bg-\[var\(--portal-accent-500\)\]::before {
  content: var(--tw-content);
  background-color: var(--portal-accent-500);
}

.before\:bg-\[var\(--voice-cp-edge\)\]::before {
  content: var(--tw-content);
  background-color: var(--voice-cp-edge);
}

.before\:bg-hairline-strong::before {
  content: var(--tw-content);
  background-color: var(--clm-border-strong);
}

.before\:bg-surface::before {
  content: var(--tw-content);
  background-color: var(--clm-surface);
}

.before\:opacity-40::before {
  content: var(--tw-content);
  opacity: 0.4;
}

.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}

.after\:h-px::after {
  content: var(--tw-content);
  height: 1px;
}

.after\:flex-1::after {
  content: var(--tw-content);
  flex: 1 1 0%;
}

.after\:bg-\[var\(--portal-accent-500\)\]::after {
  content: var(--tw-content);
  background-color: var(--portal-accent-500);
}

.after\:bg-\[var\(--voice-cp-edge\)\]::after {
  content: var(--tw-content);
  background-color: var(--voice-cp-edge);
}

.after\:opacity-40::after {
  content: var(--tw-content);
  opacity: 0.4;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:border-t-0:first-child {
  border-top-width: 0px;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -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));
}

.hover\:border-\[color\:var\(--portal-accent-200\)\]:hover {
  border-color: var(--portal-accent-200);
}

.hover\:border-accent-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(232 195 167 / var(--tw-border-opacity, 1));
}

.hover\:border-accent-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(215 160 122 / var(--tw-border-opacity, 1));
}

.hover\:border-accent-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(176 90 52 / var(--tw-border-opacity, 1));
}

.hover\:border-hairline-strong:hover {
  border-color: var(--clm-border-strong);
}

.hover\:border-ink-muted:hover {
  border-color: var(--clm-text-muted);
}

.hover\:bg-\[\#2a5715\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(42 87 21 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[color\:var\(--portal-accent-50\)\]:hover {
  background-color: var(--portal-accent-50);
}

.hover\:bg-\[rgba\(177\2c 58\2c 46\2c 0\.28\)\]:hover {
  background-color: rgba(177,58,46,0.28);
}

.hover\:bg-accent-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 223 208 / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 243 236 / var(--tw-bg-opacity, 1));
}

.hover\:bg-hairline:hover {
  background-color: var(--clm-border);
}

.hover\:bg-hairline-strong:hover {
  background-color: var(--clm-border-strong);
}

.hover\:bg-surface:hover {
  background-color: var(--clm-surface);
}

.hover\:bg-surface-sunken:hover {
  background-color: var(--clm-surface-sunken);
}

.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\:text-accent-500:hover {
  --tw-text-opacity: 1;
  color: rgb(176 90 52 / var(--tw-text-opacity, 1));
}

.hover\:text-accent-600:hover {
  --tw-text-opacity: 1;
  color: rgb(151 74 42 / var(--tw-text-opacity, 1));
}

.hover\:text-accent-700:hover {
  --tw-text-opacity: 1;
  color: rgb(124 61 36 / var(--tw-text-opacity, 1));
}

.hover\:text-accent-800:hover {
  --tw-text-opacity: 1;
  color: rgb(99 49 30 / var(--tw-text-opacity, 1));
}

.hover\:text-ink:hover {
  color: var(--clm-text-primary);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:decoration-accent-500:hover {
  text-decoration-color: #b05a34;
}

.hover\:decoration-solid:hover {
  text-decoration-style: solid;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-\[0_16px_32px_-22px_rgba\(16\2c 35\2c 58\2c \.4\)\]:hover {
  --tw-shadow: 0 16px 32px -22px rgba(16,35,58,.4);
  --tw-shadow-colored: 0 16px 32px -22px 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\: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-offset-1:hover {
  --tw-ring-offset-width: 1px;
}

.hover\:\[stroke-width\:28\]:hover {
  stroke-width: 28;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:left-4:focus {
  left: 1rem;
}

.focus\:top-4:focus {
  top: 1rem;
}

.focus\:z-50:focus {
  z-index: 50;
}

.focus\:rounded:focus {
  border-radius: 0.25rem;
}

.focus\:border-ink:focus {
  border-color: var(--clm-text-primary);
}

.focus\:bg-ink:focus {
  background-color: var(--clm-text-primary);
}

.focus\:px-3:focus {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.focus\:text-white:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.focus\:shadow-\[0_0_0_3px_var\(--portal-accent-100\)\]:focus {
  --tw-shadow: 0 0 0 3px var(--portal-accent-100);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:bg-surface-sunken:focus-visible {
  background-color: var(--clm-surface-sunken);
}

.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-offset-4:focus-visible {
  outline-offset: 4px;
}

.focus-visible\:outline-accent-400:focus-visible {
  outline-color: #c67d51;
}

.focus-visible\:outline-ink:focus-visible {
  outline-color: var(--clm-text-primary);
}

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

.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}

.focus-visible\:ring-\[color\:var\(--portal-accent-100\)\]:focus-visible {
  --tw-ring-color: var(--portal-accent-100);
}

.focus-visible\:ring-\[color\:var\(--portal-accent-200\)\]:focus-visible {
  --tw-ring-color: var(--portal-accent-200);
}

.focus-visible\:ring-\[var\(--portal-accent-100\)\]:focus-visible {
  --tw-ring-color: var(--portal-accent-100);
}

.focus-visible\:ring-\[var\(--portal-accent-500\)\]:focus-visible {
  --tw-ring-color: var(--portal-accent-500);
}

.focus-visible\:ring-accent-200:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(232 195 167 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-accent-300:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(215 160 122 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-accent-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(176 90 52 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-hairline:focus-visible {
  --tw-ring-color: var(--clm-border);
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

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

.focus-visible\:ring-offset-surface:focus-visible {
  --tw-ring-offset-color: var(--clm-surface);
}

.focus-visible\:\[stroke-width\:28\]:focus-visible {
  stroke-width: 28;
}

.enabled\:hover\:text-accent-800:hover:enabled {
  --tw-text-opacity: 1;
  color: rgb(99 49 30 / var(--tw-text-opacity, 1));
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:text-ink-disabled:disabled {
  color: var(--clm-text-disabled);
}

.disabled\:text-white\/35:disabled {
  color: rgb(255 255 255 / 0.35);
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:hover\:bg-ink:hover:disabled {
  background-color: var(--clm-text-primary);
}

.disabled\:hover\:bg-surface:hover:disabled {
  background-color: var(--clm-surface);
}

.disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent;
}

.disabled\:hover\:no-underline:hover:disabled {
  text-decoration-line: none;
}

.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\/row:focus-within .group-focus-within\/row\:opacity-100 {
  opacity: 1;
}

.group\/row:hover .group-hover\/row\: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-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));
}

.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\/rz:hover .group-hover\/rz\:bg-hairline-strong {
  background-color: var(--clm-border-strong);
}

.group:hover .group-hover\:bg-accent-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(176 90 52 / var(--tw-bg-opacity, 1));
}

.group\/h:hover .group-hover\/h\:text-ink {
  color: var(--clm-text-primary);
}

.group\/row:hover .group-hover\/row\:text-accent-600 {
  --tw-text-opacity: 1;
  color: rgb(151 74 42 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-accent-600 {
  --tw-text-opacity: 1;
  color: rgb(151 74 42 / 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\/h:hover .group-hover\/h\:opacity-90 {
  opacity: 0.9;
}

.group\/row:hover .group-hover\/row\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group\/rz:focus-visible .group-focus-visible\/rz\:bg-accent-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(198 125 81 / var(--tw-bg-opacity, 1));
}

.group\/rz:active .group-active\/rz\:bg-accent-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(176 90 52 / var(--tw-bg-opacity, 1));
}

.peer:focus-visible ~ .peer-focus-visible\:outline {
  outline-style: solid;
}

.peer:focus-visible ~ .peer-focus-visible\:outline-2 {
  outline-width: 2px;
}

.peer:focus-visible ~ .peer-focus-visible\:outline-offset-2 {
  outline-offset: 2px;
}

.peer:focus-visible ~ .peer-focus-visible\:outline-accent-400 {
  outline-color: #c67d51;
}

@media (prefers-reduced-motion: no-preference) {

  .motion-safe\:hover\:shadow-\[0_14px_30px_-20px_rgba\(70\2c 45\2c 25\2c 0\.4\)\]:hover {
    --tw-shadow: 0 14px 30px -20px rgba(70,45,25,0.4);
    --tw-shadow-colored: 0 14px 30px -20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:animate-none {
    animation: none;
  }

  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

@media (min-width: 640px) {

  .sm\:left-7 {
    left: 1.75rem;
  }

  .sm\:top-7 {
    top: 1.75rem;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .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-\[1fr_180px_160px\] {
    grid-template-columns: 1fr 180px 160px;
  }

  .sm\:grid-cols-\[1fr_96px\] {
    grid-template-columns: 1fr 96px;
  }

  .sm\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .sm\:grid-cols-\[8\.5rem_1fr\] {
    grid-template-columns: 8.5rem 1fr;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-7 {
    gap: 1.75rem;
  }

  .sm\:p-16 {
    padding: 4rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

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

@media (min-width: 768px) {

  .md\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-0 {
    height: 0px;
  }

  .md\:h-\[100dvh\] {
    height: 100dvh;
  }

  .md\:grid-cols-\[240px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 240px minmax(0,1fr);
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }

  .md\:overflow-hidden {
    overflow: hidden;
  }

  .md\:border-b-0 {
    border-bottom-width: 0px;
  }

  .md\:p-0 {
    padding: 0px;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:pt-1 {
    padding-top: 0.25rem;
  }
}

@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-10 {
    top: 2.5rem;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:block {
    display: block;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-auto {
    height: auto;
  }

  .lg\:flex-none {
    flex: none;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 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-\[1fr_340px\] {
    grid-template-columns: 1fr 340px;
  }

  .lg\:grid-cols-\[1fr_54px_340px\] {
    grid-template-columns: 1fr 54px 340px;
  }

  .lg\:grid-cols-\[200px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 200px minmax(0,1fr);
  }

  .lg\:grid-cols-\[280px_1fr\] {
    grid-template-columns: 280px 1fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_320px\] {
    grid-template-columns: minmax(0,1fr) 320px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 22rem\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,22rem) minmax(0,1fr);
  }

  .lg\:items-stretch {
    align-items: stretch;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:p-9 {
    padding: 2.25rem;
  }

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:pb-24 {
    padding-bottom: 6rem;
  }

  .lg\:pt-28 {
    padding-top: 7rem;
  }

  .lg\:text-\[64px\] {
    font-size: 64px;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\:\:before\]\:absolute::before {
  position: absolute;
}

.\[\&\:\:before\]\:bottom-0::before {
  bottom: 0px;
}

.\[\&\:\:before\]\:left-\[5px\]::before {
  left: 5px;
}

.\[\&\:\:before\]\:top-1::before {
  top: 0.25rem;
}

.\[\&\:\:before\]\:w-px::before {
  width: 1px;
}

.\[\&\:\:before\]\:bg-hairline-strong::before {
  background-color: var(--clm-border-strong);
}

.\[\&\:\:before\]\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}

.\[\&\:focus-visible_circle\.core\]\:stroke-\[color\:var\(--clm-text-primary\)\]:focus-visible circle.core {
  stroke: var(--clm-text-primary);
}