/* === @font-face declarations =====================================
   Inlined from /static/fonts/fonts.css to eliminate one render-
   blocking CSS request. The unicode-range subsetting still applies,
   so browsers only download the woff2 subsets needed for the page's
   actual text. Updating these definitions in place — gunicorn HUP
   then recomputes the css_hash so visitors fetch the new bundle.
   ================================================================ */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.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: 300;
  font-display: swap;
  src: url(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.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: 300;
  font-display: swap;
  src: url(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.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: 300;
  font-display: swap;
  src: url(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.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: 300;
  font-display: swap;
  src: url(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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: 300;
  font-display: swap;
  src: url(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 400;
  font-display: swap;
  src: url(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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(/static/fonts/inter_UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 300;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD2OwG_TA.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: 300;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD_OwG_TA.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: 300;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD4OwG_TA.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: 300;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD0OwG_TA.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: 300;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD1OwG_TA.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: 300;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD7OwE.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: 400;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD2OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD_OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD4OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD0OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD1OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD7OwE.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD2OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD_OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD4OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD0OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD1OwG_TA.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(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD7OwE.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: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD2OwG_TA.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: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD_OwG_TA.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: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD4OwG_TA.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: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD0OwG_TA.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: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD1OwG_TA.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: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrainsmono_tDbV2o-flEEny0FZhsfKu5WU4xD7OwE.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;
}


/* === Design tokens (matching openprocurements.com homepage) === */
:root {
  --bg: #f6f5f1;
  --bg-2: #fbfaf6;
  --bg-3: #efede6;
  --line: #e1ddd2;
  --line-bright: #c9c4b6;
  --txt: #1a1c20;
  --txt-mute: #6e7384;
  --txt-faint: #9b9faa;
  --accent: #1d7a4d;
  --accent-2: #1e5fa8;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--txt);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; line-height: 1.55;
  background-image:
radial-gradient(circle at 92% -8%, rgba(29, 122, 77, .07), transparent 50%),
radial-gradient(circle at -10% 110%, rgba(30, 95, 168, .07), transparent 50%);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
.emoji {
  font-family: Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Android Emoji, EmojiSymbols, EmojiOne Mozilla, Twemoji Mozilla, Segoe UI Symbol, Noto Color Emoji Compat, emoji;
}

/* === Outer layout: re-target Bulma .section / .container === */
.section { padding: 0; }
.container { max-width: 1340px; margin: 0 auto; padding: 0 28px; }
.block { margin-bottom: 24px; }

/* === Listing-row card treatment ===
   Each tender result in results.html is `<div class="block result-row">`,
   styled as a self-contained cream card so the listing has the same
   visual weight as the country-home table — each row reads as its
   own item with background, border, and breathing room. */
.result-row {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 10px;
}

/* === Inline-text links inside body content ===
   By default `.block a` had `color: inherit; text-decoration: none`,
   which made tender titles, buyer-name parentheticals, "View the
   procurement »" links etc. visually indistinguishable from the
   surrounding text. Restore link affordance: subtle dotted underline,
   dark text, accent color on hover. Excludes anchors that are part
   of components with their own treatment (.tag, .breadcrumb li a,
   .pagination-link, .modal-close, .button, etc.). */
.block a:not(.tag):not(.button):not(.pagination-link):not(.pagination-previous):not(.pagination-next):not(.js-modal-trigger) {
  color: var(--txt);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-bright);
  transition: color .15s ease, border-color .15s ease;
}
.block a:not(.tag):not(.button):not(.pagination-link):not(.pagination-previous):not(.pagination-next):not(.js-modal-trigger):hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* === Result-row snippet wrapper ===
   results.html wraps each tender's description snippet + the
   "View the procurement »" link in a single `<i>` element.
   Browser default italicises that whole block, which dominates
   the listing visually and reads as decorative rather than
   informational. Override the default: render the snippet
   upright, muted, slightly smaller, with a comfortable line
   height — visually subordinate to the tender title above and
   the chip row below. The block-level + max-width keeps long
   snippets to a readable measure on wide screens. The few
   legitimate italic uses (`<i>"value"</i>` in tender_details
   for quoted long-text values) live inside `.notification`,
   not `.block`, so they are unaffected. */
.result-row > i {
  display: block;
  font-style: normal;
  color: var(--txt-mute);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 6px 0 0;
}
/* Result-row markup ends `<i>snippet</i><br />` and then either
   the supplier chip row or — for cards without suppliers — nothing.
   The trailing `<br>` was harmless when `<i>` was inline; now that
   `<i>` is block-level the `<br>` adds ~22px of empty line-height
   below the snippet, making the card's bottom padding visibly
   larger than its top padding. Hide the `<br>` only when it is
   the last element child (i.e., no chip row follows it). When
   chips do follow, the `<br>` keeps its job of separating
   snippet from chips. */
.result-row > i + br:last-child { display: none; }
/* Inline anchors inside the snippet — "View the procurement »"
   and any urlized links — read as tertiary CTAs, not italic. */
.result-row > i a {
  color: var(--accent);
  font-style: normal;
  border-bottom: 1px dotted currentColor;
}
.result-row > i a:hover { color: var(--txt); border-bottom-color: var(--txt); }
/* Search-result highlight: results.html replaces the OpenSearch
   <em> tag with <b> on the highlighted-description fragment.
   Boost without shouting. */
.result-row > i b {
  color: var(--txt);
  font-weight: 500;
  background: rgba(29, 122, 77, 0.08);
  padding: 0 2px;
  border-radius: 2px;
}

/* === Reading-width cap for body paragraph text ===
   Stretching to 1280px on wide monitors is too long for comfortable
   reading. The .block top-level paragraphs get a max-width;
   tabular blocks (table, .country-kpis, pagination) keep their
   full width via more specific rules above. .block > i has its
   own max-width set in the snippet rule above. */
.block > p,
.block > div:not(.country-kpis):not([class*="tile"]):not([class*="card"]) > p {
  max-width: 72ch;
}

/* === Statusbar (re-target Bulma's .navbar) ===
   The pulse dot + "openprocurements.com" wordmark live as real DOM
   inside an <a class="navbar-brand"> so the brand is one click target
   linking to "/". On mobile the entire brand collapses (display: none)
   so the search box can sit at the top of the screen unencumbered. */
.navbar {
  display: flex !important;
  align-items: center;
  gap: 18px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 24px 28px 14px !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--txt-mute);
  flex-wrap: wrap;
  background: transparent !important;
  min-height: auto !important;
  position: relative;
}
/* Bottom-border drawn via ::after, inset by the same horizontal
   padding the navbar uses. With `border-bottom` on .navbar itself,
   border-box layout draws the line at the outer 1340 px edge —
   28 px wider on each side than the global homepage's `.statusbar`
   line (which sits at the .wrap's content width of 1284 px).
   This pseudo-element renders the line at left+28/right+28, so it
   matches the global homepage exactly and aligns with the .container
   content width below. */
.navbar::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
/* Brand styling mirrors the statusbar on the global homepage so the
   pulse + wordmark read identically across the two views: 24px gap
   between pulse and text, "openprocurements" in --txt and ".com" in
   --txt-mute. The structural difference (here the pulse lives inside
   the link instead of beside it) is invisible. */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  transition: color .15s ease;
}
.navbar-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(29, 122, 77, 0.18);
  animation: pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 4px rgba(29,122,77,.18); }
  50%     { opacity: .55; transform: scale(.85); box-shadow: 0 0 0 6px rgba(29,122,77,.08); }
}
.navbar-wordmark {
  color: var(--txt);
  font-weight: 500;
  letter-spacing: .04em;
  transition: color .15s ease;
}
.navbar-wordmark-tld { color: var(--txt-mute); }
/* On hover only the "openprocurements" part turns accent green;
   the ".com" suffix stays muted, matching the global homepage where
   the inline style on the .com span outranks the :hover rule on the
   parent. */
.navbar-brand:hover .navbar-wordmark { color: var(--accent); }
.navbar-end { order: 99; }

/* Search box: re-target Bulma's .input.is-medium.is-rounded */
.navbar form { margin: 0; }
.control.has-icons-right { position: relative; }
.input.is-medium.is-rounded {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 36px 9px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--txt);
  width: 320px;
  max-width: 60vw;
  transition: border-color .15s ease, background .15s ease;
  box-shadow: none;
  line-height: 1.4;
}
.input.is-medium.is-rounded::placeholder { color: var(--txt-faint); }
.input.is-medium.is-rounded:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}
.icon.is-medium.is-right {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .65;
  cursor: pointer;
}

/* === Hero / page heading: re-target .title and .subtitle === */
.title {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--txt);
  margin: 56px 0 10px;
}
.subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--txt-mute);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 32px;
  max-width: 72ch;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--txt);
}

