/* Problempedia design system.
   Forked on 2026-09-28 from the Savchenko Solutions design system (css/bundle.css: site fonts,
   palettes, design-system.css, main_page.css). This copy belongs to Problempedia; edit it here.
   Fonts: css/vendor/fonts/h (New Computer Modern, CMU, IBM Plex; licences alongside). */
/* === site-fonts.css (generated by scripts/build-fonts.py) === */
/* Generated by scripts/build-fonts.py — do not edit. Four families (SS Text, SS Sans, SS Mono,
   SS Display) plus the wordmark and symbol subsets and size-adjusted local fallbacks. Files are content-hashed
   and served with a one-year immutable cache; licences are in h/LICENSE-*.txt. */
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400-latin.6a7197b16a.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+2190-2199, U+2212, U+2215, U+2217, U+221E, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400-latin-ext.dd37bf3e1f.woff2) format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+1E9E, U+1EA0-1EF9, U+20A0-20AB, U+20AD-20B3, U+20B5-20C0, U+2113;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400-cyrillic.30d0943208.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400-cyrillic-ext.8e2201f111.woff2) format('woff2');
  unicode-range: U+0460-048F, U+0492-04AF, U+04B2-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400-greek.72d6ec0fdc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400i-latin.1c830c30de.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+2190-2199, U+2212, U+2215, U+2217, U+221E, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400i-latin-ext.53703bb4f3.woff2) format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+1E9E, U+1EA0-1EF9, U+20A0-20AB, U+20AD-20B3, U+20B5-20C0, U+2113;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400i-cyrillic.3bcbb9368b.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400i-cyrillic-ext.b6cd441f5a.woff2) format('woff2');
  unicode-range: U+0460-048F, U+0492-04AF, U+04B2-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-400i-greek.4c78196c6c.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700-latin.96179fea9b.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+2190-2199, U+2212, U+2215, U+2217, U+221E, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700-latin-ext.65a5a5aef5.woff2) format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+1E9E, U+1EA0-1EF9, U+20A0-20AB, U+20AD-20B3, U+20B5-20C0, U+2113;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700-cyrillic.09d1781f59.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700-cyrillic-ext.5159effc9c.woff2) format('woff2');
  unicode-range: U+0460-048F, U+0492-04AF, U+04B2-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'SS Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700-greek.ae0ef171fa.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700i-latin.96faf30ee2.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+2190-2199, U+2212, U+2215, U+2217, U+221E, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700i-latin-ext.41308730bf.woff2) format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+1E9E, U+1EA0-1EF9, U+20A0-20AB, U+20AD-20B3, U+20B5-20C0, U+2113;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700i-cyrillic.fdb7b7eff7.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700i-cyrillic-ext.118cb7c59d.woff2) format('woff2');
  unicode-range: U+0460-048F, U+0492-04AF, U+04B2-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'SS Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/h/ss-text-700i-greek.cc1881c848.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'SS Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-display-600-latin.ee0fcdafff.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+2190-2199, U+2212, U+2215, U+2217, U+221E, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-display-600-latin-ext.8416742644.woff2) format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+1E9E, U+1EA0-1EF9, U+20A0-20AB, U+20AD-20B3, U+20B5-20C0, U+2113;
}
@font-face {
  font-family: 'SS Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-display-600-cyrillic.f336aa6efd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'SS Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-display-600-cyrillic-ext.1f1d223662.woff2) format('woff2');
  unicode-range: U+0460-048F, U+0492-04AF, U+04B2-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'SS Wordmark';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-wordmark-600.c80ce72c32.woff2) format('woff2');
  unicode-range: U+0020, U+0053, U+0061, U+0063, U+0065, U+0068, U+0069, U+006B, U+006C, U+006E, U+006F, U+0073, U+0074, U+0075, U+0076, U+0420, U+0421, U+0430, U+0432, U+0435, U+0438, U+043A, U+043D, U+043E, U+0447, U+0448, U+044F;
}
@font-face {
  font-family: 'SS Symbols';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/fonts/h/ss-symbols-400.d3dc79a9fb.woff2) format('woff2');
  unicode-range: U+21A6, U+21D0, U+21D2, U+21D4, U+2207, U+2208, U+2209, U+220B, U+2217, U+2218, U+221D, U+2220, U+2225, U+223C, U+2243, U+2245, U+226A, U+226B, U+22A5, U+22C5, U+22C6, U+25A0, U+25A1, U+25B2, U+25B3, U+25B4, U+25B6, U+25B8, U+25BC, U+25BD, U+25BE, U+25C0, U+25C2, U+25C6, U+25C7, U+25CB, U+25CF, U+2605, U+2606, U+27E8, U+27E9, U+27F5, U+27F6, U+27F9;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400-latin1.b5ad7bd39f.woff2) format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400-latin2.fcfa82e0d4.woff2) format('woff2');
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400-latin3.17593bcbd5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400-cyrillic.23bfb7e908.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400-greek.3b8a8b6b65.woff2) format('woff2');
  unicode-range: U+037E, U+0386-038A, U+038C, U+038E-03A1, U+03A3-03CE;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400-pi.1487059829.woff2) format('woff2');
  unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400i-latin1.0a06b98143.woff2) format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'SS Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400i-latin2.767025302f.woff2) format('woff2');
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}
@font-face {
  font-family: 'SS Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400i-latin3.846a9d18d1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'SS Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400i-cyrillic.8491a6d4f5.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525;
}
@font-face {
  font-family: 'SS Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400i-greek.38ca8bb2e9.woff2) format('woff2');
  unicode-range: U+037E, U+0386-038A, U+038C, U+038E-03A1, U+03A3-03CE;
}
@font-face {
  font-family: 'SS Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-400i-pi.d2311fd41c.woff2) format('woff2');
  unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-600-latin1.fff0ab3a88.woff2) format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-600-latin2.2bc85a8e53.woff2) format('woff2');
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-600-latin3.b4c2405247.woff2) format('woff2');
  unicode-range: U+0102-0103, U+01CD-01DC, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-600-cyrillic.b992c62cfa.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-600-greek.b262d4716b.woff2) format('woff2');
  unicode-range: U+037E, U+0386-038A, U+038C, U+038E-03A1, U+03A3-03CE;
}
@font-face {
  font-family: 'SS Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/h/ss-sans-600-pi.768421433d.woff2) format('woff2');
  unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-mono-400-latin1.e8993d9466.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: 'SS Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-mono-400-latin2.8c5e48e4c6.woff2) format('woff2');
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}
@font-face {
  font-family: 'SS Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-mono-400-latin3.1ff2d301f8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+01CD-01DC, U+1E0C-1E0D, U+1E12-1E13, U+1E24-1E25, U+1E36-1E37, U+1E3C-1E3D, U+1E40-1E47, U+1E4A-1E4B, U+1E62-1E63, U+1E6C-1E6D, U+1E70-1E71, U+1E92-1E93, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'SS Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-mono-400-cyrillic.44e877f4d7.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525;
}
@font-face {
  font-family: 'SS Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/h/ss-mono-400-pi.b8002770aa.woff2) format('woff2');
  unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SS Text Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos');
  size-adjust: 108.6%;
  ascent-override: 103.8%;
  descent-override: 26.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Text Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos');
  size-adjust: 108.6%;
  ascent-override: 103.8%;
  descent-override: 26.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Text Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('Tinos Bold');
  size-adjust: 117.9%;
  ascent-override: 96.1%;
  descent-override: 25.0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Text Fallback';
  font-style: italic;
  font-weight: 700;
  src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('Tinos Bold');
  size-adjust: 117.9%;
  ascent-override: 96.1%;
  descent-override: 25.0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Sans Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
  size-adjust: 101.5%;
  ascent-override: 101.0%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Sans Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
  size-adjust: 101.5%;
  ascent-override: 101.0%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Sans Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold');
  size-adjust: 97.3%;
  ascent-override: 105.3%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Sans Fallback';
  font-style: italic;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold');
  size-adjust: 97.3%;
  ascent-override: 105.3%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Display Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Narrow'), local('ArialNarrow'), local('Liberation Sans Narrow');
  size-adjust: 110.4%;
  ascent-override: 82.7%;
  descent-override: 28.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Display Fallback';
  font-style: italic;
  font-weight: 600;
  src: local('Arial Narrow'), local('ArialNarrow'), local('Liberation Sans Narrow');
  size-adjust: 110.4%;
  ascent-override: 82.7%;
  descent-override: 28.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Mono Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('Cousine');
  size-adjust: 100.0%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SS Mono Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('Cousine');
  size-adjust: 100.0%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}


/* === palettes (generated from js/palettes.js) === */
/* Data palettes — generated from js/palettes.js by scripts/build-css.js. */
:root {
  --ss-heat-1: #ffffcc;
  --ss-heat-1-ink: #1a1a2e;
  --ss-heat-2: #ffeda0;
  --ss-heat-2-ink: #1a1a2e;
  --ss-heat-3: #fed976;
  --ss-heat-3-ink: #1a1a2e;
  --ss-heat-4: #feb24c;
  --ss-heat-4-ink: #1a1a2e;
  --ss-heat-5: #fd8d3c;
  --ss-heat-5-ink: #1a1a2e;
  --ss-heat-6: #fc4e2a;
  --ss-heat-6-ink: #ffffff;
  --ss-heat-7: #e31a1c;
  --ss-heat-7-ink: #ffffff;
  --ss-heat-8: #bd0026;
  --ss-heat-8-ink: #ffffff;
  --ss-heat-9: #800026;
  --ss-heat-9-ink: #ffffff;
  --ss-heat-none: #ffffff;
  --ss-heat-none-ink: #8c959f;
  --ss-lang-both-fill: #7d3c98;
  --ss-lang-both-rule: #7d3c98;
  --ss-lang-both-ink: #ffffff;
  --ss-lang-en-fill: #cfe0ee;
  --ss-lang-en-fill-hover: #b9d3e8;
  --ss-lang-en-rule: #2471a3;
  --ss-lang-en-ink: #17466b;
  --ss-lang-ru-fill: #cdebd9;
  --ss-lang-ru-fill-hover: #b6e1c8;
  --ss-lang-ru-rule: #27ae60;
  --ss-lang-ru-ink: #1b6b41;
  --ss-lang-unsolved-fill: #ffffff;
  --ss-lang-unsolved-rule: #c6ccd2;
  --ss-lang-unsolved-ink: #6c757d;
  --ss-activity-0: #ebedf0;
  --ss-activity-1: #b3c6d9;
  --ss-activity-2: #6d93b8;
  --ss-activity-3: #3a6a9e;
  --ss-activity-4: #1a1a2e;
  --ss-series-1: #2a78d6;
  --ss-series-2: #eb6834;
  --ss-series-3: #1baf7a;
  --ss-series-4: #7d3c98;
  --ss-rank-legendaryGrandmaster: #FF0000;
  --ss-rank-legendaryGrandmaster-first: #000000;
  --ss-rank-internationalGrandmaster: #FF0000;
  --ss-rank-grandmaster: #FF0000;
  --ss-rank-internationalMaster: #FF8C00;
  --ss-rank-master: #FF8C00;
  --ss-rank-candidateMaster: #AA00AA;
  --ss-rank-expert: #0000FF;
  --ss-rank-specialist: #03A89E;
  --ss-rank-pupil: #008000;
  --ss-rank-newbie: #808080;
  --ss-rank-headquarters: #000000;
}
.ss-rank-c-legendaryGrandmaster, a.ss-rank-c-legendaryGrandmaster:link, a.ss-rank-c-legendaryGrandmaster:visited, a.ss-rank-c-legendaryGrandmaster:hover { --ss-rank-current: var(--ss-rank-legendaryGrandmaster); color: var(--ss-rank-legendaryGrandmaster); }
.ss-rank-c-legendaryGrandmaster .ss-rank-first { color: var(--ss-rank-legendaryGrandmaster-first); }
.ss-rank-c-internationalGrandmaster, a.ss-rank-c-internationalGrandmaster:link, a.ss-rank-c-internationalGrandmaster:visited, a.ss-rank-c-internationalGrandmaster:hover { --ss-rank-current: var(--ss-rank-internationalGrandmaster); color: var(--ss-rank-internationalGrandmaster); }
.ss-rank-c-grandmaster, a.ss-rank-c-grandmaster:link, a.ss-rank-c-grandmaster:visited, a.ss-rank-c-grandmaster:hover { --ss-rank-current: var(--ss-rank-grandmaster); color: var(--ss-rank-grandmaster); }
.ss-rank-c-internationalMaster, a.ss-rank-c-internationalMaster:link, a.ss-rank-c-internationalMaster:visited, a.ss-rank-c-internationalMaster:hover { --ss-rank-current: var(--ss-rank-internationalMaster); color: var(--ss-rank-internationalMaster); }
.ss-rank-c-master, a.ss-rank-c-master:link, a.ss-rank-c-master:visited, a.ss-rank-c-master:hover { --ss-rank-current: var(--ss-rank-master); color: var(--ss-rank-master); }
.ss-rank-c-candidateMaster, a.ss-rank-c-candidateMaster:link, a.ss-rank-c-candidateMaster:visited, a.ss-rank-c-candidateMaster:hover { --ss-rank-current: var(--ss-rank-candidateMaster); color: var(--ss-rank-candidateMaster); }
.ss-rank-c-expert, a.ss-rank-c-expert:link, a.ss-rank-c-expert:visited, a.ss-rank-c-expert:hover { --ss-rank-current: var(--ss-rank-expert); color: var(--ss-rank-expert); }
.ss-rank-c-specialist, a.ss-rank-c-specialist:link, a.ss-rank-c-specialist:visited, a.ss-rank-c-specialist:hover { --ss-rank-current: var(--ss-rank-specialist); color: var(--ss-rank-specialist); }
.ss-rank-c-pupil, a.ss-rank-c-pupil:link, a.ss-rank-c-pupil:visited, a.ss-rank-c-pupil:hover { --ss-rank-current: var(--ss-rank-pupil); color: var(--ss-rank-pupil); }
.ss-rank-c-newbie, a.ss-rank-c-newbie:link, a.ss-rank-c-newbie:visited, a.ss-rank-c-newbie:hover { --ss-rank-current: var(--ss-rank-newbie); color: var(--ss-rank-newbie); }
.ss-rank-c-headquarters, a.ss-rank-c-headquarters:link, a.ss-rank-c-headquarters:visited, a.ss-rank-c-headquarters:hover { --ss-rank-current: var(--ss-rank-headquarters); color: var(--ss-rank-headquarters); }

/* === design-system.css === */
/* Savchenko Solutions — the design system: tokens, the Bootstrap bridge, base elements, reading
   type and components, then feature blocks built on them. The typefaces are generated into
   css/vendor/fonts/site-fonts.css by scripts/build-fonts.py and concatenated ahead of this file
   into css/bundle.css (npm run build:css). */

/* ss-codemod: off — §1–§5 are the system itself; the codemod maps everything else onto it. */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   §1 TOKENS — the whole visual system. Every font, size, weight, colour, space, radius, shadow
   and width on the site is one of these (tests/design-rules.test.js). Why and how they were
   chosen: typography unification, 2026-09 (CLAUDE.md, Design System).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Type families. The fonts themselves: css/vendor/fonts/site-fonts.css (build-fonts.py). ──
     SS Text     New Computer Modern Book — the physics: statements, solutions, prose, titles.
     SS Sans     IBM Plex Sans — the interface.
     SS Mono     IBM Plex Mono — code, citations, the editor.
     SS Display  CMU Sans Serif Demi Condensed — the book's title-page face; big titles only.
     SS Symbols  the few symbols Plex lacks (Savchenko's ∗, ▶), from NewCM Math; second in every stack.
     Every stack ends in a Windows system font and a generic family, so text stays readable
     if a filter ever blocks the woff2 files. */
  --ss-font-text: 'SS Text', 'SS Symbols', 'SS Text Fallback', 'CMU Serif', Georgia, 'Times New Roman', serif;
  --ss-font-ui: 'SS Sans', 'SS Symbols', 'SS Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ss-font-mono: 'SS Mono', 'SS Symbols', 'SS Mono Fallback', Consolas, Menlo, 'Courier New', monospace;
  --ss-font-display: 'SS Display', 'SS Display Fallback', 'Arial Narrow', Arial, sans-serif;
  --ss-font-wordmark: 'SS Wordmark', 'SS Display', 'SS Display Fallback', 'Arial Narrow', Arial, sans-serif;

  /* ── Type scale. These ten sizes are the only font sizes on the site. ── */
  --ss-fs-12: 0.75rem;
  --ss-fs-13: 0.8125rem;
  --ss-fs-14: 0.875rem;
  --ss-fs-16: 1rem;
  --ss-fs-18: 1.125rem;
  --ss-fs-20: 1.25rem;
  --ss-fs-24: 1.5rem;
  --ss-fs-28: 1.75rem;
  --ss-fs-32: 2rem;
  --ss-fs-40: 2.5rem;

  /* ── Type roles: one size per role, identical on every page (desktop values in §1b). ── */
  --ss-text-label: var(--ss-fs-12);      /* uppercase labels, badges, legal text */
  --ss-text-meta: var(--ss-fs-13);       /* meta rows, breadcrumbs, timestamps, sidebar body */
  --ss-text-ui: var(--ss-fs-14);         /* nav, buttons, tabs, table cells, form labels */
  --ss-text-body: var(--ss-fs-16);       /* base text, comments, chat */
  --ss-text-input: var(--ss-fs-16);      /* every input — below 16px iOS zooms on focus */
  --ss-text-lead: var(--ss-fs-18);       /* lead paragraphs, card titles */
  --ss-text-h3: var(--ss-fs-18);
  --ss-text-h2: var(--ss-fs-20);
  --ss-text-h1: var(--ss-fs-24);
  --ss-text-display: var(--ss-fs-32);    /* SS Display hero and chapter titles */
  --ss-text-title: var(--ss-fs-32);      /* SS Text title of a knowledge page ("Задача 2.1.32") */
  --ss-text-prose: var(--ss-fs-18);      /* SS Text reading size */
  --ss-text-prose-small: var(--ss-fs-16);/* captions and literature inside prose */
  --ss-text-wordmark: var(--ss-fs-18);

  --ss-fw-regular: 400;
  --ss-fw-strong: 600;                   /* interface emphasis, headings, buttons */
  --ss-fw-text-bold: 700;                /* SS Text bold (its heavier cut) */
  --ss-lh-tight: 1.2;
  --ss-lh-snug: 1.35;
  --ss-lh-ui: 1.5;
  --ss-lh-prose: 1.6;
  --ss-ls-caps: 0.06em;
  --ss-ls-heading: -0.01em;

  /* ── Colour. The CLAUDE.md palette plus the few states it lacked. ── */
  --ss-navy: #1a1a2e;
  --ss-navy-hover: #2c2c4a;
  --ss-white: #ffffff;
  --ss-text: #2d2d2d;
  --ss-body-text: #2d2d2d;
  --ss-text-secondary: #6c757d;
  --ss-text-tertiary: #8c959f;           /* placeholders, disabled, separators, icons — never content */
  --ss-heading: #1a1a2e;
  /* A link is blue, not a grey-blue (the owner, 2026-09-22): GitHub's blue, 5.2:1 on white and
     4.9:1 on a card, so body text passes AA wherever the site puts it. */
  --ss-link: #0969da;
  --ss-link-hover: #0550ae;
  --ss-rule: #dee2e6;
  --ss-rule-soft: #e9ecef;
  --ss-rule-strong: #adb5bd;
  --ss-surface: #ffffff;
  --ss-surface-alt: #f8f9fa;
  --ss-surface-hover: #eef1f4;
  --ss-accent: #7d3c98;                  /* "solved in both languages"; community highlights */
  --ss-accent-soft: #f3ecf7;
  --ss-success: #27ae60;                 /* fills and rules only — 2.9:1 as text on white */
  --ss-success-strong: #1b7a43;          /* success text, and fills under white text (4.9:1 on success-soft) */
  --ss-success-soft: #eaf7ef;
  --ss-error: #c0392b;
  --ss-error-soft: #fdf2f0;
  --ss-error-rule: #eccfcb;
  --ss-warning: #9a6700;
  --ss-warning-soft: #fff8e1;
  --ss-warning-rule: #e9b43a;
  --ss-on-navy: #ffffff;
  --ss-on-navy-muted: rgba(255, 255, 255, 0.7);
  --ss-on-navy-link: #9fc9ef;            /* 9.8:1 on navy */
  --ss-on-navy-rule: rgba(255, 255, 255, 0.14);

  /* Old names, kept as aliases for one release. */
  --ss-page-bg: var(--ss-surface);
  --ss-card-bg: var(--ss-surface-alt);
  --ss-header-bg: var(--ss-navy);
  --ss-footer-bg: var(--ss-navy);
  --ss-footer-text: #cccccc;
  --ss-border-light: #e0e0e0;
  --ss-border-card: var(--ss-rule);
  --ss-primary-btn: var(--ss-navy);
  --ss-primary-btn-hover: var(--ss-navy-hover);
  --ss-code-bg: #f5f5f5;

  /* ── Space (4px grid), shape, depth, focus, layout. ── */
  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-3: 12px;
  --ss-space-4: 16px;
  --ss-space-5: 20px;
  --ss-space-6: 24px;
  --ss-space-7: 32px;
  --ss-space-8: 40px;
  --ss-space-9: 48px;
  --ss-space-10: 64px;
  --ss-radius-sm: 4px;
  --ss-radius: 6px;
  --ss-radius-lg: 8px;
  --ss-radius-round: 50%;
  --ss-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ss-scrim: rgba(26, 26, 46, 0.5);
  --ss-focus-color: #1a5276;
  --ss-focus-ring: 2px solid var(--ss-focus-color);
  --ss-focus-offset: 2px;
  --ss-control-sm: 32px;
  --ss-control: 40px;
  --ss-control-lg: 48px;
  --ss-w-narrow: 440px;
  --ss-w-text: 760px;
  --ss-w-content: 1200px;
  --ss-gutter: 16px;
  --ss-math-stroke: 14px;                /* thickens SVG formulas to the weight of SS Text Book */
}

