/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"weight":["400","500","600","700"],"variable":"--font-inter","display":"swap"}],"variableName":"inter"} ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  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: 400;
  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: 400;
  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: 400;
  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: 400;
  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: 400;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  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: 500;
  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: 500;
  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: 500;
  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: 500;
  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: 500;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  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: 600;
  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: 600;
  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: 600;
  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: 600;
  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: 600;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  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: 700;
  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: 700;
  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: 700;
  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: 700;
  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: 700;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  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.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06%
}.__className_8b3a0b {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_8b3a0b {--font-inter: 'Inter', 'Inter Fallback'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"JetBrains_Mono","arguments":[{"subsets":["latin"],"weight":["400","500","600"],"variable":"--font-jetbrains-mono","display":"swap"}],"variableName":"jetbrainsMono"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono Fallback';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_e896d9 {font-family: 'JetBrains Mono', 'JetBrains Mono Fallback';font-style: normal
}.__variable_e896d9 {--font-jetbrains-mono: 'JetBrains Mono', 'JetBrains Mono Fallback'
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/lib/tokens.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* tokens.css — CSS custom-properties layer mirroring `T` in tokens.ts.
 *
 * tokens.ts (the TS object) is read by 24 screens directly (T.bg, T.text…).
 * This file mirrors the same values as CSS variables so post-Wave 1 components
 * can be styled without a JS round-trip and the audit-only tokens
 * (--label-track, --space-card-gap, --hero-track, etc.) live alongside.
 *
 * Source of truth for raw values:
 *   - apps/web/src/lib/tokens.ts (existing screens use these)
 *   - docs/design-handoff/jarvis-ps-v5/project/polish.css (audit additions)
 *
 * IF YOU EDIT VALUES HERE: also update tokens.ts. The two layers MUST
 * stay in lockstep — drift here breaks visual parity.
 */

:root {
  /* Surfaces — mirror T.bg, T.surface… */
  --bg:        #0A0A0B;
  --surface:   #141416;
  --surface2:  #1A1A1D;
  --surface3:  #202024;

  /* Borders */
  --border:    #1F1F22;
  --border-hi: #2A2A2F;

  /* Text */
  --text:   #FAFAFA;
  --text2:  #A1A1AA;
  --text3:  #71717A;
  --text4:  #52525B;

  /* Accent + status (status tokens are *semantic only* — never decorative) */
  --blue:     #3B82F6;
  --blue-dim: #1E3A8A;
  --good:     #10B981;
  --caution:  #F59E0B;
  --alert:    #EF4444;

  /* Type stacks */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Audit additions (polish.css) ─────────────────────────────────── */

  /* Type rhythm */
  --label-track: 0.07em;     /* M2: standard uppercase tracking */
  --hero-track:  -0.035em;   /* H2: standard hero number tracking */
  --tnum: "tnum" 1, "cv11" 1, "ss01" 1;

  /* Spacing */
  --space-card-gap: 14px;    /* H1: single canonical card grid gap */

  /* Elevation */
  --card-elev-rest:  0 0 0 1px rgba(255, 255, 255, 0.06);
  --card-elev-hover: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.4);
  --card-elev-modal: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 60px rgba(0, 0, 0, 0.6);

  /* Misc */
  --badge-fs: 11px;          /* L3: bumped from 10px to avoid sub-pixel on retina */
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/lib/animations.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* animations.css — keyframe library for the polish layer.
 *
 * Ported from docs/design-handoff/jarvis-ps-v5/project/polish.css.
 * Every animation is gated on `prefers-reduced-motion: no-preference`
 * (or no-op'd via the global reduce branch at the bottom).
 *
 * Naming: every keyframe is prefixed `j-` so it can't collide with
 * Tailwind / next/font / app-shell motion.
 */

/* ─── Pixel-snap helper (L1) ───────────────────────────────────────── */
.j-pixel-snap { shape-rendering: geometricPrecision; }

/* ─── Focus ring — accessible, brand-aligned ───────────────────────── */
button:focus-visible,
a[role="button"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ─── Active feedback (H4) ─────────────────────────────────────────── */
/* Apply via class to opt buttons / pressables in. The CSS-vars layer
 * also wires this up universally (see polish.css source) but the class
 * gives an explicit affordance for non-button pressables. */
.j-pressable {
  transition: transform 60ms ease-out;
}
.j-pressable:active {
  transform: scale(0.97);
}

/* Universal button polish — mirror polish.css block. Gated below for PRM. */
@media (prefers-reduced-motion: no-preference) {
  button {
    transition:
      transform 100ms ease-out,
      background 160ms ease,
      border-color 160ms ease,
      box-shadow 200ms ease,
      opacity 160ms ease;
  }
  button:not(:disabled):active { transform: scale(0.97); }
}
button:disabled { cursor: not-allowed; opacity: 0.45; }

/* ─── Card hover lift (H4 companion) ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .j-card,
  [data-card="true"] {
    transition:
      transform 200ms ease-out,
      box-shadow 200ms ease-out,
      border-color 200ms ease;
  }
  .j-card:hover,
  [data-card="true"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-elev-hover);
  }
}

/* ─── Keyframes ────────────────────────────────────────────────────── */

/* Recovery ring — slow breathing pulse */
@keyframes j-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
.j-breathe { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .j-breathe { animation: j-breathe 8s ease-in-out infinite; }
}

/* Voice mic idle glow */
@keyframes j-voice-idle-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(59, 130, 246, 0.45),
      0 0 24px 4px rgba(59, 130, 246, 0.15);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(59, 130, 246, 0),
      0 0 40px 8px rgba(59, 130, 246, 0.28);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .j-voice-idle { animation: j-voice-idle-glow 3s ease-in-out infinite; }
}

/* Sparkline / curve left-to-right draw — single-shot */
@keyframes j-sparkline-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
.j-sparkline {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
@media (prefers-reduced-motion: no-preference) {
  .j-sparkline { animation: j-sparkline-draw 800ms ease-out forwards; }
}

/* Card stagger on entry — child opts in via .j-card-stagger,
 * parent <Stagger> sets --i so delay is computed. */
@keyframes j-card-stagger {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.j-card-stagger { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .j-card-stagger {
    animation: j-card-stagger 280ms ease-out forwards;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Render the final state immediately so reduce-motion users see the cards. */
  .j-card-stagger { opacity: 1; }
}

/* Number count-up — fade-in companion for <CountUp> */
@keyframes j-count-up {
  0%   { color: var(--blue); }
  100% { color: inherit; }
}
@media (prefers-reduced-motion: no-preference) {
  .j-count-up { animation: j-count-up 600ms ease-out; }
}

/* Brief streaming text — character/word reveal */
@keyframes j-brief-stream {
  from { opacity: 0; filter: blur(2px); }
  to   { opacity: 1; filter: blur(0); }
}
.j-brief-stream > span { display: inline-block; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .j-brief-stream > span { animation: j-brief-stream 220ms ease-out forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .j-brief-stream > span { opacity: 1; }
}

/* Decision dismiss — slide-out + fade */
@keyframes j-decision-dismiss {
  to {
    opacity: 0;
    transform: translateY(8px) rotate(-1.5deg);
  }
}
.j-decision-dismiss {
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .j-decision-dismiss {
    animation: j-decision-dismiss 300ms ease-out forwards;
  }
}

/* Regimen check — checkmark stroke draw */
@keyframes j-regimen-check {
  from { stroke-dashoffset: 12; }
  to   { stroke-dashoffset: 0; }
}
.j-regimen-check path {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
}
@media (prefers-reduced-motion: no-preference) {
  .j-regimen-check path {
    animation: j-regimen-check 400ms ease-out forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .j-regimen-check path { stroke-dashoffset: 0; }
}

/* Tab/screen transition — quick fade */
@keyframes j-tab-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .j-tab-fade { animation: j-tab-fade 120ms ease-out; }
}

/* Shimmer — gradient sweep, single-shot */
@keyframes j-shimmer {
  from { background-position: -100% 0; }
  to   { background-position: 200% 0; }
}
.j-shimmer-sweep {
  background-size: 200% 100%;
  animation-iteration-count: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .j-shimmer-sweep { animation: j-shimmer 1400ms ease-out 1; }
}

/* Hover lift — explicit class for non-button cards */
@media (prefers-reduced-motion: no-preference) {
  .j-hover-lift {
    transition: transform 200ms ease-out;
  }
  .j-hover-lift:hover {
    transform: translateY(-2px);
  }
}

/* Spinner */
@keyframes j-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .j-spin { animation: j-spin 600ms linear infinite; }
}

/* audit B2: Mobile cashflow row — stack amount + status below the
 * other fields on narrow widths so the pending pill doesn't overlap
 * the amount column. Apply to the transaction-row container. */
@media (max-width: 480px) {
  .j-cashflow-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .j-cashflow-row > .j-cashflow-amount {
    text-align: left !important;
  }
  .j-cashflow-header {
    display: none !important;
  }
}

/* Min hit target — accessibility, not animation, but lives next to motion. */
button,
a[role="button"],
[role="button"],
input[type="checkbox"],
input[type="radio"] {
  min-height: 32px;
}
@media (max-width: 480px) {
  button,
  a[role="button"],
  [role="button"] { min-height: 44px; }
}

/* Wave 4: explicit hit-target backstop for non-button pressables (icon
 * spans, kebab triggers, table-row chevrons). Apply via class so we
 * don't bloat hit zones for non-interactive icons. */
.j-min-hit {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Wave 4: sticky section headers for long scrollable lists.
 * The component supplies the bg colour via inline style or a token —
 * this just nails the position + blur backstop so the list rows scroll
 * underneath without the header text becoming illegible. */
.j-sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ─── Wave 4: 24-screen mobile pass at 375px ───────────────────────── */
@media (max-width: 480px) {
  /* Sidebar nav collapses to a horizontal bar pinned to the top so the
   * 200px desktop rail doesn't push every page off-screen. Layout flips
   * column so <main> renders below the nav, full-width. */
  .j-shell {
    flex-direction: column !important;
  }
  .j-shell > aside.j-nav {
    width: 100% !important;
    height: auto !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 12px !important;
    gap: 6px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #1f2024) !important;
    z-index: 20 !important;
  }
  .j-shell > aside.j-nav > a {
    flex-shrink: 0;
    /* BUG-038 — iOS HIG min tap target = 44px. Desktop sidebar
     * anchors render at 40px tall; on the horizontal mobile rail
     * lift them to 44px so taps don't miss. */
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .j-shell > aside.j-nav > .j-nav-version {
    display: none !important;
  }

  /* Generic single-column collapse. Apply `j-stack-mobile` to any
   * grid/flex container whose desktop layout should flatten on narrow. */
  .j-stack-mobile {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .j-stack-mobile > * {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Hero metric strips: clamp letter-spacing and shrink the giant numbers
   * on mobile. Anywhere a screen used `font-size: 56px+` for a hero count,
   * tag the wrapper `j-hero-mobile` to bring it down to 36px. */
  .j-hero-mobile [data-hero="true"],
  .j-hero-mobile .j-hero-num {
    font-size: 32px !important;
    letter-spacing: -0.02em !important;
  }

  /* Wide tables / kanban-style flex rows: opt into horizontal scroll so
   * the columns survive. Apply `j-hscroll-mobile` to the wrapper. */
  .j-hscroll-mobile {
    overflow-x: auto !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* Per-screen padding clamp — 32px gutters → 16px so the body uses the
   * full 343px content width. Apply `j-pad-mobile` to any top-level pad
   * container that hard-codes 32px / 24px. */
  .j-pad-mobile {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* BUG-037 — Morning body hero strip (HRV / RHR / Sleep perf): the
   * inner horizontal row with gap:44 measures ~436px wide on its own
   * (3 × Hero + 2 dividers), so the third card overflows the 375px
   * viewport. Collapse the strip to column-flow with a smaller gap;
   * hide the vertical 1px dividers (irrelevant in column layout). The
   * outer container's j-stack-mobile rule already gives this row 100%
   * width; we just stop it laying out horizontally. */
  .j-hero-strip-mobile {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px 28px !important;
    justify-content: space-between;
    width: 100% !important;
  }
  .j-hero-strip-mobile .j-hero-strip-divider {
    display: none !important;
  }

  /* BUG-039 — multi-column ingestion-health rows ( source + last-sync +
   * external-id + failures + chevron) total >378px of fixed columns and
   * overlap on a 375px viewport. Stack each row vertically on mobile;
   * the columns wrap to a second line under the source label. */
  .j-row-stack-mobile {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .j-row-stack-mobile > * {
    width: auto !important;
    text-align: left !important;
  }

  /* Voice button thumb-zone reposition — bottom-right fixed. The desktop
   * top-bar mic stays put on wider; on mobile we pin a copy. */
  .j-voice-thumb {
    position: fixed !important;
    right: 16px !important;
    bottom: 20px !important;
    z-index: 30 !important;
  }
  .j-voice-only-mobile {
    display: inline-flex !important;
  }

  /* Detail screens: drop side rails below the main column. Apply
   * `j-detail-stack` to the two-column wrapper. */
  .j-detail-stack {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Modal → bottom-sheet flip. The screen renders an absolute-position
   * overlay; on mobile we anchor it to the bottom edge so it reads as a
   * sheet. Apply `j-sheet-mobile` to the overlay's content container. */
  .j-sheet-mobile {
    align-self: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
  }

  /* People-graph table column header — hide on mobile (rows render as
   * cards rather than rows so the header has no semantic anchor). */
  .j-people-header {
    display: none !important;
  }

  /* MorningMobile device frame — collapse the 390×844 artboard to fill
   * the viewport edge-to-edge on real phones (the frame chrome was a
   * design-prototype affordance for iterating in a desktop browser). */
  .j-mm-frame-wrap {
    padding: 0 !important;
  }
  .j-mm-frame {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Training-set row — collapse 6-col grid to flex-wrap so the weight,
   * reps, RPE and chevron flow on the second line under the exercise
   * name on narrow viewports. */
  .j-trainset-row {
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  /* Kanban: 5-column grid converts to horizontal-scroll flex on mobile.
   * This preserves drag & drop (cards keep their column slots) and lets
   * the user pan between columns by swiping. */
  .j-kanban {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .j-kanban > * {
    flex: 0 0 78vw;
    max-width: 280px;
    scroll-snap-align: start;
  }

  /* People-graph row: collapse the Tier/Sentiment/LastSeen columns into
   * a wrapping flex below the name. The row already uses `flex` so we
   * just need flex-wrap + relax the fixed widths. */
  .j-people-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }
  .j-people-row > .j-people-tier,
  .j-people-row > .j-people-thread,
  .j-people-row > .j-people-sentiment,
  .j-people-row > .j-people-lastseen {
    width: auto !important;
    text-align: left !important;
    font-size: 11px !important;
  }
  .j-people-row > .j-people-thread {
    flex-basis: 100% !important;
  }
}

/* ─── Phase 3.6 (Bot 2): intermediate breakpoint pass at <=768px ───── */
/* Closes the 481-767px gap (iPad portrait, half-width browser, phone
 * landscape) where the desktop layout was being applied verbatim and
 * pages "looked like ass on mobile". The 480px block above continues
 * to apply for tighter screens (cascade: 480 < 768, so the 480 rules
 * override these intermediate values where they overlap).
 *
 * Tested at 375 / 480 / 600 / 767 / 768 / 1024px.
 *
 * Rules below are duplicates of the 480px block with adjusted
 * intermediate values:
 *   - hero numbers: 32→40px (full 32px stays at <=480px)
 *   - kebab/cashflow stay tighter at 480px; 768px gets a softer pass
 *   - padding clamp: 16→20px (vs 16 at <=480)
 */
@media (max-width: 768px) {
  /* Sidebar nav: same horizontal-pin treatment as 480px so the 200px
   * desktop rail doesn't push the page off-screen on iPad portrait
   * (768px) or half-width browser. */
  .j-shell {
    flex-direction: column !important;
  }
  .j-shell > aside.j-nav {
    width: 100% !important;
    height: auto !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 12px 16px !important;
    gap: 6px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #1f2024) !important;
    z-index: 20 !important;
  }
  .j-shell > aside.j-nav > a {
    flex-shrink: 0;
    /* BUG-038 — iOS HIG min tap target = 44px. Desktop sidebar
     * anchors render at 40px tall; on the horizontal mobile rail
     * lift them to 44px so taps don't miss. */
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .j-shell > aside.j-nav > .j-nav-version {
    display: none !important;
  }

  /* Single-column collapse — same as 480px treatment. */
  .j-stack-mobile {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .j-stack-mobile > * {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Hero numbers: intermediate clamp to 40px (vs 32 at <=480, 56+ at
   * desktop). Keeps the giant figures legible on a 600px viewport
   * without dominating the column. */
  .j-hero-mobile [data-hero="true"],
  .j-hero-mobile .j-hero-num {
    font-size: 40px !important;
    letter-spacing: -0.02em !important;
  }

  /* Wide tables / kanban-style: opt into horizontal scroll. */
  .j-hscroll-mobile {
    overflow-x: auto !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* Padding clamp — 32→20px on intermediate widths (vs 16 at <=480). */
  .j-pad-mobile {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Detail screens: stack two-column wrappers. */
  .j-detail-stack {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Modal → bottom-sheet flip. */
  .j-sheet-mobile {
    align-self: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
  }

  /* People-graph row: wrap columns so name+tier render together
   * with thread/sentiment/lastseen below. The 480px override hides
   * the header entirely; at intermediate widths we keep it but let
   * the row flex-wrap. */
  .j-people-header {
    /* Header still visible at 481-767px so the column meaning is
     * legible; only fully hidden at <=480 where rows become cards. */
    display: flex;
  }
  .j-people-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 18px !important;
  }
  /* Phase 3.6: relax inline column widths at intermediate widths so
   * Tier/Sentiment/LastSeen flow naturally next to the wrapped thread
   * row. The 480px block already does this; pulling it forward to 768
   * means the row doesn't overflow on iPad portrait or half-width. */
  .j-people-row > .j-people-tier,
  .j-people-row > .j-people-sentiment,
  .j-people-row > .j-people-lastseen {
    width: auto !important;
    min-width: 0 !important;
  }
  .j-people-row > .j-people-thread {
    flex-basis: 100% !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Cashflow row at intermediate widths: keep two columns rather
   * than collapsing to one (480px treatment). */
  .j-cashflow-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Kanban: same horizontal-scroll treatment so 5-column grid is
   * navigable on iPad portrait. */
  .j-kanban {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .j-kanban > * {
    flex: 0 0 60vw;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* Training-set row — collapse the 6-col grid to a more compact
   * 4-col at intermediate widths (vs auto/1fr/auto at <=480). */
  .j-trainset-row {
    grid-template-columns: auto 1fr auto auto !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }

  /* MorningMobile device-frame chrome: shrink at intermediate widths
   * so the frame still fits on iPad portrait without overflow. */
  .j-mm-frame-wrap {
    padding: 8px !important;
  }
  .j-mm-frame {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  /* 44px min hit target — already set at <=480; pull forward to 768px
   * so iPad portrait gets the same accessibility treatment as phones.
   * (Original rule lives at line ~244 with the same selectors.) */
  button,
  a[role="button"],
  [role="button"] {
    min-height: 44px;
  }
}

/* ─── Global reduce-motion gate ────────────────────────────────────── */
/* Backstop: any animation/transition that sneaks past the per-rule gates
 * still gets clamped to ~0ms. Components are still encouraged to gate
 * their own animations explicitly so reduce-motion users see the right
 * end state (not just a no-op'd intermediate). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/lib/polish.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* polish.css — port from docs/design-system/polish.css.
 *
 * The keyframe library + responsive breakpoints already live in
 * animations.css and the CSS-var layer is in tokens.css. This file ports
 * the bits that aren't already covered:
 *   - .j-num / .j-mono font-feature-settings (tabular figures + cv11)
 *   - .j-hero / [data-hero="true"] tracking + tabular-nums
 *   - .j-stagger > *:nth-child(N) entry-staggered animation (Stagger
 *     component currently uses a JS-driven --i override; this is the
 *     CSS-only fallback used by static sections).
 *   - .j-mic-idle, .j-spark, .j-num-tick, .j-dismissing, .j-check,
 *     .j-stream, .j-screen-in — the remaining helper classes from the
 *     source polish.css that downstream Phase 3.7 bots may opt into.
 *
 * SOURCE OF TRUTH: docs/design-system/polish.css. If you edit values
 * here, mirror them upstream so the design-system reference doesn't
 * drift.
 */

/* ─── Tabular figures everywhere a numeric/code class is used ─────── */
[style*="font-family: 'JetBrains"],
[style*='font-family: "JetBrains'],
.j-num,
.j-mono {
  font-feature-settings: var(--tnum), "tnum";
  font-variant-numeric: tabular-nums;
}

/* ─── Hero numerics — apply -0.035em letter-spacing ───────────────── */
.j-hero,
[data-hero="true"] {
  letter-spacing: var(--hero-track);
  font-feature-settings: var(--tnum), "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ─── Voice mic idle glow (alias for .j-voice-idle in animations.css) */
@keyframes j-mic-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(59, 130, 246, 0.45),
      0 0 24px 4px rgba(59, 130, 246, 0.15);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(59, 130, 246, 0),
      0 0 40px 8px rgba(59, 130, 246, 0.28);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .j-mic-idle {
    animation: j-mic-glow 3s ease-in-out infinite;
  }
}

/* ─── Sparkline / curve draw helper ───────────────────────────────── */
@keyframes j-line-draw {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.j-spark,
svg polyline.j-spark,
svg path.j-spark {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
@media (prefers-reduced-motion: no-preference) {
  .j-spark,
  svg polyline.j-spark,
  svg path.j-spark {
    animation: j-line-draw 800ms ease-out forwards;
  }
}

/* ─── CSS-only stagger (alternative to <Stagger>) ─────────────────── */
@keyframes j-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.j-stagger > * {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .j-stagger > * {
    animation: j-fade-up 280ms ease-out forwards;
  }
  .j-stagger > *:nth-child(1) {
    animation-delay: 0ms;
  }
  .j-stagger > *:nth-child(2) {
    animation-delay: 50ms;
  }
  .j-stagger > *:nth-child(3) {
    animation-delay: 100ms;
  }
  .j-stagger > *:nth-child(4) {
    animation-delay: 150ms;
  }
  .j-stagger > *:nth-child(5) {
    animation-delay: 200ms;
  }
  .j-stagger > *:nth-child(6) {
    animation-delay: 250ms;
  }
  .j-stagger > *:nth-child(7) {
    animation-delay: 300ms;
  }
  .j-stagger > *:nth-child(n + 8) {
    animation-delay: 320ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .j-stagger > * {
    opacity: 1;
  }
}

/* ─── Number count-up shimmer on change ───────────────────────────── */
@keyframes j-num-tick {
  0% {
    color: var(--blue);
  }
  100% {
    color: inherit;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .j-num-tick {
    animation: j-num-tick 600ms ease-out;
  }
}

/* ─── Decision dismiss ────────────────────────────────────────────── */
@keyframes j-dismiss {
  to {
    opacity: 0;
    transform: translateY(8px) rotate(-1.5deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .j-dismissing {
    animation: j-dismiss 300ms ease-out forwards;
    pointer-events: none;
  }
}

/* ─── Checkmark draw on regimen ───────────────────────────────────── */
@keyframes j-check-draw {
  from {
    stroke-dashoffset: 12;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.j-check path {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
}
@media (prefers-reduced-motion: no-preference) {
  .j-check path {
    animation: j-check-draw 400ms ease-out forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .j-check path {
    stroke-dashoffset: 0;
  }
}

/* ─── Brief streaming text (word reveal) ──────────────────────────── */
@keyframes j-word-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
.j-stream > span {
  display: inline-block;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .j-stream > span {
    animation: j-word-in 220ms ease-out forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .j-stream > span {
    opacity: 1;
  }
}

/* ─── Site-wide polish vocabulary (Phase 3.8+ aesthetic) ──────────── */

/* Gradient page-title treatment. Apply to any heading element to get
 * the white→lavender→blue gradient text that the content kanban uses
 * for its "Content state board" title. */
.j-title-gradient {
  background-image: linear-gradient(110deg, #FAFAFA 0%, #A78BFA 55%, #3B82F6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.028em;
  font-weight: 700;
}

/* Accent card — left-edge stripe (pass color via --accent CSS var),
 * subtle hover lift, glow on hover. Combine with JCard or any card
 * shell. The default accent is blue. */
.j-card-accent {
  --accent: #3B82F6;
  position: relative;
  box-shadow: inset 3px 0 0 var(--accent);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease,
    border-color 160ms ease;
}
@media (hover: hover) {
  .j-card-accent:hover {
    box-shadow:
      inset 3px 0 0 var(--accent),
      0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent);
    transform: translateY(-1px);
  }
}

/* Callout — large accent-tinted box for "this is the punchline"
 * surfaces (hook lines, key stats, important quotes). Color via
 * --accent. */
.j-callout {
  --accent: #3B82F6;
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--accent) 3%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 10px;
  box-shadow: inset 3px 0 0 var(--accent);
  padding: 16px 18px;
  letter-spacing: -0.012em;
  font-weight: 600;
}

/* Colored numbered/accent chip. Use as a small inline pill: number
 * badges, severity flags, count chips. Color via --accent. */
.j-chip {
  --accent: #3B82F6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 6px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ─── Screen / tab transition helper ──────────────────────────────── */
@keyframes j-screen-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .j-screen-in {
    animation: j-screen-in 200ms ease-out;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.0.3_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
html, body {
  margin: 0;
  padding: 0;
  background: #0A0A0B;
  color: #FAFAFA;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

button { font-family: inherit; }

/* Animations from the design package — re-exported as global CSS so
   <style jsx> isn't required in every artboard. */
@keyframes jarvisPulse {
  0%   { box-shadow: 0 0 0 0   rgba(59,130,246,0.55), 0 8px 24px -4px rgba(59,130,246,0.55); }
  70%  { box-shadow: 0 0 0 22px rgba(59,130,246,0.0),  0 8px 24px -4px rgba(59,130,246,0.55); }
  100% { box-shadow: 0 0 0 0   rgba(59,130,246,0.0),  0 8px 24px -4px rgba(59,130,246,0.55); }
}
@keyframes jarvisWave {
  0%   { height: 4px;  }
  100% { height: 28px; }
}
@keyframes jarvisShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes jarvisIdleGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.0), 0 8px 24px -8px rgba(59,130,246,0.45); }
  50%      { box-shadow: 0 0 0 14px rgba(59,130,246,0.10), 0 8px 28px -6px rgba(59,130,246,0.6); }
}
@keyframes jarvisBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.025); opacity: 0.92; }
}
@keyframes jarvisTickShimmer {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1.0; }
}

.j-mic-idle  { animation: jarvisIdleGlow 3.2s ease-in-out infinite; }
.j-tick-shimmer { animation: jarvisTickShimmer 1.6s ease-in-out infinite; }
.j-breathe { animation: jarvisBreathe 4.2s ease-in-out infinite; }

.j-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: jarvisShimmer 2.4s linear infinite;
}

.j-row:hover { background: #1A1A1D !important; }

.j-link { color: #3B82F6; cursor: pointer; }
.j-link:hover { text-decoration: underline; }

.j-scroll::-webkit-scrollbar { width: 6px; }
.j-scroll::-webkit-scrollbar-thumb { background: #2A2A2F; border-radius: 3px; }