/* Country-home KPI strip — mirrors global_index .heromet card-grid.
   Three cards (tenders / buyers / suppliers) with monospace numbers,
   tiny uppercase labels, subtle "since 1993" delta on the first card.
   Rendered only when landing.json was loaded (see index_new.html). */
.country-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 32px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 6px;
  overflow: hidden;
}
.country-kpis .m {
  padding: 18px 24px;
  border-right: 1px solid var(--line);
}
.country-kpis .m:last-child { border-right: none; }
.country-kpis .m .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  margin-bottom: 10px;
}
.country-kpis .m .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) {
  .country-kpis { grid-template-columns: 1fr; }
  .country-kpis .m {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 14px 18px;
  }
  .country-kpis .m:last-child { border-bottom: none; }
}

/* === Breadcrumb (tender / search-results pages) === */
.breadcrumb {
  margin: 18px 0 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
}
.breadcrumb ul {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none;
  padding: 0; margin: 0;
  gap: 4px 8px;
}
.breadcrumb li {
  display: inline-flex; align-items: center;
  list-style: none;
  color: var(--txt-mute);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--txt-faint);
}
.breadcrumb li a {
  color: var(--txt-mute);
  transition: color .15s ease;
  border-bottom: 1px dotted transparent;
}
.breadcrumb li a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.breadcrumb li.is-active a,
.breadcrumb li.is-active {
  color: var(--txt);
  font-weight: 500;
  cursor: default;
}
.breadcrumb li.is-active a:hover {
  color: var(--txt);
  border-bottom-color: transparent;
}