/* §1b — the roles that grow on wider screens. */
@media (min-width: 768px) {
  :root {
    --ss-text-h2: var(--ss-fs-24);
    --ss-text-h1: var(--ss-fs-28);
    --ss-text-display: var(--ss-fs-40);
    --ss-text-title: var(--ss-fs-40);
    --ss-text-prose: var(--ss-fs-20);
    --ss-text-prose-small: var(--ss-fs-18);
    --ss-text-wordmark: var(--ss-fs-20);
    --ss-gutter: 24px;
  }
}
@media (min-width: 1200px) {
  :root { --ss-gutter: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   §2 BOOTSTRAP BRIDGE — Bootstrap 5.3 reads most of its look from CSS variables, so mapping
   those onto the tokens makes every Bootstrap component on every page (buttons, forms, tables,
   dropdowns, modals, badges, alerts, pagination) speak the same language without touching the
   markup. Where Bootstrap hard-codes a value, the override sits at Bootstrap's own specificity
   and wins by coming later (bundle.css loads after bootstrap.min.css). No @layer: unlayered
   page <style> blocks would then override the whole base.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme=light] {
  --bs-font-sans-serif: var(--ss-font-ui);
  --bs-font-monospace: var(--ss-font-mono);
  --bs-body-font-family: var(--ss-font-ui);
  --bs-body-font-size: var(--ss-text-body);
  --bs-body-font-weight: var(--ss-fw-regular);
  --bs-body-line-height: var(--ss-lh-ui);
  --bs-body-color: #2d2d2d;
  --bs-body-color-rgb: 45, 45, 45;
  --bs-body-bg: #ffffff;
  --bs-emphasis-color: #1a1a2e;
  --bs-secondary-color: #6c757d;
  --bs-tertiary-color: #8c959f;
  --bs-secondary-bg: #eef1f4;
  --bs-tertiary-bg: #f8f9fa;
  --bs-heading-color: #1a1a2e;
  --bs-link-color: #0969da;
  --bs-link-color-rgb: 9, 105, 218;
  --bs-link-hover-color: #0550ae;
  --bs-link-hover-color-rgb: 5, 80, 174;
  --bs-code-color: #2d2d2d;
  --bs-highlight-color: #2d2d2d;
  --bs-highlight-bg: #fff8e1;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-xl: 8px;
  --bs-border-radius-xxl: 8px;
  --bs-border-radius-2xl: 8px;
  --bs-border-radius-pill: 6px;
  --bs-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --bs-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --bs-box-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.08);
  --bs-box-shadow-inset: none;
  --bs-focus-ring-color: rgba(26, 82, 118, 0.35);
  --bs-form-valid-color: #1b7a43;
  --bs-form-valid-border-color: #27ae60;
  --bs-form-invalid-color: #c0392b;
  --bs-form-invalid-border-color: #c0392b;
  --bs-primary: #1a1a2e;
  --bs-primary-rgb: 26, 26, 46;
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success: #1b7a43;
  --bs-success-rgb: 27, 122, 67;
  --bs-info: #1a5276;
  --bs-info-rgb: 26, 82, 118;
  --bs-warning: #9a6700;
  --bs-warning-rgb: 154, 103, 0;
  --bs-danger: #c0392b;
  --bs-danger-rgb: 192, 57, 43;
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark: #1a1a2e;
  --bs-dark-rgb: 26, 26, 46;
  --bs-primary-text-emphasis: #1a1a2e;
  --bs-primary-bg-subtle: #eef1f4;
  --bs-primary-border-subtle: #dee2e6;
  --bs-success-text-emphasis: #1b7a43;
  --bs-success-bg-subtle: #eaf7ef;
  --bs-success-border-subtle: #b6e1c8;
  --bs-danger-text-emphasis: #c0392b;
  --bs-danger-bg-subtle: #fdf2f0;
  --bs-danger-border-subtle: #eccfcb;
  --bs-warning-text-emphasis: #9a6700;
  --bs-warning-bg-subtle: #fff8e1;
  --bs-warning-border-subtle: #e9b43a;
  --bs-info-text-emphasis: #1a5276;
  --bs-info-bg-subtle: #eef1f4;
  --bs-info-border-subtle: #dee2e6;
  --bs-secondary-text-emphasis: #2d2d2d;
  --bs-secondary-bg-subtle: #f8f9fa;
  --bs-secondary-border-subtle: #dee2e6;
  --bs-light-text-emphasis: #2d2d2d;
  --bs-light-bg-subtle: #f8f9fa;
  --bs-light-border-subtle: #dee2e6;
  --bs-dark-text-emphasis: #1a1a2e;
  --bs-dark-bg-subtle: #eef1f4;
  --bs-dark-border-subtle: #adb5bd;
}

.btn {
  --bs-btn-font-family: var(--ss-font-ui);
  --bs-btn-font-size: var(--ss-text-ui);
  --bs-btn-font-weight: var(--ss-fw-strong);
  --bs-btn-line-height: 1.2;
  --bs-btn-padding-x: var(--ss-space-4);
  --bs-btn-padding-y: 10px;
  --bs-btn-border-radius: var(--ss-radius);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: 0.55;
  min-height: var(--ss-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-space-2);
}
.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-x: var(--ss-space-3);
  --bs-btn-padding-y: 6px;
  --bs-btn-font-size: var(--ss-text-ui);
  --bs-btn-border-radius: var(--ss-radius);
  min-height: var(--ss-control-sm);
}
.btn-lg,
.btn-group-lg > .btn {
  --bs-btn-padding-x: var(--ss-space-6);
  --bs-btn-padding-y: 12px;
  --bs-btn-font-size: var(--ss-text-body);
  --bs-btn-border-radius: var(--ss-radius);
  min-height: var(--ss-control-lg);
}
.btn-primary,
.btn-dark {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #1a1a2e;
  --bs-btn-border-color: #1a1a2e;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #2c2c4a;
  --bs-btn-hover-border-color: #2c2c4a;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #2c2c4a;
  --bs-btn-active-border-color: #2c2c4a;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #1a1a2e;
  --bs-btn-disabled-border-color: #1a1a2e;
}
.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
  --bs-btn-color: #1a1a2e;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #dee2e6;
  --bs-btn-hover-color: #1a1a2e;
  --bs-btn-hover-bg: #eef1f4;
  --bs-btn-hover-border-color: #adb5bd;
  --bs-btn-active-color: #1a1a2e;
  --bs-btn-active-bg: #eef1f4;
  --bs-btn-active-border-color: #adb5bd;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: #ffffff;
  --bs-btn-disabled-border-color: #dee2e6;
}
.btn-success {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #1b7a43;
  --bs-btn-border-color: #1b7a43;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #186b3b;
  --bs-btn-hover-border-color: #186b3b;
  --bs-btn-active-bg: #186b3b;
  --bs-btn-active-border-color: #186b3b;
}
.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #c0392b;
  --bs-btn-border-color: #c0392b;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #a93226;
  --bs-btn-hover-border-color: #a93226;
  --bs-btn-active-bg: #a93226;
  --bs-btn-active-border-color: #a93226;
}
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #dee2e6;
  --bs-btn-hover-bg: #eef1f4;
  --bs-btn-hover-border-color: #adb5bd;
  --bs-btn-active-bg: #eef1f4;
}
.btn-outline-success { --bs-btn-color: #1b7a43; --bs-btn-hover-color: #1b7a43; --bs-btn-active-color: #1b7a43; }
.btn-outline-danger { --bs-btn-color: #c0392b; --bs-btn-hover-color: #c0392b; --bs-btn-active-color: #c0392b; }
.btn-outline-warning { --bs-btn-color: #9a6700; --bs-btn-hover-color: #9a6700; --bs-btn-active-color: #9a6700; }
.btn-outline-info { --bs-btn-color: #1a5276; --bs-btn-hover-color: #1a5276; --bs-btn-active-color: #1a5276; }
.btn-link {
  --bs-btn-font-weight: var(--ss-fw-regular);
  --bs-btn-color: #1a5276;
  --bs-btn-hover-color: #0d3b54;
  --bs-btn-active-color: #0d3b54;
}
.btn:focus-visible,
.btn-close:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.accordion-button:focus-visible {
  box-shadow: none;
  outline: var(--ss-focus-ring);
  outline-offset: var(--ss-focus-offset);
}
.btn-close:focus,
.accordion-button:focus,
.page-link:focus,
.form-check-input:focus,
.form-range:focus::-webkit-slider-thumb {
  box-shadow: none;
}

.form-control,
.form-select {
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-input);
  line-height: var(--ss-lh-ui);
  color: var(--ss-text);
  background-color: var(--ss-surface);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  min-height: var(--ss-control);
}
.form-control-sm,
.form-select-sm {
  font-size: var(--ss-text-input);
  min-height: var(--ss-control-sm);
  border-radius: var(--ss-radius);
}
.form-control-lg,
.form-select-lg {
  font-size: var(--ss-text-input);
  min-height: var(--ss-control-lg);
  border-radius: var(--ss-radius);
}
.form-control::placeholder { color: var(--ss-text-tertiary); opacity: 1; }
.form-control:focus,
.form-select:focus {
  color: var(--ss-text);
  border-color: var(--ss-focus-color);
  box-shadow: none;
  outline: var(--ss-focus-ring);
  outline-offset: 0;
}
.form-label {
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text);
  margin-bottom: var(--ss-space-1);
}
.form-text { font-size: var(--ss-text-meta); color: var(--ss-text-secondary); }
.form-check-label { font-size: var(--ss-text-ui); }
.form-check-input:checked { background-color: var(--ss-navy); border-color: var(--ss-navy); }
.form-check-input:focus-visible { outline: var(--ss-focus-ring); outline-offset: var(--ss-focus-offset); }
.input-group-text {
  font-size: var(--ss-text-ui);
  color: var(--ss-text-secondary);
  background-color: var(--ss-surface-alt);
  border-color: var(--ss-rule);
}

.dropdown-menu {
  --bs-dropdown-font-size: var(--ss-text-ui);
  --bs-dropdown-color: #2d2d2d;
  --bs-dropdown-border-color: #dee2e6;
  --bs-dropdown-border-radius: var(--ss-radius-lg);
  --bs-dropdown-box-shadow: var(--ss-shadow);
  --bs-dropdown-link-color: #2d2d2d;
  --bs-dropdown-link-hover-color: #1a1a2e;
  --bs-dropdown-link-hover-bg: #eef1f4;
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: #1a1a2e;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-divider-bg: #e9ecef;
  box-shadow: var(--ss-shadow);
}
.nav {
  --bs-nav-link-font-size: var(--ss-text-ui);
  --bs-nav-link-font-weight: var(--ss-fw-strong);
  --bs-nav-link-color: #1a5276;
  --bs-nav-link-hover-color: #0d3b54;
  --bs-nav-link-disabled-color: #8c959f;
}
.nav-tabs {
  --bs-nav-tabs-border-color: #dee2e6;
  --bs-nav-tabs-border-radius: var(--ss-radius);
  --bs-nav-tabs-link-hover-border-color: #eef1f4 #eef1f4 #dee2e6;
  --bs-nav-tabs-link-active-color: #1a1a2e;
  --bs-nav-tabs-link-active-bg: #ffffff;
  --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #ffffff;
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--ss-radius);
  --bs-nav-pills-link-active-color: #ffffff;
  --bs-nav-pills-link-active-bg: #1a1a2e;
}
.pagination {
  --bs-pagination-font-size: var(--ss-text-ui);
  --bs-pagination-color: #1a5276;
  --bs-pagination-bg: #ffffff;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-border-radius: var(--ss-radius);
  --bs-pagination-hover-color: #0d3b54;
  --bs-pagination-hover-bg: #eef1f4;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-focus-color: #0d3b54;
  --bs-pagination-focus-bg: #eef1f4;
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: #1a1a2e;
  --bs-pagination-active-border-color: #1a1a2e;
  --bs-pagination-disabled-color: #8c959f;
}
.badge {
  --bs-badge-padding-x: 6px;
  --bs-badge-padding-y: 2px;
  --bs-badge-font-size: var(--ss-text-label);
  --bs-badge-font-weight: var(--ss-fw-strong);
  --bs-badge-border-radius: var(--ss-radius-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.alert {
  --bs-alert-border-radius: var(--ss-radius);
  --bs-alert-padding-x: var(--ss-space-4);
  --bs-alert-padding-y: var(--ss-space-3);
  font-size: var(--ss-text-body);
}
.card {
  --bs-card-border-color: #dee2e6;
  --bs-card-border-radius: var(--ss-radius);
  --bs-card-inner-border-radius: 5px;
  --bs-card-cap-bg: #f8f9fa;
  --bs-card-spacer-x: var(--ss-space-4);
  --bs-card-spacer-y: var(--ss-space-4);
  --bs-card-title-color: #1a1a2e;
  --bs-card-box-shadow: none;
}
.modal {
  --bs-modal-border-radius: var(--ss-radius-lg);
  --bs-modal-inner-border-radius: 7px;
  --bs-modal-box-shadow: var(--ss-shadow);
  --bs-modal-border-color: #dee2e6;
  --bs-modal-header-border-color: #dee2e6;
  --bs-modal-footer-border-color: #dee2e6;
  --bs-modal-title-line-height: var(--ss-lh-snug);
}
.modal-backdrop {
  --bs-backdrop-bg: #1a1a2e;
  --bs-backdrop-opacity: 0.5;
}
.list-group {
  --bs-list-group-border-color: #dee2e6;
  --bs-list-group-border-radius: var(--ss-radius);
  --bs-list-group-action-hover-bg: #eef1f4;
  --bs-list-group-active-color: #ffffff;
  --bs-list-group-active-bg: #1a1a2e;
  --bs-list-group-active-border-color: #1a1a2e;
}
.table {
  --bs-table-color: #2d2d2d;
  --bs-table-bg: transparent;
  --bs-table-border-color: #e9ecef;
  --bs-table-striped-bg: #f8f9fa;
  --bs-table-hover-bg: #eef1f4;
  --bs-table-active-bg: #eef1f4;
  font-size: var(--ss-text-ui);
  font-variant-numeric: tabular-nums;
}
.table > thead > tr > th {
  font-size: var(--ss-text-label);
  font-weight: var(--ss-fw-strong);
  letter-spacing: var(--ss-ls-caps);
  text-transform: uppercase;
  color: var(--ss-text-secondary);
  border-bottom: 1px solid var(--ss-rule);
  white-space: nowrap;
}
.tooltip {
  --bs-tooltip-font-size: var(--ss-text-meta);
  --bs-tooltip-bg: #1a1a2e;
  --bs-tooltip-border-radius: var(--ss-radius-sm);
}
.popover {
  --bs-popover-font-size: var(--ss-text-ui);
  --bs-popover-border-color: #dee2e6;
  --bs-popover-border-radius: var(--ss-radius-lg);
  --bs-popover-box-shadow: var(--ss-shadow);
}
.progress,
.progress-stacked {
  --bs-progress-bg: #e9ecef;
  --bs-progress-bar-bg: #1a1a2e;
  --bs-progress-border-radius: var(--ss-radius-sm);
}
.navbar { --bs-navbar-brand-font-size: var(--ss-text-wordmark); }
.text-muted, .text-body-secondary { color: var(--ss-text-secondary) !important; }
.small, small { font-size: var(--ss-text-meta); }
.fw-bold, .fw-bolder, .fw-semibold, .fw-medium { font-weight: var(--ss-fw-strong) !important; }
.lead { font-size: var(--ss-text-lead); font-weight: var(--ss-fw-regular); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   §3 BASE ELEMENTS — plain element selectors: they beat Bootstrap's reboot by order and lose
   to any class, so a component always decides its own look.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-body);
  line-height: var(--ss-lh-ui);
  color: var(--ss-text);
  background-color: var(--ss-surface);
  font-kerning: normal;
  /* Never fake a weight: Plex has 400 and 600, SS Text 400 and 700; asking for 500 or 800
     must pick a real cut, not smear one. */
  font-synthesis-weight: none;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ss-font-ui);
  font-weight: var(--ss-fw-strong);
  line-height: var(--ss-lh-snug);
  color: var(--ss-heading);
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: var(--ss-space-3);
}
h1, .h1 { font-size: var(--ss-text-h1); letter-spacing: var(--ss-ls-heading); }
h2, .h2 { font-size: var(--ss-text-h2); }
h3, .h3 { font-size: var(--ss-text-h3); }
h4, .h4, h5, .h5, h6, .h6 { font-size: var(--ss-text-body); }
p { margin-bottom: var(--ss-space-3); }
b, strong { font-weight: var(--ss-fw-strong); }

/* Links: (0,0,1) on purpose. The old a:link:not(.btn) rule was (0,2,1), so every container
   that coloured its own links — a dark footer, a navy chat bubble — silently lost to it
   (2026-09-13). Now any class wins, and buttons style themselves. */
a {
  color: var(--ss-link);
  text-decoration: none;            /* underlined on hover only (the owner, 2026-09-22) */
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}
a:where(:hover) {
  color: var(--ss-link-hover);
  text-decoration: underline;
}
/* No visited colour anywhere: every link reads as a new one (the owner, 2026-09-25; problem links
   used to turn a purple so dark it read as body text). `a` above covers visited links too. */

code, kbd, samp, pre {
  font-family: var(--ss-font-mono);
}
code {
  font-size: var(--ss-text-ui);
  color: var(--ss-text);
}
pre {
  font-size: var(--ss-text-ui);
  line-height: var(--ss-lh-ui);
  background-color: var(--ss-surface-alt);
  color: var(--ss-text);
  border: 1px solid var(--ss-rule);
  padding: var(--ss-space-3) var(--ss-space-4);
  border-radius: var(--ss-radius);
}
pre code { font-size: inherit; }
hr { border-color: var(--ss-rule); opacity: 1; }

/* Form controls take the page's typeface. Chrome's own stylesheet gives buttons and inputs the
   system font, which Bootstrap's reboot undoes — but the editor and the settings page run without
   Bootstrap, and their toolbars came out in Arial. */
button, input, optgroup, select, textarea { font-family: inherit; }
.CodeMirror { font-family: var(--ss-font-mono); }

/* Every text control reads at 16px. Below that iOS Safari zooms the page on focus, and until the
   September 2026 type unification page styles set 12–14px on 34 inputs. The !important is
   deliberate: this is an accessibility floor, not a style a page may override. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="color"]):not([type="hidden"]),
select,
textarea {
  font-size: var(--ss-text-input) !important;
}
/* The browser's own file button, on the pages that show a bare file input (settings, upload). */
input[type="file"] { font-size: var(--ss-text-ui); }
input[type="file"]::file-selector-button {
  min-height: var(--ss-control-sm);
  margin-right: var(--ss-space-3);
  padding: 0 var(--ss-space-3);
  font: inherit;
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text);
  background-color: var(--ss-surface);
  border: 1px solid var(--ss-rule-strong);
  border-radius: var(--ss-radius);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background-color: var(--ss-surface-hover); }
/* A selected formula is painted the same in mathRender.js getMathCss (mjx-container.mjx-selected). */
::selection { background: rgba(26, 82, 118, 0.18); }

/* One focus style for everything a keyboard can reach. */
:focus-visible {
  outline: var(--ss-focus-ring);
  outline-offset: var(--ss-focus-offset);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Server- and client-rendered formulas are SVG paths in MathJax's TeX font (Computer Modern
   Regular). SS Text is the heavier Book cut, so the formulas get the same weight added as a
   stroke; calibrated by eye and by stem darkness at 1x on /ru/5.3.12. */
mjx-container[jax="SVG"] > svg > g {
  stroke-width: var(--ss-math-stroke);
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   §4 READING TYPE — how physics is set: SS Text prose, titles, labels, captions.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* A citation's target in a solution's reference list (<a id="ref-3">, reached from "[3]" in the
   text) lands clear of the sticky header, as a numbered equation does (mathRender.js). */
[id^="ref-"] { scroll-margin-top: 6rem; }
/* An equation numbered by hand ("$x$ (1)", lib/localRefs.js) is a target in the same way. */
.eq-number { scroll-margin-top: 6rem; }
.eq-number:target { background-color: rgba(26, 82, 118, 0.10); }

.ss-prose {
  font-family: var(--ss-font-text);
  font-size: var(--ss-text-prose);
  line-height: var(--ss-lh-prose);
  color: var(--ss-text);
  max-width: 34em;
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
}
/* Ragged right, as journals set text on screen. Justified CM without reliable hyphenation (Chrome
   fetches its Russian dictionary lazily, some browsers have none) opens rivers on every line. */
.ss-prose mjx-container[jax="SVG"][display="true"] { margin: 0.6em 0; }
.ss-prose .ss-eq mjx-container[jax="SVG"][display="true"] { margin: 0; }
.ss-prose p { margin: 0; }
.ss-prose p + p { text-indent: 1em; }
.ss-prose .ss-eq,
.ss-prose .ss-eq + p,
.ss-prose .ss-image + p,
.ss-prose figure + p,
.ss-prose h1 + p, .ss-prose h2 + p, .ss-prose h3 + p, .ss-prose h4 + p, .ss-prose h5 + p, .ss-prose h6 + p,
.ss-prose ul + p, .ss-prose ol + p, .ss-prose pre + p, .ss-prose table + p, .ss-prose blockquote + p {
  text-indent: 0;
}
.ss-prose .ss-eq {
  margin: 0.45em 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}
.ss-prose h1, .ss-prose h2, .ss-prose h3, .ss-prose h4, .ss-prose h5, .ss-prose h6 {
  font-family: var(--ss-font-text);
  font-weight: var(--ss-fw-text-bold);
  font-size: var(--ss-text-prose);
  line-height: var(--ss-lh-tight);
  letter-spacing: 0;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  margin: 1.1em 0 0.4em;
}
.ss-prose ul, .ss-prose ol { margin: 0.5em 0; padding-left: 1.4em; text-align: left; }
.ss-prose li + li { margin-top: 0.2em; }
.ss-prose a { hyphens: manual; -webkit-hyphens: manual; }
.ss-prose img { max-width: 100%; height: auto; }
.ss-prose figure,
.ss-image {
  margin: 0.8em 0;
  text-align: center;
  text-indent: 0;
}
/* Captions upright and a size down, as LaTeX and the Physical Review set them. An italic here
   cost every solution page with a figure two more font files (50 KB) for one line of text. */
.ss-prose figcaption,
.ss-image figcaption {
  font-family: var(--ss-font-text);
  font-style: normal;
  font-size: var(--ss-text-prose-small);
  line-height: var(--ss-lh-snug);
  color: var(--ss-text);
  margin-top: 0.3em;
  text-align: center;
  text-wrap: balance;
  hyphens: manual;
}
.ss-prose blockquote {
  margin: 0.8em 0;
  padding-left: 1em;
  border-left: 3px solid var(--ss-rule);
  color: var(--ss-text-secondary);
  text-align: left;
}
.ss-prose code {
  font-size: var(--ss-text-prose-small);
  background: var(--ss-surface-alt);
  padding: 0 0.2em;
  border-radius: var(--ss-radius-sm);
}
.ss-prose pre {
  font-size: var(--ss-text-ui);
  text-align: left;
  hyphens: manual;
  overflow-x: auto;
  margin: 0.8em 0;
}
.ss-prose pre code { background: none; padding: 0; }
.ss-prose table {
  font-size: var(--ss-text-prose-small);
  font-variant-numeric: lining-nums tabular-nums;
  border-collapse: collapse;
  margin: 0.8em auto;
  text-align: left;
}
.ss-prose th, .ss-prose td { padding: 4px 12px; border-bottom: 1px solid var(--ss-rule-soft); }
.ss-prose th { font-weight: var(--ss-fw-text-bold); border-bottom-color: var(--ss-rule); }
.ss-prose hr { margin: 1.5em 0; }
.ss-prose small { font-size: var(--ss-text-prose-small); }
/* Compact prose: statements in cards, the homepage popup, previews. Always 18px, ragged right. */
.ss-prose--compact {
  font-size: var(--ss-fs-18);
  max-width: none;
  text-align: left;
}
.ss-prose--compact .ss-image figcaption,
.ss-prose--compact figcaption,
.ss-prose--compact small { font-size: var(--ss-fs-16); }

/* Sections of a solution, as typeset by js/solution-structure.js. */
.ss-prose .ss-sec { margin: 0; }
.ss-prose .ss-sec + .ss-sec,
.ss-prose .ss-sec + p,
.ss-prose .ss-sec + figure,
.ss-prose p + .ss-sec,
.ss-prose figure + .ss-sec { margin-top: var(--ss-space-6); }
/* Условие / Решение / Ответ are headings of the text like any other the author writes, so they
   are set like them (bold SS Text at the reading size, below), not as small grey interface
   labels, which read as a different font and colour on the same page (2026-09-14). */
.ss-prose .ss-label {
  font-family: var(--ss-font-text);
  font-size: var(--ss-text-prose);
  font-weight: var(--ss-fw-text-bold);
  line-height: var(--ss-lh-tight);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--ss-heading);
  hyphens: manual;
  margin: 0 0 var(--ss-space-2);
}
.ss-prose .ss-problem {
  padding: var(--ss-space-3) var(--ss-space-4);
  background: var(--ss-surface-alt);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
}
/* The answer box hugs what it holds. Full width, a one-line formula sat centred in 1,240px of
   empty box (2026-09-14); a long worded answer still wraps at the column's edge. */