/* === Tables: re-target Bulma's .table ===
   Used in two contexts:
 - country-home Recent procurements (.table.is-fullwidth)
 - tender-detail Procurement history (small 2-col, no .is-fullwidth)
   Both get the shared cream surface + hairline border + 6px radius
   so they read as designed components. The non-fullwidth variant
   gets tighter padding + smaller font so the small history table
   feels intentionally compact rather than oversized.  */
.table {
  /* `separate` (with zero spacing) keeps the table's own border
     independent of the cells. With `collapse`, modern browsers paint
     the first row's cell backgrounds OVER the merged top border, so
     a thead with a non-transparent background visually erases the
     top edge of `1px solid var(--line)` — making the SE country-home
     table look borderless on top while the global-homepage `.table`
     (a <div>, where collapse rules don't apply) renders identically
     to all four sides. With `separate` the table's border is its own
     and cell backgrounds stay inside the cells. */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.table.is-fullwidth {
  width: 100%;
}
.table thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  background: var(--bg-3);
  border: none;
  padding: 14px 20px;
  text-align: left;
  font-weight: 500;
}
.table tbody td {
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  font-size: 14px;
  color: var(--txt);
  line-height: 1.5;
  /* `middle` aligns content vertically to the row's centre line —
 important when one cell holds a pill (taller, with its own
 padding) and the next holds plain text. With `top` the pill's
 text baseline ended up several px above the adjacent cell's
 text baseline, making rows look mis-aligned. */
  vertical-align: middle;
}
/* Compact treatment for the procurement-history table
   (.table.is-striped without .is-fullwidth). */
.table:not(.is-fullwidth) thead th {
  padding: 9px 14px;
  font-size: 10px;
}
.table:not(.is-fullwidth) tbody td {
  padding: 9px 14px;
  font-size: 13px;
}
.table tbody tr:last-child td { border-bottom: none; }
/* Drop both the Bulma `.is-striped` zebra (every second row tinted)
   and our own row-hover tint. The mid-row tinting reads as a
   lingering hover state and made the listing feel restless. The
   row already has a hairline bottom border for separation, the
   link inside the cell has its own hover affordance, so a row-
   level background change isn't pulling weight. */
.table.is-striped tbody tr,
.table tbody tr,
.table tbody tr:hover {
  background: transparent;
}
.table tbody td a { color: var(--txt); transition: color .15s ease; }
.table tbody td a:hover { color: var(--accent); }

/* === Pagination: re-target Bulma ===
   Source order in results_pagination.html is:
 1. <a class="pagination-previous"> (when applicable)
 2. <a class="pagination-next">     (when applicable)
 3. <ul class="pagination-list">
   Bulma's stylesheet uses `order` to lay them out as
 [previous]   [page-number list, centered]   [next]
   which is the layout users expect. We replicate that with
   explicit flex `order` values plus a flex:1 on the list so it
   grows to fill the middle space. */