.ss-prose .ss-answer {
  width: fit-content;
  max-width: 100%;
  padding: var(--ss-space-3) var(--ss-space-4);
  background: var(--ss-surface);
  border: 1px solid var(--ss-rule);
  border-left: 3px solid var(--ss-navy);
  border-radius: var(--ss-radius);
  text-align: left;
}
.ss-prose .ss-answer p + p { text-indent: 0; margin-top: 0.35em; }
.ss-prose .ss-answer .ss-eq { margin: 0.25em 0; }
.ss-prose .ss-answer > :first-child { margin-top: 0; }
.ss-prose .ss-answer > :last-child { margin-bottom: 0; }
.ss-prose .ss-sec--alternative { padding-top: var(--ss-space-6); border-top: 1px solid var(--ss-rule); }
.ss-prose .ss-sec--literature { font-size: var(--ss-text-prose-small); }
.ss-prose .ss-sec--literature p { padding-left: 1.8em; text-indent: -1.8em; text-align: left; }
.ss-prose .ss-sec--literature p + p { text-indent: -1.8em; margin-top: 0.3em; }
@media (min-width: 768px) {
  .ss-prose .ss-problem { padding: var(--ss-space-5) var(--ss-space-6); }
}

.ss-title {
  font-family: var(--ss-font-text);
  font-weight: var(--ss-fw-text-bold);
  font-size: var(--ss-text-title);
  line-height: var(--ss-lh-tight);
  color: var(--ss-heading);
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
  margin: 0 0 var(--ss-space-2);
}
.ss-display {
  font-family: var(--ss-font-display);
  font-weight: 600;
  font-synthesis: none;
  font-size: var(--ss-text-display);
  line-height: var(--ss-lh-tight);
  color: var(--ss-heading);
  letter-spacing: 0;
  margin: 0 0 var(--ss-space-3);
}
.ss-kicker,
.ss-label {
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-label);
  font-weight: var(--ss-fw-strong);
  line-height: var(--ss-lh-snug);
  letter-spacing: var(--ss-ls-caps);
  text-transform: uppercase;
  color: var(--ss-text-secondary);
}
.ss-lead {
  font-size: var(--ss-text-lead);
  line-height: var(--ss-lh-ui);
  color: var(--ss-text-secondary);
}
.ss-meta {
  font-size: var(--ss-text-meta);
  line-height: var(--ss-lh-ui);
  color: var(--ss-text-secondary);
}
.ss-num {
  font-family: var(--ss-font-text);
  font-weight: var(--ss-fw-text-bold);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
/* Savchenko's own ∗ for harder problems — the book's marker, always a <sup class="ss-star">.
   In interface text the glyph comes from SS Symbols (NewCM Math, a few KB, any weight), so a table
   of starred problems never pulls in a whole serif font for one character; inside a typeset
   title or problem number it is SS Text's own bold asterisk, which that text has loaded anyway. */
.ss-star {
  font-family: 'SS Symbols', var(--ss-font-text);
  font-size: 0.75em;
  font-style: normal;
  line-height: 0;
  vertical-align: 0.45em;
  margin-left: 0.04em;
}
.ss-title .ss-star,
.ss-num .ss-star {
  font-family: var(--ss-font-text);
  font-weight: var(--ss-fw-text-bold);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   §5 COMPONENTS — one way to draw each thing. Class-only selectors (0,1,0), states (0,2,0).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.ss-container {
  width: 100%;
  max-width: calc(var(--ss-w-content) + 2 * var(--ss-gutter));
  margin-inline: auto;
  padding-inline: var(--ss-gutter);
}
.ss-container--text { max-width: calc(var(--ss-w-text) + 2 * var(--ss-gutter)); }
.ss-container--narrow { max-width: calc(var(--ss-w-narrow) + 2 * var(--ss-gutter)); }
.ss-container--full { max-width: none; }
.ss-page { padding-block: var(--ss-space-6) var(--ss-space-9); }
.ss-page-head { margin-bottom: var(--ss-space-6); }
.ss-page-head > h1,
.ss-page-head > .ss-title,
.ss-page-head > .ss-display { margin-bottom: var(--ss-space-2); }
.ss-page-head > .ss-lead { margin: 0; }
.ss-page-head > .ss-kicker { margin-bottom: var(--ss-space-2); }

.ss-card {
  background-color: var(--ss-surface);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  padding: var(--ss-space-4);
}
.ss-card--alt { background-color: var(--ss-surface-alt); }
@media (min-width: 768px) {
  .ss-card { padding: var(--ss-space-5) var(--ss-space-6); }
}
.content-card {
  background-color: var(--ss-surface);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
}

.ss-btn,
.btn-ss-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-space-2);
  min-height: var(--ss-control);
  padding: 0 var(--ss-space-4);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--ss-radius);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ss-btn:disabled, .ss-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.ss-btn--primary,
.btn-ss-primary {
  background-color: var(--ss-navy);
  border-color: var(--ss-navy);
  color: var(--ss-on-navy);
}
.ss-btn--primary:hover,
.btn-ss-primary:hover {
  background-color: var(--ss-navy-hover);
  border-color: var(--ss-navy-hover);
  color: var(--ss-on-navy);
}
.ss-btn--secondary {
  background-color: var(--ss-surface);
  border-color: var(--ss-rule);
  color: var(--ss-navy);
}
.ss-btn--secondary:hover {
  background-color: var(--ss-surface-hover);
  border-color: var(--ss-rule-strong);
  color: var(--ss-navy);
}
.ss-btn--ghost {
  background-color: transparent;
  color: var(--ss-link);
}
.ss-btn--ghost:hover {
  background-color: var(--ss-surface-hover);
  color: var(--ss-link-hover);
}
.ss-btn--danger {
  background-color: var(--ss-error);
  border-color: var(--ss-error);
  color: var(--ss-on-navy);
}
.ss-btn--danger:hover { background-color: #a93226; border-color: #a93226; color: var(--ss-on-navy); }
.ss-btn--sm { min-height: var(--ss-control-sm); padding: 0 var(--ss-space-3); }
.ss-btn--lg { min-height: var(--ss-control-lg); padding: 0 var(--ss-space-6); font-size: var(--ss-text-body); }
.ss-btn--block { display: flex; width: 100%; }

.ss-input {
  display: block;
  width: 100%;
  min-height: var(--ss-control);
  padding: 8px 12px;
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-input);
  line-height: var(--ss-lh-ui);
  color: var(--ss-text);
  background-color: var(--ss-surface);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
}
.ss-input::placeholder { color: var(--ss-text-tertiary); opacity: 1; }
.ss-input:focus { border-color: var(--ss-focus-color); outline: var(--ss-focus-ring); outline-offset: 0; }
textarea.ss-input { min-height: 96px; resize: vertical; }
.ss-field + .ss-field { margin-top: var(--ss-space-4); }
.ss-field > label {
  display: block;
  margin-bottom: var(--ss-space-1);
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text);
}
.ss-field-hint { margin-top: var(--ss-space-1); font-size: var(--ss-text-meta); color: var(--ss-text-secondary); }

.ss-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-1);
  padding: 1px 6px;
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-label);
  font-weight: var(--ss-fw-strong);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--ss-text);
  background-color: var(--ss-surface-alt);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-sm);
  white-space: nowrap;
}
.ss-badge--accent { color: var(--ss-accent); background-color: var(--ss-accent-soft); border-color: #dcc6e6; }
.ss-badge--success { color: var(--ss-success-strong); background-color: var(--ss-success-soft); border-color: #b6e1c8; }
.ss-badge--error { color: var(--ss-error); background-color: var(--ss-error-soft); border-color: var(--ss-error-rule); }
.ss-badge--warning { color: var(--ss-warning); background-color: var(--ss-warning-soft); border-color: var(--ss-warning-rule); }
.ss-badge--solid { color: var(--ss-on-navy); background-color: var(--ss-navy); border-color: var(--ss-navy); }
.ss-count[hidden] { display: none; }
.ss-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--ss-text-label);
  font-weight: var(--ss-fw-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ss-on-navy);
  background-color: var(--ss-error);
  border-radius: 9px;
}

.ss-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ss-text-ui);
  font-variant-numeric: tabular-nums;
  color: var(--ss-text);
}
.ss-table th {
  font-size: var(--ss-text-label);
  font-weight: var(--ss-fw-strong);
  letter-spacing: var(--ss-ls-caps);
  text-transform: uppercase;
  color: var(--ss-text-secondary);
  text-align: left;
  padding: var(--ss-space-2) var(--ss-space-3);
  border-bottom: 1px solid var(--ss-rule);
  white-space: nowrap;
}
.ss-table td {
  padding: var(--ss-space-2) var(--ss-space-3);
  border-bottom: 1px solid var(--ss-rule-soft);
  vertical-align: top;
}
.ss-table tbody tr:hover { background-color: var(--ss-surface-alt); }
.ss-table .num { text-align: right; }
.ss-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ss-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ss-space-5);
  border-bottom: 1px solid var(--ss-rule);
  margin-bottom: var(--ss-space-5);
}
.ss-tabs > a,
.ss-tabs > button {
  display: inline-block;
  padding: var(--ss-space-3) 0;
  margin-bottom: -1px;
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.ss-tabs > a:hover,
.ss-tabs > button:hover { color: var(--ss-navy); }
.ss-tabs > .is-active,
.ss-tabs > [aria-selected="true"],
.ss-tabs > [aria-current="page"] {
  color: var(--ss-navy);
  border-bottom-color: var(--ss-navy);
}
.ss-seg {
  display: inline-flex;
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  overflow: hidden;
  background-color: var(--ss-surface);
}
.ss-seg > * {
  padding: 6px var(--ss-space-3);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.ss-seg > * + * { border-left: 1px solid var(--ss-rule); }
.ss-seg > .is-active,
.ss-seg > [aria-pressed="true"] { color: var(--ss-on-navy); background-color: var(--ss-navy); }

.ss-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--ss-space-1);
  margin: 0 0 var(--ss-space-2);
  padding: 0;
  list-style: none;
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-meta);
  line-height: var(--ss-lh-ui);
  color: var(--ss-text-secondary);
}
.ss-breadcrumb a { color: var(--ss-link); text-decoration: none; }
.ss-breadcrumb a:hover { color: var(--ss-link-hover); text-decoration: underline; }
.ss-breadcrumb .ss-sep { color: var(--ss-text-tertiary); }

.ss-alert {
  padding: var(--ss-space-3) var(--ss-space-4);
  font-size: var(--ss-text-body);
  line-height: var(--ss-lh-ui);
  color: var(--ss-text);
  background-color: var(--ss-surface-alt);
  border: 1px solid var(--ss-rule);
  border-left: 3px solid var(--ss-text-secondary);
  border-radius: var(--ss-radius);
}
.ss-alert--error { background-color: var(--ss-error-soft); border-color: var(--ss-error-rule); border-left-color: var(--ss-error); }
.ss-alert--success { background-color: var(--ss-success-soft); border-color: #b6e1c8; border-left-color: var(--ss-success); }
.ss-alert--warning { background-color: var(--ss-warning-soft); border-color: var(--ss-warning-rule); border-left-color: var(--ss-warning); }
.ss-alert--info { background-color: var(--ss-surface-alt); border-color: var(--ss-rule); border-left-color: var(--ss-link); }
.ss-msg-error { color: var(--ss-error); font-size: var(--ss-text-ui); }
.ss-msg-success { color: var(--ss-success-strong); font-size: var(--ss-text-ui); }

.ss-empty {
  padding: var(--ss-space-7) var(--ss-space-4);
  text-align: center;
  font-size: var(--ss-text-body);
  color: var(--ss-text-secondary);
}
.ss-avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; background-color: var(--ss-surface-hover); }
.ss-avatar--24 { width: 24px; height: 24px; }
.ss-avatar--32 { width: 32px; height: 32px; }
.ss-avatar--40 { width: 40px; height: 40px; }
.ss-avatar--64 { width: 64px; height: 64px; }
.ss-avatar--96 { width: 96px; height: 96px; }

.ss-popover {
  background-color: var(--ss-surface);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow);
}

/* The five account pages (login, register, forgot/reset password, recover account) share one
   markup — .container1, .form-group, .submit-button — that was styled by css-latex/login.css
   with 37 !importants and a fixed 400px width that overflowed small phones. Drawn here once. */
.auth-page .container1 {
  width: 100%;
  max-width: calc(var(--ss-w-narrow) + 2 * var(--ss-gutter));
  margin: var(--ss-space-8) auto var(--ss-space-9);
  padding: 0 var(--ss-gutter);
}
.auth-page .container1 > h2 {
  font-size: var(--ss-text-h1);
  text-align: center;
  margin-bottom: var(--ss-space-6);
}
.auth-page .form-group { margin-bottom: var(--ss-space-4); }
.auth-page .form-group > label {
  display: block;
  margin-bottom: var(--ss-space-1);
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text);
}
.auth-page .container1 input[type="text"],
.auth-page .container1 input[type="email"],
.auth-page .container1 input[type="password"],
.auth-page .container1 select,
.auth-page .container1 textarea {
  display: block;
  width: 100%;
  min-height: var(--ss-control);
  padding: 8px 12px;
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-input);
  line-height: var(--ss-lh-ui);
  color: var(--ss-text);
  background-color: var(--ss-surface);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
}
.auth-page .container1 input:focus,
.auth-page .container1 select:focus,
.auth-page .container1 textarea:focus {
  border-color: var(--ss-focus-color);
  outline: var(--ss-focus-ring);
  outline-offset: 0;
}
.auth-page .password-container { position: relative; }
.auth-page .password-container input { padding-right: 44px; }
.auth-page .password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--ss-space-1);
  line-height: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.auth-page .eye-icon { width: 20px; height: 20px; opacity: 0.6; }
.auth-page .submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ss-control);
  margin-top: var(--ss-space-5);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-on-navy);
  background-color: var(--ss-navy);
  border: 1px solid var(--ss-navy);
  border-radius: var(--ss-radius);
  cursor: pointer;
}
.auth-page .submit-button:hover { background-color: var(--ss-navy-hover); border-color: var(--ss-navy-hover); }
.auth-page .container1 > p {
  margin: var(--ss-space-3) 0 0;
  font-size: var(--ss-text-ui);
  text-align: center;
  color: var(--ss-text-secondary);
}
.auth-page .container1 .error,
.auth-page .container1 .success {
  margin: 0 0 var(--ss-space-4);
  padding: var(--ss-space-3) var(--ss-space-4);
  font-size: var(--ss-text-ui);
  text-align: left;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--ss-radius);
}
.auth-page .container1 .error { color: var(--ss-error); background: var(--ss-error-soft); border-color: var(--ss-error-rule); border-left-color: var(--ss-error); }
.auth-page .container1 .success { color: var(--ss-success-strong); background: var(--ss-success-soft); border-color: #b6e1c8; border-left-color: var(--ss-success); }

.ss-auth {
  width: 100%;
  max-width: calc(var(--ss-w-narrow) + 2 * var(--ss-gutter));
  margin: var(--ss-space-8) auto var(--ss-space-9);
  padding-inline: var(--ss-gutter);
}
.ss-auth > h1,
.ss-auth > h2 {
  font-size: var(--ss-text-h1);
  text-align: center;
  margin-bottom: var(--ss-space-6);
}
.ss-auth .ss-btn--primary { width: 100%; margin-top: var(--ss-space-5); }
.ss-auth-links {
  margin-top: var(--ss-space-4);
  text-align: center;
  font-size: var(--ss-text-ui);
  color: var(--ss-text-secondary);
}
.ss-auth-links a { font-weight: var(--ss-fw-strong); }
.ss-auth-links p { margin: var(--ss-space-2) 0 0; }

/* Site footer — views/default/modern_footer.ejs, on every page including solutions. */
.ss-footer {
  margin-top: var(--ss-space-9);
  padding-block: var(--ss-space-8) var(--ss-space-6);
  background-color: var(--ss-navy);
  color: var(--ss-on-navy);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-ui);
  line-height: var(--ss-lh-ui);
  text-align: left;
}
.ss-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ss-space-7);
  margin-bottom: var(--ss-space-7);
}
/* Column titles are the header's own menu labels (Задачи, Обучение, Сообщество) and are set
   like them, in sentence case at the interface size. Spaced small capitals read as another
   typeface on the same page (2026-09-14). */
.ss-footer-title {
  margin: 0 0 var(--ss-space-3);
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ss-on-navy);
}
.ss-footer ul { list-style: none; margin: 0; padding: 0; }
.ss-footer li { display: flex; }
.ss-footer li + li { margin-top: var(--ss-space-2); }
.ss-footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-2);
  color: var(--ss-on-navy-muted);
  text-decoration: none;
}
.ss-footer a:hover { color: var(--ss-on-navy); text-decoration: underline; }
.ss-footer-icon { width: 14px; height: 14px; flex: none; }
.ss-footer-legal {
  margin: 0;
  padding-top: var(--ss-space-5);
  border-top: 1px solid var(--ss-on-navy-rule);
  font-size: var(--ss-text-meta);
  color: var(--ss-on-navy-muted);
}
.ss-footer-legal strong { font-weight: var(--ss-fw-strong); color: var(--ss-on-navy); }

/* Document pages — community guidelines, about, study guide: the text column, a typeset title,
   prose for the body. .ss-doc-bar holds the way back and the language switch. */
.ss-doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-2) var(--ss-space-4);
  margin-bottom: var(--ss-space-6);
  font-size: var(--ss-text-ui);
}
.ss-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-2);
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-link);
  text-decoration: none;
}
.ss-back:hover { color: var(--ss-link-hover); text-decoration: underline; }
.ss-back svg { width: 16px; height: 16px; flex: none; }
.ss-doc .ss-title { text-wrap: balance; }
.ss-doc .ss-prose { max-width: none; }
.ss-doc > .video-embed { margin-bottom: var(--ss-space-7); }
.ss-doc .ss-prose h2 { font-size: var(--ss-text-h2); margin: 1.6em 0 0.5em; }
.ss-doc .ss-prose > h2:first-child { margin-top: 0; }
.ss-prose .ss-clauses,
.ss-prose .ss-people { list-style: none; padding-left: 0; }
.ss-prose .ss-clauses > li + li { margin-top: 0.5em; }
.ss-prose .ss-clauses ol { list-style: lower-alpha; margin: 0.4em 0 0; padding-left: 2em; }
.ss-prose .ss-people > li + li { margin-top: 0.9em; }
.ss-doc-foot {
  margin-top: var(--ss-space-8);
  padding-top: var(--ss-space-4);
  border-top: 1px solid var(--ss-rule);
}
.ss-doc-aside { margin-top: var(--ss-space-8); }
.ss-doc-aside h2 { font-size: var(--ss-text-h3); margin: 0 0 var(--ss-space-2); }
.ss-doc-aside p { margin: 0 0 var(--ss-space-4); color: var(--ss-text-secondary); }
/* A picture of an interface control inside running text ("press Edit"). Not a button. */
.ss-inline-control {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-1);
  padding: 0 var(--ss-space-2);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-meta);
  font-weight: var(--ss-fw-strong);
  line-height: 1.6;
  color: var(--ss-text);
  background: var(--ss-surface);
  border: 1px solid var(--ss-rule-strong);
  border-radius: var(--ss-radius-sm);
  white-space: nowrap;
  text-indent: 0;
}
.ss-inline-control svg { width: 14px; height: 14px; }
/* Sized by the text; .ss-prose img (0,1,1) sets height: auto and would blow it up to its
   45 px attribute width... at the SVG's own ratio, which on the about page came out as a
   banner (2026-09-21), hence the img selector here. */
img.ss-latex-logo, .ss-prose img.ss-latex-logo { display: inline-block; height: 1.05em; width: auto; vertical-align: -0.28em; }

/* ss-codemod: on */

/* ───────────────────────────────────────────────────────────────────────────
   Brainstorm Room — rotating block (problem-page right rail)
   Academic, no gradients, subtle motion ("refined news ticker, not a casino").
   --------------------------------------------------------------------------- */
:root {
  --bs-accent: #7d3c98;          /* the "unified / both languages" purple already in the grid */
  --bs-accent-soft: #f3ecf7;
}

.bs-block {
  background: var(--ss-white);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow);
  padding: var(--ss-space-3) var(--ss-space-4);
  font-family: var(--ss-font-ui);
}

.bs-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-2);
  margin-bottom: var(--ss-space-2);
}

.bs-block__title {
  font-size: var(--ss-fs-14);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-heading);
  margin: 0;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
}

.bs-block__icon {
  color: var(--bs-accent);
  font-size: var(--ss-fs-13);
}

.bs-block__controls {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.bs-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: var(--ss-radius);
  background: transparent;
  color: var(--ss-text-secondary);
  font-size: var(--ss-fs-12);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bs-ctrl:hover {
  background: var(--ss-card-bg);
  color: var(--ss-navy);
}

.bs-ctrl:focus-visible {
  outline: none;
  border-color: var(--bs-accent);
}

/* Pause/play icon swap reflects the live state. */
.bs-ctrl--motion .bs-ctrl__play { display: none; }
.bs-ctrl--motion .bs-ctrl__pause { display: inline; }
.bs-block--static .bs-ctrl--motion .bs-ctrl__pause { display: none; }
.bs-block--static .bs-ctrl--motion .bs-ctrl__play { display: inline; }

/* Ticker: messages are stacked and crossfade; only the active one is visible. */
.bs-ticker {
  position: relative;
  overflow: hidden;
  min-height: 7.5em;
}

.bs-msg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.bs-msg.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
}

.bs-msg__meta {
  display: flex;
  align-items: center;
  gap: var(--ss-space-1);
  margin-bottom: var(--ss-space-1);
  font-size: var(--ss-fs-12);
  color: var(--ss-text-secondary);
  flex-wrap: wrap;
}

.bs-msg__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bs-msg__author {
  font-weight: var(--ss-fw-regular);
  color: var(--ss-link);
  text-decoration: none;
}
.bs-msg__author:hover { text-decoration: underline; }

.bs-msg__country { color: var(--ss-text-secondary); }

.bs-msg__lang {
  font-size: var(--ss-fs-12);
  font-weight: var(--ss-fw-strong);
  letter-spacing: 0.03em;
  color: var(--bs-accent);
  background: var(--bs-accent-soft);
  border-radius: var(--ss-radius-sm);
  padding: 0 var(--ss-space-1);
  line-height: 1.5;
}

.bs-msg__pin { color: var(--bs-accent); font-size: var(--ss-fs-12); }

.bs-msg__react { margin-left: auto; white-space: nowrap; }

.bs-msg__body {
  font-size: var(--ss-fs-13);
  line-height: 1.5;
  color: var(--ss-body-text);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bs-link { color: var(--ss-link); text-decoration: none; }
.bs-link:hover { text-decoration: underline; }

.bs-block__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-2);
  margin-top: var(--ss-space-2);
  padding-top: var(--ss-space-2);
  border-top: 1px solid var(--ss-border-card);
}

.bs-dots {
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
}

.bs-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ced4da;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.bs-dot:hover { background: var(--ss-text-secondary); }
.bs-dot.is-active { background: var(--bs-accent); transform: scale(1.25); }
.bs-dot:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 2px; }

.bs-cta {
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-regular);
  color: var(--ss-link);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-1);
}
.bs-cta:hover { color: var(--ss-link-hover); text-decoration: underline; }

.bs-empty__text {
  font-size: var(--ss-fs-13);
  color: var(--ss-text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--ss-space-2);
}

/* Collapsed (hidden) state: only the restore affordance shows. */
.bs-restore {
  display: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ss-text-secondary);
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-regular);
  cursor: pointer;
  padding: 0.1rem 0;
  gap: var(--ss-space-2);
  align-items: center;
}
.bs-restore .fa-lightbulb { color: var(--bs-accent); }
.bs-restore:hover { color: var(--ss-navy); }

.bs-block--hidden {
  padding: var(--ss-space-2) var(--ss-space-4);
}
.bs-block--hidden .bs-block__head,
.bs-block--hidden .bs-ticker,
.bs-block--hidden .bs-block__foot,
.bs-block--hidden .bs-related,
.bs-block--hidden .bs-empty { display: none; }
.bs-block--hidden .bs-restore { display: flex; }

/* Phase-4 "Discussion & Insights" related-problems strip (descriptive wiki links). */
.bs-related {
  margin-top: var(--ss-space-2);
  padding-top: var(--ss-space-2);
  border-top: 1px solid var(--ss-border-card);
}
.bs-related__title {
  font-size: var(--ss-fs-12);
  font-weight: var(--ss-fw-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ss-text-secondary);
  margin-bottom: var(--ss-space-1);
}
.bs-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-1);
}
.bs-related__list a {
  font-size: var(--ss-fs-13);
  color: var(--ss-link);
  text-decoration: none;
  line-height: 1.4;
}
.bs-related__list a:hover { text-decoration: underline; }

/* Honour reduced-motion: no rotation animation, ever. */
@media (prefers-reduced-motion: reduce) {
  .bs-msg {
    transition: none;
    transform: none;
  }
  .bs-dot { transition: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Brainstorm Room — full per-problem chat page (.bsr-*)
   --------------------------------------------------------------------------- */
.bsr-page {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--ss-space-4) var(--ss-space-4) var(--ss-space-9);
  font-family: var(--ss-font-ui);
}

.bsr-breadcrumb {
  font-size: var(--ss-fs-13);
  color: var(--ss-text-secondary);
  margin-bottom: var(--ss-space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-1);
  align-items: center;
}
.bsr-crumb { color: var(--ss-link); text-decoration: none; }
.bsr-crumb:hover { text-decoration: underline; }
.bsr-crumb-sep { color: var(--ss-text-tertiary); }

.bsr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ss-space-4);
  padding-bottom: var(--ss-space-3);
  margin-bottom: var(--ss-space-3);
  border-bottom: 1px solid var(--ss-border-card);
}
.bsr-title {
  font-size: var(--ss-fs-20);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-heading);
  margin: 0 0 var(--ss-space-1);
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
  flex-wrap: wrap;
}
.bsr-title-icon { color: var(--bs-accent); font-size: var(--ss-fs-16); }
.bsr-title-problem {
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-strong);
  color: var(--bs-accent);
  background: var(--bs-accent-soft);
  border-radius: var(--ss-radius);
  padding: 1px var(--ss-space-2);
}
.bsr-subtitle { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); margin: 0; line-height: 1.5; }
.bsr-back {
  flex-shrink: 0;
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-regular);
  color: var(--ss-link);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-1);
}
.bsr-back:hover { color: var(--ss-link-hover); text-decoration: underline; }

.bsr-older { text-align: center; margin-bottom: var(--ss-space-2); }
.bsr-older-btn {
  background: var(--ss-card-bg);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-radius);
  color: var(--ss-text-secondary);
  font-size: var(--ss-fs-13);
  padding: var(--ss-space-2) var(--ss-space-4);
  cursor: pointer;
}
.bsr-older-btn:hover { color: var(--ss-navy); }

/* The messages list is its own scroll container (an inline chat box). */
.bsr-messages {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 56vh;
  min-height: 220px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.bsr-room--inline .bsr-messages { max-height: 440px; }
.bsr-loading, .bsr-empty {
  text-align: center;
  color: var(--ss-text-secondary);
  font-size: var(--ss-fs-14);
  padding: var(--ss-space-7) var(--ss-space-4);
}

/* Inline embedding on the problem page */
.bsr-inline {
  border-top: 1px solid var(--ss-border-card);
  padding: var(--ss-space-4) var(--ss-space-5) var(--ss-space-2);
}
.bsr-inline-head { margin-bottom: var(--ss-space-2); }
.bsr-inline-title {
  font-size: var(--ss-fs-18);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-heading);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
}
.bsr-inline-icon { color: var(--bs-accent); font-size: var(--ss-fs-16); }
.bsr-inline-sub { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); margin: var(--ss-space-1) 0 0; line-height: 1.5; }
.bsr-inline .bsr-room { margin: 0; }

.bsr-msg {
  display: flex;
  gap: var(--ss-space-3);
  padding: var(--ss-space-2) var(--ss-space-2);
  border-radius: var(--ss-radius-lg);
}
.bsr-msg:hover { background: #fbfbfc; }
.bsr-msg:hover .bsr-msg-tools { opacity: 1; }
.bsr-msg.is-pinned { background: var(--bs-accent-soft); }

.bsr-msg-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.bsr-msg-col { min-width: 0; flex: 1; }

.bsr-msg-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ss-space-2);
  font-size: var(--ss-fs-13);
  color: var(--ss-text-secondary);
  margin-bottom: 0.15rem;
}
.bsr-msg-author { font-weight: var(--ss-fw-strong); color: var(--ss-link); text-decoration: none; }
.bsr-msg-author:hover { text-decoration: underline; }
.bsr-country { color: var(--ss-text-secondary); }
.bsr-lang {
  font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); letter-spacing: 0.03em;
  color: var(--bs-accent); background: var(--bs-accent-soft);
  border-radius: var(--ss-radius-sm); padding: 0 var(--ss-space-1);
}
.bsr-pinned { color: var(--bs-accent); font-weight: var(--ss-fw-regular); }
.bsr-edited { color: var(--ss-text-secondary); font-size: var(--ss-fs-12); }

.bsr-msg-tools { margin-left: auto; display: flex; gap: 0.1rem; opacity: 0; transition: opacity 0.12s; }
.bsr-mtool {
  background: none; border: none; color: var(--ss-text-secondary);
  width: 24px; height: 24px; border-radius: var(--ss-radius-sm); cursor: pointer; font-size: var(--ss-fs-12);
}
.bsr-mtool:hover { background: var(--ss-card-bg); color: var(--ss-navy); }
@media (hover: none) { .bsr-msg-tools { opacity: 1; } }

.bsr-msg-body {
  font-size: var(--ss-fs-14);
  line-height: 1.55;
  color: var(--ss-body-text);
  overflow-wrap: break-word;
}
.bsr-msg-body .bs-link { color: var(--ss-link); text-decoration: none; }
.bsr-msg-body .bs-link:hover { text-decoration: underline; }

.bsr-msg-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-1); margin-top: var(--ss-space-1); }
.bsr-chip {
  display: inline-flex; align-items: center; gap: var(--ss-space-1);
  border: 1px solid var(--ss-border-card); background: var(--ss-white);
  border-radius: var(--ss-radius); padding: 0 var(--ss-space-2); height: 24px;
  font-size: var(--ss-fs-12); color: var(--ss-body-text); cursor: pointer;
}
.bsr-chip.is-mine { border-color: var(--bs-accent); background: var(--bs-accent-soft); }
.bsr-chip span { color: var(--ss-text-secondary); }
.bsr-react-add {
  border: 1px dashed var(--ss-border-card); background: none; color: var(--ss-text-secondary);
  border-radius: var(--ss-radius-lg); height: 24px; padding: 0 var(--ss-space-2); font-size: var(--ss-fs-12); cursor: pointer;
}
.bsr-react-add:hover { color: var(--ss-navy); border-color: var(--ss-text-secondary); }
.bsr-picker {
  display: inline-flex; gap: 0.1rem; align-items: center;
  border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius-lg); padding: 1px var(--ss-space-1); background: var(--ss-white);
}
.bsr-pick { background: none; border: none; cursor: pointer; font-size: var(--ss-fs-14); padding: 2px var(--ss-space-1); border-radius: var(--ss-radius); }
.bsr-pick:hover { background: var(--ss-card-bg); }

/* Composer */
.bsr-composer {
  margin-top: var(--ss-space-4);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
}
.bsr-composer:focus-within { border-color: var(--ss-link); }
.bsr-composer-toolbar {
  display: flex; gap: var(--ss-space-1); padding: var(--ss-space-1) var(--ss-space-2);
  background: var(--ss-card-bg); border-bottom: 1px solid var(--ss-border-card);
}
.bsr-tool {
  background: none; border: 1px solid transparent; border-radius: var(--ss-radius-sm);
  color: var(--ss-text-secondary); font-size: var(--ss-fs-13); padding: 2px var(--ss-space-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--ss-space-1);
}
.bsr-tool:hover { background: var(--ss-surface-hover); }
.bsr-tool-hash { font-weight: var(--ss-fw-strong); color: var(--bs-accent); }
.bsr-input {
  width: 100%; min-height: 72px; border: none; outline: none; resize: vertical;
  padding: var(--ss-space-2) var(--ss-space-3); font-family: inherit; font-size: var(--ss-fs-16); line-height: 1.55;
}
.bsr-composer-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ss-space-2) var(--ss-space-3); border-top: 1px solid var(--ss-border-card);
}
.bsr-hint { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }
.bsr-send {
  background: var(--ss-primary-btn); color: var(--ss-white); border: none;
  border-radius: var(--ss-radius); padding: var(--ss-space-2) var(--ss-space-4); font-size: var(--ss-fs-14); font-weight: var(--ss-fw-regular); cursor: pointer;
}
.bsr-send:hover { background: var(--ss-primary-btn-hover); }
.bsr-send:disabled { opacity: 0.6; cursor: default; }

.bsr-edit { margin-top: var(--ss-space-1); }
.bsr-edit-input {
  width: 100%; min-height: 60px; resize: vertical; font-family: inherit; font-size: var(--ss-fs-16);
  border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius); padding: var(--ss-space-2); outline: none;
}
.bsr-edit-input:focus { border-color: var(--ss-link); }
.bsr-edit-actions { display: flex; justify-content: flex-end; gap: var(--ss-space-2); margin-top: var(--ss-space-2); }
.bsr-edit-cancel {
  background: none; border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius);
  padding: var(--ss-space-1) var(--ss-space-3); font-size: var(--ss-fs-13); color: var(--ss-text-secondary); cursor: pointer;
}
.bsr-edit-save {
  background: var(--ss-primary-btn); color: var(--ss-white); border: none;
  border-radius: var(--ss-radius); padding: var(--ss-space-1) var(--ss-space-4); font-size: var(--ss-fs-13); cursor: pointer;
}

.bsr-login-prompt {
  margin-top: var(--ss-space-4); text-align: center; font-size: var(--ss-fs-14); color: var(--ss-text-secondary);
  padding: var(--ss-space-4); background: var(--ss-card-bg); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius-lg);
}
.bsr-login-prompt a { color: var(--ss-link); }

@media (max-width: 575.98px) {
  .bsr-head { flex-direction: column; gap: var(--ss-space-2); }
  .bsr-back { align-self: flex-start; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Brainstorm Room — rail variant (YouTube-style live chat next to the solution)
   --------------------------------------------------------------------------- */
.bsr-room--rail {
  background: var(--ss-white);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bsr-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-2);
  padding: var(--ss-space-2) var(--ss-space-3);
  border-bottom: 1px solid var(--ss-border-card);
  background: var(--ss-card-bg);
}
.bsr-rail-title {
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-heading);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ss-space-1);
}
.bsr-rail-title .fa-comments { color: var(--bs-accent); font-size: var(--ss-fs-12); }
.bsr-rail-ctrls { display: flex; gap: 0.1rem; flex-shrink: 0; }
.bsr-rail-ctrl {
  width: 24px; height: 24px; border: none; background: none; cursor: pointer;
  color: var(--ss-text-secondary); border-radius: var(--ss-radius-sm); font-size: var(--ss-fs-12);
  display: inline-flex; align-items: center; justify-content: center;
}
.bsr-rail-ctrl:hover { background: var(--ss-surface-hover); color: var(--ss-navy); }
.bsr-ic-play { display: none; }
.bsr-room--static .bsr-ic-pause { display: none; }
.bsr-room--static .bsr-ic-play { display: inline; }

.bsr-rail-body { display: flex; flex-direction: column; min-height: 0; }
.bsr-room--rail .bsr-older { padding: var(--ss-space-1); margin: 0; }
.bsr-room--rail .bsr-messages {
  max-height: 46vh;
  min-height: 150px;
  padding: 0 var(--ss-space-2);
}
.bsr-room--rail .bsr-msg { gap: var(--ss-space-2); padding: var(--ss-space-2) var(--ss-space-1); }
.bsr-room--rail .bsr-msg-avatar { width: 28px; height: 28px; }
.bsr-room--rail .bsr-msg-top { font-size: var(--ss-fs-12); gap: var(--ss-space-1); }
.bsr-room--rail .bsr-msg-body { font-size: var(--ss-fs-13); }
.bsr-room--rail .bsr-msg-tools { opacity: 1; }          /* always visible in the narrow rail */
.bsr-room--rail .bsr-composer { margin: var(--ss-space-2); }
.bsr-room--rail .bsr-input { min-height: 48px; font-size: var(--ss-fs-16); }
.bsr-room--rail .bsr-login-prompt { margin: var(--ss-space-2); padding: var(--ss-space-3); font-size: var(--ss-fs-13); }
.bsr-room--rail .bs-related { margin: 0 var(--ss-space-3) var(--ss-space-3); padding-top: var(--ss-space-2); }

/* Paused: a thin hint that the live feed is on hold. */
.bsr-room--rail.bsr-room--static .bsr-rail-head { background: #f1ecf6; }

/* Collapsed (quiet) — only a restore strip remains. */
.bsr-rail-restore {
  display: none;
  width: 100%;
  align-items: center;
  gap: var(--ss-space-2);
  background: var(--ss-card-bg);
  border: none;
  color: var(--ss-text-secondary);
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-regular);
  padding: var(--ss-space-2) var(--ss-space-3);
  cursor: pointer;
  text-align: left;
}
.bsr-rail-restore .fa-comments { color: var(--bs-accent); }
.bsr-rail-restore:hover { color: var(--ss-navy); }
.bsr-room--rail.bsr-room--hidden { box-shadow: none; }
.bsr-room--rail.bsr-room--hidden .bsr-rail-head,
.bsr-room--rail.bsr-room--hidden .bsr-rail-body { display: none; }
.bsr-room--rail.bsr-room--hidden .bsr-rail-restore { display: flex; }

/* Subtle "live" entrance for messages; disabled under reduced-motion. */
@keyframes bsrFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bsr-msg { animation: bsrFadeIn 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  .bsr-msg { animation: none; }
  .bsr-messages { scroll-behavior: auto; }
}

/* ── Online-presence dot ────────────────────────────────────────────
   Reusable green dot overlaid on a user avatar. Wrap the <img> avatar in
   an element with .avatar-presence (position:relative) and drop a
   <span class="online-dot"></span> as a sibling of the image. Rendered only
   when the user is online (respecting their show_online_status preference).
   Scale the dot on larger avatars with the .online-dot--lg / --xl modifiers. */
.avatar-presence { position: relative; display: inline-flex; flex-shrink: 0; }
.online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ss-success);
  border: 2px solid #ffffff;
  box-sizing: content-box;
  pointer-events: none;
}
.online-dot--lg { width: 12px; height: 12px; border-width: 2px; }
.online-dot--xl { width: 18px; height: 18px; border-width: 3px; }

/* ── A problem's statement above the cursor on a link to it (js/problem-peek.js) ─────────
   Placed by the script (position, width); the card is the site's surface with its one shadow,
   the statement set as the book sets it. A long statement scrolls inside the card. */
.ss-peek {
    position: fixed; z-index: 1045; box-sizing: border-box;
    display: flex; flex-direction: column;
    background: var(--ss-surface); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow); padding: var(--ss-space-2) var(--ss-space-4) var(--ss-space-3);
    pointer-events: auto;
}
.ss-peek[hidden] { display: none; }
.ss-peek-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--ss-space-3);
    font-family: var(--ss-font-ui); font-size: var(--ss-fs-13); margin-bottom: var(--ss-space-1);
    flex: 0 0 auto;
}
.ss-peek-num { font-weight: var(--ss-fw-strong); color: var(--ss-navy); }
.ss-peek-open { color: var(--ss-link); text-decoration: none; white-space: nowrap; }
.ss-peek-open:hover { text-decoration: underline; }
/* The card's max-height is the room above the link (set by the script); the statement takes
   what is left under the head and scrolls. */
.ss-peek-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; }
.ss-peek-body p:last-child { margin-bottom: 0; }
.ss-peek-body figure { margin: var(--ss-space-2) 0 0; text-align: center; }
.ss-peek-body img { max-width: 100%; height: auto; }

/* ── Problem statement preview ────────────────────────────────────────────────
   Shown under the problem-number input on /upload and in the create-problem
   popup, so people can see the problem they are being asked to solve. Maths
   arrives as server-rendered SVG; neither page loads MathJax. */