.pagination {
  margin: 32px 0 24px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pagination.is-large { font-size: 13px; }
.pagination-previous { order: 1; }
.pagination-list {
  order: 2;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0; margin: 0;
}
.pagination-next { order: 3; }
.pagination-list li { list-style: none; }
.pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--txt);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  text-decoration: none;
}
.pagination-previous:hover, .pagination-next:hover, .pagination-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination-link.is-current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pagination-ellipsis {
  background: transparent;
  border-color: transparent;
  color: var(--txt-faint);
}

/* === Box (related searches container): re-target Bulma === */
.box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 24px;
  margin-top: 32px;
  box-shadow: none;
}
.box .title.is-7 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 500;
  margin: 0 0 14px;
}

/* === Related searches card ===
   Two-column row layout: a fixed-width label column (Region:,
   Produkter/tjänster:) and a flex-wrap chip column. When the chips
   wrap, the wrapped row aligns under the first chip — not under the
   label — because each row's chips live in their own .related-chips
   wrapper that owns the indent. On narrow screens the row collapses
   to a stacked label-above-chips layout. */
.related-searches {
  /* 24/28/26/28 per spacing review — bottom slightly less than top
     so the card doesn't feel bottom-heavy. */
  padding: 24px 28px 26px;
}
.related-searches > .title.is-7 {
  /* Heading→first chip row: ~18px (target 16–18). */
  margin: 0 0 18px;
}
.related-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Between chip-group rows: 8px — slightly tighter than the prior 14px
     so the rows feel like one coherent group. */
  margin-top: 8px;
}
.related-row:first-of-type {
  margin-top: 0;
}
.related-label {
  /* 160px label column — wide enough for "Procuring organizations:"
     in most languages without wrapping. Locale-fragile if a localized
     label gets longer; if that happens, can grow to 180–200px. */
  flex: 0 0 160px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-mute);
  /* 4px top padding visually centres the label against the first
     chip's pill (chips have 4px top padding from the .tag rule). */
  padding-top: 4px;
}
.related-chips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  /* 8px h+v chip gap. */
  gap: 8px;
}
.related-chips > .tag {
  /* Reset the .tag rule's default margin so `gap` is the only
     spacing between chips. */
  margin: 0;
}
@media (max-width: 720px) {
  .related-row {
    flex-direction: column;
    gap: 6px;
  }
  .related-label {
    flex: 0 0 auto;
    padding-top: 0;
  }
}

/* === Tags (related-searches chips): re-target Bulma === */
.tag {
  display: inline-flex; align-items: center;
  height: auto;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  line-height: 1.35;
  background: var(--bg);
  color: var(--txt-mute);
  border: 1px solid var(--line);
  margin: 2px 4px 2px 0;
  text-decoration: none;
  white-space: nowrap;
}
.tag.is-rounded.is-link.is-light {
  background: rgba(29, 122, 77, 0.08);
  color: var(--accent);
  border-color: rgba(29, 122, 77, 0.20);
}
.tag.is-rounded.is-link.is-light:hover {
  background: rgba(29, 122, 77, 0.16);
  border-color: rgba(29, 122, 77, 0.40);
}

/* === Date / deadline tags ===
   Rendered by macros: date_tag → <span class="tag">YYYY-MM-DD</span>
   (covered by the generic .tag rule above), and deadline_tag →
   <span class="tag is-link is-uppercase has-text-weight-semibold">…</span>
   which needs its own warm-warning treatment to read as "deadline". */
.tag.is-link.is-uppercase,
span.tag.is-link.is-uppercase {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: rgba(180, 83, 9, 0.07);
  color: #92400e;
  border-color: rgba(180, 83, 9, 0.22);
}
.is-uppercase { text-transform: uppercase; }

/* Buttons (occasional) */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--txt);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.button:hover { border-color: var(--accent); color: var(--accent); }

/* === Notifications (tender-detail "procurement history" docs) ===
   Each notification is a wide document panel densely populated
   with short field-label / value pairs across many subsections.
   Body text is set in --txt-mute so the explicit hierarchy
   elements below (.has-text-weight-bold section headings,
   .has-text-weight-semibold subsection labels, accent-coloured
   links) read as the primary anchors. Relaxed line-height
   makes the long structured text comfortable to scan without
   feeling like a wall of bold legal copy. */
.notification {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--txt-mute);
  /* Internal padding 28px (in the 24–32px target band) gives the
     dense field-list breathing room from the card edge on all four
     sides. */
  padding: 28px;
  border-radius: 6px;
  /* 36px top/bottom margin (in the 32–40px target band for between
     document cards) — first-notification still benefits from the
     post-history-table 24px gap because margin-collapse takes the
     larger of the two adjacent margins. */
  margin: 36px 0;
  font-size: 13.5px;
  line-height: 1.75;
  /* Long URLs in field values (buyer profile address, email, etc)
 must wrap inside the panel rather than overflow. */
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
/* Constrain inner text to a ~900px reading column on wide screens
   while keeping the card itself at the full container width. The
   right-side padding absorbs the difference: as the viewport grows
   past where the card would exceed 928px (900 reading + 28 left pad),
   the extra width turns into right-side padding instead of stretching
   the line-length. Below ~956px card-width the text fills the card
   normally (capped at 28px right padding). No DOM change needed. */
@media (min-width: 1100px) {
  .notification {
    padding-right: max(28px, calc(100% - 928px));
  }
}
/* Long-text quoted values inside notifications were rendered as
   large italic blocks (legacy `<i>"value"</i>` markup in
   tender_details.html long_text fields). On the tender-detail
   page that ended up reading as a quoted-archive style rather
   than a calm data interface. Render them upright; the literal
   "…" quote characters in the markup keep the value visibly
   distinct from labels. */
.notification i {
  font-style: normal;
}
.notification.is-light,
.notification.is-info.is-light {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--txt);
}
/* Tender-detail history panels alternate between plain `.is-light`
   and `.is-info.is-light` to subtly mark notice-type/state. The
   original `is-info` cold-blue tint clashed with the warm palette;
   a pale sage tint keeps the differentiation while feeling part of
   the same card family. */
.notification.is-info.is-light {
  background: rgba(29, 122, 77, 0.045);
  border-color: rgba(29, 122, 77, 0.18);
}
.notification > b:first-child {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 500;
  margin-bottom: 6px;
}
.notification a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}
.notification a:hover { color: var(--txt); }

/* Document-panel hierarchy. tender_details.html structures each
   notification as:
 <b>panel title</b>            ← mono micro-label, set above
 <span class="has-text-weight-bold">section heading</span>     ← e.g. "Objekt"
 <span class="has-text-weight-semibold">subsection label</span>← e.g. "Upphandlingens omfattning"
 plain text                     ← field labels + values
   Give the two spans visibly different typographic roles so the
   dense field-list inside each panel becomes scannable.
   Locale-safe: no uppercase forced on the spans (the strings can
   be long localized phrases).  */
.has-text-weight-bold { font-weight: 600; }
.has-text-weight-semibold { font-weight: 500; }
.notification .has-text-weight-bold {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt);
  letter-spacing: -0.005em;
  /* 32px between major sections (Objekt, Förfarande, Upphandlande
     myndighet, …) — within the 28–36px target band, slightly tighter
     than the previous 36 so the card reads a touch denser without
     compressing field-level spacing. */
  margin-top: 32px;
}
.notification > b:first-child + br + .has-text-weight-bold {
  margin-top: 2px;
}
/* Subsection label (dark + medium weight) sits between the
   section heading (bold dark) and the muted body text.
   No uppercase — locale-safe; long Swedish/Polish/etc phrases
   stay readable. */
.notification .has-text-weight-semibold {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
  letter-spacing: 0;
  margin-top: 12px;
}

/* Tender detail: tighten the section labels (Deadline, Suppliers,
   Who?, What?, Where?). Markup pattern is `<b>Label</b><br>...<br><br>`,
   which Bulma rendered as an unstyled bold + whitespace. Treat the
   <b> like a small mono label for visual rhythm. */
.block > b {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 500;
  margin-top: 12px;
}
/* Reduce the double <br> gap between section blocks */
.block > br + br { display: block; content: ""; margin-top: 6px; }

/* === Page titles ===
   Three sizes, all from the same family (Inter, light weight,
   tightly tracked) to feel like one shared design system across
   the country home, listing pages, and detail pages.
 - .title (no modifier)  → country landing hero (big)
 - .title.is-3           → listing/detail page titles
 - .title.is-7           → micro-label (related-searches header)
   Listing titles get a touch more top margin so breadcrumbs +
   title + subtitle have a clear three-step rhythm. The clamp
   scales gracefully so long localized strings don't blow out
   on narrow screens (no fixed widths). */
.title.is-3, h1.title.is-3 {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 40px 0 4px;
  color: var(--txt);
}

/* === Page-summary block ===
   Applied to the outer .block on tender-detail (tender.html) and on
   listing pages (results.html). Both pages render an H1 + H2 +
   intro/description structure inside this block; .page-summary lets
   us style them uniformly without depending on browser quirks
   (the `<h2>`-inside-`<h1>` auto-correction) or :has() trickery.

   Mute body text so the intro description reads as secondary to
   the title and metadata labels. Explicit-color rules elsewhere
   (h1/h2, .block > b, .block a:not(...), table cells,
   .notification, ul markers) override locally for those elements.
   Listing-page nested children (result_description, subheader)
   inherit the muted color naturally. */