.ss-statement {
    display: none;
    margin-top: var(--ss-space-3);
    padding: var(--ss-space-3) var(--ss-space-4);
    background: var(--ss-card-bg, #f8f9fa);
    border: 1px solid var(--ss-border-card, #dee2e6);
    border-left: 3px solid var(--ss-navy, #1a1a2e);
    border-radius: var(--ss-radius);
}
.ss-statement.is-visible { display: block; }
.ss-statement-head {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    margin-bottom: var(--ss-space-2);
    font-size: var(--ss-fs-12);
    font-weight: var(--ss-fw-strong);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ss-text-secondary, #6c757d);
}
.ss-statement-body {
    font-family: var(--ss-font-text);
    font-size: var(--ss-fs-18);
    line-height: var(--ss-lh-prose);
    color: var(--ss-text);
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
.ss-statement-body p { margin: 0 0 var(--ss-space-2); }
.ss-statement-body p:last-child { margin-bottom: 0; }
.ss-statement-body img,
.ss-statement-body svg { max-width: 100%; height: auto; }
.ss-statement-body figure { margin: var(--ss-space-2) 0; }
.ss-statement-note {
    margin-top: var(--ss-space-2);
    font-size: var(--ss-fs-12);
    color: var(--ss-text-secondary, #6c757d);
}
.ss-statement-muted { color: var(--ss-text-secondary, #6c757d); font-size: var(--ss-fs-13); }

/* The create-problem popup is fixed-position with no max-height, so a long statement
   would run off the viewport with no way to scroll it. */
#edit-popup .ss-statement { max-height: 40vh; overflow-y: auto; margin-bottom: var(--ss-space-6); }

/* ── Per-problem difficulty panel (solution page sidebar) ─────────────────────
   Bars rather than a radar chart: the sidebar is ~280px wide, a radar would be
   illegible at that size, and this needs no charting library on the hot page. */
.ss-difficulty .section-grid-title { display: flex; align-items: center; gap: var(--ss-space-2); }
.ss-diff-headline {
    display: flex; align-items: baseline; gap: var(--ss-space-2);
    margin: var(--ss-space-1) 0 var(--ss-space-3);
}
.ss-diff-score { font-family: var(--ss-font-ui); font-size: var(--ss-fs-28); font-weight: var(--ss-fw-strong); color: var(--ss-navy, #1a1a2e); line-height: 1; }
.ss-diff-of { font-size: var(--ss-fs-13); color: var(--ss-text-secondary, #6c757d); }
.ss-diff-time { margin-left: auto; font-size: var(--ss-fs-12); color: var(--ss-text-secondary, #6c757d); }
.ss-diff-group {
    margin: var(--ss-space-3) 0 var(--ss-space-1); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong);
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--ss-text-secondary, #6c757d);
}
.ss-diff-row { display: flex; align-items: center; gap: var(--ss-space-2); padding: 2px 0; }
.ss-diff-label { flex: 0 0 45%; font-size: var(--ss-fs-12); color: var(--ss-body-text, #2d2d2d); }
.ss-diff-track { flex: 1; height: 6px; background: #eceff1; border-radius: var(--ss-radius-sm); overflow: hidden; }
.ss-diff-fill { display: block; height: 100%; background: var(--ss-navy, #1a1a2e); border-radius: var(--ss-radius-sm); }
.ss-diff-fill-reward { background: var(--ss-link); }
/* Word first (this is the actual fix — "75" alone means nothing without the 0-100 scale
   memorized, "High" doesn't), the raw number kept small and secondary for readers who want
   precision. */
.ss-diff-num { flex: 0 0 74px; text-align: right; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); color: var(--ss-body-text, #2d2d2d); white-space: nowrap; }
.ss-diff-n { font-weight: 400; color: var(--ss-text-secondary, #6c757d); }
.ss-diff-tags { display: flex; flex-wrap: wrap; gap: var(--ss-space-1); margin-top: var(--ss-space-3); }
.ss-diff-tag {
    font-size: var(--ss-fs-12); padding: 2px var(--ss-space-2); border-radius: var(--ss-radius-sm);
    background: var(--ss-card-bg, #f8f9fa); border: 1px solid var(--ss-border-card, #dee2e6);
    color: var(--ss-text-secondary, #6c757d);
}
.ss-diff-idea { margin-top: var(--ss-space-3); }
.ss-diff-idea summary {
    cursor: pointer; font-size: var(--ss-fs-12); color: var(--ss-link, #1a5276);
    list-style: none;
}
.ss-diff-idea summary::-webkit-details-marker { display: none; }
.ss-diff-idea summary::before { content: '\25B8  '; }
.ss-diff-idea[open] summary::before { content: '\25BE  '; }
.ss-diff-idea p { margin: var(--ss-space-2) 0 0; font-size: var(--ss-fs-13); line-height: 1.5; color: var(--ss-body-text, #2d2d2d); }
.ss-diff-info { display: inline-flex; margin-left: auto; color: var(--ss-text-tertiary); }
.ss-diff-info:hover { color: var(--ss-link-hover); }

/* Reader difficulty votes — a separate, clearly-labeled number below the AI panel's
   note, never blended into the /100 score or the bars above it. */
.ss-diff-votes { margin-top: var(--ss-space-3); padding-top: var(--ss-space-3); border-top: 1px solid var(--ss-border-card, #dee2e6); }
.ss-diff-votes-label {
    font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--ss-text-secondary, #6c757d); margin-bottom: var(--ss-space-1);
}
.ss-diff-votes-score { font-family: var(--ss-font-ui); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); color: var(--ss-link, #1a5276); }
.ss-diff-votes-count { font-size: var(--ss-fs-12); color: var(--ss-text-secondary, #6c757d); margin-left: var(--ss-space-1); }
.ss-diff-votes-empty { font-size: var(--ss-fs-12); color: var(--ss-text-secondary, #6c757d); }
.ss-diff-votes-login { font-size: var(--ss-fs-12); color: var(--ss-link, #1a5276); text-decoration: none; }
.ss-diff-votes-login:hover { color: var(--ss-link-hover, #0d3b54); text-decoration: underline; }
.ss-diff-vote-row { display: flex; align-items: center; gap: var(--ss-space-2); margin-top: var(--ss-space-2); }
/* min-width: 0, or the range input keeps its intrinsic ~160px and the row outgrows the rail:
   in Firefox that pushed every signed-in solution page 60px past the window (2026-09-14). */
.ss-diff-vote-slider { flex: 1 1 0; min-width: 0; accent-color: var(--ss-navy, #1a1a2e); }
.ss-diff-vote-val { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-strong); min-width: 18px; text-align: center; color: var(--ss-body-text, #2d2d2d); }
.ss-diff-vote-submit {
    font-size: var(--ss-fs-12); padding: var(--ss-space-1) var(--ss-space-3); border-radius: var(--ss-radius); border: none;
    background: var(--ss-navy, #1a1a2e); color: var(--ss-on-navy); cursor: pointer;
}
.ss-diff-vote-submit:disabled { opacity: 0.6; cursor: default; }
.ss-diff-vote-submit:hover:not(:disabled) { background: var(--ss-link-hover, #0d3b54); }

.sg-heat-methodology-link {
    display: block; font-size: var(--ss-fs-12); color: var(--ss-link, #1a5276); text-decoration: none; margin-top: var(--ss-space-1);
}
.sg-heat-methodology-link:hover { color: var(--ss-link-hover, #0d3b54); text-decoration: underline; }

/* ── Toggle switch ────────────────────────────────────────────────────────────
   A real <input type="checkbox" role="switch"> underneath: keyboard focus, space
   to toggle and screen-reader state all come free, and the visible track is just
   decoration driven by :checked. Bootstrap ships .form-switch but it is #0d6efd
   with an SVG-in-a-data-URI knob, which is more to override than to replace.

   The track is 8px-rounded rather than a pill, which is the design system's cap
   and reads closer to GitHub than to iOS. */
.ss-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--ss-fs-13);
    color: var(--ss-text-secondary, #6c757d);
}
.ss-switch input {
    /* Kept in the layout and focusable — not display:none, which would take it out
       of the tab order and silence assistive technology. */
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    opacity: 0;
    pointer-events: none;
}
.ss-switch-track {
    position: relative;
    flex: none;
    width: 34px; height: 18px;
    background: var(--ss-border-card, #dee2e6);
    border-radius: var(--ss-radius-lg);
    transition: background-color 0.15s ease;
}
.ss-switch-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: var(--ss-surface);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow);
    transition: transform 0.15s ease;
}
.ss-switch input:checked + .ss-switch-track {
    background: var(--ss-navy, #1a1a2e);
}
.ss-switch input:checked + .ss-switch-track .ss-switch-knob {
    transform: translateX(16px);
}
.ss-switch input:focus-visible + .ss-switch-track {
    outline: 2px solid var(--ss-link, #1a5276);
    outline-offset: 2px;
}
.ss-switch input:checked ~ .ss-switch-label {
    color: var(--ss-navy, #1a1a2e);
    font-weight: var(--ss-fw-strong);
}
@media (prefers-reduced-motion: reduce) {
    .ss-switch-track, .ss-switch-knob { transition: none; }
}

/* ── Difficulty heat ramp ─────────────────────────────────────────────────────
   Shared by the homepage chapter grid, the section grid on every solution page and
   the chips of /unsolved, so the three read as one scale. Defined once here rather
   than inline in each template.

   ColorBrewer YlOrRd: its lightness falls monotonically across all nine steps,
   so it survives greyscale and red-green colour deficiency — which matters for
   an audience that is mostly teenage boys.

   Since 2026-09-19 difficulty is the grids' only colouring (every grid page's body
   carries grid-heat; the language colouring and the switch between the two are gone,
   the owner's decision). What is not colour stays in the page: a dashed outline for a
   problem with no solution, a heavier border for Savchenko's own ∗, bold numerals —
   navy on the yellow-to-orange steps was hard to read at 12 px regular, and white does
   not reach 4.5:1 on them (2.3:1 and 3.4:1, tests/design-tokens.test.js), so the weight
   carries it.

   The dots are links, and the site's own a:link rule (0,2,1) sets their colour; the
   selectors here are written with the `a` so they outrank it (0,2,2) without !important,
   and a second, plain form covers the one dot that is a span. */
body.grid-heat a.heat-1, body.grid-heat .heat-1 { background: var(--ss-heat-1); color: var(--ss-heat-1-ink); }
body.grid-heat a.heat-2, body.grid-heat .heat-2 { background: var(--ss-heat-2); color: var(--ss-heat-2-ink); }
body.grid-heat a.heat-3, body.grid-heat .heat-3 { background: var(--ss-heat-3); color: var(--ss-heat-3-ink); }
body.grid-heat a.heat-4, body.grid-heat .heat-4 { background: var(--ss-heat-4); color: var(--ss-heat-4-ink); }
body.grid-heat a.heat-5, body.grid-heat .heat-5 { background: var(--ss-heat-5); color: var(--ss-heat-5-ink); }
body.grid-heat a.heat-6, body.grid-heat .heat-6 { background: var(--ss-heat-6); color: var(--ss-heat-6-ink); }
body.grid-heat a.heat-7, body.grid-heat .heat-7 { background: var(--ss-heat-7); color: var(--ss-heat-7-ink); }
body.grid-heat a.heat-8, body.grid-heat .heat-8 { background: var(--ss-heat-8); color: var(--ss-heat-8-ink); }
body.grid-heat a.heat-9, body.grid-heat .heat-9 { background: var(--ss-heat-9); color: var(--ss-heat-9-ink); }
/* Not yet scored — shown as absent rather than as easy. */
body.grid-heat a.heat-none, body.grid-heat .heat-none { background: var(--ss-heat-none); color: var(--ss-heat-none-ink); }
/* Savchenko's own ∗: a heavier dark border rather than a hue, so his judgement
   and the model's stay separable and the marker survives greyscale. */
body.grid-heat a.heat-starred, body.grid-heat .heat-starred { border: 2px solid var(--ss-navy); }
/* The problem being read keeps its own mark in the section grid. */
body.grid-heat .problem-grid-item--current { background: var(--ss-link); color: var(--ss-on-navy); border-color: var(--ss-link); }
/* A problem with no solution in the page's language is faded: solved in the other language
   only, or in none (the owner, 2026-09-20: on /ru/ a chapter's "78 / 129" left the 51 without
   a Russian solution looking like the rest). The dashed outline still says "none at all". */
html[lang="ru"] body.grid-heat .problem-dot.solved-en,
html[lang="en"] body.grid-heat .problem-dot.solved-ru,
html[lang="ru"] body.grid-heat .problem-grid-item--solved-en,
html[lang="en"] body.grid-heat .problem-grid-item--solved-ru,
body.grid-heat .problem-dot.unsolved,
body.grid-heat .problem-grid-item--unsolved { opacity: 0.4; }
html[lang="ru"] body.grid-heat a.problem-dot.solved-en:hover,
html[lang="en"] body.grid-heat a.problem-dot.solved-ru:hover,
html[lang="ru"] body.grid-heat a.problem-grid-item--solved-en:hover,
html[lang="en"] body.grid-heat a.problem-grid-item--solved-ru:hover,
body.grid-heat a.problem-dot.unsolved:hover,
body.grid-heat a.problem-grid-item--unsolved:hover { opacity: 0.75; }
/* The legend's swatch for it. */
.legend-faded, .sg-sw-faded { background: var(--ss-heat-5); opacity: 0.4; }

/* Legend swatches: always coloured, regardless of whether heat mode is on. */
.heat-chip { width: 14px; height: 12px; border-radius: var(--ss-radius-sm); display: inline-block; }
.heat-chip.heat-1 { background: var(--ss-heat-1); }
.heat-chip.heat-2 { background: var(--ss-heat-2); }
.heat-chip.heat-3 { background: var(--ss-heat-3); }
.heat-chip.heat-4 { background: var(--ss-heat-4); }
.heat-chip.heat-5 { background: var(--ss-heat-5); }
.heat-chip.heat-6 { background: var(--ss-heat-6); }
.heat-chip.heat-7 { background: var(--ss-heat-7); }
.heat-chip.heat-8 { background: var(--ss-heat-8); }
.heat-chip.heat-9 { background: var(--ss-heat-9); }
.heat-ramp { display: inline-flex; gap: 2px; }
.legend-star { background: var(--ss-heat-3); border: 2px solid var(--ss-navy); }

/* ── Feedback: the suggestion box, the poll and the public board ─────────────────────
   Site-wide, and deliberately quiet. The tab has to be findable without competing with
   the solution it sits beside. This is a reference the reader came here to read, not a
   funnel. Everything below stays inside the design system: navy ground, one border
   colour, no gradients, radius <= 8px, shadow no heavier than 0 1px 3px rgba(0,0,0,.08).
   Mobile is not an afterthought here: roughly half of term-time sessions are phones and
   the panel becomes a bottom sheet rather than a floating card below 576px. */

/* Quieter since 2026-09-20 (the owner): smaller, closer to the corner, and translucent until
   the cursor reaches it, so it does not sit on the page like a call to action. */
/* Back to the top: on every page (the site header partial), above the feedback tab, shown only
   once the page is scrolled down (js/to-top.js). */
.ss-to-top {
  position: fixed; right: 12px; bottom: 52px; z-index: 1034;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ss-surface); color: var(--ss-text-secondary);
  border: 1px solid var(--ss-rule); border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.ss-to-top.show { opacity: 0.75; visibility: visible; transform: none; }
.ss-to-top:hover, .ss-to-top:focus-visible { opacity: 1; color: var(--ss-text); }
@media (prefers-reduced-motion: reduce) { .ss-to-top { transition: none; } }

.fb-tab {
  position: fixed; right: 12px; bottom: 12px; z-index: 1035;
  display: inline-flex; align-items: center; gap: var(--ss-space-1);
  background: var(--ss-primary-btn); color: var(--ss-white);
  border: none; border-radius: var(--ss-radius); padding: var(--ss-space-1) var(--ss-space-3);
  font-family: inherit; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular); line-height: 1.2;
  cursor: pointer; box-shadow: var(--ss-shadow); opacity: 0.6;
  transition: opacity 0.15s ease;
}
.fb-tab:hover, .fb-tab:focus-visible { background: var(--ss-primary-btn-hover); color: var(--ss-white); opacity: 1; }
.fb-tab:focus-visible { outline: 2px solid var(--ss-link); outline-offset: 2px; }
/* Over the navy footer the navy tab would vanish, so the part of it the footer is behind shows
   an inverted copy of its contents: .fb-tab-invert, clipped from the top and bottom by
   --fb-cut-top / --fb-cut-bottom, which js/feedback.js sets from the footer's position on every
   scroll frame. The white travels up through the tab with the footer's edge, pixel by pixel,
   instead of the whole tab flipping at once (owner's request, 2026-09-14). */
.fb-tab-invert {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: inherit; gap: inherit; padding: inherit;
  border-radius: inherit;
  background: var(--ss-on-navy); color: var(--ss-navy);
  clip-path: inset(var(--fb-cut-top, 100%) 0 var(--fb-cut-bottom, 0px) 0);
  pointer-events: none;
}
.fb-tab:hover .fb-tab-invert { background: var(--ss-surface-alt); }
.fb-tab.fb-tab--on-dark:focus-visible { outline-color: var(--ss-on-navy); }
.fb-tab[hidden] { display: none; }
.fb-tab-glyph { display: inline-flex; align-items: center; }
/* Filled, sized in px, and inheriting the button's colour. The previous glyph was the
   U+270E character, which most fonts draw as a hairline and which vanished against the
   navy at this size. */
.fb-tab-icon { width: 13px; height: 13px; display: block; fill: currentColor; }

.fb-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 1040;
  width: 360px; max-width: calc(100vw - 32px); max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ss-white); color: var(--ss-body-text);
  border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow);
}
.fb-panel[hidden] { display: none; }
.fb-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ss-space-2);
  padding: var(--ss-space-3) var(--ss-space-4); border-bottom: 1px solid var(--ss-border-card);
  background: var(--ss-card-bg);
}
.fb-title { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-strong); color: var(--ss-heading); margin: 0; }
.fb-sub { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); margin: 0.15rem 0 0; }
.fb-close {
  background: none; border: none; color: var(--ss-text-secondary);
  font-size: var(--ss-fs-20); line-height: 1; padding: 0 0.15rem; cursor: pointer;
}
.fb-close:hover { color: var(--ss-body-text); }
.fb-body { padding: var(--ss-space-3) var(--ss-space-4); overflow-y: auto; }
.fb-legend {
  display: block; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); color: var(--ss-text-secondary);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: var(--ss-space-2);
}

/* One tap, no typing. The whole reason the form opens on a choice rather than a blank box
   is that the choice is what selects the prompt, and the prompt is what makes the answer
   specific. */
.fb-cats { display: flex; flex-wrap: wrap; gap: var(--ss-space-1); margin-bottom: var(--ss-space-3); }
.fb-cat {
  background: var(--ss-white); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius);
  padding: var(--ss-space-2) var(--ss-space-3); font-family: inherit; font-size: var(--ss-fs-13); color: var(--ss-body-text);
  cursor: pointer; text-align: left;
}
.fb-cat:hover { background: var(--ss-card-bg); }
.fb-cat[aria-pressed="true"] {
  background: var(--ss-navy); border-color: var(--ss-navy); color: var(--ss-white); font-weight: var(--ss-fw-regular);
}
.fb-prompt { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular); margin: 0 0 var(--ss-space-2); }
.fb-input {
  width: 100%; min-height: 96px; resize: vertical; font-family: inherit; font-size: var(--ss-fs-16);
  line-height: 1.5; padding: var(--ss-space-2) var(--ss-space-3); color: var(--ss-body-text);
  border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius); outline: none;
}
.fb-input:focus { border-color: var(--ss-link); }
.fb-input::placeholder { color: var(--ss-text-tertiary); }

/* Revealed only once something has been typed. The commitment is already made by then, so
   the extra field costs almost nothing in completion, whereas asking up front does. */
.fb-more { margin-top: var(--ss-space-3); }
.fb-more[hidden] { display: none; }
.fb-contact-row { display: flex; gap: var(--ss-space-1); margin-bottom: var(--ss-space-2); }
.fb-kind {
  background: var(--ss-white); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius);
  padding: 0 var(--ss-space-3); height: 34px; font-family: inherit; font-size: var(--ss-fs-13);
  color: var(--ss-text-secondary); cursor: pointer;
}
.fb-kind[aria-pressed="true"] { border-color: var(--ss-navy); color: var(--ss-body-text); font-weight: var(--ss-fw-regular); }
.fb-contact {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 var(--ss-space-2); font-family: inherit; font-size: var(--ss-fs-14);
  border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius); outline: none; color: var(--ss-body-text);
}
.fb-contact:focus { border-color: var(--ss-link); }
.fb-check { display: flex; align-items: center; gap: var(--ss-space-2); font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.fb-check input { margin: 0; }

/* Off-screen rather than display:none, because a bot that skips hidden fields still fills this
   one, and a screen reader is told to leave it alone. */
.fb-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.fb-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ss-space-2);
  padding: var(--ss-space-2) var(--ss-space-4); border-top: 1px solid var(--ss-border-card); background: var(--ss-card-bg);
}
.fb-hint { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }
.fb-hint a { color: var(--ss-link); }
.fb-send {
  background: var(--ss-primary-btn); color: var(--ss-white); border: none; border-radius: var(--ss-radius);
  padding: var(--ss-space-2) var(--ss-space-4); font-family: inherit; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-regular); cursor: pointer;
}
.fb-send:hover { background: var(--ss-primary-btn-hover); }
.fb-send:disabled { opacity: 0.55; cursor: default; }
.fb-error { font-size: var(--ss-fs-13); color: var(--ss-error); margin: var(--ss-space-2) 0 0; }
.fb-error[hidden] { display: none; }

/* The receipt. This screen is the entire reason the feature is a table and not a mailto:
   A signed-out submitter has no account to check, so this link is all they get, and
   without it people re-post the same message elsewhere assuming the first one vanished. */
.fb-done { padding: var(--ss-space-4) var(--ss-space-4); text-align: left; }
.fb-done h3 { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); margin: 0 0 var(--ss-space-2); color: var(--ss-heading); }
.fb-done p { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); margin: 0 0 var(--ss-space-3); }
.fb-receipt {
  display: block; font-size: var(--ss-fs-13); word-break: break-all; color: var(--ss-link);
  background: var(--ss-card-bg); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius);
  padding: var(--ss-space-2) var(--ss-space-2); margin-bottom: var(--ss-space-3);
}
.fb-done-actions { display: flex; gap: var(--ss-space-2); }
.fb-linkbtn {
  background: none; border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius);
  padding: var(--ss-space-1) var(--ss-space-3); font-family: inherit; font-size: var(--ss-fs-13);
  color: var(--ss-body-text); cursor: pointer; text-decoration: none;
}
.fb-linkbtn:hover { background: var(--ss-card-bg); color: var(--ss-body-text); }

/* Contextual prompts. These are the ones that matter: they meet the anonymous reader who
   arrived from a search for one problem and will never open a menu. */
.fb-inline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ss-space-2);
  margin: var(--ss-space-5) 0; padding: var(--ss-space-2) var(--ss-space-3); font-size: var(--ss-fs-13); color: var(--ss-text-secondary);
  background: var(--ss-card-bg); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius);
}
.fb-inline-cta {
  background: none; border: none; padding: 0; font-family: inherit; font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-regular); color: var(--ss-link); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.fb-inline-cta:hover { color: var(--ss-link-hover); }

/* One question, once, ever. Inline and dismissible, never a modal, never on first paint. */
.fb-poll {
  margin: var(--ss-space-6) 0; padding: var(--ss-space-3) var(--ss-space-4);
  background: var(--ss-card-bg); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius-lg);
}
.fb-poll[hidden] { display: none; }
.fb-poll-q { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular); color: var(--ss-body-text); margin: 0 0 var(--ss-space-2); }
.fb-poll-opts { display: flex; flex-wrap: wrap; gap: var(--ss-space-1); }
.fb-poll-opt {
  background: var(--ss-white); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius);
  padding: var(--ss-space-1) var(--ss-space-3); font-family: inherit; font-size: var(--ss-fs-13); color: var(--ss-body-text); cursor: pointer;
}
.fb-poll-opt:hover { background: var(--ss-white); border-color: var(--ss-navy); }
.fb-poll-free { display: flex; gap: var(--ss-space-2); }
.fb-poll-free input {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 var(--ss-space-2); font-family: inherit; font-size: var(--ss-fs-16);
  border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius); outline: none;
}
.fb-poll-free input:focus { border-color: var(--ss-link); }
.fb-poll-send {
  background: var(--ss-primary-btn); color: var(--ss-white); border: none; border-radius: var(--ss-radius);
  padding: 0 var(--ss-space-4); height: 34px; font-family: inherit; font-size: var(--ss-fs-13); cursor: pointer;
}
.fb-poll-skip {
  background: none; border: none; padding: 0; margin-top: var(--ss-space-2);
  font-family: inherit; font-size: var(--ss-fs-12); color: var(--ss-text-secondary);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.fb-poll-thanks { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); margin: 0; }

/* ── The public board ─────────────────────────────────────────────────────────────────
   A Reddit-shaped feed: hairline-separated posts, a title that carries the item, and a
   horizontal vote pill with both directions and the score between them. Structure and
   interaction are borrowed; the palette is not. Up is the site's navy, down is its error
   red, and there is no orange anywhere. The vote control is the one place the 8px radius
   rule is broken on purpose: a pill is what makes the affordance read as "vote" at a
   glance, and it is the single most recognisable part of the pattern. */
.fb-board { max-width: none; margin: 0; padding: var(--ss-space-7) var(--ss-space-7) var(--ss-space-10); }
/* Feed plus sidebar. A single narrow column on a 1920px screen is mostly empty space, and
   simply widening the text would give 200-character lines that nobody can read. The sidebar
   takes the surplus and puts something useful in it. */
.fb-layout { display: flex; align-items: flex-start; gap: var(--ss-space-7); }
.fb-main { flex: 1 1 auto; min-width: 0; }
.fb-side { flex: 0 0 340px; position: sticky; top: 1rem; }
.fb-card {
  background: var(--ss-card-bg); border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-radius-lg); padding: var(--ss-space-4) var(--ss-space-4); margin-bottom: var(--ss-space-4);
}
.fb-card h2 {
  font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--ss-text-secondary); margin: 0 0 var(--ss-space-2);
}
.fb-card p { font-size: var(--ss-fs-13); line-height: 1.6; color: var(--ss-body-text); margin: 0 0 var(--ss-space-2); }
.fb-card p:last-child { margin-bottom: 0; }
.fb-steps { list-style: none; margin: 0; padding: 0; counter-reset: fbstep; }
.fb-steps li {
  position: relative; padding-left: var(--ss-space-6); margin-bottom: var(--ss-space-2);
  font-size: var(--ss-fs-13); line-height: 1.5; color: var(--ss-body-text);
}
.fb-steps li:last-child { margin-bottom: 0; }
.fb-steps li::before {
  counter-increment: fbstep; content: counter(fbstep);
  position: absolute; left: 0; top: 0.05rem;
  width: 1.1rem; height: 1.1rem; border-radius: var(--ss-radius-lg);
  background: var(--ss-navy); color: var(--ss-white);
  font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); line-height: 1.1rem; text-align: center;
}
.fb-tally { display: flex; flex-direction: column; gap: var(--ss-space-1); }
.fb-tally-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ss-space-2);
  font-size: var(--ss-fs-13); color: var(--ss-body-text);
}
.fb-tally-n { font-weight: var(--ss-fw-strong); font-variant-numeric: tabular-nums; }
.fb-side-cta {
  display: block; width: 100%; padding: var(--ss-space-2) var(--ss-space-4); border-radius: var(--ss-radius-lg);
  background: var(--ss-primary-btn); color: var(--ss-white); border: none;
  font-family: inherit; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular); cursor: pointer; text-align: center;
}
.fb-side-cta:hover { background: var(--ss-primary-btn-hover); color: var(--ss-white); }

@media (max-width: 991.98px) {
  /* Below this the sidebar would squeeze the feed, and the feed is the point. */
  .fb-layout { display: block; }
  .fb-side { display: none; }
}
.fb-board-head { margin-bottom: var(--ss-space-4); }
.fb-board h1 { font-size: var(--ss-fs-24); font-weight: var(--ss-fw-strong); margin: 0 0 var(--ss-space-1); color: var(--ss-heading); }
.fb-board-lede { color: var(--ss-text-secondary); font-size: var(--ss-fs-14); line-height: 1.55; margin: 0; }

/* Sort + compose row */
.fb-toolbar {
  display: flex; align-items: center; gap: var(--ss-space-2); flex-wrap: wrap;
  padding: var(--ss-space-3) 0; margin-bottom: var(--ss-space-1);
  border-bottom: 1px solid var(--ss-border-card);
}
.fb-sort {
  padding: var(--ss-space-1) var(--ss-space-3); border-radius: var(--ss-radius-lg); border: 1px solid transparent;
  background: none; font-family: inherit; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular);
  color: var(--ss-text-secondary); text-decoration: none; cursor: pointer;
}
.fb-sort:hover { background: var(--ss-card-bg); color: var(--ss-body-text); }
.fb-sort.is-active,
a.fb-sort.is-active:link,
a.fb-sort.is-active:visited,
a.fb-sort.is-active:hover {
  background: var(--ss-navy); border-color: var(--ss-navy); color: var(--ss-white);
}
a.fb-sort:link, a.fb-sort:visited { color: var(--ss-text-secondary); }
a.fb-sort:hover { color: var(--ss-body-text); }
.fb-compose {
  margin-left: auto; padding: var(--ss-space-1) var(--ss-space-4); border-radius: var(--ss-radius-lg);
  background: var(--ss-primary-btn); color: var(--ss-white); border: none;
  font-family: inherit; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular); cursor: pointer;
}
.fb-compose:hover { background: var(--ss-primary-btn-hover); color: var(--ss-white); }

/* Posts */
.fb-group { margin: 0; }
.fb-group-head {
  display: flex; align-items: baseline; gap: var(--ss-space-2);
  margin: var(--ss-space-6) 0 var(--ss-space-1); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong);
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--ss-text-secondary);
}
.fb-item { display: block; padding: var(--ss-space-4) 0; border-bottom: 1px solid var(--ss-border-card); }
.fb-item:hover { background: transparent; }
.fb-item-meta {
  display: flex; align-items: center; gap: var(--ss-space-2); flex-wrap: wrap;
  font-size: var(--ss-fs-12); color: var(--ss-text-secondary); margin: 0 0 var(--ss-space-1);
}
.fb-item-title { font-size: var(--ss-fs-18); font-weight: var(--ss-fw-strong); line-height: 1.35; margin: 0 0 var(--ss-space-1); }
.fb-item-title a { color: var(--ss-heading); text-decoration: none; }
.fb-item-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.fb-item-body {
  font-size: var(--ss-fs-14); line-height: 1.55; color: var(--ss-body-text); margin: 0 0 var(--ss-space-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fb-item-body.is-full { display: block; overflow: visible; }

.fb-badge {
  display: inline-block; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); padding: 0.1rem var(--ss-space-2);
  border-radius: var(--ss-radius); background: var(--ss-card-bg); border: 1px solid var(--ss-border-card);
  color: var(--ss-text-secondary); white-space: nowrap;
}
.fb-badge-planned    { border-color: var(--ss-link); color: var(--ss-link); }
.fb-badge-in_progress{ border-color: var(--ss-navy); color: var(--ss-navy); }
.fb-badge-done       { border-color: var(--ss-success); color: var(--ss-success-strong); }
.fb-badge-declined   { border-color: var(--ss-error); color: var(--ss-error); }

/* Action row */
.fb-actions { display: flex; align-items: center; gap: var(--ss-space-2); flex-wrap: wrap; }
.fb-vote {
  display: inline-flex; align-items: center; gap: 0.15rem;
  background: var(--ss-card-bg); border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-radius-lg); padding: 1px;
}
.fb-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--ss-radius-lg);
  background: none; color: var(--ss-text-secondary); cursor: pointer;
}
.fb-arrow:hover { background: var(--ss-surface-hover); color: var(--ss-body-text); }
.fb-arrow svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.fb-arrow:disabled { cursor: default; opacity: 0.6; }
.fb-score {
  min-width: 1.4rem; text-align: center; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-strong);
  color: var(--ss-body-text); font-variant-numeric: tabular-nums;
}
/* One state per direction, applied to the whole pill so the score matches the arrow. */
.fb-vote.is-up   .fb-arrow-up   { color: var(--ss-navy); }
.fb-vote.is-up   .fb-score      { color: var(--ss-navy); }
.fb-vote.is-down .fb-arrow-down { color: var(--ss-error); }
.fb-vote.is-down .fb-score      { color: var(--ss-error); }

.fb-action {
  display: inline-flex; align-items: center; gap: var(--ss-space-1);
  padding: var(--ss-space-1) var(--ss-space-3); border-radius: var(--ss-radius-lg); border: none; background: none;
  font-family: inherit; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular);
  color: var(--ss-text-secondary); text-decoration: none; cursor: pointer;
}
.fb-action:hover { background: var(--ss-card-bg); color: var(--ss-body-text); }

/* The owner's public reply, rendered as the reply it is, and the one thing that proves
   somebody read the thing. */
.fb-reply {
  margin: var(--ss-space-3) 0 0 var(--ss-space-1); padding-left: var(--ss-space-3);
  border-left: 2px solid var(--ss-border-card);
}
.fb-reply-head {
  display: flex; align-items: center; gap: var(--ss-space-2);
  font-size: var(--ss-fs-12); color: var(--ss-text-secondary); margin-bottom: var(--ss-space-1);
}
.fb-reply-who { font-weight: var(--ss-fw-strong); color: var(--ss-body-text); }
.fb-reply-tag {
  font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--ss-error);
}
.fb-reply-body { font-size: var(--ss-fs-13); line-height: 1.55; color: var(--ss-body-text); }

.fb-empty {
  padding: var(--ss-space-8) var(--ss-space-4); text-align: center; color: var(--ss-text-secondary); font-size: var(--ss-fs-14);
  background: var(--ss-card-bg); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius-lg);
}

/* ── A solved thread ──────────────────────────────────────────────────────────────────
   The point of the whole feature is the moment somebody sees that asking worked, so this
   state is deliberately the loudest thing on the page. Green rule down the side, a filled
   check, the date it was done, and the vote control visibly closed rather than quietly
   removed, so it reads as "settled" rather than "missing". Declined gets the same shape in
   a neutral colour: also closed, but not a win. */
.fb-item.is-resolved,
.fb-item.is-closed {
  border-left: 3px solid var(--ss-border-card);
  padding-left: var(--ss-space-4); margin-left: calc(-1 * var(--ss-space-4));
}
.fb-item.is-resolved { border-left-color: var(--ss-success); }
.fb-item.is-closed   { border-left-color: var(--ss-text-secondary); }

.fb-solved {
  display: inline-flex; align-items: center; gap: var(--ss-space-2);
  margin: 0 0 var(--ss-space-2); padding: var(--ss-space-1) var(--ss-space-2) var(--ss-space-1) var(--ss-space-1);
  border-radius: var(--ss-radius-lg); border: 1px solid var(--ss-success); background: #eafaf0;
  font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); color: var(--ss-success-strong);
}
.fb-closed-tag {
  display: inline-flex; align-items: center; gap: var(--ss-space-2);
  margin: 0 0 var(--ss-space-2); padding: var(--ss-space-1) var(--ss-space-2) var(--ss-space-1) var(--ss-space-1);
  border-radius: var(--ss-radius); border: 1px solid var(--ss-border-card); background: var(--ss-card-bg);
  font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); color: var(--ss-text-secondary);
}
/* Every inline icon in this family, sized in one place.
   The check in .fb-resolution-head was missed and, because the SVG carries a viewBox but no
   width/height attribute, it fell back to filling its container: a 1470px black circle in
   the middle of a solved item. flex-shrink is pinned too, so a long label can never squash
   an icon into an ellipse. */
.fb-solved svg,
.fb-closed-tag svg,
.fb-resolution-head svg {
  width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; display: block;
}
.fb-solved-when { font-weight: 400; opacity: 0.85; }

/* The resolution reads as the answer, not as a footnote. */
.fb-resolution {
  margin: var(--ss-space-3) 0 0; padding: var(--ss-space-3) var(--ss-space-3);
  border: 1px solid var(--ss-success); border-left-width: 3px; border-radius: var(--ss-radius-lg); background: #f6fdf9;
}
.fb-resolution-head {
  display: flex; align-items: center; gap: var(--ss-space-2); margin-bottom: var(--ss-space-1);
  font-size: var(--ss-fs-12); font-weight: var(--ss-fw-strong); text-transform: uppercase; letter-spacing: 0.6px; color: var(--ss-success-strong);
}
.fb-resolution-body { font-size: var(--ss-fs-13); line-height: 1.6; color: var(--ss-body-text); }

/* Closed, not absent. A vote control that simply vanished would read as a bug. */
.fb-vote.is-locked { opacity: 0.75; background: var(--ss-white); }
.fb-vote.is-locked .fb-score { color: var(--ss-text-secondary); }
.fb-locked-note {
  display: inline-flex; align-items: center; gap: var(--ss-space-1);
  font-size: var(--ss-fs-12); color: var(--ss-text-secondary);
}
.fb-locked-note svg { width: 13px; height: 13px; flex: 0 0 auto; fill: currentColor; display: block; }
.fb-final {
  display: inline-flex; align-items: baseline; gap: var(--ss-space-1);
  padding: var(--ss-space-1) var(--ss-space-3); border-radius: var(--ss-radius-lg);
  border: 1px solid var(--ss-border-card); background: var(--ss-white);
  font-size: var(--ss-fs-13); color: var(--ss-text-secondary);
}
.fb-final b { font-size: var(--ss-fs-13); color: var(--ss-body-text); font-variant-numeric: tabular-nums; }

/* Single item page */
.fb-post-body { font-size: var(--ss-fs-16); line-height: 1.65; white-space: pre-wrap; margin: 0 0 var(--ss-space-4); }
.fb-back { font-size: var(--ss-fs-13); color: var(--ss-link); text-decoration: none; }
.fb-back:hover { text-decoration: underline; }
.fb-note {
  margin-top: var(--ss-space-4); padding: var(--ss-space-3) var(--ss-space-3); font-size: var(--ss-fs-13); line-height: 1.55;
  color: var(--ss-text-secondary);
  background: var(--ss-card-bg); border: 1px solid var(--ss-border-card); border-radius: var(--ss-radius-lg);
}

@media (max-width: 575.98px) {
  /* The pill becomes an icon. A 44px target is the smallest that is reliably tappable,
     and anything wider starts covering the solution the reader came for. */
  .fb-tab {
    right: 12px; bottom: 12px; width: 44px; height: 44px; padding: 0;
    justify-content: center; border-radius: var(--ss-radius-lg);
  }
  .fb-tab-text { display: none; }
  .fb-tab-icon { width: 19px; height: 19px; }
  /* Bottom sheet, not a floating card: the on-screen keyboard eats the lower half of a
     phone, and a centred card would put the send button underneath it. */
  .fb-panel {
    right: 0; left: 0; bottom: 0; width: auto; max-width: none;
    max-height: 88vh; border-radius: var(--ss-radius-lg) var(--ss-radius-lg) 0 0; border-bottom: none;
  }
  .fb-cat { flex: 1 1 45%; }
  .fb-board { padding: var(--ss-space-5) var(--ss-space-4) var(--ss-space-9); }
  .fb-item-body { -webkit-line-clamp: 3; }
  .fb-item-title { font-size: var(--ss-fs-16); }
  .fb-toolbar { gap: var(--ss-space-1); }
}

/* The panel animates in; anyone who has asked the system not to move things gets it
   without the motion. */
@media (prefers-reduced-motion: no-preference) {
  .fb-panel { animation: fb-rise 140ms ease-out; }
  @keyframes fb-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* Printing a solution should print the physics, not the furniture. */
@media print {
  .fb-tab, .fb-panel, .fb-poll, .fb-inline { display: none !important; }
}

/* YouTube embeds inside solution markdown: ![](https://www.youtube.com/embed/ID).
   Full width of the content column, centred, 16:9.

   The previous rules offset the box by `left: 10%` while giving it `width: 100%`
   (so it overflowed to the right) and then sized the iframe to `width: 80%` of that,
   which is why the player sat small and off-centre. And they lived only in
   solutions.css, which the solution page does not load at all — there the iframe fell
   back to its intrinsic 300x150. */
.video-container {
  position: relative;
  width: 100%;
  margin: var(--ss-space-5) auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-navy);
}

.video-container .video,
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Click-to-play video embed ──────────────────────────────────────────────
   The poster is a local image and the YouTube iframe only replaces it once the
   visitor presses play, so a page carrying a video costs nothing (and renders
   fine where youtube.com is filtered) until someone actually watches. */

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-navy);
}