.page-summary {
  color: var(--txt-mute);
}
/* Tender-only: reset the inner tender_details wrapper to default
   body color. The .tender-details class is set on the inner .block
   in tender.html that wraps the history table + notification panels;
   without this reset they'd inherit --txt-mute from .page-summary. */
.tender-details {
  color: var(--txt);
}

/* Top spacing: more modest gap above the title so the title area
   feels intentionally composed rather than detached from the
   breadcrumb. Bottom margin zeroed so the title→buyer gap is
   driven entirely by h2.subtitle's margin-top below — keeps the
   buyer line visually subordinate to the H1 without floating away. */
.page-summary > h1.title.is-3 {
  margin: 18px 0 0;
}

/* Vertical rhythm for the tender-summary metadata groups. The
   tender template uses block-level <p> wrappers for the description
   and per-section content (deadline text, suppliers description),
   with bare <ul> for list content. <b> labels become block-level
   mono micro-headings; b margin-top creates a uniform section gap
   and b margin-bottom creates the in-section label-to-content gap.
   <p> + <ul> gets a small extra-top so the chip list sits a touch
   below its descriptive sentence. These rules only apply to direct
   children of .page-summary, which on the listing pages don't include
   <b>/<p>/<ul> (those live inside the nested result_description
   block) — so listing pages are naturally unaffected. */
.page-summary > b {
  display: block;
  /* 28px between metadata groups (within the 28–36px target band)
     and 8px label→content gap (within the 8–12px target band). */
  margin: 28px 0 8px;
}
/* The first metadata label (after the intro paragraph) gets a
   tighter top margin — between-groups still wants 28–36px breathing
   room, but the intro→first-label transition reads tighter at 18px
   (4px below the previous 22px). */
.page-summary > b:first-of-type {
  margin-top: 18px;
}
.page-summary > p {
  margin: 0;
  max-width: 72ch;
}
.page-summary > ul {
  margin: 0;
}
.page-summary > p + ul {
  margin-top: 4px;
}
.page-summary > * + .block {
  /* 28px before the tender_details block sits in the 36–44px target
     once added to the inner `<b>Procurement history</b>`'s own
     12px margin-top — total ~40px from previous metadata section
     down to the history heading. */
  margin-top: 28px;
}
.title.is-4, h2.title.is-4 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 28px 0 8px;
  /* Explicit so the listing-page subheader ("Recent procurements by …")
     stays dark even when its surrounding .block inherits the muted
     intro color. */
  color: var(--txt);
}
.title.is-7 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 500;
  margin: 0 0 14px;
}
.subtitle.is-3 {
  font-size: 16px;
  font-weight: 400;
  color: var(--txt-mute);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 24px;
}
/* Subtitle inside the listing-page <h1> — reads as a meta-line
   under the title ("N active procurements"). Mono micro-label
   feel matches the homepage's section labels. */
.subtitle.is-4 {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 8px 0 20px;
}
/* Tender-detail buyer line: an h2.subtitle holds the link to
   the buyer just below the tender title. Make it a prominent
   inline buyer link, not a faint subtitle.

   margin-top: 10px sits in the recommended 8–12px band — close
   enough to feel anchored to the title above, far enough that the
   buyer line doesn't read as an extra wrap of the H1. */
h2.subtitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--txt);
  margin: 10px 0 18px;
}
h2.subtitle a {
  color: var(--txt);
  border-bottom: 1px dotted var(--line-bright);
  transition: color .15s ease, border-color .15s ease;
}
h2.subtitle a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Box-with-content variant: the tender-detail "related categories"
   block uses `<div class="box content is-small">` — one element
   carrying both .box and .content. The `.box.content` selector
   targets it directly (not as a descendant; .box.content == one
   element here). */
.box.content {
  font-size: 13px;
  line-height: 1.55;
}
.box.content.is-small {
  padding: 20px 22px;
}
.box.content.is-small .title.is-7 {
  margin-top: 0;
}

/* Tag color variants (used in search results for supplier chips) */
.tag.is-link.is-light,
.tag.is-link.is-light.is-rounded {
  background: rgba(29, 122, 77, 0.08);
  color: var(--accent);
  border-color: rgba(29, 122, 77, 0.20);
}
.tag.is-link.is-light:hover,
.tag.is-link.is-light.is-rounded:hover {
  background: rgba(29, 122, 77, 0.16);
  border-color: rgba(29, 122, 77, 0.40);
}
.tag.is-rounded {
  border-radius: 999px;
}