.video-embed-trigger,
.video-embed-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.video-embed-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  opacity: 0.92;
  transition: opacity 120ms linear, transform 120ms ease-out;
  pointer-events: none;
}

.video-embed-trigger:hover .video-embed-play,
.video-embed-trigger:focus-visible .video-embed-play,
.video-embed-link:hover .video-embed-play,
.video-embed-link:focus-visible .video-embed-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

.video-embed-trigger:focus-visible,
.video-embed-link:focus-visible {
  outline: 2px solid var(--ss-link);
  outline-offset: -2px;
}

/* The title is for screen readers and for the case where the poster fails to
   load; it is not meant to sit on top of the artwork. */
.video-embed-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A file we host ourselves: plays on the page with the browser's own controls, no
   third-party player and no JavaScript at all. */
.video-embed-media {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ss-navy);
}

/* A channel can switch embedding off, and YouTube then serves "Playback on other
   websites has been disabled" in place of the film. Those videos get the same poster
   but as an honest, captioned link out rather than a dead player. */
.video-embed-external .video-embed-poster { filter: brightness(0.86); }

.video-embed-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--ss-space-2) var(--ss-space-3) var(--ss-space-3);
  text-align: left;
  background: rgba(26, 26, 46, 0.82);
  color: var(--ss-on-navy);
}

.video-embed-caption-title {
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-strong);
  line-height: 1.35;
}

.video-embed-caption-meta {
  font-size: var(--ss-fs-12);
  color: #cfd4dd;
}

.video-embed-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video-embed-play { transition: none; }
  .video-embed-trigger:hover .video-embed-play,
  .video-embed-link:hover .video-embed-play { transform: translate(-50%, -50%); }
}

/* ── My drafts (/drafts) ─────────────────────────────────────────────────────────
   The page a contributor returns to. Deliberately plain: a list, a date, and three
   things you can do with each row. */

.drafts-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--ss-space-7) var(--ss-space-4) var(--ss-space-10);
}

.drafts-head h1 {
  font-family: var(--ss-font-ui);
  font-weight: var(--ss-fw-strong);
  font-size: var(--ss-fs-24);
  color: var(--ss-navy);
  margin: 0 0 var(--ss-space-2);
}

.drafts-lede {
  color: var(--ss-text-secondary);
  font-size: var(--ss-fs-16);
  line-height: 1.55;
  margin: 0 0 var(--ss-space-7);
}

.drafts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ss-rule);
}

.drafts-item {
  border-bottom: 1px solid var(--ss-rule);
  padding: var(--ss-space-4) 0;
}

.drafts-item-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ss-space-2);
}

.drafts-problem {
  font-family: var(--ss-font-mono);
  font-size: var(--ss-fs-16);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-link);
  text-decoration: none;
}

.drafts-problem:hover { color: var(--ss-link-hover); text-decoration: underline; }

.drafts-lang {
  font-size: var(--ss-fs-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ss-text-secondary);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-sm);
  padding: 0.05rem var(--ss-space-1);
}

.drafts-when { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }

.drafts-snippet {
  color: var(--ss-text);
  font-size: var(--ss-fs-14);
  line-height: 1.5;
  margin: var(--ss-space-2) 0 var(--ss-space-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.drafts-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ss-space-2);
}

.drafts-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--ss-space-3);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-size: var(--ss-fs-13);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* The site-wide link colour is applied by `a:link:not(.btn)` near the top of this file.
   `:not()` contributes the specificity of its argument, so that selector is (0,2,1) —
   it beats any plain `.class` or `.class:link` rule. Every button here that is an <a>
   therefore has to be qualified with the element and both classes to win outright,
   rather than by source order. */
a.drafts-btn:link,
a.drafts-btn:visited { color: var(--ss-text); }
.drafts-btn:hover,
a.drafts-btn:hover { background: var(--ss-surface-alt); color: var(--ss-text); }
.drafts-btn:disabled { opacity: 0.55; cursor: default; }

/* "Продолжить" is an <a>, so it was being painted link-blue on the navy fill and was
   nearly unreadable. Two site-wide rules reach it — `a:link:not(.btn)` (0,2,1) here and
   `a:visited` (0,1,1) in main_page.css — and a bare `.drafts-btn-primary` is only
   (0,1,0). Qualifying with the tag and both classes gives (0,3,1), which wins on
   specificity rather than on which file happens to load last. */
.drafts-btn-primary,
a.drafts-btn.drafts-btn-primary:link,
a.drafts-btn.drafts-btn-primary:visited {
  background: var(--ss-navy);
  border-color: var(--ss-navy);
  color: var(--ss-on-navy);
}

.drafts-btn-primary:hover,
a.drafts-btn.drafts-btn-primary:hover,
a.drafts-btn.drafts-btn-primary:focus { background: var(--ss-navy-hover); color: var(--ss-on-navy); }
.drafts-btn-danger { color: var(--ss-error); }
.drafts-btn-danger:hover { background: #fdf3f2; color: var(--ss-error); }

.drafts-msg { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }

.drafts-empty {
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-surface-alt);
  padding: var(--ss-space-7) var(--ss-space-6);
  text-align: center;
}

.drafts-empty p { margin: 0 0 var(--ss-space-2); color: var(--ss-text); }
.drafts-empty-hint { color: var(--ss-text-secondary); font-size: var(--ss-fs-14); margin-bottom: var(--ss-space-5) !important; }

/* Header entry, shown only when there is something to come back to. */
.nav-drafts-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-1);
  height: 30px;
  padding: 0 var(--ss-space-2);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  color: var(--ss-text);
  font-size: var(--ss-fs-13);
  text-decoration: none;
  white-space: nowrap;
}