/* === Body content lists ===
   The Who/What/Where/Suppliers lists on tender-detail render as
   <ul><li>• item</li></ul> — the "•" is literal text in the
   markup. Suppress the default disc bullet so we don't end up
   with two bullets per row. Scoped to direct-child <ul> of
   .block so it does NOT cascade into deeper structures
   (e.g. the cpv_tree's nested <ul>s inside .box.content,
   which want browser-rendered bullets). */
.block > ul:not(.pagination-list) {
  list-style: none;
  padding-left: 0;
  margin: 6px 0;
}
.block > ul:not(.pagination-list) > li {
  line-height: 1.7;
}
/* CPV tree (cpv_tree macro) renders a nested-<ul> hierarchy inside
   a `.content` wrapper: `.box.content.is-small` on the tender-detail
   page (where the wrapper is a sibling of the main .block, not a
   descendant) and `.content.is-small` inside a `.card` on the cpv
   listing page. Target via `.content > ul ...` so both contexts
   match.

   L1 categories (direct children of the outer ul) read at full
   charcoal weight; L2 mute, L3+ faint — so the visual hierarchy
   matches the semantic depth. The current cpv (rendered as
   <strong> by the macro) gets its own color so per-level mute
   doesn't wash it out.

   Links pick up the shared accent treatment so the tree reads as
   a navigation component, not body text. */
.content > ul {
  list-style: disc outside;
  padding-left: 0;
  margin: 6px 0 6px 14px;
  /* Long unbroken words (e.g. Swedish/Polish compound CPV names) must
     wrap rather than overflow the card. With deep nesting the text
     column inside .tile.is-4 (33%) is sometimes very narrow;
     `anywhere` lets the browser break at any character if no
     whitespace break opportunity exists. */
  overflow-wrap: anywhere;
}
/* Nested uls. `padding-left: 0` is critical: without it nested uls
   inherit the browser default of 40px padding-left, which compounds
   over levels and chokes the text column at deep nesting. With
   `margin-left: 12px` and zero padding, 7 levels deep cost only
   14 + 6*12 = 86px of cumulative indent, leaving ~270px for text
   in a 360px .content area. */
.content > ul ul {
  list-style-type: circle;
  padding-left: 0;
  margin: 4px 0 4px 12px;
}
.content > ul ul ul {
  list-style-type: square;
}
.content > ul li {
  line-height: 1.65;
  margin-bottom: 2px;
}
.content > ul > li {
  color: var(--txt);
}
.content > ul > ul > li {
  color: var(--txt-mute);
}
.content > ul > ul > ul > li {
  color: var(--txt-faint);
}
.content > ul li::marker {
  color: var(--txt-faint);
}
.content > ul li strong {
  color: var(--txt);
  font-weight: 600;
}
.content > ul a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  transition: color .15s ease;
}
.content > ul a:hover { color: var(--txt); }

/* Form controls (contact form / future filter UIs) */
.field { margin-bottom: 16px; }
.field .label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-mute);
  margin-bottom: 6px;
  font-weight: 500;
}
.field .control { display: block; }
.field .input,
.field .textarea,
.input:not(.is-medium):not(.is-rounded),
.textarea {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--txt);
  width: 100%;
  line-height: 1.5;
  box-shadow: none;
}
.field .textarea, .textarea {
  min-height: 140px;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}
.field .input:focus,
.field .textarea:focus,
.textarea:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}
.help { font-size: 12px; color: var(--txt-mute); margin-top: 4px; }

/* Bulma's content-area body text */
.content p { margin: 0 0 12px; }
.content > * + * { margin-top: 8px; }

/* === Tile system (used on CPV listing pages for two-column layout) ===
   Bulma's tile is a flex-based 12-column grid. We approximate the
   `.is-N` size modifiers as percentages, and stack on narrow screens. */
.tile {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0;
}
.tile.is-vertical { flex-direction: column; }
.tile.is-12 { width: 100%; }
/* min-width: 0 lets these flex items actually shrink to their declared
   basis width — without it, `min-width: auto` (the flex default) makes
   each item at least as wide as its longest content, which causes
   children like deep cpv_trees to render past the column's max-width. */
.tile.is-7 { flex: 0 0 58.33%; max-width: 58.33%; min-width: 0; }
.tile.is-4 { flex: 0 0 33.33%; max-width: 33.33%; min-width: 0; }
.tile.is-1 { flex: 0 0 8.33%; max-width: 8.33%; min-width: 0; }
.tile > .tile { padding: 0 16px; }
.tile.is-12 > .tile:first-child { padding-left: 0; padding-right: 24px; }
.tile.is-12 > .tile:last-child  { padding-right: 0; padding-left: 24px; }
.tile .card { width: 100%; }
.tile .card-content { padding: 22px 24px; }
.tile .card .title.is-7 { margin-bottom: 12px; line-height: 1.4; }
@media (max-width: 800px) {
  .tile.is-12 { flex-direction: column; }
  .tile.is-7, .tile.is-4 { flex: 0 0 100%; max-width: 100%; padding: 0 !important; }
  .tile.is-1 { display: none; }
  .tile > .tile { padding: 0 0 16px; }
}

/* === Card (Bulma component, used on CPV listing pages) === */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.card-content {
  padding: 18px 20px;
}

/* === Message (Bulma component, used on /contact/) === */
.message {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 16px 0;
  overflow: hidden;
}
.message-header {
  background: var(--bg-3);
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--txt);
  line-height: 1.4;
}
.message-header p { margin: 0; }
.message-body {
  padding: 16px 18px;
  color: var(--txt);
  line-height: 1.6;
}
.message.is-danger {
  border-color: rgba(185, 74, 58, 0.30);
}
.message.is-danger .message-header {
  background: rgba(185, 74, 58, 0.10);
  color: #a13d2c;
}
.message.is-success {
  border-color: rgba(29, 122, 77, 0.30);
}
.message.is-success .message-header {
  background: rgba(29, 122, 77, 0.10);
  color: var(--accent);
}

/* === Field group + submit button (used on /contact/) === */
.field.is-grouped {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field.is-grouped > .control {
  flex-shrink: 0;
}
.button.is-link {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.button.is-link:hover {
  background: #166540;
  border-color: #166540;
  color: #fff;
}

/* Click affordance on `.is-clickable` and `.js-modal-trigger` */
.is-clickable, .js-modal-trigger { cursor: pointer; }
.js-modal-trigger {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}
.js-modal-trigger:hover { color: var(--txt); }

/* Modal (used for "Show more" on long values in tender details) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-active { display: flex; }
.modal-background {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 32, 0.55);
}
.modal-content {
  position: relative;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.modal-content .box {
  margin: 0;
  background: transparent;
  border: none;
}
.modal-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: rgba(26, 28, 32, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 0;
}
.modal-close::before, .modal-close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close.is-large { width: 32px; height: 32px; top: 14px; right: 14px; }

/* === Footer: re-target Bulma's .footer === */
.footer {
  /* 40px above-footer gap matches the rest of the site's
     section-to-section rhythm (36–44px elsewhere). 64px previously
     made every page feel like it had dead space below the last
     content card. */
  margin-top: 40px;
  padding: 28px 0 36px !important;
  border-top: 1px solid var(--line);
  background: transparent !important;
}
.footer .content.has-text-centered {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--txt-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
}
.footer .content.has-text-centered > a {
  color: var(--txt);
  border-bottom: 1px dotted currentColor;
  transition: color .15s ease, border-color .15s ease;
}
.footer .content.has-text-centered > a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.footer .content.has-text-centered > div {
  margin-top: 18px;
  font-size: 22px;
  letter-spacing: 0;
}
.footer .content.has-text-centered > div a {
  display: inline-block;
  padding: 4px 6px;
  border: none;
  text-decoration: none;
  transition: transform .15s ease;
}
.footer .content.has-text-centered > div a:hover { transform: scale(1.15); }
.footer .emoji { text-transform: none; letter-spacing: 0; }

/* Mobile */
@media (max-width: 720px) {
  .navbar { padding: 14px 20px 10px !important; gap: 0; }
  /* Inset the bottom-border to match the .container's mobile
     padding (20px) so the line aligns with content below. */
  .navbar::after { left: 20px; right: 20px; }
  /* Hide pulse + wordmark on small screens to give the search box
     the entire navbar row. The brand is still keyboard-reachable
     elsewhere (the footer brand link). */
  .navbar-brand { display: none; }
  .navbar-end { flex: 1 1 100%; }
  .input.is-medium.is-rounded { width: 100%; max-width: 100%; }
  .container { padding: 0 20px; }
  .title { font-size: clamp(28px, 8vw, 44px); margin-top: 32px; }
  .table thead th, .table tbody td { padding: 12px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-pulse { animation: none !important; }
}