.nav-drafts-pill:hover { background: var(--ss-surface-alt); color: var(--ss-navy); }
.nav-drafts-pill .nav-drafts-count { color: var(--ss-text-secondary); }

@media (min-width: 768px) {
  .drafts-page { padding: var(--ss-space-8) var(--ss-space-4) var(--ss-space-10); }
}

/* ── Upload: what is still missing ───────────────────────────────────────────────
   Replaces a permanently-disabled Submit button that never said why. Shown only
   after someone presses the button, so an untouched form is not scolded. */

.upload-blockers {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--ss-rule);
  border-left: 3px solid var(--ss-error);
  border-radius: var(--ss-radius);
  background: var(--ss-surface-alt);
  padding: var(--ss-space-3) var(--ss-space-4);
  text-align: left;
}

.upload-blockers-intro {
  margin: 0 0 var(--ss-space-2);
  font-size: var(--ss-fs-14);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text);
}

.upload-blockers ul {
  margin: 0;
  padding-left: var(--ss-space-5);
  color: var(--ss-text);
  font-size: var(--ss-fs-14);
  line-height: 1.55;
}

/* Problem-statement figures (lib/statementRender.js): the book's own drawings, sized by
   the renderer from their pixel width. No UA blockquote-style indent. */
.ss-statement figure.statement-figure,
.pf-card-statement figure.statement-figure { margin: var(--ss-space-3) 0 0; }
.statement-figure img { max-width: 100%; height: auto; }

/* ── Community chats (views/messages.ejs) ────────────────────────────────────────────
   A muted conversation still shows how much is unread, but in grey: it no longer counts
   toward the header badge, and the red would claim otherwise. */
.msg-conv-badge.muted {
  background: #6c757d;
}

/* The composer's pointer to the other-language community chat. Advice, not an error, so
   it is quiet: card background, secondary text, a plain link. Phones: text and the close
   button share the first row, the link sits under them. Wider screens: one row. */
.msg-lang-hint {
  border-top: 1px solid var(--ss-rule);
  padding: var(--ss-space-2) var(--ss-space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "text close" "link link";
  gap: 2px var(--ss-space-3);
  align-items: center;
  background: var(--ss-surface-alt);
  flex-shrink: 0;
  font-size: var(--ss-fs-13);
  color: var(--ss-text-secondary);
}

.msg-lang-hint[hidden] {
  display: none;
}

.msg-lang-hint-text {
  grid-area: text;
  min-width: 0;
}

.msg-lang-hint-link {
  grid-area: link;
  justify-self: start;
  color: var(--ss-link);
  font-weight: var(--ss-fw-strong);
  text-decoration: none;
  white-space: nowrap;
}

.msg-lang-hint-link:hover {
  color: var(--ss-link-hover);
  text-decoration: underline;
}

.msg-lang-hint-close {
  grid-area: close;
  background: none;
  border: none;
  color: var(--ss-text-secondary);
  cursor: pointer;
  font-size: var(--ss-fs-18);
  line-height: 1;
  padding: 0 var(--ss-space-1);
}

/* Rank colours: the per-tier rules (.ss-rank-c-<key> and its .ss-rank-first letter) are
   generated from js/palettes.js by scripts/build-css.js, so a tier added or recoloured there
   reaches every username on the site with one build; which name gets which class is decided by
   the server alone (lib/rankPaint.js over every rendered page, js/user-ranks.js for later DOM). What is not per tier lives here: every
   painted username is bold and never underlined, as Codeforces sets handles (the owner,
   2026-09-21). a[class*=] is (0,1,1), the same as a page's ".x a" rules, and this file loads
   first, so the important one here is the hover: pages underline on hover with (0,2,1) at most. */
[class*="ss-rank-c-"], a[class*="ss-rank-c-"], a[class*="ss-rank-c-"]:link, a[class*="ss-rank-c-"]:visited {
  font-weight: var(--ss-fw-strong);
  text-decoration: none;
}
a[class*="ss-rank-c-"]:hover, a[class*="ss-rank-c-"]:focus, .msg-conv-item:hover [class*="ss-rank-c-"] {
  text-decoration: none;
}

.msg-input-bar[hidden] { display: none; }

/* On a suspended member's messages, for everyone else (they see .msg-posting-blocked instead). */
.msg-suspended-badge {
  display: inline-block;
  font-size: var(--ss-fs-12);
  color: var(--ss-error);
  background: var(--ss-error-soft);
  padding: 1px var(--ss-space-1);
  border-radius: var(--ss-radius-sm);
  margin-left: var(--ss-space-1);
  vertical-align: middle;
}

.msg-posting-blocked {
  border-top: 1px solid var(--ss-rule);
  padding: var(--ss-space-3) var(--ss-space-4);
  background: var(--ss-surface-alt);
  flex-shrink: 0;
  font-size: var(--ss-fs-14);
  color: var(--ss-text-secondary);
}

@media (min-width: 768px) {
  .msg-lang-hint {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "text link close";
  }
}

/* ── «Последняя задача»: the prediction mini app (lastProblem.js) ──────────────────────────────
   A mini app inside the community chats, opened from a card under a message the way Telegram
   opens one from a bot: a navy bar, three tabs, one column. It fills a 420px panel over the chat
   on a desktop and the whole screen on a phone (.mapp-*), and also stands alone on its own URL
   (views/apps/last_problem.ejs). Chart colours come from js/palettes.js (--ss-series-*). */

.lp-body {
  margin: 0;
  min-height: 100vh;
  background: var(--ss-surface-alt);
  color: var(--ss-text);
  font-family: var(--ss-font-ui);
}
.lp-body.is-embed { background: var(--ss-surface); }
.lp-body.is-busy { cursor: progress; }
/* The site's selection tint is invisible on navy; on the app's navy surfaces it is the on-navy link colour. */
.lp-bar ::selection,
.lp-banner ::selection,
.lp-toast::selection,
.lp-podium-1 .lp-podium-place::selection { background: var(--ss-on-navy-link); color: var(--ss-navy); }

.lp-app {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--ss-surface);
}
@media (min-width: 576px) {
  .lp-body:not(.is-embed) .lp-app {
    border-left: 1px solid var(--ss-rule);
    border-right: 1px solid var(--ss-rule);
  }
}

.lp-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
  min-height: 56px;
  padding: var(--ss-space-2) var(--ss-space-3);
  background: var(--ss-navy);
  color: var(--ss-on-navy);
}
.lp-bar .lp-bar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ss-radius);
  background: transparent;
  color: var(--ss-on-navy);
  cursor: pointer;
}
.lp-bar .lp-bar-close:hover { background: var(--ss-navy-hover); color: var(--ss-on-navy); }
.lp-bar-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.lp-bar-avatar img { display: block; width: 36px; height: 36px; border-radius: 50%; }
.lp-bar-titles { flex: 1 1 auto; min-width: 0; }
.lp-bar-title,
.lp-bar-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lp-bar-title { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); line-height: var(--ss-lh-tight); }
.lp-bar-sub { font-size: var(--ss-fs-12); line-height: var(--ss-lh-snug); color: var(--ss-on-navy-muted); }
.lp-bar-end { flex-shrink: 0; }
.lp-balance,
.lp-bar .lp-signin {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-1);
  min-height: 32px;
  padding: 0 var(--ss-space-2);
  border: 1px solid var(--ss-on-navy-rule);
  border-radius: var(--ss-radius);
  background: transparent;
  color: var(--ss-on-navy);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-fs-14);
  font-weight: var(--ss-fw-strong);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
}
.lp-balance:hover,
.lp-bar .lp-signin:hover { background: var(--ss-navy-hover); color: var(--ss-on-navy); }
.lp-balance-ground { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-regular); }

/* The quantum: the ħ coin drawn next to every amount. */
.lp-coin { display: inline-block; width: 1.1em; height: 1.1em; margin-left: 0.2em; vertical-align: -0.2em; }
.lp-coin--bar { width: 20px; height: 20px; margin-left: 0; vertical-align: middle; }
.lp-coin--xl { width: 32px; height: 32px; vertical-align: -6px; }
.lp-q { white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-flipping { animation: lp-flip 0.4s ease-out; }
@keyframes lp-flip {
  from { transform: rotateY(90deg); }
  to { transform: rotateY(0deg); }
}

.lp-tabs {
  position: sticky;
  top: 56px;
  z-index: 19;
  display: flex;
  background: var(--ss-surface);
  border-bottom: 1px solid var(--ss-rule);
}
.lp-tab {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 var(--ss-space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ss-text-secondary);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-fs-14);
  font-weight: var(--ss-fw-strong);
  cursor: pointer;
}
.lp-tab:hover { color: var(--ss-text); }
.lp-tab.is-active { color: var(--ss-navy); border-bottom-color: var(--ss-navy); }

.lp-main { flex: 1 1 auto; min-width: 0; padding: var(--ss-space-4) var(--ss-space-4) var(--ss-space-8); }
.lp-question {
  margin: 0 0 var(--ss-space-1);
  font-size: var(--ss-fs-20);
  font-weight: var(--ss-fw-strong);
  line-height: var(--ss-lh-snug);
  color: var(--ss-heading);
}
.lp-meta { margin: 0 0 var(--ss-space-3); font-size: var(--ss-fs-13); line-height: var(--ss-lh-ui); color: var(--ss-text-secondary); }
.lp-banner {
  margin: 0 0 var(--ss-space-3);
  padding: var(--ss-space-2) var(--ss-space-3);
  border-radius: var(--ss-radius);
  background: var(--ss-navy);
  color: var(--ss-on-navy);
  font-size: var(--ss-fs-14);
  font-weight: var(--ss-fw-strong);
  line-height: var(--ss-lh-ui);
}
.lp-note { margin: 0 0 var(--ss-space-3); font-size: var(--ss-fs-14); line-height: var(--ss-lh-ui); color: var(--ss-text-secondary); }
.lp-block { margin-top: var(--ss-space-5); }
.lp-h2 { margin: 0 0 var(--ss-space-2); font-size: var(--ss-fs-14); font-weight: var(--ss-fw-strong); color: var(--ss-text); }
details.lp-block > summary { cursor: pointer; list-style-position: inside; }

.lp-birthday {
  position: relative;
  margin-bottom: var(--ss-space-3);
  padding: var(--ss-space-2) var(--ss-space-3);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  background: var(--ss-surface-alt);
  font-weight: var(--ss-fw-strong);
  text-align: center;
  overflow: hidden;
}
.lp-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--ss-accent);
  animation: lp-burst 1.6s ease-out forwards;
}
.lp-burst span:nth-child(odd) { color: var(--ss-link); }
.lp-burst span:nth-child(3n) { --dx: -140px; --dy: -24px; }
.lp-burst span:nth-child(3n+1) { --dx: 150px; --dy: -16px; }
.lp-burst span:nth-child(3n+2) { --dx: 60px; --dy: 28px; }
.lp-burst span:nth-child(4n) { --dx: -70px; --dy: 30px; }
@keyframes lp-burst {
  from { transform: translate(0, 0) scale(0.4); opacity: 1; }
  to { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.4); opacity: 0; }
}

/* The chart: legend with the current prices above, stepped lines, crosshair and tooltip. */
.lp-chart { margin: 0 0 var(--ss-space-3); }
.lp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-1) var(--ss-space-3);
  margin: 0 0 var(--ss-space-2);
  padding: 0;
  list-style: none;
}
.lp-legend-item { display: inline-flex; align-items: center; gap: var(--ss-space-1); font-size: var(--ss-fs-13); }
.lp-legend-name { font-weight: var(--ss-fw-strong); font-variant-numeric: tabular-nums; }
.lp-legend-value { color: var(--ss-text-secondary); font-variant-numeric: tabular-nums; }
.lp-plot { position: relative; min-width: 0; border-radius: var(--ss-radius-sm); }
.lp-svg { display: block; max-width: 100%; height: auto; }
.lp-grid { stroke: var(--ss-rule-soft); stroke-width: 1; }
.lp-axis { fill: var(--ss-text-secondary); font-family: var(--ss-font-ui); font-size: var(--ss-fs-12); font-variant-numeric: tabular-nums; }
.lp-axis--end { text-anchor: end; }
.lp-axis--mid { text-anchor: middle; }
.lp-tick { stroke: var(--ss-rule-strong); stroke-width: 1; }
.lp-point { stroke: none; }
.lp-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lp-dot { stroke: var(--ss-surface); stroke-width: 2; }
.lp-cross { stroke: var(--ss-rule-strong); stroke-width: 1; }
.lp-hit { fill: transparent; cursor: crosshair; }
.lp-tip {
  position: absolute;
  top: var(--ss-space-1);
  left: var(--tip-x, 0);
  z-index: 2;
  min-width: 112px;
  padding: var(--ss-space-1) var(--ss-space-2);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  box-shadow: var(--ss-shadow);
  font-size: var(--ss-fs-12);
  pointer-events: none;
}
.lp-tip-when { margin-bottom: 2px; color: var(--ss-text-secondary); }
.lp-tip-row { display: flex; align-items: center; gap: var(--ss-space-1); font-variant-numeric: tabular-nums; }
.lp-tip-row strong { min-width: 40px; color: var(--ss-text); }
.lp-tip-row span { color: var(--ss-text-secondary); }

/* The problems, most likely to be last first. */
/* Column names over the problems, on the same grid as a row. */
.lp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 64px 72px;
  gap: var(--ss-space-2);
  margin-top: var(--ss-space-2);
  padding-bottom: var(--ss-space-1);
  border-bottom: 1px solid var(--ss-rule);
  font-size: var(--ss-fs-12);
  color: var(--ss-text-secondary);
}
.lp-cols-num { text-align: right; }
.lp-cols-mid { text-align: center; }
.lp-outcomes { margin: 0; padding: 0; list-style: none; }
.lp-row { border-bottom: 1px solid var(--ss-rule); }
/* The row is not a button: its problem number is a link of its own, and the weight is the button. */
.lp-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 64px 72px;
  align-items: center;
  gap: var(--ss-space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--ss-space-2) 0;
  border: 0;
  background: transparent;
  color: var(--ss-text);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-fs-14);
  text-align: left;
  cursor: pointer;
}
.lp-row-main:hover { background: var(--ss-surface-alt); }
.lp-row.is-open .lp-row-main { background: var(--ss-surface-alt); }
.lp-row-name { display: flex; align-items: baseline; gap: var(--ss-space-2); min-width: 0; }
.lp-row-id {
  flex-shrink: 0;
  font-weight: var(--ss-fw-strong);
  font-size: var(--ss-fs-14);
  font-variant-numeric: tabular-nums;
}
.lp-row-demon { flex-shrink: 0; align-self: center; width: 16px; height: 16px; border-radius: 50%; }
.lp-row-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ss-text-secondary); font-size: var(--ss-fs-13); }
/* The price reads as the button it is: tapping a row opens the buy form under it. */
.lp-row-price {
  justify-self: end;
  min-width: 56px;
  padding: 2px var(--ss-space-2);
  border: 1px solid var(--ss-rule-strong);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  color: var(--ss-text);
  text-align: center;
  font-family: var(--ss-font-ui);
  font-size: var(--ss-fs-14);
  font-weight: var(--ss-fw-strong);
  line-height: var(--ss-lh-ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
/* Problem numbers open the problem finder: text coloured, quietly underlined, the link colour on hover. */
.lp-id-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ss-rule-strong);
  text-underline-offset: 3px;
}
.lp-id-link:hover { color: var(--ss-link); text-decoration-color: currentColor; }
.lp-row-main:hover .lp-row-price { border-color: var(--ss-navy); }
.lp-row.is-open .lp-row-price { background: var(--ss-navy); border-color: var(--ss-navy); color: var(--ss-on-navy); }
.lp-hint { margin: var(--ss-space-4) 0 0; font-size: var(--ss-fs-13); line-height: var(--ss-lh-ui); color: var(--ss-text); }
.lp-row-mult { text-align: right; color: var(--ss-text-secondary); font-size: var(--ss-fs-13); font-variant-numeric: tabular-nums; }
.lp-heat {
  justify-self: center;
  min-width: 28px;
  padding: 0 var(--ss-space-1);
  border-radius: var(--ss-radius-sm);
  font-size: var(--ss-fs-12);
  font-weight: var(--ss-fw-strong);
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lp-heat-1 { background: var(--ss-heat-1); color: var(--ss-heat-1-ink); }
.lp-heat-2 { background: var(--ss-heat-2); color: var(--ss-heat-2-ink); }
.lp-heat-3 { background: var(--ss-heat-3); color: var(--ss-heat-3-ink); }
.lp-heat-4 { background: var(--ss-heat-4); color: var(--ss-heat-4-ink); }
.lp-heat-5 { background: var(--ss-heat-5); color: var(--ss-heat-5-ink); }
.lp-heat-6 { background: var(--ss-heat-6); color: var(--ss-heat-6-ink); }
.lp-heat-7 { background: var(--ss-heat-7); color: var(--ss-heat-7-ink); }
.lp-heat-8 { background: var(--ss-heat-8); color: var(--ss-heat-8-ink); }
.lp-heat-9 { background: var(--ss-heat-9); color: var(--ss-heat-9-ink); }

.lp-trade { padding: var(--ss-space-2) 0 var(--ss-space-3); }
.lp-trade-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2); }
.lp-amount { display: inline-flex; align-items: center; gap: var(--ss-space-1); }
.lp-amount-input {
  width: 112px;
  min-width: 0;
  min-height: var(--ss-control);
  padding: 0 var(--ss-space-3);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-text-input);
  font-weight: var(--ss-fw-strong);
  font-variant-numeric: tabular-nums;
}
.lp-amount-input:focus { border-color: var(--ss-focus-color); }
.lp-quick { display: flex; flex-wrap: wrap; gap: var(--ss-space-1); }
.lp-chip {
  min-height: 32px;
  padding: 0 var(--ss-space-2);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-strong);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.lp-chip:hover { background: var(--ss-surface-hover); }
.lp-preview { min-height: 1.5em; margin: var(--ss-space-2) 0 0; font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.lp-egg { margin: var(--ss-space-1) 0 0; font-size: var(--ss-fs-13); color: var(--ss-accent); }
.lp-trade-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-2); margin-top: var(--ss-space-2); }
.lp-statement {
  margin-top: var(--ss-space-2);
  padding: var(--ss-space-3);
  border-radius: var(--ss-radius);
  background: var(--ss-surface-alt);
  font-size: var(--ss-fs-14);
  line-height: var(--ss-lh-ui);
  overflow-wrap: anywhere;
}
.lp-statement p { margin: 0 0 var(--ss-space-2); }
.lp-statement p:last-child { margin-bottom: 0; }
.lp-statement img,
.lp-statement svg { max-width: 100%; height: auto; }

.lp-positions { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ss-space-2); }
.lp-pos { padding: var(--ss-space-2) var(--ss-space-3); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius); }
.lp-pos.is-out { opacity: 0.6; }
.lp-pos-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ss-space-2); }
.lp-pos-id { font-weight: var(--ss-fw-strong); font-size: var(--ss-fs-14); font-variant-numeric: tabular-nums; }
.lp-pos-shares { margin-left: auto; font-size: var(--ss-fs-13); color: var(--ss-text-secondary); font-variant-numeric: tabular-nums; }
.lp-pos-money { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.lp-pos-actions { display: flex; flex-wrap: wrap; gap: var(--ss-space-1); margin-top: var(--ss-space-2); }

.lp-solved ul,
.lp-feed,
.lp-rules ol { margin: 0; padding: 0; list-style: none; }
.lp-solved li,
.lp-feed li {
  display: flex;
  align-items: baseline;
  gap: var(--ss-space-2);
  padding: var(--ss-space-1) 0;
  border-bottom: 1px solid var(--ss-rule-soft);
  font-size: var(--ss-fs-13);
}
.lp-solved-id { font-weight: var(--ss-fw-strong); font-variant-numeric: tabular-nums; }
.lp-solved-who { flex: 1 1 auto; min-width: 0; color: var(--ss-text-secondary); }
.lp-solved-when,
.lp-feed-when { flex-shrink: 0; margin-left: auto; color: var(--ss-text-secondary); font-variant-numeric: tabular-nums; }
.lp-feed-what { min-width: 0; }
.lp-feed li.is-cancelled .lp-feed-what { text-decoration: line-through; color: var(--ss-text-secondary); }
.lp-rules ol { counter-reset: lp-rule; }
.lp-rules li { position: relative; padding: var(--ss-space-1) 0 var(--ss-space-1) var(--ss-space-5); font-size: var(--ss-fs-13); line-height: var(--ss-lh-ui); color: var(--ss-text); }
.lp-rules li::before { content: counter(lp-rule) "."; counter-increment: lp-rule; position: absolute; left: 0; color: var(--ss-text-secondary); }

/* Leaders */
.lp-avatar { display: block; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--ss-surface-alt); }
.lp-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--ss-space-2);
  margin: var(--ss-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.lp-podium-step { display: flex; flex-direction: column; align-items: center; gap: var(--ss-space-1); min-width: 0; text-align: center; }
.lp-podium-1 { order: 2; }
.lp-podium-2 { order: 1; }
.lp-podium-3 { order: 3; }
.lp-podium-name { max-width: 100%; overflow-wrap: anywhere; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-strong); line-height: var(--ss-lh-snug); }
.lp-podium-profit { font-size: var(--ss-fs-13); font-variant-numeric: tabular-nums; }
.lp-podium-place {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: var(--ss-space-2);
  border-radius: var(--ss-radius) var(--ss-radius) 0 0;
  background: var(--ss-surface-alt);
  border: 1px solid var(--ss-rule);
  border-bottom: 0;
  font-size: var(--ss-fs-20);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text-secondary);
}
.lp-podium-1 .lp-podium-place { height: 72px; background: var(--ss-navy); border-color: var(--ss-navy); color: var(--ss-on-navy); }
.lp-podium-2 .lp-podium-place { height: 52px; }
.lp-podium-3 .lp-podium-place { height: 40px; }
.lp-leaders { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ss-rule); }
.lp-leader { display: flex; align-items: center; gap: var(--ss-space-2); min-height: 44px; border-bottom: 1px solid var(--ss-rule-soft); font-size: var(--ss-fs-14); }
.lp-leader.is-you { background: var(--ss-surface-alt); }
.lp-leader-rank { width: 28px; text-align: right; color: var(--ss-text-secondary); font-variant-numeric: tabular-nums; }
.lp-leader-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-leader-profit { flex-shrink: 0; font-weight: var(--ss-fw-strong); font-variant-numeric: tabular-nums; }

/* Shop */
.lp-shop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ss-space-2);
  margin: var(--ss-space-3) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) {
  .lp-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lp-rx {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ss-space-2);
  min-width: 0;
  padding: var(--ss-space-3) var(--ss-space-2);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-surface);
  text-align: center;
}
.lp-rx.is-target { border-color: var(--ss-link); box-shadow: 0 0 0 2px var(--ss-link); }
.lp-rx.is-owned { background: var(--ss-surface-alt); }
.lp-rx-art { width: 56px; height: 56px; }
.lp-rx-name { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-strong); line-height: var(--ss-lh-snug); }
.lp-rx-owned { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-strong); color: var(--ss-success-strong); }
.lp-rx-note { font-size: var(--ss-fs-12); line-height: var(--ss-lh-snug); color: var(--ss-text-secondary); }

/* Dialogs over the app (welcome, the demon's notes) and the toast */
.lp-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ss-space-4);
  background: var(--ss-scrim);
}
.lp-layer[hidden] { display: none; }
.lp-dialog {
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--ss-space-5);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-surface);
  box-shadow: var(--ss-shadow);
}
.lp-welcome { text-align: center; }
.lp-welcome-coin { padding: 0; border: 0; background: transparent; cursor: pointer; }
.lp-welcome-coin img { display: block; width: 120px; height: 120px; margin: 0 auto; }
.lp-welcome-title { margin: var(--ss-space-3) 0 var(--ss-space-1); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-strong); color: var(--ss-text-secondary); }
.lp-welcome-amount { margin: 0 0 var(--ss-space-2); font-size: var(--ss-fs-32); font-weight: var(--ss-fw-strong); line-height: var(--ss-lh-tight); font-variant-numeric: tabular-nums; color: var(--ss-heading); }
.lp-notes-head { display: flex; align-items: center; gap: var(--ss-space-3); }
.lp-notes-head .lp-welcome-title { margin: 0; color: var(--ss-heading); }
.lp-notes-list { margin: var(--ss-space-3) 0; padding-left: var(--ss-space-5); font-size: var(--ss-fs-14); line-height: var(--ss-lh-ui); }
.lp-notes-list li + li { margin-top: var(--ss-space-2); }
.lp-toast {
  position: fixed;
  left: 50%;
  bottom: var(--ss-space-4);
  z-index: 40;
  max-width: calc(100% - 32px);
  padding: var(--ss-space-2) var(--ss-space-3);
  border-radius: var(--ss-radius);
  background: var(--ss-navy);
  color: var(--ss-on-navy);
  box-shadow: var(--ss-shadow);
  font-size: var(--ss-fs-14);
  transform: translateX(-50%);
}
.lp-toast[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .is-flipping,
  .lp-burst span { animation: none; }
}

/* ── The mini app in the chat: the card under a message and the sheet it opens ────────────────
   js/apps/launcher.js. The card sits inside a bubble, so it resets what a bubble hands down
   (pre-wrap, white text in a sent bubble). */
.mapp-card {
  display: block;
  cursor: pointer;
  width: 288px;
  max-width: 100%;
  margin-top: var(--ss-space-2);
  padding: var(--ss-space-3);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-family: var(--ss-font-ui);
  font-size: var(--ss-fs-14);
  line-height: var(--ss-lh-snug);
  white-space: normal;
  text-align: left;
}
.mapp-card:hover { border-color: var(--ss-rule-strong); background: var(--ss-surface-alt); }
.mapp-card:hover .mapp-card-bar { background: var(--ss-surface); }
.mapp-card-head { display: flex; align-items: center; gap: var(--ss-space-2); }
.mapp-card-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.mapp-card-titles { min-width: 0; }
.mapp-card-title { font-weight: var(--ss-fw-strong); color: var(--ss-heading); }
.mapp-card-kind { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }
.mapp-card-question { margin: var(--ss-space-2) 0; font-weight: var(--ss-fw-strong); }
.mapp-card-top { display: grid; gap: var(--ss-space-1); margin: 0; padding: 0; list-style: none; }
.mapp-card-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; align-items: center; gap: var(--ss-space-2); }
.mapp-card-id { font-weight: var(--ss-fw-strong); font-variant-numeric: tabular-nums; }
.mapp-card-bar { display: block; height: 6px; border-radius: var(--ss-radius-sm); background: var(--ss-surface-alt); overflow: hidden; }
.mapp-card-fill { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: var(--ss-radius-sm); background: var(--ss-link); }
.mapp-card-pct { text-align: right; font-weight: var(--ss-fw-strong); font-variant-numeric: tabular-nums; }
.mapp-card-leaders { margin-top: var(--ss-space-2); font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }
.mapp-card-leader + .mapp-card-leader::before { content: " · "; }
.mapp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ss-space-2); margin-top: var(--ss-space-3); }
.mapp-card-traders { font-size: var(--ss-fs-12); color: var(--ss-text-secondary); }

.mapp-sheet {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.mapp-sheet[hidden] { display: none; }
.mapp-scrim { position: absolute; inset: 0; background: var(--ss-scrim); }
.mapp-panel { position: relative; width: 100%; height: 100%; background: var(--ss-surface); overflow: hidden; }
.mapp-frame { display: block; width: 100%; height: 100%; border: 0; }
html.mapp-open,
html.mapp-open body { overflow: hidden; }
@media (min-width: 768px) {
  .mapp-sheet { align-items: center; padding: var(--ss-space-6); }
  .mapp-panel {
    width: 720px;
    max-width: 100%;
    height: 820px;
    max-height: 100%;
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow);
  }
}

/* A premium reaction this member does not own yet, in either picker: greyed; a tap opens the shop. */
.msg-reaction-pick.is-locked,
.comment-react-pick.is-locked {
  filter: grayscale(1);
  opacity: 0.5;
}
.msg-reaction-pick.is-locked:hover,
.comment-react-pick.is-locked:hover {
  filter: grayscale(0.3);
  opacity: 0.85;
}

/* ── Live alerts on every page (js/pulse.js) ────────────────────────────────────────────────────
   A new DM, a reply to you or an @mention shows as a small card: across the top on a phone, in the
   top-right corner under the header on a wider screen. Up to three at a time. */
.ss-toasts {
  position: fixed;
  top: var(--ss-space-2);
  left: var(--ss-space-2);
  right: var(--ss-space-2);
  z-index: 1500;
  display: grid;
  gap: var(--ss-space-2);
  pointer-events: none;
}
@media (min-width: 768px) {
  .ss-toasts { top: 72px; left: auto; right: var(--ss-space-4); width: 360px; }
}
.ss-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-surface);
  box-shadow: var(--ss-shadow);
  pointer-events: auto;
  animation: ss-toast-in 0.2s ease-out;
}
@keyframes ss-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-toast { animation: none; }
}
.ss-toasts .ss-toast-link {
  display: flex;
  align-items: flex-start;
  gap: var(--ss-space-3);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--ss-space-3) var(--ss-space-8) var(--ss-space-3) var(--ss-space-3);
  color: var(--ss-text);
  text-decoration: none;
}
.ss-toasts .ss-toast-link:hover { color: var(--ss-text); background: var(--ss-surface-alt); border-radius: var(--ss-radius-lg); }
.ss-toast-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ss-toast-body { display: grid; gap: 2px; min-width: 0; }
.ss-toast-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ss-space-1); font-size: var(--ss-fs-14); }
.ss-toast-what { font-size: var(--ss-fs-13); color: var(--ss-text-secondary); }
.ss-toast-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--ss-fs-14);
  line-height: var(--ss-lh-snug);
  overflow-wrap: anywhere;
}
.ss-toast-close {
  position: absolute;
  top: var(--ss-space-1);
  right: var(--ss-space-1);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--ss-radius);
  background: transparent;
  color: var(--ss-text-secondary);
  font-size: var(--ss-fs-20);
  line-height: 1;
  cursor: pointer;
}
.ss-toast-close:hover { background: var(--ss-surface-hover); color: var(--ss-text); }


/* === main_page.css === */
/* Base resets and font — colors from /css/design-system.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--ss-font-ui);
  background-color: var(--ss-page-bg);
  color: var(--ss-body-text);
}

/* ═══ Site header (views/default/main_site_header.ejs) — on every page ═══════════════════════
   White bar, hairline rule, the wordmark in the book's title face (SS Wordmark), the menu in
   SS Sans. No pills, no shadows heavier than the token, one 40px control height. */
.hero-section {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  background: var(--ss-surface);
  border-bottom: 1px solid var(--ss-rule);
  font-family: var(--ss-font-ui);
}
.hero-section .navbar {
  --bs-navbar-padding-y: var(--ss-space-2);
  min-height: 56px;
  background: transparent;
  border: 0;
}
.hero-section .navbar > .container-fluid {
  padding-left: var(--ss-gutter) !important;
  padding-right: var(--ss-gutter) !important;
}
.hero-section .navbar-brand,
.hero-section .navbar-brand:hover {
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
  margin-right: var(--ss-space-4);
  color: var(--ss-navy);
  text-decoration: none;
}
.logo-img { width: 32px; height: 32px; object-fit: contain; margin: 0 !important; }
.site-title {
  margin: 0;
  font-family: var(--ss-font-wordmark);
  font-weight: 600;
  font-synthesis: none;
  font-size: var(--ss-text-wordmark);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ss-navy);
}
.site-motto {
  margin: 2px 0 0;
  font-size: var(--ss-text-label);
  line-height: 1.3;
  color: var(--ss-text-secondary);
}
.hero-section .navbar-nav .nav-link {
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text);
}
.hero-section .navbar-nav .nav-link:hover,
.hero-section .navbar-nav .nav-link:focus { color: var(--ss-navy); }
.hero-section .language-nav-link,
.hero-section .language-nav-link:hover {
  font-size: var(--ss-text-ui);
  font-weight: var(--ss-fw-strong);
  color: var(--ss-navy);
}
.hero-section .navbar-toggler { padding: var(--ss-space-1); border: 0; font-size: var(--ss-text-body); }
.hero-section .navbar-toggler:focus { box-shadow: none; }
.hero-section .navbar-toggler:focus-visible { outline: var(--ss-focus-ring); outline-offset: var(--ss-focus-offset); }

.searchbar-wrapper { position: relative; width: 100%; max-width: 420px; margin-inline: auto; }
.searchbar-wrapper .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  fill: var(--ss-text-tertiary);
  pointer-events: none;
}
.searchbar-wrapper .search-icon path { fill: currentColor; }
.searchbar-wrapper .search-icon { color: var(--ss-text-tertiary); }
.searchbar-input.form-control {
  min-height: var(--ss-control);
  padding: 7px 36px 7px 38px;
  font-size: var(--ss-text-input);
  color: var(--ss-text);
  background-color: var(--ss-surface-alt);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
}
.searchbar-input.form-control:focus { background-color: var(--ss-surface); }
.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--ss-space-1);
  line-height: 0;
  background: none;
  border: 0;
  border-radius: var(--ss-radius-sm);
  color: var(--ss-text-tertiary);
  cursor: pointer;
}
.search-clear path { fill: currentColor; }
.search-results { border-color: var(--ss-rule) !important; border-radius: var(--ss-radius-lg) !important; box-shadow: var(--ss-shadow) !important; }
.search-results ul { padding: var(--ss-space-2) 0; }
.search-results ul { list-style: none; margin: 0; }
.ss-search-item { padding: 0; }
.ss-search-item.is-active,
.ss-search-item:hover { background-color: var(--ss-surface-hover); }
.ss-search-link {
  display: flex;
  align-items: flex-start;
  gap: var(--ss-space-2);
  padding: var(--ss-space-2) var(--ss-space-3);
  color: var(--ss-text);
  text-decoration: none;
}
.ss-search-link:hover { color: var(--ss-text); text-decoration: none; }
.ss-search-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: var(--ss-text-tertiary); }
.ss-search-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ss-search-title { font-size: var(--ss-text-ui); line-height: var(--ss-lh-snug); }
.ss-search-title strong { font-weight: var(--ss-fw-strong); color: var(--ss-link); }
.ss-search-snippet,
.ss-search-meta {
  font-size: var(--ss-text-label);
  line-height: var(--ss-lh-snug);
  color: var(--ss-text-secondary);
  margin-top: 2px;
}
.ss-search-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-search-lang {
  margin-left: var(--ss-space-1);
  padding: 0 var(--ss-space-1);
  font-weight: var(--ss-fw-strong);
  background: var(--ss-surface-hover);
  border-radius: var(--ss-radius-sm);
}
.ss-search-mark { padding: 0 1px; color: inherit; background: var(--ss-warning-soft); border-radius: var(--ss-radius-sm); }
.ss-search-more { border-top: 1px solid var(--ss-rule); }
.ss-search-more a {
  display: block;
  padding: var(--ss-space-2) var(--ss-space-3);
  font-size: var(--ss-text-meta);
  color: var(--ss-text-secondary);
  text-decoration: none;
}
.ss-search-more a:hover { color: var(--ss-link-hover); text-decoration: underline; }
.ss-search-empty { padding: var(--ss-space-5) var(--ss-space-4); text-align: center; }
.ss-search-empty p { margin: 0 0 var(--ss-space-3); font-size: var(--ss-text-ui); color: var(--ss-text-secondary); }
.ss-search-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ss-space-2); }

.ss-menu-item-title { font-size: var(--ss-text-ui); line-height: 1.35; color: var(--ss-text); }
.ss-menu-item-desc { font-size: var(--ss-text-meta); line-height: 1.35; color: var(--ss-text-secondary); white-space: normal; }
.dropdown-menu-hover .dropdown-item svg { fill: var(--ss-text-tertiary); }

.header-upload-btn .upload-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 0;
  color: var(--ss-text-secondary);
  background: none;
  border: 0;
  border-radius: var(--ss-radius);
  cursor: pointer;
}
.header-icon-btn:hover { color: var(--ss-navy); background: var(--ss-surface-hover); }
.header-icon-btn svg { stroke: currentColor; }
.ss-count--corner { position: absolute; top: 0; right: -2px; }
.ss-count--muted { background-color: var(--ss-text-secondary); }
.mobile-nav-link .ss-count { margin-left: var(--ss-space-1); }

.notif-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1050;
  width: 340px;
  max-height: 440px;
  margin-top: var(--ss-space-2);
  overflow: hidden;
}
.notif-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ss-space-3) var(--ss-space-4);
  border-bottom: 1px solid var(--ss-rule);
}
.notif-dropdown-title { font-size: var(--ss-text-body); font-weight: var(--ss-fw-strong); color: var(--ss-navy); }
.notif-dropdown-action { padding: 0; font-size: var(--ss-text-meta); color: var(--ss-link); background: none; border: 0; cursor: pointer; }
.notif-dropdown-list { max-height: 340px; overflow-y: auto; }
.notif-dropdown-foot { padding: var(--ss-space-2) var(--ss-space-4); text-align: center; border-top: 1px solid var(--ss-rule); }
.notif-dropdown-foot a { font-size: var(--ss-text-meta); text-decoration: none; }
.notif-empty { padding: var(--ss-space-6) var(--ss-space-4); text-align: center; font-size: var(--ss-text-ui); color: var(--ss-text-secondary); }
.notif-item {
  display: flex;
  gap: var(--ss-space-3);
  padding: var(--ss-space-3) var(--ss-space-4);
  color: var(--ss-text);
  text-decoration: none;
  background: var(--ss-surface);
  border-bottom: 1px solid var(--ss-rule-soft);
}
.notif-item.is-read { background: var(--ss-surface-alt); }
.notif-item:hover { color: var(--ss-text); background: var(--ss-surface-hover); }
.notif-item-icon { flex: 0 0 auto; padding-top: 2px; color: var(--ss-text-secondary); line-height: 0; }
.notif-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.notif-item-title,
.notif-item-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-title { font-size: var(--ss-text-meta); font-weight: var(--ss-fw-strong); line-height: 1.35; }
.notif-item.is-read .notif-item-title { font-weight: var(--ss-fw-regular); }
.notif-item-message,
.notif-item-time { font-size: var(--ss-text-meta); color: var(--ss-text-secondary); margin-top: 2px; }

@media (max-width: 575.98px) {
  .logo-img { width: 28px; height: 28px; }
  .hero-section .navbar { min-height: 52px; }
}

/* ----------------------------
   TEAM & CORE TEAM LINKS
---------------------------- */

/* ----------------------------
   CHAPTERS & PROBLEMS
---------------------------- */

.chapter-title {
  margin: 0;
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text-secondary);
}

.chapter-name {
  color: var(--ss-heading);
  font-weight: var(--ss-fw-strong);
}

.section-title {
  font-weight: var(--ss-fw-strong);
  color: var(--ss-text-secondary);
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ss-space-2) var(--ss-space-6);
  margin-top: var(--ss-space-2);
  padding-top: var(--ss-space-2);
  border-top: 1px dashed var(--ss-rule);
}

.problem-item {
  text-align: center;
}

.problem-link {
  display: block;
  padding: var(--ss-space-2) var(--ss-space-2);
  margin: 2px;
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-border-light);
  color: var(--ss-link);
  font-size: var(--ss-fs-16);
  text-decoration: none !important;
  box-shadow: var(--ss-shadow);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.problem-link:hover {
  background: var(--ss-card-bg);
  border-color: var(--ss-link);
  color: var(--ss-link-hover);
  transform: translateX(2px);
  box-shadow: var(--ss-shadow);
}

/* ----------------------------
   EDIT/UPLOAD LINK (non-button uses only; .btn variants come from the Bootstrap bridge)
---------------------------- */
.edit-button:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-2);
  margin-bottom: 0;
  padding: var(--ss-space-1) var(--ss-space-3);
  font-size: var(--ss-text-ui);
  color: var(--ss-link);
  text-decoration: none;
  background: var(--ss-surface);
  border: 1px solid var(--ss-rule);
  border-radius: var(--ss-radius);
}
.edit-button:not(.btn):hover {
  color: var(--ss-link-hover);
  background: var(--ss-surface-alt);
  border-color: var(--ss-rule-strong);
}
.upload-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------
   TABLES (Top Authors, etc.)
---------------------------- */

.table {
  margin: 0 auto;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--ss-space-2) var(--ss-space-2);
  text-align: center;
}

.table th {
  background-color: var(--ss-surface-alt);
  font-weight: var(--ss-fw-strong);
}

.table td:first-child {
  font-size: var(--ss-fs-18);
}

.table tbody tr:hover {
  background-color: var(--ss-surface-hover);
}

.table thead th {
  background-color: var(--ss-surface) !important;
  border-bottom: 2px solid var(--ss-rule) !important;
  font-weight: var(--ss-fw-strong);
}

.table thead th,
.table tbody td {
  border: none;
  /* Remove other borders */
}

/* ----------------------------
   TIMELINE
---------------------------- */
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  padding: 0;
  width: 90%;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ccc;
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin: var(--ss-space-5) 0;
  padding-left: var(--ss-space-10);
  width: 100%;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 22px;
  width: 16px;
  height: 16px;
  background-color: var(--ss-surface);
  border: 2px solid var(--ss-rule);
  border-radius: 50%;
}
.timeline-item::after {
  content: '';
  position: absolute;
  left: 34px;
  top: 30px;
  width: 16px;
  height: 2px;
  background-color: #ccc;
}
.timeline-content {
  background: var(--ss-surface);
  padding: var(--ss-space-3) var(--ss-space-4);
  border-radius: var(--ss-radius-sm);
  box-shadow: var(--ss-shadow);
  font-size: var(--ss-fs-14);
  font-family: var(--ss-font-ui);
  width: 100%;
}

/* Remove old timeline styles */
.tl-content,
.tl-header,
.tl-body,
.tl-marker,
.tl-title,
.tl-time {
  display: none;
}

/* ----------------------------
   POPUP & OVERLAY
---------------------------- */
#edit-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 1000;
  background: var(--ss-surface);
  padding: var(--ss-space-7);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow);
  width: 90%;
  max-width: 450px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

#edit-popup.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

#edit-popup h3 {
  margin-top: 0;
  margin-bottom: var(--ss-space-6);
  color: var(--ss-text);
  font-size: var(--ss-fs-20);
  font-weight: var(--ss-fw-strong);
}

#edit-popup input {
  width: 100%;
  padding: var(--ss-space-3) var(--ss-space-4);
  margin-bottom: var(--ss-space-6);
  border: 2px solid var(--ss-rule);
  border-radius: var(--ss-radius-sm);
  font-size: var(--ss-fs-16);
  transition: border-color 0.2s;
}

#edit-popup input:focus {
  outline: none;
  border-color: var(--ss-link);
}

#edit-popup button {
  padding: var(--ss-space-3) var(--ss-space-6);
  border: none;
  border-radius: var(--ss-radius-sm);
  cursor: pointer;
  font-size: var(--ss-fs-16);
  font-weight: var(--ss-fw-strong);
  margin-right: var(--ss-space-3);
}

#submit-problem {
  background-color: var(--ss-primary-btn);
  color: var(--ss-white);
}

#submit-problem:hover {
  background-color: var(--ss-primary-btn-hover);
}

#cancel-edit {
  background-color: var(--ss-surface-hover);
  color: var(--ss-text);
}

#cancel-edit:hover {
  background-color: #e0e0e0;
}

#popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0);
  transition: all 0.3s ease-in-out;
}

#popup-overlay.active {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

/* ----------------------------
   FOOTER
---------------------------- */
footer.site-footer {
  font-size: var(--ss-fs-14);
  font-family: var(--ss-font-ui);
}

footer.site-footer p {
  margin: var(--ss-space-1) 0;
}

footer:not(.site-footer) {
  font-size: var(--ss-fs-14);
}

footer:not(.site-footer) p {
  margin: var(--ss-space-1) 0;
}

/* ---------------------------------------
   MEDIA QUERIES FOR EXTRA SMALL SCREENS
---------------------------------------- */
@media (max-width: 576px) {
  .hero-subtitle {
    font-size: var(--ss-fs-24); /* slightly smaller on very small screens */
  }
  .hero-tagline {
    font-size: var(--ss-fs-16);   /* reduce tagline size on extra small screens */
  }
  .hero-content {
    margin-top: var(--ss-space-4);
    margin-bottom: var(--ss-space-4);
  }
}

/* PDF Download Button */