/* Minification failed. Returning unminified contents.
(6,10): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,28): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,86): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,103): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,123): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,143): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,162): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,180): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,198): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,214): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,230): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,248): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,271): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,293): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,315): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,337): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,359): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,381): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,403): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,425): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,447): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,469): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,490): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,513): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,534): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,552): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,573): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,593): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,612): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,630): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,658): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,689): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,716): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,741): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,768): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,794): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,821): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,844): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,871): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,892): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,921): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,950): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1151): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1250): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1339): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1387): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1412): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1438): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1464): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1488): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1506): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1528): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1552): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1578): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1629): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1657): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1687): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1716): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1743): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1771): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1801): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1825): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1855): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,1879): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,2053): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-font-family'
(6,2090): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-font-size'
(6,2127): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-font-weight'
(6,2166): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-line-height'
(6,2199): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-color'
(6,2231): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-text-align'
(6,2274): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-bg'
(6,3502): run-time error CSS1039: Token not allowed after unary operator: '-bs-highlight-bg'
(6,3645): run-time error CSS1039: Token not allowed after unary operator: '-bs-link-color'
(6,3706): run-time error CSS1039: Token not allowed after unary operator: '-bs-link-hover-color'
(6,3858): run-time error CSS1039: Token not allowed after unary operator: '-bs-font-monospace'
(6,4065): run-time error CSS1039: Token not allowed after unary operator: '-bs-code-color'
(6,4180): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-bg'
(6,4215): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-color'
(6,7682): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(6,7970): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,7991): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,8042): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(6,8085): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(6,8625): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,8646): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,8716): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-y'
(6,8760): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(6,8803): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(6,8889): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(6,8932): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(6,8968): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-y'
(6,10144): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10171): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10198): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10231): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10264): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10296): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10328): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10358): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10388): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10420): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10452): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,10482): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,11817): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,11850): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,11883): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,11922): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,11961): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,11999): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,12037): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,12073): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,12109): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,12147): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,12185): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,12221): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13557): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13590): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13623): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13662): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13701): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13739): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13777): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13813): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13849): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13887): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13925): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,13961): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15297): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15330): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15363): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15402): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15441): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15479): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15517): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15553): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15589): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15627): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15665): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,15701): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17038): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17071): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17104): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17143): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17182): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17220): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17258): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17294): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17330): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17368): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17406): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,17442): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,18814): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,18849): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,18884): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,18925): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,18966): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19006): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19046): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19084): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19122): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19162): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19202): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19240): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19267): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19305): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19331): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19378): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19411): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19457): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19499): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19544): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19584): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19628): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,19710): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,19764): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,19855): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-bg'
(6,19928): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-accent-bg'
(6,20416): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20475): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-striped-color'
(6,20555): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20614): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-striped-color'
(6,20653): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20711): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-active-color'
(6,20765): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20822): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-hover-color'
(6,20860): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20882): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20904): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20936): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20966): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,20996): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21025): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21054): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21082): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21121): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,21156): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,21197): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21219): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21241): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21273): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21303): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21333): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21362): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21391): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21419): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21458): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,21493): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,21532): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21554): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21576): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21608): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21638): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21668): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21697): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21726): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21754): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21793): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,21828): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,21864): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21886): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21908): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21940): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,21970): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22000): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22029): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22058): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22086): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22125): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,22160): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,22199): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22221): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22243): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22275): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22305): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22335): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22364): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22393): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22421): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22460): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,22495): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,22533): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22555): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22577): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22609): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22639): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22669): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22698): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22727): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22755): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22794): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,22829): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,22866): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22888): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22910): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22942): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,22972): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23002): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23031): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23060): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23088): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23127): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,23162): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,23198): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23220): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23242): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23274): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23304): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23334): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23363): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23392): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23420): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23459): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(6,23494): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-border-color'
(6,46069): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46096): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46124): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46147): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46171): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46196): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46221): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46244): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46268): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46294): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46328): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46360): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46400): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46491): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46522): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,46637): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-padding-y'
(6,46661): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-padding-x'
(6,46697): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-font-family'
(6,46733): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-font-size'
(6,46769): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-font-weight'
(6,46807): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-line-height'
(6,46839): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-color'
(6,47006): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-border-width'
(6,47039): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-border-color'
(6,47080): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-border-radius'
(6,47125): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-bg'
(6,47346): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-color'
(6,47389): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-bg'
(6,47425): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-border-color'
(6,47486): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-color'
(6,47523): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-bg'
(6,47553): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-border-color'
(6,47605): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-color'
(6,47648): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-bg'
(6,47684): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-border-color'
(6,47738): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-focus-box-shadow'
(6,47812): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-border-color'
(6,47866): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-focus-box-shadow'
(6,48002): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-active-color'
(6,48046): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-active-bg'
(6,48083): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-active-border-color'
(6,48297): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-focus-box-shadow'
(6,48385): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-disabled-color'
(6,48451): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-disabled-bg'
(6,48490): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-disabled-border-color'
(6,48534): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-disabled-opacity'
(6,48573): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48593): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48613): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48643): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48669): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48695): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48731): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48768): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48795): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48822): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48859): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48919): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48948): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,48977): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49031): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49051): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49071): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49101): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49127): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49153): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49189): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49227): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49254): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49281): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49318): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49378): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49407): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49436): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49488): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49508): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49528): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49558): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49584): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49610): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49646): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49683): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49710): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49737): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49774): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49834): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49863): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49892): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49941): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49961): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,49981): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50011): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50037): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50063): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50099): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50136): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50163): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50190): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50227): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50287): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50316): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50345): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50397): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50417): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50437): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50467): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50493): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50519): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50555): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50591): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50618): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50645): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50682): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50742): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50771): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50800): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50851): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50871): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50891): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50921): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50947): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,50973): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51009): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51045): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51072): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51099): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51136): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51196): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51225): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51254): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51304): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51324): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51344): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51374): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51400): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51426): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51462): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51500): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51527): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51554): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51591): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51651): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51680): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51709): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51758): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51778): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51798): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51828): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51854): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51880): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51916): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51951): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,51978): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52005): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52042): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52102): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52131): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52160): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52220): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52243): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52273): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52299): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52325): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52361): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52398): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52425): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52452): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52489): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52549): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52581): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52614): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52653): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52695): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52718): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52748): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52774): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52800): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52836): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52874): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52901): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52928): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,52965): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53025): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53057): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53090): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53129): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53169): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53192): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53222): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53248): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53274): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53310): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53346): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53373): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53400): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53437): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53497): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53529): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53562): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53601): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53638): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53661): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53691): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53717): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53743): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53779): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53816): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53843): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53870): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53907): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53967): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,53999): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54032): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54071): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54111): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54134): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54164): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54190): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54216): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54252): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54288): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54315): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54342): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54379): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54439): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54471): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54504): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54543): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54582): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54605): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54635): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54661): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54687): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54723): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54759): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54786): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54813): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54850): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54910): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54942): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,54975): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55014): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55052): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55075): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55105): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55131): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55157): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55193): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55231): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55258): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55285): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55322): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55382): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55414): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55447): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55486): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55523): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55546): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55576): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55602): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55628): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55664): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55699): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55726): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55753): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55790): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55850): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55882): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55915): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55954): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,55983): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56008): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56044): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56068): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56102): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56150): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56190): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56239): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56280): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56312): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56355): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56380): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56478): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-color'
(6,56520): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-color'
(6,56568): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56594): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56618): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56645): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56702): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56729): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56755): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,56783): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57663): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57689): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57719): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57745): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57776): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57806): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57835): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57863): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57885): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57947): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,57984): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58015): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58070): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58130): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58168): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58227): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58260): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58299): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58335): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58372): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58409): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58451): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58485): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58522): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58557): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58593): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,58662): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-zindex'
(6,58711): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-min-width'
(6,58748): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-padding-y'
(6,58777): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-padding-x'
(6,58825): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-font-size'
(6,58860): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-color'
(6,58934): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-bg'
(6,58991): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-border-width'
(6,59029): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-border-color'
(6,59075): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-border-radius'
(6,59166): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-spacer'
(6,59208): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59302): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59422): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59522): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59646): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59746): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59870): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59970): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,60095): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,60195): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,60321): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,60423): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,60591): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-spacer'
(6,60975): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-spacer'
(6,61414): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-spacer'
(6,61943): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-divider-margin-y'
(6,62018): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-divider-bg'
(6,62106): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-item-padding-y'
(6,62140): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-item-padding-x'
(6,62207): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-color'
(6,62382): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-hover-color'
(6,62435): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-hover-bg'
(6,62518): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-active-color'
(6,62593): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-active-bg'
(6,62681): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-disabled-color'
(6,62842): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-header-padding-y'
(6,62878): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-header-padding-x'
(6,62954): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-header-color'
(6,63047): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-item-padding-y'
(6,63081): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-item-padding-x'
(6,63121): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-color'
(6,63166): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63194): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63219): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63281): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63308): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63341): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63377): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63437): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63491): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63528): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63565): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,63607): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,65845): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,65874): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,65905): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,65933): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,65974): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,66027): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,66176): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-padding-y'
(6,66205): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-padding-x'
(6,66244): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-font-size'
(6,66285): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-font-weight'
(6,66322): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-color'
(6,66570): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-hover-color'
(6,66626): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-disabled-color'
(6,66700): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,66731): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,66766): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,66803): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,66865): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,66905): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,66939): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,67018): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-border-width'
(6,67056): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-border-color'
(6,67132): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-border-width'
(6,67187): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-border-width'
(6,67260): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-border-radius'
(6,67317): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-border-radius'
(6,67433): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-link-hover-border-color'
(6,67540): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-disabled-color'
(6,67696): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-link-active-color'
(6,67750): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-link-active-bg'
(6,67797): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-link-active-border-color'
(6,67887): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-tabs-border-width'
(6,67977): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68015): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68053): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68155): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-pills-border-radius'
(6,68225): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-link-disabled-color'
(6,68374): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-pills-link-active-color'
(6,68429): run-time error CSS1039: Token not allowed after unary operator: '-bs-nav-pills-link-active-bg'
(6,68779): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68803): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68832): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68870): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68913): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,68959): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69003): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69041): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69075): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69111): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69154): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69203): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69241): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69279): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69317): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69355): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69619): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69671): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69714): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69754): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,69922): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-padding-y'
(6,69949): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-padding-x'
(6,70237): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-brand-padding-y'
(6,70285): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-brand-padding-y'
(6,70331): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-brand-margin-end'
(6,70375): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-brand-font-size'
(6,70414): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-brand-color'
(6,70529): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-brand-hover-color'
(6,70571): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,70597): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,70628): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,70656): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,70699): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,70754): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,70965): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-active-color'
(6,71096): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-color'
(6,71182): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-active-color'
(6,71300): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-toggler-padding-y'
(6,71335): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-toggler-padding-x'
(6,71380): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-toggler-font-size'
(6,71435): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-color'
(6,71494): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-width'
(6,71523): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-toggler-border-color'
(6,71575): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-toggler-border-radius'
(6,71625): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-toggler-transition'
(6,71846): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-toggler-focus-width'
(6,71989): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-toggler-icon-bg'
(6,72128): run-time error CSS1039: Token not allowed after unary operator: '-bs-scroll-height'
(6,72426): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,72475): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,73340): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,73389): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,74254): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,74303): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,75169): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,75218): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,76088): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,76137): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,76971): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,77020): run-time error CSS1039: Token not allowed after unary operator: '-bs-navbar-nav-link-padding-x'
(6,77621): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,77665): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,77715): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,77768): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,77798): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,77827): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,77862): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,77920): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78196): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78220): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78244): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78276): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78303): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78361): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78394): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78417): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78468): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78499): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78528): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78565): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78587): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78606): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78624): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78642): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78677): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,78785): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-height'
(6,78845): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-bg'
(6,78897): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-width'
(6,78931): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-color'
(6,78973): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-radius'
(6,79171): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,79230): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,79343): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,79404): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,79547): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-spacer-y'
(6,79571): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-spacer-x'
(6,79601): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-color'
(6,79648): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-title-spacer-y'
(6,79715): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-title-spacer-y'
(6,79834): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-spacer-x'
(6,79879): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-y'
(6,79908): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-x'
(6,79959): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-color'
(6,80001): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-bg'
(6,80037): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-width'
(6,80071): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-color'
(6,80138): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,80173): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,80233): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-y'
(6,80262): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-x'
(6,80297): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-color'
(6,80339): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-bg'
(6,80372): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-width'
(6,80406): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-color'
(6,80476): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,80511): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,80588): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-x'
(6,80642): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-y'
(6,80695): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-x'
(6,80793): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-bg'
(6,80831): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-bg'
(6,80892): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-x'
(6,80945): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-cap-padding-x'
(6,81049): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-img-overlay-padding'
(6,81098): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,81232): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,81291): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,81380): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,81441): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-inner-border-radius'
(6,81508): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-group-margin'
(6,82395): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82424): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82447): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82617): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82668): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82700): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82738): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82794): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82831): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82865): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82898): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,82943): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83239): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83277): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83327): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83389): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83692): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83738): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83813): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83851): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83886): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,83922): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,84047): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-padding-y'
(6,84081): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-padding-x'
(6,84136): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-color'
(6,84199): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-bg'
(6,84283): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-transition'
(6,84428): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-active-color'
(6,84478): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-active-bg'
(6,84537): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-width'
(6,84573): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-color'
(6,84664): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-active-icon'
(6,84710): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-icon-transform'
(6,84794): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-icon-width'
(6,84836): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-icon-width'
(6,84916): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-icon'
(6,84989): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-icon-width'
(6,85035): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-icon-transition'
(6,85237): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-focus-border-color'
(6,85301): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-btn-focus-box-shadow'
(6,85398): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-color'
(6,85441): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-bg'
(6,85471): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-width'
(6,85510): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-color'
(6,85596): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-radius'
(6,85654): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-radius'
(6,85759): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-inner-border-radius'
(6,85823): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-inner-border-radius'
(6,85968): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-radius'
(6,86028): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-radius'
(6,86146): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-inner-border-radius'
(6,86212): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-inner-border-radius'
(6,86328): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-radius'
(6,86388): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-border-radius'
(6,86446): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-body-padding-y'
(6,86481): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-body-padding-x'
(6,86899): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,86927): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,86955): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,86990): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87011): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87043): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87081): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87119): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87202): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-padding-y'
(6,87233): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-padding-x'
(6,87278): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-margin-bottom'
(6,87323): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-font-size'
(6,87387): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-bg'
(6,87425): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-border-radius'
(6,87507): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-item-padding-x'
(6,87610): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-item-padding-x'
(6,87652): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-divider-color'
(6,87695): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-divider'
(6,87759): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-item-active-color'
(6,87805): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87839): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87874): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87905): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87948): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,87972): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88005): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88042): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88081): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88136): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88169): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88212): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88267): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88300): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88372): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88406): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88440): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88484): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88523): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88556): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88702): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-padding-y'
(6,88733): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-padding-x'
(6,88774): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-font-size'
(6,88811): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-color'
(6,88876): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-bg'
(6,88907): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-border-width'
(6,88947): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-border-color'
(6,89207): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-hover-color'
(6,89257): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-hover-bg'
(6,89300): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-hover-border-color'
(6,89373): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-focus-color'
(6,89423): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-focus-bg'
(6,89474): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-focus-box-shadow'
(6,89565): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-active-color'
(6,89616): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-active-bg'
(6,89660): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-active-border-color'
(6,89748): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-disabled-color'
(6,89821): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-disabled-bg'
(6,89867): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-disabled-border-color'
(6,90024): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-border-radius'
(6,90085): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-border-radius'
(6,90177): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-border-radius'
(6,90239): run-time error CSS1039: Token not allowed after unary operator: '-bs-pagination-border-radius'
(6,90284): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90317): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90351): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90385): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90437): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90470): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90504): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90539): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90584): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90612): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90640): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90668): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90695): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90717): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,90785): run-time error CSS1039: Token not allowed after unary operator: '-bs-badge-padding-y'
(6,90811): run-time error CSS1039: Token not allowed after unary operator: '-bs-badge-padding-x'
(6,90847): run-time error CSS1039: Token not allowed after unary operator: '-bs-badge-font-size'
(6,90885): run-time error CSS1039: Token not allowed after unary operator: '-bs-badge-font-weight'
(6,90933): run-time error CSS1039: Token not allowed after unary operator: '-bs-badge-color'
(6,91030): run-time error CSS1039: Token not allowed after unary operator: '-bs-badge-border-radius'
(6,91127): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91153): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91179): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91205): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91235): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91260): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91296): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91353): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91418): run-time error CSS1039: Token not allowed after unary operator: '-bs-alert-padding-y'
(6,91444): run-time error CSS1039: Token not allowed after unary operator: '-bs-alert-padding-x'
(6,91484): run-time error CSS1039: Token not allowed after unary operator: '-bs-alert-margin-bottom'
(6,91520): run-time error CSS1039: Token not allowed after unary operator: '-bs-alert-color'
(6,91559): run-time error CSS1039: Token not allowed after unary operator: '-bs-alert-bg'
(6,91585): run-time error CSS1039: Token not allowed after unary operator: '-bs-alert-border'
(6,91622): run-time error CSS1039: Token not allowed after unary operator: '-bs-alert-border-radius'
(6,91850): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91875): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91897): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,91987): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92012): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92034): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92124): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92149): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92171): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92256): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92281): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92303): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92388): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92413): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92435): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92522): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92547): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92569): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92654): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92679): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92701): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92784): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92809): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92831): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,92974): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,93000): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,93032): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,93057): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,93094): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,93156): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,93185): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,93214): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,93284): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-height'
(6,93336): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-font-size'
(6,93382): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-bg'
(6,93418): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-border-radius'
(6,93545): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-bar-color'
(6,93628): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-bar-bg'
(6,93665): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-bar-transition'
(6,93985): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-height'
(6,94011): run-time error CSS1039: Token not allowed after unary operator: '-bs-progress-height'
(6,94195): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94225): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94249): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94299): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94332): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94371): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94407): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94445): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94482): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94525): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94565): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94609): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94650): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94689): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94722): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94756): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94790): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,94919): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,95167): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-action-color'
(6,95296): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-action-hover-color'
(6,95374): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-action-hover-bg'
(6,95448): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-action-active-color'
(6,95506): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-action-active-bg'
(6,95601): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-item-padding-y'
(6,95637): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-item-padding-x'
(6,95679): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-color'
(6,95744): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-bg'
(6,95775): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,95815): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-color'
(6,96096): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-disabled-color'
(6,96169): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-disabled-bg'
(6,96242): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-active-color'
(6,96293): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-active-bg'
(6,96337): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-active-border-color'
(6,96493): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,96545): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,96716): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,96870): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,97067): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,97207): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,97260): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,97462): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,97619): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,97822): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,97965): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,98018): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,98221): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,98378): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,98581): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,98724): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,98777): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,98980): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,99137): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,99340): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,99483): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,99536): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,99740): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,99897): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,100100): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,100243): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,100296): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,100502): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,100660): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-radius'
(6,100865): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,101009): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,101062): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,101183): run-time error CSS1039: Token not allowed after unary operator: '-bs-list-group-border-width'
(6,104688): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104711): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104740): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104768): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104794): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104821): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104851): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104870): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104910): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104938): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,104997): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,105031): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,105087): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,105119): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,105166): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,105228): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-max-width'
(6,105279): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-font-size'
(6,105311): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-color'
(6,105370): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-bg'
(6,105424): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-border-width'
(6,105459): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-border-color'
(6,105499): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-box-shadow'
(6,105540): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-border-radius'
(6,105638): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,105692): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-zindex'
(6,105866): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-spacing'
(6,105944): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-padding-y'
(6,105970): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-padding-x'
(6,106002): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-header-color'
(6,106048): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-header-bg'
(6,106116): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-border-width'
(6,106151): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-header-border-color'
(6,106215): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-border-radius'
(6,106247): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-border-width'
(6,106306): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-border-radius'
(6,106338): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-border-width'
(6,106417): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-padding-x'
(6,106456): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-padding-x'
(6,106502): run-time error CSS1039: Token not allowed after unary operator: '-bs-toast-padding-x'
(6,106551): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106574): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106597): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106621): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106646): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106665): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106684): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106743): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106771): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106803): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106865): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106915): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106948): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,106981): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,107017): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,107071): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,107106): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,107139): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,107168): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,107191): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,107245): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,107321): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-zindex'
(6,107474): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-margin'
(6,107829): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-margin'
(6,108060): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-margin'
(6,108173): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-color'
(6,108232): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-bg'
(6,108286): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-border-width'
(6,108321): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-border-color'
(6,108364): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-border-radius'
(6,108415): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,108441): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,108463): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,108530): run-time error CSS1039: Token not allowed after unary operator: '-bs-backdrop-zindex'
(6,108598): run-time error CSS1039: Token not allowed after unary operator: '-bs-backdrop-bg'
(6,108680): run-time error CSS1039: Token not allowed after unary operator: '-bs-backdrop-opacity'
(6,108805): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-header-padding'
(6,108850): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-header-border-width'
(6,108892): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-header-border-color'
(6,108951): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-inner-border-radius'
(6,109011): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-inner-border-radius'
(6,109085): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-header-padding-y'
(6,109129): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-header-padding-x'
(6,109186): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-header-padding-y'
(6,109231): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-header-padding-x'
(6,109276): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-header-padding-y'
(6,109356): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-title-line-height'
(6,109442): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-padding'
(6,109579): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-padding'
(6,109605): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-footer-gap'
(6,109655): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-footer-bg'
(6,109692): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-footer-border-width'
(6,109734): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-footer-border-color'
(6,109797): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-inner-border-radius'
(6,109859): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-inner-border-radius'
(6,109923): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-footer-gap'
(6,109983): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,110009): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,110094): run-time error CSS1039: Token not allowed after unary operator: '-bs-modal-width'
(6,110156): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,110225): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,110285): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112243): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112268): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112297): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112327): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112358): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112380): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112412): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112436): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112457): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112493): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112518): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112550): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,112596): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-zindex'
(6,112643): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-height'
(6,112681): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-margin'
(6,112718): run-time error CSS1039: Token not allowed after unary operator: '-bs-font-sans-serif'
(6,112990): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-font-size'
(6,113071): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-opacity'
(6,113141): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,113178): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-height'
(6,113543): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-height'
(6,113579): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,113634): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-bg'
(6,113761): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-height'
(6,113799): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,113967): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,114003): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-height'
(6,114039): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,114096): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-bg'
(6,114365): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,114401): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-height'
(6,114452): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-bg'
(6,114581): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-height'
(6,114619): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,114787): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,114830): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-width'
(6,114866): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-arrow-height'
(6,114915): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-bg'
(6,114961): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-max-width'
(6,114997): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-padding-y'
(6,115025): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-padding-x'
(6,115059): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-color'
(6,115118): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-bg'
(6,115153): run-time error CSS1039: Token not allowed after unary operator: '-bs-tooltip-border-radius'
(6,115189): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115214): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115243): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115275): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115296): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115326): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115387): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115421): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115473): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115531): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115566): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115603): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115638): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115666): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115697): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115730): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115763): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115795): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115825): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115858): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,115928): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-zindex'
(6,115977): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-max-width'
(6,116017): run-time error CSS1039: Token not allowed after unary operator: '-bs-font-sans-serif'
(6,116289): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-font-size'
(6,116355): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-bg'
(6,116411): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,116448): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-color'
(6,116493): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-radius'
(6,116569): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,116606): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,116911): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,116945): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,117202): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,117238): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,117409): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-border'
(6,117552): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,117600): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-bg'
(6,117730): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,117764): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,117802): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,117840): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,118104): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,118140): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,118176): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,118349): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-border'
(6,118492): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,118542): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-bg'
(6,118675): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,118709): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,118985): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,119021): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,119191): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-border'
(6,119337): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,119388): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-bg'
(6,119577): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,119630): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,119686): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,119723): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-header-bg'
(6,119862): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,119896): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,119934): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,119972): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,120238): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,120281): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-width'
(6,120317): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-height'
(6,120484): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-arrow-border'
(6,120629): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,120678): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-bg'
(6,120723): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-header-padding-y'
(6,120758): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-header-padding-x'
(6,120819): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-header-font-size'
(6,120860): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-header-color'
(6,120908): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-header-bg'
(6,120950): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width'
(6,120987): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-color'
(6,121041): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-inner-border-radius'
(6,121103): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-inner-border-radius'
(6,121198): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-body-padding-y'
(6,121231): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-body-padding-x'
(6,121270): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-body-color'
(6,124993): run-time error CSS1039: Token not allowed after unary operator: '-bs-spinner-width'
(6,125024): run-time error CSS1039: Token not allowed after unary operator: '-bs-spinner-height'
(6,125064): run-time error CSS1039: Token not allowed after unary operator: '-bs-spinner-vertical-align'
(6,125125): run-time error CSS1039: Token not allowed after unary operator: '-bs-spinner-animation-speed'
(6,125175): run-time error CSS1039: Token not allowed after unary operator: '-bs-spinner-animation-name'
(6,125274): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125298): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125323): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125360): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125393): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125428): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125483): run-time error CSS1039: Token not allowed after unary operator: '-bs-spinner-border-width'
(6,125578): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125602): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125627): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125749): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125773): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125798): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125835): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125870): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125968): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,125992): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126086): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126203): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126230): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126257): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126284): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126314): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126344): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126367): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126390): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126422): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126485): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,126630): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-zindex'
(6,126713): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-color'
(6,126774): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-bg'
(6,127045): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,127084): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,127123): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,127261): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,127299): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,127338): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,127483): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,127540): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,127579): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,127722): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,127776): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,127815): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,128118): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,128145): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,128462): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-zindex'
(6,128545): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-color'
(6,128606): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-bg'
(6,128877): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,128916): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,128955): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,129093): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,129131): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,129170): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,129315): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,129372): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,129411): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,129554): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,129608): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,129647): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,129950): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,129977): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,130294): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-zindex'
(6,130377): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-color'
(6,130438): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-bg'
(6,130709): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,130748): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,130787): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,130925): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,130963): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,131002): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,131147): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,131204): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,131243): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,131386): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,131440): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,131479): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,131782): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,131809): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,132127): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-zindex'
(6,132210): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-color'
(6,132271): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-bg'
(6,132544): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,132583): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,132622): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,132761): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,132799): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,132838): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,132984): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,133041): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,133080): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,133224): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,133278): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,133317): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,133623): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,133650): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,133969): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-zindex'
(6,134052): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-color'
(6,134113): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-bg'
(6,134388): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,134427): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,134466): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,134606): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,134644): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,134683): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,134830): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,134887): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,134926): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,135071): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,135125): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,135164): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,135476): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,135503): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,135791): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-zindex'
(6,135874): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-color'
(6,135935): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-bg'
(6,136146): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,136185): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,136224): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,136330): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-width'
(6,136368): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,136407): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,136520): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,136577): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,136616): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,136727): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-height'
(6,136781): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-width'
(6,136820): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-border-color'
(6,137282): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-y'
(6,137312): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-x'
(6,137384): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-y'
(6,137425): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-x'
(6,137483): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-y'
(6,137538): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-x'
(6,137594): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-y'
(6,137710): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-y'
(6,137740): run-time error CSS1039: Token not allowed after unary operator: '-bs-offcanvas-padding-x'
(6,138668): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,138776): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,138880): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,138982): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,139086): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,139189): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,139293): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,139393): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,140299): run-time error CSS1039: Token not allowed after unary operator: '-bs-aspect-ratio'
(6,140402): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,140436): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,140470): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,140507): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,144543): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-width'
(6,144566): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-style'
(6,144589): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(6,144674): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-width'
(6,144697): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-style'
(6,144720): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(6,144815): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-width'
(6,144838): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-style'
(6,144861): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(6,144962): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-width'
(6,144985): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-style'
(6,145008): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(6,145110): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-width'
(6,145133): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-style'
(6,145156): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(6,145240): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,145285): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb'
(6,145307): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,145356): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,145401): run-time error CSS1039: Token not allowed after unary operator: '-bs-secondary-rgb'
(6,145425): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,145472): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,145517): run-time error CSS1039: Token not allowed after unary operator: '-bs-success-rgb'
(6,145539): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,145583): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,145628): run-time error CSS1039: Token not allowed after unary operator: '-bs-info-rgb'
(6,145647): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,145694): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,145739): run-time error CSS1039: Token not allowed after unary operator: '-bs-warning-rgb'
(6,145761): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,145807): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,145852): run-time error CSS1039: Token not allowed after unary operator: '-bs-danger-rgb'
(6,145873): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,145918): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,145963): run-time error CSS1039: Token not allowed after unary operator: '-bs-light-rgb'
(6,145983): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,146027): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146072): run-time error CSS1039: Token not allowed after unary operator: '-bs-dark-rgb'
(6,146091): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,146136): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146181): run-time error CSS1039: Token not allowed after unary operator: '-bs-white-rgb'
(6,146201): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-opacity'
(6,146242): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146274): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146306): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146338): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146370): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146411): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146454): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146498): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146541): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,146586): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,153043): run-time error CSS1039: Token not allowed after unary operator: '-bs-font-monospace'
(6,154395): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,154431): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb'
(6,154453): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,154498): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,154534): run-time error CSS1039: Token not allowed after unary operator: '-bs-secondary-rgb'
(6,154558): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,154601): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,154637): run-time error CSS1039: Token not allowed after unary operator: '-bs-success-rgb'
(6,154659): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,154699): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,154735): run-time error CSS1039: Token not allowed after unary operator: '-bs-info-rgb'
(6,154754): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,154797): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,154833): run-time error CSS1039: Token not allowed after unary operator: '-bs-warning-rgb'
(6,154855): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,154897): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,154933): run-time error CSS1039: Token not allowed after unary operator: '-bs-danger-rgb'
(6,154954): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,154995): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155031): run-time error CSS1039: Token not allowed after unary operator: '-bs-light-rgb'
(6,155051): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,155091): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155127): run-time error CSS1039: Token not allowed after unary operator: '-bs-dark-rgb'
(6,155146): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,155187): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155223): run-time error CSS1039: Token not allowed after unary operator: '-bs-black-rgb'
(6,155243): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,155284): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155320): run-time error CSS1039: Token not allowed after unary operator: '-bs-white-rgb'
(6,155340): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,155380): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155416): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-color-rgb'
(6,155441): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity'
(6,155482): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155541): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155607): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155676): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155737): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155777): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155816): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155857): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155889): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,155934): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb'
(6,155956): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,155997): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156042): run-time error CSS1039: Token not allowed after unary operator: '-bs-secondary-rgb'
(6,156066): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156105): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156150): run-time error CSS1039: Token not allowed after unary operator: '-bs-success-rgb'
(6,156172): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156208): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156253): run-time error CSS1039: Token not allowed after unary operator: '-bs-info-rgb'
(6,156272): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156311): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156356): run-time error CSS1039: Token not allowed after unary operator: '-bs-warning-rgb'
(6,156378): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156416): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156461): run-time error CSS1039: Token not allowed after unary operator: '-bs-danger-rgb'
(6,156482): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156519): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156564): run-time error CSS1039: Token not allowed after unary operator: '-bs-light-rgb'
(6,156584): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156620): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156665): run-time error CSS1039: Token not allowed after unary operator: '-bs-dark-rgb'
(6,156684): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156721): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156766): run-time error CSS1039: Token not allowed after unary operator: '-bs-black-rgb'
(6,156786): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156823): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156868): run-time error CSS1039: Token not allowed after unary operator: '-bs-white-rgb'
(6,156888): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,156924): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,156969): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-bg-rgb'
(6,156991): run-time error CSS1039: Token not allowed after unary operator: '-bs-bg-opacity'
(6,157034): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,157106): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,157141): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,157177): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,157212): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,157249): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,157302): run-time error CSS1039: Token not allowed after unary operator: '-bs-gradient'
(6,157764): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,157860): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius-sm'
(6,157922): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,157981): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius-lg'
(6,158043): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius-xl'
(6,158105): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius-2xl'
(6,158215): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius-pill'
(6,158290): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,158348): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,158419): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,158480): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,158557): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,158617): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,158692): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(6,158749): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(48,37): run-time error CSS1031: Expected selector, found '`'
(48,37): run-time error CSS1025: Expected comma or open brace, found '`'
(48,73): run-time error CSS1019: Unexpected token, found '`'
(48,75): run-time error CSS1019: Unexpected token, found '('
(49,57): run-time error CSS1031: Expected selector, found ')'
(49,57): run-time error CSS1025: Expected comma or open brace, found ')'
(52,37): run-time error CSS1019: Unexpected token, found '`'
(53,8): run-time error CSS1031: Expected selector, found '`'
(53,8): run-time error CSS1025: Expected comma or open brace, found '`'
(53,50): run-time error CSS1019: Unexpected token, found '`'
(53,54): run-time error CSS1031: Expected selector, found '('
(53,54): run-time error CSS1025: Expected comma or open brace, found '('
(93,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(94,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(105,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(111,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(112,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(118,42): run-time error CSS1030: Expected identifier, found ' '
(118,44): run-time error CSS1031: Expected selector, found '/'
(118,44): run-time error CSS1025: Expected comma or open brace, found '/'
(120,39): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(125,107): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(129,38): run-time error CSS1039: Token not allowed after unary operator: '-chat-msg-font-size'
(142,41): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(150,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(162,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(162,76): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(163,44): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(163,78): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(197,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(198,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(199,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(200,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(201,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(208,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(211,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(217,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(222,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(230,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(238,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(239,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(300,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(311,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(394,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(396,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(408,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(409,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(410,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(414,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(415,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(422,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(427,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(428,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(434,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(439,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(440,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(449,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(493,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(494,35): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(495,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(497,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(499,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(505,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(506,35): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(507,17): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(509,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(512,52): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(524,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(541,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(632,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(778,65): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(789,32): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(794,46): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(796,27): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(797,27): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(800,27): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(801,43): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(840,66): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(847,26): run-time error CSS1039: Token not allowed after unary operator: '-input-height'
(855,31): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(882,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(883,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(899,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(900,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(901,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(902,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(903,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(910,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(915,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(916,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(930,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(941,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(945,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(958,35): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(958,66): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(958,102): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(959,35): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(959,87): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(960,36): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(960,90): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(961,27): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(961,61): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(1001,40): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1001,92): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1002,53): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1003,43): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1003,95): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1043,56): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(1045,56): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(1045,83): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1047,56): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(1049,56): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(1051,56): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(1053,56): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(1055,56): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(1064,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1069,45): run-time error CSS1039: Token not allowed after unary operator: '-kind-color'
(1072,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1075,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1082,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1087,59): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1095,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1101,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1102,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1103,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1104,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1105,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1106,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1107,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1122,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1123,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1125,37): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1126,38): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1128,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1149,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1162,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1163,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1175,72): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1176,38): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1176,70): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1180,32): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1182,44): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1182,76): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1192,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1193,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1199,99): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1210,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1212,71): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1217,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1221,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(1222,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1238,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1240,55): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1251,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(1252,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1265,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1267,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(1268,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1271,41): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1271,69): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1278,85): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1280,39): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1293,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1294,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1297,76): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(1303,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1306,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(1314,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1315,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1358,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1359,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1375,65): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1390,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1392,36): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1402,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1403,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1404,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1405,22): run-time error CSS1039: Token not allowed after unary operator: '-result-bg'
(1406,17): run-time error CSS1039: Token not allowed after unary operator: '-result-fg'
(1407,28): run-time error CSS1039: Token not allowed after unary operator: '-result-accent'
(1408,33): run-time error CSS1039: Token not allowed after unary operator: '-result-accent'
(1409,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(1410,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1422,80): run-time error CSS1039: Token not allowed after unary operator: '-result-fg'
(1424,60): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1425,61): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(1436,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1438,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(1439,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(1450,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(1452,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1490,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(1491,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(1492,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(1509,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1510,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1511,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(1512,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-msg-menu'
(1532,28): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn'
(1533,24): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn'
(1538,28): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn-hover'
(1539,24): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn-hover'
(1597,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1598,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1599,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1600,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(1601,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(1609,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1617,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1620,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1634,64): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1637,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1650,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1651,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1656,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1656,70): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1661,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1669,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1674,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1674,48): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1674,67): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1675,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1675,48): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1675,70): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1676,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1676,48): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1676,70): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1677,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1677,48): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1677,70): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1678,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1678,61): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1678,93): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1694,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1695,45): run-time error CSS1039: Token not allowed after unary operator: '-kind-color'
(1698,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1700,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1702,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1706,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1707,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1708,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1709,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1713,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1714,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1715,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1716,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1727,58): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(1727,92): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1730,79): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(1734,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1735,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1737,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1738,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1739,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1741,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1742,35): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(1742,74): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(1742,110): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(1743,32): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(1744,35): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(1744,71): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(1744,104): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(1745,32): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(1750,48): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1760,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1764,39): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(1764,71): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(1765,39): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(1765,71): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(1766,39): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(1766,71): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(1787,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1788,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1789,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1790,33): run-time error CSS1039: Token not allowed after unary operator: '-row-accent'
(1791,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1795,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1796,54): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1816,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1817,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1822,44): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1822,81): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1839,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1840,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1841,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(1864,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1871,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1874,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1875,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1895,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(1896,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(1897,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1898,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1903,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(1904,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1905,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1910,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1927,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1928,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(1931,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1937,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1938,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1955,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1972,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1981,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav'
(1983,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1985,68): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1991,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(1995,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(1998,59): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(2007,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(2024,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2025,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2026,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2029,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2030,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2032,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2034,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2035,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2037,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2040,43): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2041,49): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2067,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2072,70): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2075,59): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(2081,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2082,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2090,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(2104,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2104,49): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2130,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2130,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2134,33): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2134,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2137,53): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2138,40): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2138,87): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2142,36): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(2143,47): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2145,75): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2145,100): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2150,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2151,36): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2159,60): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2162,82): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2177,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2177,49): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2187,43): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(2189,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2189,84): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2207,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2207,68): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2211,67): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2216,21): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2216,57): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(2220,27): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2220,59): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2222,62): run-time error CSS1039: Token not allowed after unary operator: '-font-size-md'
(2231,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2231,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2232,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2232,66): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2241,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2242,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2243,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(2248,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2254,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2254,66): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2255,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2256,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2260,35): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2264,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2273,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2277,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2280,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2282,31): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(2283,42): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2285,31): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2326,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2326,63): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2327,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2328,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(2332,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2335,60): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2342,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(2343,24): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(2360,34): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2373,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2374,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2375,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2385,22): run-time error CSS1039: Token not allowed after unary operator: '-d'
(2386,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2388,37): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2392,59): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(2392,94): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2407,31): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2408,26): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2413,51): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2413,84): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2416,41): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2417,43): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2420,26): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2430,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2440,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2448,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2449,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2450,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-subtle'
(2455,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2456,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2468,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2471,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2472,35): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2473,37): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2484,47): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2484,70): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2485,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2486,41): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2486,63): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2491,44): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2494,61): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2495,56): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2496,38): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2501,56): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2501,88): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2512,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2514,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2517,67): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2529,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2550,109): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2551,104): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2551,136): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2552,46): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2568,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(2569,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2572,34): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(2573,31): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(2576,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2584,41): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(2585,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(2595,43): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2595,66): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2596,41): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2596,63): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2602,41): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(2603,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(2607,58): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(2611,79): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2613,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2616,116): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2641,55): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(2643,42): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(2644,42): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(2645,42): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(2646,42): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(2654,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2658,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2661,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2664,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(2666,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2668,36): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(2728,39): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2733,58): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(2733,112): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2742,36): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(2796,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(2804,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(2806,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2813,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(2814,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2836,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(2837,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2881,38): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2896,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2897,73): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2905,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(2907,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(2994,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2996,26): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3006,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(3058,46): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3134,40): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3136,48): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(3136,85): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-2'
(3141,39): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(3141,77): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(3149,75): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(3168,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(3198,45): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3198,73): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3200,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3200,56): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3202,67): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3202,95): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3206,66): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3206,94): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3225,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3226,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(3276,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(3279,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3281,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(3291,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3291,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(3324,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3344,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(3345,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3346,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3347,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3348,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(3355,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3366,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border-subtle'
(3367,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3372,36): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3373,35): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3374,57): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3418,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(3419,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3420,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3428,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-hover'
(3429,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3433,37): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3433,65): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3438,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3440,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3454,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(3455,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3456,33): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(3457,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3458,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3470,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(3471,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3472,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3478,36): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(3479,36): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(3503,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3505,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3506,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(3531,52): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(3552,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3584,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3608,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3612,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3616,86): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3625,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3639,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3640,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(3641,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(3657,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3660,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-dim'
(3667,39): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(3667,76): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(3729,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height'
(3736,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3737,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(3742,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3753,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(3754,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(3757,51): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(3758,51): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(3759,51): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(3760,71): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3788,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3789,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(3815,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3816,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(3820,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3830,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3831,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(3842,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(3857,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-2'
(3860,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-3'
(3878,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3899,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3900,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3914,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3915,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(3916,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3929,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3930,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(3931,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-2'
(3937,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(3943,44): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3945,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3959,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(3960,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(3964,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(3968,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3969,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3970,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(3976,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(3977,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(3980,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3991,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3992,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3993,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(3994,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-2'
(4005,45): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(4007,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4008,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4014,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4022,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4025,57): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4026,73): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4027,69): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4036,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4037,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4043,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4044,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4052,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4053,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(4103,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4128,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(4130,41): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4131,41): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(4133,41): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4134,41): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(4138,45): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4138,73): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(4147,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4148,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4157,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(4169,44): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4185,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4189,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(4190,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(4214,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(4215,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4216,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(4217,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(4217,46): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(4240,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4241,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4284,56): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(4285,58): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(4311,65): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(4356,45): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(4385,27): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4386,27): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4387,46): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4390,52): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(4423,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(4424,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4425,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(4426,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(4428,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4429,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4429,78): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4433,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(4439,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(4440,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(4442,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4445,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(4447,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(4448,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4461,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4461,78): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4465,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(4484,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4485,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4489,51): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(4490,73): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(4493,39): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(4503,36): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4509,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(4510,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(4512,46): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4540,35): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(4544,73): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4545,55): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4546,58): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4554,35): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(4558,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4560,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(4561,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4567,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4592,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(4595,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4605,47): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4606,32): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4618,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(4619,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4620,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(4625,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(4626,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4632,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4635,71): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4638,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(4641,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4649,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4650,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(4651,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(4653,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4654,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4657,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4658,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(4664,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(4667,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(4670,46): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4671,46): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(4672,58): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(4674,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4675,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4679,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4679,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
(4701,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4703,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(4707,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(4717,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4718,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(4719,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(4720,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4727,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4728,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(4734,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4740,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4745,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(4748,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4758,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(4759,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4760,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(4766,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4771,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(4774,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4809,30): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4834,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4839,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4847,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(4850,24): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4897,1): run-time error CSS1031: Expected selector, found '@media'
(4908,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4909,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4910,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4911,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4912,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4913,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4914,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4915,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4916,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4917,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4918,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4919,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4920,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4921,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4922,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4928,96): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(4928,123): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4928,226): run-time error CSS1039: Token not allowed after unary operator: '-shadow-drawer'
(4930,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4931,81): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4933,57): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4947,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4948,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4972,31): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4984,66): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4985,65): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5014,21): run-time error CSS1030: Expected identifier, found ':'
(5014,29): run-time error CSS1031: Expected selector, found ')'
(5014,29): run-time error CSS1025: Expected comma or open brace, found ')'
(5015,21): run-time error CSS1030: Expected identifier, found ':'
(5015,29): run-time error CSS1031: Expected selector, found ')'
(5015,29): run-time error CSS1025: Expected comma or open brace, found ')'
(5016,18): run-time error CSS1030: Expected identifier, found ':'
(5016,26): run-time error CSS1031: Expected selector, found ')'
(5016,26): run-time error CSS1025: Expected comma or open brace, found ')'
(5017,19): run-time error CSS1030: Expected identifier, found ':'
(5017,27): run-time error CSS1031: Expected selector, found ')'
(5017,27): run-time error CSS1025: Expected comma or open brace, found ')'
(5018,20): run-time error CSS1030: Expected identifier, found ':'
(5018,28): run-time error CSS1031: Expected selector, found ')'
(5018,28): run-time error CSS1025: Expected comma or open brace, found ')'
(5023,112): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5103,170): run-time error CSS1039: Token not allowed after unary operator: '-shadow-msg-card'
(5146,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5165,48): run-time error CSS1039: Token not allowed after unary operator: '-cc'
(5180,67): run-time error CSS1039: Token not allowed after unary operator: '-cc'
(5181,73): run-time error CSS1039: Token not allowed after unary operator: '-cc'
(5187,55): run-time error CSS1039: Token not allowed after unary operator: '-cct'
(5199,61): run-time error CSS1039: Token not allowed after unary operator: '-cct'
(5199,78): run-time error CSS1039: Token not allowed after unary operator: '-cc'
(5207,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5211,14): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5212,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5214,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5218,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5223,30): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5228,43): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5260,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5261,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5398,148): run-time error CSS1039: Token not allowed after unary operator: '-shadow-msg-menu'
(5424,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(5425,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(5426,23): run-time error CSS1039: Token not allowed after unary operator: '-btn-font-weight'
(5428,25): run-time error CSS1039: Token not allowed after unary operator: '-btn-radius'
(5430,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-transition'
(5434,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5435,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5447,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(5448,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(5451,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(5494,10): run-time error CSS1039: Token not allowed after unary operator: '-shadow-compose-top'
(5495,10): run-time error CSS1039: Token not allowed after unary operator: '-shadow-compose-top-2'
(5496,10): run-time error CSS1039: Token not allowed after unary operator: '-shadow-compose-left'
(5497,10): run-time error CSS1039: Token not allowed after unary operator: '-shadow-compose-right'
(5498,10): run-time error CSS1039: Token not allowed after unary operator: '-shadow-compose-highlight'
(5499,10): run-time error CSS1039: Token not allowed after unary operator: '-shadow-compose-outer'
(5513,59): run-time error CSS1039: Token not allowed after unary operator: '-shadow-member-dd'
(5533,24): run-time error CSS1039: Token not allowed after unary operator: '-recip-color'
(5539,28): run-time error CSS1039: Token not allowed after unary operator: '-recip-color'
(5568,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5568,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5568,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5569,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5569,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5569,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5570,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5570,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5570,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5571,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5571,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5573,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5573,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5573,54): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5573,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5573,104): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5573,129): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5574,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5574,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5574,70): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5574,103): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5574,136): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5574,169): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5575,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5575,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5575,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5575,91): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5575,120): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5575,149): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5576,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5576,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5576,60): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5576,88): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5576,116): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5576,144): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5577,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5577,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5577,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5577,82): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5577,108): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5577,134): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5578,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5578,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5578,66): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5578,97): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5578,128): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5578,159): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5579,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5579,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5579,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5579,82): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5579,108): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5579,134): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5580,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5580,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5580,66): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5580,97): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5580,128): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5580,159): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5581,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5581,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5581,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5581,82): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5581,108): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5581,134): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5582,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5582,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5582,70): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5582,103): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5582,136): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5582,169): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5583,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5583,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5583,60): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5583,88): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5583,116): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5583,144): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5584,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5584,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5584,60): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5584,88): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5584,116): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5584,144): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5587,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5587,28): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5587,53): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5587,78): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5588,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5588,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5588,69): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5588,102): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5589,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5589,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5589,61): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5589,90): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5590,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5590,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5590,59): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5590,87): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5591,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5591,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5591,55): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5591,81): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5592,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5592,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5592,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5592,96): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5593,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5593,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5593,55): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5593,81): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5594,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5594,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5594,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5594,96): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5595,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5595,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5595,55): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5595,81): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5596,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5596,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5596,69): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5596,102): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5597,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5597,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5597,59): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5597,87): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5598,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5598,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5598,59): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5598,87): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5839,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(5868,71): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(5868,99): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5883,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-linkwhite'
(5895,58): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5896,70): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5911,38): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(5983,63): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(6065,39): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(6147,64): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(6224,79): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(6327,73): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(6361,14): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6496,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(6497,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(6498,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6501,44): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(6501,83): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(6504,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6505,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6508,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(6514,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(6515,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(6526,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6663,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6665,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(6671,22): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(6672,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(6673,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(6687,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6689,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(6689,46): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(6690,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(6697,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6698,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(6699,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(6700,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(6714,36): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6716,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6718,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6726,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(6726,50): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(6730,55): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(6737,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6740,34): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(6757,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(6758,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6759,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(6805,95): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(6815,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(6816,33): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(6818,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(6820,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6821,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6829,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6832,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(6855,67): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6862,20): run-time error CSS1030: Expected identifier, found '*'
(6862,22): run-time error CSS1031: Expected selector, found ')'
(6862,22): run-time error CSS1025: Expected comma or open brace, found ')'
(6869,26): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(6875,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(6875,67): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6878,83): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(6878,120): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(6879,41): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6880,82): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6881,61): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6891,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(6891,68): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6892,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(6893,85): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(6899,58): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6900,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(6902,39): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(6904,102): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6906,39): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(6908,73): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6912,54): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(6912,92): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6912,120): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6922,74): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6923,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(6923,56): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6926,42): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(6926,84): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6946,66): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6949,39): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(6951,41): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6951,69): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6954,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(6954,73): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(6955,50): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(6956,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6964,89): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(6970,69): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6974,50): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(6977,77): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6981,36): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6997,45): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(6997,81): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(6998,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6998,67): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(6998,91): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7000,45): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(7028,27): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7141,52): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7142,42): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(7145,34): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7145,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7146,41): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(7148,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(7150,27): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(7153,36): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7182,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7183,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(7184,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(7188,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7189,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7194,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7195,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(7198,36): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(7199,38): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7199,66): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(7205,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7232,52): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7236,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7239,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7240,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7242,31): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(7242,61): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7243,49): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(7243,77): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7247,50): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7247,82): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7253,50): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7254,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7255,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(7259,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(7260,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7263,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7264,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7277,29): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(7278,28): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(7279,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7328,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7329,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7336,66): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(7338,62): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(7345,44): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(7356,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7357,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7357,55): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7397,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(7398,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7398,55): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7401,62): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7402,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(7402,54): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(7403,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(7404,48): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7415,48): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7418,41): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(7418,77): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7419,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7422,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7422,55): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7423,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-2'
(7423,45): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7423,74): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7431,33): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7433,32): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(7433,60): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7435,135): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7450,43): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(7455,42): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7455,74): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7458,64): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7461,68): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(7461,96): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7463,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7470,58): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(7472,57): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7473,32): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7480,53): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7485,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(7486,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7490,57): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7510,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7550,25): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7553,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(7553,55): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(7557,38): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(7557,70): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(7557,106): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(7558,38): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(7558,70): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(7558,106): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(7559,38): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(7559,70): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(7559,106): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(7560,38): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(7560,70): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(7560,106): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-border'
(7561,38): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(7561,70): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7561,109): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7597,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7598,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(7655,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7680,62): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(7696,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7697,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(7698,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(7721,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-dim'
(7723,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7745,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-dim'
(7747,39): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(7748,59): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(7800,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(7809,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7810,24): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7874,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7896,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7912,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7919,25): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(7929,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7930,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(7963,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7974,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8046,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8047,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(8080,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8087,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8088,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(8111,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8112,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(8113,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(8116,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8117,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8120,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8156,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-deeper'
(8156,44): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(8183,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(8184,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8186,40): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(8189,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(8190,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8211,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(8212,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8217,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(8218,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(8219,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(8220,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8239,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(8240,33): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(8241,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(8242,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(8247,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8257,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(8259,49): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8260,30): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8265,17): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(8284,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(8285,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8307,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8308,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8316,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8318,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(8319,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8320,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8321,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(8336,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8337,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-deeper'
(8337,44): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(8338,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-semibold'
(8347,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8348,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(8349,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-deeper'
(8349,44): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(8372,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(8372,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8373,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8388,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8390,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(8391,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-deeper'
(8391,44): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(8392,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8393,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(8400,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8404,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8418,24): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8420,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8423,22): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(8424,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(8451,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(8453,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(8454,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8455,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(8456,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-semibold'
(8464,24): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(8465,17): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(8469,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(8470,24): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(8486,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8487,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(8488,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8508,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8509,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(8511,36): run-time error CSS1039: Token not allowed after unary operator: '-shadow-card-hover'
(8511,61): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(8526,77): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(8526,103): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8527,77): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(8527,103): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8528,104): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8538,87): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8542,67): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(8542,93): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8543,67): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(8543,93): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8556,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8559,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(8562,69): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(8562,135): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(8566,32): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8566,73): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(8566,113): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8568,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8569,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(8577,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(8577,54): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8579,64): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(8579,89): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8580,29): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(8589,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8590,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(8593,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(8594,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8595,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8597,39): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(8597,80): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(8597,125): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-border'
(8598,39): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(8598,80): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(8598,125): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(8603,41): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(8603,82): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(8603,127): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(8604,39): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(8604,80): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(8604,125): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(8606,59): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8607,39): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(8607,82): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-deeper'
(8607,109): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(8607,159): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8648,41): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(8648,99): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(8652,61): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8652,103): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(8657,41): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(8657,76): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8657,118): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8669,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8670,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8673,72): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8676,81): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8677,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8678,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(8678,66): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8679,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8679,78): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(8681,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8681,73): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(8690,56): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(8690,101): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(8691,56): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8691,101): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8719,35): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(8719,76): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(8738,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8748,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8749,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(8767,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8768,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8809,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8810,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(8811,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8813,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(8818,66): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8820,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8844,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8847,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8857,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8858,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(8862,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(8876,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8932,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8938,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(8939,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8942,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8965,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(8976,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(8977,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(8978,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(8980,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(8986,51): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(8999,43): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9000,47): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(9000,87): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9008,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9016,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(9017,24): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9018,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9035,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(9036,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9038,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9039,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9045,45): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9048,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(9066,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9077,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9082,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9104,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(9105,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9108,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9117,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9120,27): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9120,68): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9123,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9124,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(9141,30): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9142,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(9143,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9147,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(9165,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9169,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9180,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9181,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(9182,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9184,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9189,24): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(9190,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(9191,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(9228,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9229,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(9230,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9232,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(9239,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9240,17): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(9244,24): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(9245,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(9246,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9255,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9258,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9277,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9279,40): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(9311,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9312,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(9313,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(9318,44): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(9318,87): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(9319,58): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(9321,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(9322,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(9327,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9335,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9365,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(9366,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9367,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9368,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(9369,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(9383,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9404,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9408,34): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(9408,78): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9409,34): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(9409,77): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9420,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9451,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(9452,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9464,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(9465,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9466,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9467,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9470,34): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9470,70): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(9470,100): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9477,49): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(9478,49): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(9479,49): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9482,52): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9486,25): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(9492,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9493,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(9494,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9496,45): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9499,33): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9499,69): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9499,97): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9500,42): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9517,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9518,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(9519,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9523,42): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9530,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9531,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(9532,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(9553,49): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9561,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(9562,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9563,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9564,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9567,32): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9567,68): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(9567,98): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9574,49): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9575,49): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(9578,50): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9582,23): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(9585,42): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9591,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9592,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(9593,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9595,43): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9598,31): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9598,67): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9598,95): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9599,40): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9616,26): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9622,33): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9622,69): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(9622,97): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9623,27): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9623,63): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9639,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9640,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9656,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9657,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9659,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9660,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9661,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9671,51): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9672,24): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9672,60): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9674,56): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9674,84): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9675,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9675,59): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(9675,95): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9679,51): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(9679,95): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9679,131): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9701,26): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9704,61): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9707,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9712,86): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9737,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(9738,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9739,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(9745,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9750,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(9754,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9760,61): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(9788,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(9789,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9790,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(9791,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9796,26): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9796,58): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9798,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9798,66): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(9799,43): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9799,68): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9800,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9802,64): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(9802,94): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(9803,42): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9803,70): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(9819,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(9820,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9822,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(9823,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(9825,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(9826,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(9827,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(9831,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9832,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(9835,44): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(9836,50): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9843,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9844,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(9857,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(9859,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(9865,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9873,45): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9873,66): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(9885,36): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(9886,38): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(9886,66): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9889,57): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9889,81): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(9895,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(9896,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(9898,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(9899,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(9900,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(9916,31): run-time error CSS1039: Token not allowed after unary operator: '-card-padding-lg'
(9916,71): run-time error CSS1039: Token not allowed after unary operator: '-card-padding-lg'
(9926,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(9927,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(9928,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(9931,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(9932,39): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-back'
(9944,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9945,10): run-time error CSS1035: Expected colon, found '{'
(9967,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9968,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9974,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(9974,61): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(9974,101): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(9976,64): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(9979,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(9982,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9983,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9984,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9985,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9994,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(9997,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(9998,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-deeper'
(9999,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10016,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10018,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10019,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10020,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10024,39): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(10024,87): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(10024,132): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10025,39): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(10025,87): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(10025,132): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(10026,39): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(10026,87): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-border'
(10026,132): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10027,39): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10033,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10034,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10035,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10047,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10048,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10056,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10057,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(10097,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10098,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10099,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10102,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10105,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(10106,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10109,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10110,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10128,49): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10138,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10139,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10151,30): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10152,27): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10153,29): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10154,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(10163,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10165,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(10166,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(10168,45): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10168,79): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(10169,45): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10169,79): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(10170,73): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10171,49): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10172,49): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10173,39): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10176,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10177,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10178,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10183,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10184,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10196,26): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10200,35): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(10207,61): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(10218,48): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(10223,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10224,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10225,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10231,56): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10231,84): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10232,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10232,59): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(10232,95): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10235,50): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10235,84): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10235,116): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10236,27): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10239,40): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(10258,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10266,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10267,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10268,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10269,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10272,33): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10272,69): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(10272,99): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10291,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10306,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10310,47): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10311,47): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(10313,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10314,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10315,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10318,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10319,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10329,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10330,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(10331,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10332,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(10333,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10335,35): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10339,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10340,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10343,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(10352,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10354,58): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10355,58): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(10359,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(10360,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10365,35): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10371,68): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10375,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10379,49): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10382,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10383,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10384,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10387,31): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10395,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10398,29): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10399,31): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10399,63): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10400,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10400,64): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(10404,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(10405,36): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(10410,34): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(10411,26): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(10416,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10417,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(10418,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10429,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10437,77): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10461,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10462,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10465,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10470,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10471,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(10474,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10481,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10482,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10489,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(10490,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10505,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10511,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10516,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(10517,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10520,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10529,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10536,52): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10536,77): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10538,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10550,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10551,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10558,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10559,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(10559,35): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10560,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10561,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10563,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(10564,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(10568,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10569,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10581,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10612,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10620,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10622,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10623,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10625,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-mid'
(10625,80): run-time error CSS1039: Token not allowed after unary operator: '-transition-mid'
(10629,35): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(10629,69): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10629,101): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10630,34): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10630,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10632,53): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(10632,92): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(10633,64): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10635,51): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(10635,89): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-border'
(10637,62): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10638,53): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(10638,92): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(10639,64): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(10648,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10648,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(10649,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(10651,30): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(10651,58): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10652,30): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10652,58): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10652,90): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10660,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10660,69): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10669,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10669,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10670,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10672,30): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(10672,64): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10672,96): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10673,30): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(10673,58): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10674,36): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(10674,74): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-border'
(10675,42): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10676,37): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(10676,76): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(10677,43): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(10679,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10679,83): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10685,126): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10686,36): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10690,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10690,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10691,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(10692,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10694,57): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(10695,67): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(10701,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10706,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10707,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10708,33): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10708,65): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10709,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10711,50): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(10712,50): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10712,83): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(10714,48): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10715,50): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(10715,84): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(10716,51): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(10717,50): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10717,83): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(10718,50): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10719,50): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10719,83): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(10720,49): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(10721,50): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10745,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(10746,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10747,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10748,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(10749,19): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(10757,100): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10767,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(10768,19): run-time error CSS1039: Token not allowed after unary operator: '-input-padding'
(10780,78): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10789,39): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10789,67): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10789,105): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10842,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(10843,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10844,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10845,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(10846,19): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(10860,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(10861,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10864,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(10865,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(10866,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10871,58): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10885,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10886,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(10889,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(10890,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(10896,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(10897,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(10906,76): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10908,88): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10918,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(10919,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10920,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10921,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(10926,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(10926,49): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(10927,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(10946,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(10947,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10948,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(10973,56): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(10973,89): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(10977,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(10993,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(11004,53): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(11008,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(11009,24): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11010,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(11012,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11016,24): run-time error CSS1039: Token not allowed after unary operator: '-cc'
(11058,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11061,51): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(11061,87): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(11061,138): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11062,50): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(11062,78): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11067,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11068,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(11069,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11078,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11078,55): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(11079,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11080,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11080,65): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11083,72): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11084,100): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(11087,34): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11088,35): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11092,86): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11101,45): run-time error CSS1030: Expected identifier, found '.'
(11101,46): run-time error CSS1030: Expected identifier, found 'button'
(11101,52): run-time error CSS1031: Expected selector, found ')'
(11101,52): run-time error CSS1025: Expected comma or open brace, found ')'
(11104,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11104,66): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11125,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11126,36): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11134,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11137,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11173,32): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11177,71): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(11177,129): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(11178,71): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(11178,129): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(11179,81): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11179,138): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11181,96): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(11182,96): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(11183,106): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11185,100): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11188,120): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11235,57): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11241,60): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11261,89): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11265,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11266,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(11269,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11280,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11281,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(11282,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11285,42): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11298,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11303,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11308,43): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(11312,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11313,100): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11315,26): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(11328,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(11329,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11330,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11337,57): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11340,53): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11401,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11405,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(11407,30): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11410,102): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11413,48): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11415,30): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11434,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(11441,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11442,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(11450,34): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11470,48): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11470,78): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11484,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11488,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11500,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11502,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11503,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11508,54): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11509,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11511,48): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11514,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(11514,52): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11515,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11520,81): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11520,114): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11522,94): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11532,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11533,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(11533,52): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11536,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(11536,52): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11537,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11542,108): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11544,51): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11545,40): run-time error CSS1039: Token not allowed after unary operator: '-crp-font'
(11546,40): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(11546,70): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11553,30): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11554,30): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(11557,103): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11558,31): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(11559,30): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(11564,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(11567,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11571,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11572,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11576,40): run-time error CSS1039: Token not allowed after unary operator: '-crp-font'
(11577,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(11577,52): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11581,42): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11585,63): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(11587,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11591,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(11591,52): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11592,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11603,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11603,51): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11604,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11604,82): run-time error CSS1039: Token not allowed after unary operator: '-shadow-card-hover'
(11606,153): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11609,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11615,44): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(11622,42): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(11626,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11648,50): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11660,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11660,57): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11661,43): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(11666,69): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11677,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11710,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11714,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(11734,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11736,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11737,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11738,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(11742,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11744,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11745,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(11769,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11772,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11773,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11779,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(11780,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(11788,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11789,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(11848,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11849,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(11850,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-subtle'
(11850,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11853,31): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11857,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(11859,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(11880,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(11884,31): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11886,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11909,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11911,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-subtle'
(11911,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11912,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11936,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(11937,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(11940,42): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11943,41): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11953,42): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(11954,51): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11956,48): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11957,32): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(11958,34): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(11958,62): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(11966,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11971,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(11979,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11987,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(11995,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12007,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12009,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(12012,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-muted'
(12021,36): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12022,34): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12022,72): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12025,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12049,46): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12067,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12069,37): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12070,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12075,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12087,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12102,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12106,32): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12108,34): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12121,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12125,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(12132,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(12138,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12169,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12224,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12228,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(12229,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(12230,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(12233,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(12234,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(12237,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(12237,55): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(12266,40): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(12269,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(12269,33): run-time error CSS1035: Expected colon, found '{'
(12281,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12282,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(12283,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12284,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(12288,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(12290,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(12291,10): run-time error CSS1035: Expected colon, found '{'
(12303,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12309,42): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(12309,72): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(12321,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12322,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12330,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12334,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12334,42): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(12347,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(12348,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12351,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height'
(12361,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12376,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12396,32): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12402,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12407,35): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(12421,71): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12425,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12432,81): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(12436,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12437,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(12438,55): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(12440,36): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12462,31): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12462,67): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(12463,27): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(12463,55): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12474,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12475,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12487,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12494,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(12495,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12497,63): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12501,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(12502,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(12503,33): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12504,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(12509,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12534,41): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12535,34): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12535,70): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(12539,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(12540,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12547,46): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(12548,46): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12557,33): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(12574,25): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12575,26): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12575,61): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(12575,99): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12582,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12583,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12584,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(12587,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(12589,35): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12594,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(12599,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(12599,58): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12604,56): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(12607,54): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12608,19): run-time error CSS1030: Expected identifier, found ':'
(12608,27): run-time error CSS1031: Expected selector, found ')'
(12608,27): run-time error CSS1025: Expected comma or open brace, found ')'
(12612,76): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12617,19): run-time error CSS1030: Expected identifier, found ':'
(12617,33): run-time error CSS1031: Expected selector, found ')'
(12617,33): run-time error CSS1025: Expected comma or open brace, found ')'
(12621,110): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(12622,61): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12623,26): run-time error CSS1030: Expected identifier, found ':'
(12623,34): run-time error CSS1031: Expected selector, found ')'
(12623,34): run-time error CSS1025: Expected comma or open brace, found ')'
(12640,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12642,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12643,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(12646,14): run-time error CSS1030: Expected identifier, found '.'
(12646,30): run-time error CSS1031: Expected selector, found ')'
(12646,30): run-time error CSS1025: Expected comma or open brace, found ')'
(12649,14): run-time error CSS1030: Expected identifier, found '.'
(12649,30): run-time error CSS1031: Expected selector, found ')'
(12649,30): run-time error CSS1025: Expected comma or open brace, found ')'
(12665,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12666,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12667,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12668,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12675,19): run-time error CSS1030: Expected identifier, found ':'
(12675,27): run-time error CSS1031: Expected selector, found ')'
(12675,27): run-time error CSS1025: Expected comma or open brace, found ')'
(12684,41): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12688,45): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12688,66): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(12692,37): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12692,71): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12693,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12700,69): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12701,33): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(12704,29): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12706,36): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(12706,70): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12708,35): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12709,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12709,65): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12711,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12714,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(12717,57): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12717,85): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12725,49): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12725,77): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12726,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(12726,63): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12729,41): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12734,45): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12734,66): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(12741,50): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12741,87): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(12742,45): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(12749,46): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(12749,72): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-deeper'
(12754,65): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12764,32): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12765,63): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(12766,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12766,66): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12767,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12767,72): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12782,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12783,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12784,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12796,55): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12797,55): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12801,56): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12805,53): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(12805,104): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12809,59): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12809,93): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12809,180): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12813,53): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12815,41): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12816,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12817,47): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12821,129): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12822,71): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12825,25): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(12825,69): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(12842,85): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12842,113): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12843,45): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12843,73): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(12844,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12844,82): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12846,45): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12848,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12848,86): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12855,41): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12856,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12857,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(12857,42): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12858,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12860,48): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12867,48): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(12868,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12868,62): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12869,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12871,54): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12872,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12872,61): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12878,78): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12879,71): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12885,38): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12885,74): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12889,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(12890,51): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(12892,56): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(12892,88): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12892,122): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(12897,41): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12901,35): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(12901,67): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(12901,107): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(12902,56): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12902,102): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12902,145): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12903,55): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12903,105): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12903,167): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12906,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12912,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12912,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(12913,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12916,74): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12920,97): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12922,43): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12922,81): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12929,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12929,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(12930,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12936,46): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12936,67): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(12939,82): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12939,107): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12944,59): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12945,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(12948,67): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12948,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12963,90): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(12977,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(12978,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(12978,55): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(12981,40): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12982,40): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(12983,22): run-time error CSS1030: Expected identifier, found ':'
(12983,30): run-time error CSS1031: Expected selector, found ')'
(12983,30): run-time error CSS1025: Expected comma or open brace, found ')'
(12988,42): run-time error CSS1030: Expected identifier, found ':'
(12988,50): run-time error CSS1031: Expected selector, found ')'
(12988,50): run-time error CSS1025: Expected comma or open brace, found ')'
(12989,22): run-time error CSS1030: Expected identifier, found ':'
(12989,36): run-time error CSS1031: Expected selector, found ')'
(12989,36): run-time error CSS1025: Expected comma or open brace, found ')'
(12995,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13004,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13005,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13008,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(13013,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13014,51): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13016,35): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(13016,69): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13016,106): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(13018,51): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13029,48): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13029,73): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13030,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13031,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(13032,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13038,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13039,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13043,64): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13064,40): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13076,31): run-time error CSS1030: Expected identifier, found '.'
(13076,45): run-time error CSS1031: Expected selector, found ')'
(13076,45): run-time error CSS1025: Expected comma or open brace, found ')'
(13094,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13094,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13095,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(13098,44): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13099,36): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13101,26): run-time error CSS1030: Expected identifier, found ':'
(13101,34): run-time error CSS1031: Expected selector, found ')'
(13101,34): run-time error CSS1025: Expected comma or open brace, found ')'
(13106,26): run-time error CSS1030: Expected identifier, found ':'
(13106,40): run-time error CSS1031: Expected selector, found ')'
(13106,40): run-time error CSS1025: Expected comma or open brace, found ')'
(13110,21): run-time error CSS1030: Expected identifier, found '.'
(13110,35): run-time error CSS1031: Expected selector, found ')'
(13110,35): run-time error CSS1025: Expected comma or open brace, found ')'
(13111,26): run-time error CSS1030: Expected identifier, found ':'
(13111,34): run-time error CSS1031: Expected selector, found ')'
(13111,34): run-time error CSS1025: Expected comma or open brace, found ')'
(13137,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13138,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13143,76): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(13145,23): run-time error CSS1030: Expected identifier, found ':'
(13145,31): run-time error CSS1031: Expected selector, found ')'
(13145,31): run-time error CSS1025: Expected comma or open brace, found ')'
(13152,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13153,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13166,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13167,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13190,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(13192,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-deeper'
(13193,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13193,65): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(13194,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13194,72): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13196,55): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13202,60): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13208,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13208,72): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13209,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13210,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13211,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13211,65): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(13226,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13246,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13247,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13248,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(13254,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(13254,54): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(13255,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(13260,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13261,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13262,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13265,41): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13266,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13267,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13269,81): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(13287,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13288,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13295,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(13296,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13304,43): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13342,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(13396,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13410,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13413,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-hover'
(13414,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(13437,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13439,28): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(13443,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(13478,15): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-top'
(13479,17): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-right'
(13489,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(13494,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(13526,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13532,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13536,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13548,8): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13548,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13549,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13550,10): run-time error CSS1030: Expected identifier, found '.'
(13550,27): run-time error CSS1031: Expected selector, found ')'
(13550,27): run-time error CSS1025: Expected comma or open brace, found ')'
(13551,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13552,10): run-time error CSS1030: Expected identifier, found '.'
(13552,43): run-time error CSS1031: Expected selector, found ')'
(13552,43): run-time error CSS1025: Expected comma or open brace, found ')'
(13555,31): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-top'
(13555,71): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-right'
(13560,45): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-right'
(13560,79): run-time error CSS1039: Token not allowed after unary operator: '-pill-admin-slot'
(13567,15): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-top'
(13570,22): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-right'
(13570,56): run-time error CSS1039: Token not allowed after unary operator: '-pill-admin-slot'
(13570,87): run-time error CSS1039: Token not allowed after unary operator: '-pill-help-slot'
(13613,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13615,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13645,22): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(13657,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13658,30): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13661,31): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(13668,24): run-time error CSS1031: Expected selector, found ';'
(13668,24): run-time error CSS1025: Expected comma or open brace, found ';'
(13668,45): run-time error CSS1031: Expected selector, found '('
(13668,45): run-time error CSS1025: Expected comma or open brace, found '('
(13681,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(13687,34): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(13689,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13695,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-subtle'
(13695,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13702,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13706,46): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(13709,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(13714,37): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(13714,71): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13715,70): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13718,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(13719,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(13722,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(13722,26): run-time error CSS1035: Expected colon, found '{'
(13724,82): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13742,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13743,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-md'
(13744,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(13748,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(13749,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(13750,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13766,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13767,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(13768,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(13769,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(13771,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(13772,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(13772,70): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(13773,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(13773,73): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(13776,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13777,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-card-hover'
(13782,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13783,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(13786,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13787,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(13788,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(13791,36): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(13792,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13818,24): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13819,41): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(13823,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(13824,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13832,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(13833,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(13878,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13879,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(13880,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13881,41): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(13882,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(13907,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13909,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13910,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(13950,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(13951,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13952,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-md'
(13962,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(13965,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(13970,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(13970,64): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(13971,61): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(13977,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(13979,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(13980,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(13986,66): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(13997,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(13998,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(13999,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14000,27): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14000,51): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14002,81): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14011,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(14012,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14013,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14014,27): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14014,51): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14016,86): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14022,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14027,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14029,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14032,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(14042,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(14058,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(14059,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14060,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14061,27): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14061,51): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14063,49): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(14064,49): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(14065,49): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14066,49): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(14079,50): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14098,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14103,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14105,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14108,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(14116,51): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14121,42): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(14121,85): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(14129,24): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(14130,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(14135,24): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14152,49): run-time error CSS1030: Expected identifier, found ' '
(14152,61): run-time error CSS1030: Expected identifier, found ' '
(14152,63): run-time error CSS1031: Expected selector, found '/'
(14152,63): run-time error CSS1025: Expected comma or open brace, found '/'
(14161,55): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14177,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(14177,66): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14182,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(14182,66): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(14182,92): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14183,47): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14185,33): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(14185,57): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14185,100): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14190,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-subtle'
(14190,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14191,89): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14193,44): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14193,73): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14197,80): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14198,33): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(14200,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(14200,77): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(14204,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14209,123): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14213,48): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14213,81): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(14214,59): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14217,68): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14221,90): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14226,44): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14263,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14264,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14265,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14269,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(14270,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14271,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(14271,53): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14272,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14274,80): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14275,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14275,88): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(14276,59): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14276,87): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14277,54): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14282,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14284,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(14294,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14298,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14299,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(14300,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14304,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14304,66): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14304,100): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(14305,61): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(14323,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(14324,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14352,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14353,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14365,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14395,57): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14395,93): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14399,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14399,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14400,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14403,45): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(14403,105): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14404,54): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14405,52): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14405,80): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14442,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14443,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14457,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(14458,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14459,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(14460,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(14464,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14465,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14470,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14471,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14510,31): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14516,22): run-time error CSS1039: Token not allowed after unary operator: '-ap-c'
(14516,34): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14521,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14522,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14523,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14524,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14541,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14544,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14552,33): run-time error CSS1039: Token not allowed after unary operator: '-ap-c'
(14552,45): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14561,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14576,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14578,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(14582,66): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(14589,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14590,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14596,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14609,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14610,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14611,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14612,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14660,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14668,29): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(14669,22): run-time error CSS1039: Token not allowed after unary operator: '-color-hover-wash'
(14673,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(14675,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(14679,66): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(14693,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14730,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14741,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(14788,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(14789,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(14798,38): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(14812,30): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14842,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14848,53): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(14848,83): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14852,78): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14863,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14869,86): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14870,158): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(14871,160): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(14882,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(14882,49): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(14883,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14883,62): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(14884,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(14900,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14905,38): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(14905,89): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(14912,57): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(14915,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14929,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(14929,60): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14930,23): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(14933,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(14933,57): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(14936,35): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(14936,63): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14958,112): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(14972,56): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(14975,44): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(14982,45): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(14987,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(14988,36): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(15045,48): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15065,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(15065,60): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(15066,23): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(15068,39): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(15069,52): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(15070,40): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(15070,73): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(15083,31): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(15083,59): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15084,65): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15092,35): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15092,71): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(15118,83): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(15118,119): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(15121,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(15121,49): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(15122,47): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(15125,77): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(15126,40): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(15133,51): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(15147,42): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(15147,83): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(15148,42): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(15148,84): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15149,45): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(15149,86): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-text'
(15150,75): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15152,66): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15156,55): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15159,65): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15181,18): run-time error CSS1030: Expected identifier, found '.'
(15181,35): run-time error CSS1031: Expected selector, found ')'
(15181,35): run-time error CSS1025: Expected comma or open brace, found ')'
(15194,68): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15195,68): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15227,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15228,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15229,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15230,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15231,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15232,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15233,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15239,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15242,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15243,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15244,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15245,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15246,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15247,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15248,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15249,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15250,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15251,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15252,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15253,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15254,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15255,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15256,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15257,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15260,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15261,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15262,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15263,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15264,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15267,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15268,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15269,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15270,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15273,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15274,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15277,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15278,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15279,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15282,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15283,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15284,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15285,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15286,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15287,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15288,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15289,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15290,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15291,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15292,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15293,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15296,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15297,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15298,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15301,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15303,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15304,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15305,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15306,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15307,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15308,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15309,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15310,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15311,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15314,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15315,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15318,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15319,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15320,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15321,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15322,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15323,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15326,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15327,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15328,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15331,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15332,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15333,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15334,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15335,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15336,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15339,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15346,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15347,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15348,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15350,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15351,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15355,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15356,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15357,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15359,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15360,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15361,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15363,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15364,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15365,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15366,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15368,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15369,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15370,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15371,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15373,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15374,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15376,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15379,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15381,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15395,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15396,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15397,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15398,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15399,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15400,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15401,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15402,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15403,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15404,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15405,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15406,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15407,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15413,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15414,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15415,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15416,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15417,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15418,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15419,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15420,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15421,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15422,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15423,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15424,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15425,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15437,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15438,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15439,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15440,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15441,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15443,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15444,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15445,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15446,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15447,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15449,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15450,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15451,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15452,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15453,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15455,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15456,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15457,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15458,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15459,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15461,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15462,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15463,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15464,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15465,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15467,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15468,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15469,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15470,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15471,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15473,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15474,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15475,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15476,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15477,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15479,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15480,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15481,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15482,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15483,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15485,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15486,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15487,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15488,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15489,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15491,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15492,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15493,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15494,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15495,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15497,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15498,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15499,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15500,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15501,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15503,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15504,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15505,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15506,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15507,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15515,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15516,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15517,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15518,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15520,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15521,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15522,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15523,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15525,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15526,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15527,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15528,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15530,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15531,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15532,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15533,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15535,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15536,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15537,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15538,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15540,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15541,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15542,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15543,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15545,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15546,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15547,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15548,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15550,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15551,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15552,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15553,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15555,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15556,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15557,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15558,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15560,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15561,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15562,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15563,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15565,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15566,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15567,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15568,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15570,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15571,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15572,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15573,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15590,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15599,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15600,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15601,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15602,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15603,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15604,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15606,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15607,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15608,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15609,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15610,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15611,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15623,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15662,37): run-time error CSS1039: Token not allowed after unary operator: '-selection-bg'
(15662,65): run-time error CSS1039: Token not allowed after unary operator: '-selection-color'
(15663,37): run-time error CSS1039: Token not allowed after unary operator: '-selection-bg'
(15663,65): run-time error CSS1039: Token not allowed after unary operator: '-selection-color'
(15678,35): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(15683,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(15684,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(15685,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(15686,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(15687,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height'
(15695,46): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15700,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15706,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15717,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(15718,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(15720,47): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(15724,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(15724,67): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(15730,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(15731,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(15732,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(15742,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xxl'
(15743,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(15744,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(15753,39): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(15756,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(15757,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15763,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(15764,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(15769,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(15770,17): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(15771,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(15772,33): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(15774,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(15812,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(15818,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(15823,29): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(15852,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(15853,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(15860,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(15861,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(15867,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(15867,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(15869,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(15871,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(15875,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(15875,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(15889,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(15898,29): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(15899,29): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(15899,73): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(15918,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(15924,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(15925,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(15926,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(15927,19): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(15929,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(15943,15): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(15944,17): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(15955,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(15956,25): run-time error CSS1039: Token not allowed after unary operator: '-btn-radius'
(15957,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(15962,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(15965,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn-active'
(15969,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(15970,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(15971,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(15972,19): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(15994,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(15995,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(15996,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(15997,19): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(16036,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(16037,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(16038,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16046,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16058,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(16061,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16065,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(16074,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(16075,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16076,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(16077,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-card'
(16078,19): run-time error CSS1039: Token not allowed after unary operator: '-card-padding'
(16079,25): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(16080,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-mid'
(16080,69): run-time error CSS1039: Token not allowed after unary operator: '-transition-mid'
(16082,26): run-time error CSS1039: Token not allowed after unary operator: '-card-padding-lg'
(16084,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(16085,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(16087,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16089,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16106,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16109,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16121,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16147,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16185,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16186,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(16187,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(16189,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(16190,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16190,76): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16190,106): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16196,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16209,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16213,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(16214,24): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(16220,44): run-time error CSS1039: Token not allowed after unary operator: '-color-hover-wash'
(16220,69): run-time error CSS1039: Token not allowed after unary operator: '-color-hover-wash'
(16224,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(16238,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16246,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16254,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16259,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-card-hover'
(16260,43): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(16260,68): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16263,32): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(16264,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(16305,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(16309,45): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(16312,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(16313,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(16314,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16320,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(16321,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16342,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(16343,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(16344,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(16351,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(16368,18): run-time error CSS1039: Token not allowed after unary operator: '-input-height'
(16369,19): run-time error CSS1039: Token not allowed after unary operator: '-input-padding'
(16371,31): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(16372,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16373,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(16374,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16375,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(16378,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16379,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16380,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16385,27): run-time error CSS1039: Token not allowed after unary operator: '-input-height'
(16409,43): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16409,81): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16420,24): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(16420,50): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16421,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(16433,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(16441,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(16451,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(16452,51): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(16467,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(16478,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16525,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16554,19): run-time error CSS1039: Token not allowed after unary operator: '-btn-padding'
(16556,21): run-time error CSS1039: Token not allowed after unary operator: '-btn-font-size'
(16557,23): run-time error CSS1039: Token not allowed after unary operator: '-btn-font-weight'
(16571,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16573,25): run-time error CSS1039: Token not allowed after unary operator: '-btn-radius'
(16575,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16576,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16577,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16578,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16580,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn'
(16587,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(16595,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn'
(16596,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(16600,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn-active'
(16611,28): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(16612,24): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(16616,28): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn-hover'
(16617,24): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn-hover'
(16622,28): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn'
(16623,24): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn'
(16627,28): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn-hover'
(16628,24): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn-hover'
(16634,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16635,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16639,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(16640,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(16641,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(16646,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(16647,24): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(16657,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn'
(16660,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn'
(16665,19): run-time error CSS1039: Token not allowed after unary operator: '-btn-padding-sm'
(16671,40): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(16673,28): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn'
(16677,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(16678,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(16693,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16697,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(16698,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16699,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16703,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16704,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(16708,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(16708,55): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16735,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(16736,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(16737,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16738,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(16739,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16744,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16745,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16746,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(16758,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(16760,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16763,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16765,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16769,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(16789,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(16790,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(16800,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(16931,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(16933,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16939,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(16940,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(16941,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(16950,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(16951,18): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(16956,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(16974,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(16976,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(16976,22): run-time error CSS1035: Expected colon, found '{'
(16996,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(16997,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17032,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(17033,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(17041,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17058,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17059,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(17065,40): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(17065,75): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17066,40): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(17066,75): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(17073,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17074,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(17079,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(17080,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(17081,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(17084,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(17086,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(17090,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(17091,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(17117,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(17133,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(17134,29): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(17135,29): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(17195,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(17211,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(17216,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(17217,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(17218,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(17219,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(17224,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-back'
(17226,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(17227,10): run-time error CSS1035: Expected colon, found '{'
(17230,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(17231,10): run-time error CSS1035: Expected colon, found '{'
(17236,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(17237,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(17255,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17256,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(17264,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(17268,34): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(17270,39): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(17270,71): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17398,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(17410,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-bg'
(17410,45): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(17411,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(17414,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17417,52): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17423,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(17424,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17463,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(17464,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(17465,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(17469,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(17474,48): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(17475,61): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(17479,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(17480,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(17487,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(17490,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(17491,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(17492,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(17498,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(17501,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(17507,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(17507,88): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(17509,68): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(17543,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(17544,35): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(17545,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(17547,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17549,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17552,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(17584,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17602,30): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-right'
(17627,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17670,32): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(17697,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(17698,32): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(17699,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(17701,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17702,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17707,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(17726,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17749,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(17751,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(17752,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(17753,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(17754,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17767,28): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(17768,35): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-border'
(17769,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(17771,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17773,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17775,41): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(17778,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(17779,10): run-time error CSS1035: Expected colon, found '{'
(17788,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(17789,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17804,22): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(17835,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(17839,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(17840,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(17841,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(17860,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(17861,28): run-time error CSS1039: Token not allowed after unary operator: '-color-hover-wash'
(17864,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(17864,55): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(17880,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(17883,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(17885,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(17886,24): run-time error CSS1039: Token not allowed after unary operator: '-nav-z'
(17901,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(17907,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(17908,10): run-time error CSS1035: Expected colon, found '{'
(17919,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17924,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(17925,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(17926,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(17934,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(17936,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(17939,85): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(17940,50): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(17943,15): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(17945,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(17950,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav'
(17952,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(17966,67): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(18004,54): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18023,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18032,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(18033,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(18036,47): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(18039,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(18040,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(18041,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18046,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18073,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(18074,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(18077,47): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(18085,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(18086,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(18087,24): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18090,31): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18093,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18108,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18114,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(18115,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18115,69): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18117,39): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(18117,70): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(18118,66): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(18118,94): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(18124,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18125,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(18126,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(18181,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(18188,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn'
(18188,70): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(18199,32): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(18200,39): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(18202,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(18203,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(18245,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(18247,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18247,76): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18250,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18258,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18259,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(18267,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(18268,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(18269,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(18270,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(18271,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18284,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18309,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18310,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18314,30): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18315,31): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(18321,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18323,38): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(18323,60): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(18328,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18330,38): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(18330,60): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(18338,19): run-time error CSS1039: Token not allowed after unary operator: '-nav-z'
(18339,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav'
(18343,48): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav'
(18344,29): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav'
(18345,18): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(18348,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(18367,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18370,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18391,15): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(18395,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav'
(18397,24): run-time error CSS1039: Token not allowed after unary operator: '-nav-z'
(18431,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18432,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(18433,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18433,69): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18443,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18444,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(18449,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18450,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(18452,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18476,26): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18477,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18477,61): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(18491,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(18527,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18528,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(18529,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18539,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18542,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(18544,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(18545,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(18561,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18565,28): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(18568,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(18575,64): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav-dropdown'
(18582,32): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18584,27): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18595,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav-dropdown'
(18599,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(18600,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(18605,43): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(18618,39): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(18669,32): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18673,32): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18675,27): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18678,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(18679,10): run-time error CSS1035: Expected colon, found '{'
(18691,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18748,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18751,84): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18755,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(18763,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18794,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18797,39): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(18799,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18801,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(18808,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(18809,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18810,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(18823,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(18824,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18825,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(18829,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18830,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18844,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(18845,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18846,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(18850,39): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(18852,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(18854,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(18859,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(18860,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(18861,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(18862,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18863,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(18874,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18875,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(18887,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(18921,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18937,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(18938,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(18939,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(18942,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(18943,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-back'
(18951,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(18952,10): run-time error CSS1035: Expected colon, found '{'
(18966,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(18974,34): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18976,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(18980,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18982,41): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(18983,41): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(18986,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(18989,45): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(18990,45): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(18993,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(18994,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(18998,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19000,64): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19000,100): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19005,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(19006,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19007,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19009,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19014,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19021,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19027,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19031,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(19033,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(19035,44): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(19036,44): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(19042,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19048,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19049,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19057,41): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19070,28): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(19084,33): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(19087,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(19088,10): run-time error CSS1035: Expected colon, found '{'
(19099,14): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(19100,33): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(19103,49): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(19114,15): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(19124,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19126,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(19126,76): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(19127,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19131,49): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19132,50): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(19134,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19135,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19137,57): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19140,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19141,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19144,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(19145,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19155,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(19156,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19164,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(19165,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19166,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19169,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19170,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19209,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(19210,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(19211,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(19220,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(19240,22): run-time error CSS1039: Token not allowed after unary operator: '-hover-bg'
(19295,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(19296,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19297,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(19298,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(19299,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(19300,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19317,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(19319,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(19341,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(19343,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19346,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19347,47): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19348,47): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(19370,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19405,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19413,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19415,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(19415,76): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(19416,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19421,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19422,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19427,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(19431,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19457,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19466,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19496,43): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(19496,77): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(19498,58): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(19498,86): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(19500,45): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(19501,58): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19503,92): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19506,109): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(19507,45): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19509,43): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19509,71): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19519,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(19520,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19521,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19531,44): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19565,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19566,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19567,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19574,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(19575,24): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(19579,42): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(19592,57): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19593,64): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19593,105): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19594,69): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(19601,41): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(19601,69): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(19603,41): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(19603,72): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(19604,41): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(19604,72): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(19606,41): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(19606,71): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(19616,29): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19617,37): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19618,37): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(19619,37): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(19619,71): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(19620,37): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(19620,71): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(19639,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(19640,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19641,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19649,57): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19650,38): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19652,38): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19675,44): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(19676,63): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(19676,91): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(19677,44): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(19678,44): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(19679,44): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(19706,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19710,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19711,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19717,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19722,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(19724,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(19726,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19748,40): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(19748,72): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(19749,40): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(19749,72): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(19750,40): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(19750,72): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(19753,40): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(19753,72): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(19764,42): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(19773,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19785,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(19786,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19795,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(19796,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(19797,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19798,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(19818,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19829,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19837,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(19868,25): run-time error CSS1039: Token not allowed after unary operator: '-btn-radius'
(19869,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn'
(19889,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19890,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(19905,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(19906,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(19906,76): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(19913,54): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19914,54): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19915,55): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(19936,28): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(19937,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(19938,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(19938,70): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(19940,61): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19942,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19944,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19953,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19955,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19985,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(19986,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(19994,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(19995,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(19999,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(20000,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(20001,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(20004,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20005,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20019,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(20020,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20021,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20025,47): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20027,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20028,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(20033,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20047,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(20048,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20049,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(20050,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(20053,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20054,51): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(20065,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(20066,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20074,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20075,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20094,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20095,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(20096,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20097,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(20098,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20099,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(20103,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20104,38): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20105,38): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20106,38): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20107,38): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20111,24): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(20112,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(20114,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(20118,28): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(20119,28): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(20121,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(20122,56): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn'
(20125,28): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn-hover'
(20126,28): run-time error CSS1039: Token not allowed after unary operator: '-color-save-btn-hover'
(20130,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(20136,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20151,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20153,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(20154,43): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20154,69): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20158,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(20163,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(20164,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(20167,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20167,67): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(20173,22): run-time error CSS1039: Token not allowed after unary operator: '-input-height'
(20184,30): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20191,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20194,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20194,65): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20197,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20197,74): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20198,50): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(20250,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20251,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20265,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20270,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20271,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(20280,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20284,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(20286,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20288,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(20292,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20296,49): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(20323,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(20355,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(20356,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20359,62): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20360,70): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus'
(20368,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(20370,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20379,43): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(20382,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(20383,10): run-time error CSS1035: Expected colon, found '{'
(20395,34): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20396,35): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20398,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-mid'
(20398,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20404,69): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20406,71): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20414,36): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20417,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20423,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20437,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20443,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20447,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20457,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20461,27): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(20461,51): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(20475,38): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20482,31): run-time error CSS1039: Token not allowed after unary operator: '-card-padding-lg'
(20482,71): run-time error CSS1039: Token not allowed after unary operator: '-card-padding-lg'
(20491,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(20492,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(20493,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(20496,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(20497,39): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-back'
(20501,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(20502,10): run-time error CSS1035: Expected colon, found '{'
(20530,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(20532,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(20533,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20551,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20572,20): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(20588,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(20589,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20590,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(20592,35): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(20630,32): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(20646,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(20649,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(20669,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20669,71): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20676,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(20677,10): run-time error CSS1035: Expected colon, found '{'
(20698,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20705,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(20710,28): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(20711,30): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(20723,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(20724,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(20730,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(20730,40): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(20744,45): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20744,66): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(20757,80): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(20757,114): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(20757,150): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20758,76): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20759,36): run-time error CSS1039: Token not allowed after unary operator: '-color-delete-btn'
(20765,74): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20766,34): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20770,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(20770,88): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20771,59): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20772,41): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(20773,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20782,107): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20785,59): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(20785,102): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20802,31): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(20803,31): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(20804,35): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(20806,68): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20807,40): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(20808,31): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(20821,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20823,38): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(20823,60): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(20828,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20830,38): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(20830,60): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(20843,41): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(20844,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(20845,47): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20848,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(20849,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20852,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(20857,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(20884,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(20885,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20893,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20902,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(20903,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(20904,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20917,51): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20925,41): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20930,29): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20935,39): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(20956,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(20966,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(20966,82): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(20967,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20967,86): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(20968,50): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20968,86): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(20972,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(20974,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(20975,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(20978,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(20979,47): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(20981,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(20982,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(20992,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(20993,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(20999,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21000,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21004,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(21005,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21010,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21019,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(21020,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21026,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(21027,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21045,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(21046,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(21047,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(21050,22): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(21051,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(21052,28): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-border'
(21055,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(21056,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(21057,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(21061,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(21062,17): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(21063,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(21070,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21083,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(21084,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21085,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21088,42): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(21100,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(21101,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(21104,56): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(21115,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(21116,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21118,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(21119,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(21128,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21130,39): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(21132,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(21133,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(21144,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21158,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21161,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21162,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21172,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21174,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21176,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(21177,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21178,27): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(21178,51): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(21181,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(21183,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(21184,10): run-time error CSS1035: Expected colon, found '{'
(21211,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21212,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21213,17): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(21213,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21219,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21222,40): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(21222,64): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(21230,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21232,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21234,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(21235,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21236,27): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(21236,51): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(21237,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(21258,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21259,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21261,41): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21283,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21285,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-mid'
(21287,45): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21288,45): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21288,108): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21323,44): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21355,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(21357,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21358,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21365,67): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(21384,18): run-time error CSS1039: Token not allowed after unary operator: '-pwa-install-bottom'
(21409,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(21419,63): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(21420,71): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(21435,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21436,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21437,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(21438,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(21443,36): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(21443,70): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(21451,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21462,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21463,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(21464,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21501,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21502,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21503,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21504,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(21505,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(21513,47): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(21515,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(21516,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(21555,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21556,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21557,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21558,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(21559,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21560,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(21562,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21562,69): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21564,37): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(21565,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(21566,37): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(21566,69): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(21566,105): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(21584,32): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(21589,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(21590,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(21602,15): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(21603,25): run-time error CSS1039: Token not allowed after unary operator: '-section-gap'
(21623,33): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(21643,22): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(21645,55): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(21646,55): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(21648,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21654,41): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(21665,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(21667,38): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21667,60): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21672,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(21674,38): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21674,60): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21687,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(21693,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21703,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(21704,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(21705,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21707,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21712,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21713,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21735,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21736,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21737,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21739,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21740,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21743,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21743,76): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21743,106): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21743,140): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21746,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(21747,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21748,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(21754,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(21779,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21780,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21781,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(21782,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(21786,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(21787,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(21789,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21794,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(21795,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21800,59): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(21800,84): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21801,50): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(21817,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21819,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21820,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21821,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21822,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21825,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21825,69): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21825,106): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21826,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(21829,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(21830,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(21831,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21834,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(21838,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21839,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21844,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(21863,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21864,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21868,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(21869,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21874,28): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(21875,30): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(21884,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(21884,77): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(21885,50): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(21899,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(21900,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21901,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(21902,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(21911,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(21912,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(21923,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(21924,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(21926,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21926,69): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(21930,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(21931,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(21946,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21947,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21950,60): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark'
(21951,17): run-time error CSS1030: Expected identifier, found '.'
(21951,25): run-time error CSS1031: Expected selector, found ')'
(21951,25): run-time error CSS1025: Expected comma or open brace, found ')'
(21954,17): run-time error CSS1030: Expected identifier, found '.'
(21954,25): run-time error CSS1031: Expected selector, found ')'
(21954,25): run-time error CSS1025: Expected comma or open brace, found ')'
(21973,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(21974,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(21979,43): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(21979,75): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(21979,115): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(21980,43): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(21980,75): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(21980,115): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(21981,43): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(21981,75): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(21981,115): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(21982,43): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(21982,75): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(21982,118): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(21996,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(21997,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(22001,40): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(22001,74): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(22001,113): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(22002,40): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(22002,74): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(22002,113): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(22002,171): run-time error CSS1039: Token not allowed after unary operator: '-ease-in-out'
(22003,40): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(22003,74): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(22003,113): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border'
(22004,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(22004,77): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(22004,108): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22006,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(22007,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(22050,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(22261,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(22281,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(22309,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22340,54): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22354,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(22354,54): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(22358,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(22359,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(22360,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(22364,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(22365,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(22370,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22371,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(22377,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-ring'
(22381,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22382,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(22383,43): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22384,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22385,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(22393,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(22482,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22484,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(22487,43): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(22488,52): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(22490,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(22491,33): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(22501,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(22502,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(22507,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(22523,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(22524,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22525,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(22526,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(22527,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(22532,57): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(22535,43): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(22535,75): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(22537,43): run-time error CSS1039: Token not allowed after unary operator: '-color-success-bg'
(22537,75): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(22540,40): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22540,76): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(22544,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(22545,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(22546,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(22603,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22607,51): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(22623,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(22654,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(22655,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(22656,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(22657,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(22662,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(22664,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(22680,22): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg'
(22681,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-border'
(22682,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(22684,46): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(22699,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22702,41): run-time error CSS1039: Token not allowed after unary operator: '-color-hover-bg'
(22718,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22732,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22733,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22741,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22742,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(22745,38): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(22747,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(22748,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(22766,33): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(22901,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(22902,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(22921,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(22928,29): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(22932,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(22932,64): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(22956,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22957,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22958,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22959,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22960,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22961,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22962,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22963,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22967,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22970,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22974,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22975,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22976,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22977,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22978,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22979,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22980,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22981,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22986,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22987,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22988,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22989,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22992,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22993,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22994,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22995,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23003,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-btn'
(23004,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-focus-warning'
(23007,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(23008,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23098,32): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(23099,32): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(23100,32): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23102,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(23103,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23104,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base'
(23105,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(23106,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(23107,28): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xxl'
(23116,29): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(23117,29): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(23130,36): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(23131,36): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(23132,36): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(23135,40): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23136,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23137,47): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23139,34): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(23140,34): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(23141,34): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(23177,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav'
(23247,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23248,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23252,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23253,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23261,22): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light'
(23267,50): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(23278,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23290,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(23293,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23320,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23321,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(23326,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(23348,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23362,42): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23439,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(23441,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(23442,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23456,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23457,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(23458,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23529,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23542,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-hover'
(23550,62): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23566,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23592,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-hover'
(23624,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(23624,33): run-time error CSS1035: Expected colon, found '{'
(23629,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(23629,57): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(23630,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23630,64): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(23634,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(23634,32): run-time error CSS1035: Expected colon, found '{'
(23637,56): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23640,42): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(23640,72): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(23641,31): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(23641,73): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23642,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(23642,75): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23643,58): run-time error CSS1039: Token not allowed after unary operator: '-line-height'
(23645,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height'
(23658,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(23659,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23660,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(23661,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(23667,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(23668,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(23669,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height'
(23673,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(23674,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(23678,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(23680,35): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(23682,53): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23683,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23686,36): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23733,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23737,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(23738,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(23739,39): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(23742,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(23743,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light'
(23746,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border-focus'
(23746,55): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23770,40): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(23773,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(23773,33): run-time error CSS1035: Expected colon, found '{'
(23785,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(23786,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(23787,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23788,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(23792,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(23794,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(23795,10): run-time error CSS1035: Expected colon, found '{'
(23807,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23813,42): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-input'
(23813,72): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(23826,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23827,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23828,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23832,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23849,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23850,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23858,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23862,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(23862,42): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(23875,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(23876,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(23879,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height'
(23881,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height'
(23888,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23903,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23917,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23937,32): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(23943,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23964,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(23965,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(23967,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(23972,35): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(23995,17): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-right'
(24005,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24012,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(24045,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(24057,39): run-time error CSS1039: Token not allowed after unary operator: '-pill-cluster-right'
(24110,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(24140,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(24153,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(24154,24): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(24155,29): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24158,41): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24159,43): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24160,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24162,73): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24166,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24167,43): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(24168,48): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24171,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24172,43): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(24173,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24236,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(24238,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(24239,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(24240,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24241,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(24249,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-semibold'
(24250,17): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(24257,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24291,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(24294,22): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(24295,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24342,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(24343,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(24345,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(24346,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24347,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(24361,42): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(24376,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(24377,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal'
(24379,54): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24398,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-border'
(24400,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm'
(24401,28): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg'
(24402,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24403,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(24418,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border'
(24420,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg'
(24421,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24422,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(24423,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium'
(24429,53): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24439,29): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24446,67): run-time error CSS1039: Token not allowed after unary operator: '-ease-out-quint'
(24448,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(24449,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(24475,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(24476,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(24478,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(24479,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(24483,59): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24484,64): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24491,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24496,24): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24520,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(24521,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(24522,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(24523,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(24526,69): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24530,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24537,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24538,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24539,46): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24543,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24572,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24580,42): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(24594,22): run-time error CSS1039: Token not allowed after unary operator: '-input-height'
(24654,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-card'
(24655,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(24657,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius'
(24658,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(24662,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24663,44): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24664,25): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(24669,25): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(24672,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(24672,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(24678,27): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24679,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24680,30): run-time error CSS1039: Token not allowed after unary operator: '-color-danger'
(24754,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(24767,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(24768,49): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(24824,19): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(24828,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav'
(24830,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-z'
(24853,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav-dropdown'
(24868,64): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-nav-dropdown'
(24877,60): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(24879,32): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(24881,27): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
 */
@charset "UTF-8";/*!
 * Bootstrap  v5.2.3 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:var(--bs-link-color);text-decoration:underline}a:hover{color:var(--bs-link-hover-color)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:calc(1.625rem + 4.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-size:calc(1.525rem + 3.3vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-size:calc(1.375rem + 1.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid var(--bs-border-color);border-radius:.375rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:#6c757d}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-color:var(--bs-body-color);--bs-table-bg:transparent;--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-body-color);--bs-table-striped-bg:rgba(0, 0, 0, 0.05);--bs-table-active-color:var(--bs-body-color);--bs-table-active-bg:rgba(0, 0, 0, 0.1);--bs-table-hover-color:var(--bs-body-color);--bs-table-hover-bg:rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:var(--bs-table-color);vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:2px solid currentcolor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:1px 0}.table-bordered>:not(caption)>*>*{border-width:0 1px}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:var(--bs-table-striped-bg);color:var(--bs-table-striped-color)}.table-striped-columns>:not(caption)>tr>:nth-child(2n){--bs-table-accent-bg:var(--bs-table-striped-bg);color:var(--bs-table-striped-color)}.table-active{--bs-table-accent-bg:var(--bs-table-active-bg);color:var(--bs-table-active-color)}.table-hover>tbody>tr:hover>*{--bs-table-accent-bg:var(--bs-table-hover-bg);color:var(--bs-table-hover-color)}.table-primary{--bs-table-color:#000;--bs-table-bg:#cfe2ff;--bs-table-border-color:#bacbe6;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-secondary{--bs-table-color:#000;--bs-table-bg:#e2e3e5;--bs-table-border-color:#cbccce;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-success{--bs-table-color:#000;--bs-table-bg:#d1e7dd;--bs-table-border-color:#bcd0c7;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-info{--bs-table-color:#000;--bs-table-bg:#cff4fc;--bs-table-border-color:#badce3;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-warning{--bs-table-color:#000;--bs-table-bg:#fff3cd;--bs-table-border-color:#e6dbb9;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-danger{--bs-table-color:#000;--bs-table-bg:#f8d7da;--bs-table-border-color:#dfc2c4;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-light{--bs-table-color:#000;--bs-table-bg:#f8f9fa;--bs-table-border-color:#dfe0e1;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-dark{--bs-table-color:#fff;--bs-table-bg:#212529;--bs-table-border-color:#373b3e;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:#6c757d}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled{background-color:#e9ecef;opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;border-radius:.5rem}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + .75rem + 2px)}textarea.form-control-sm{min-height:calc(1.5em + .5rem + 2px)}textarea.form-control-lg{min-height:calc(1.5em + 1rem + 2px)}.form-control-color{width:3rem;height:calc(1.5em + .75rem + 2px);padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0!important;border-radius:.375rem}.form-control-color::-webkit-color-swatch{border-radius:.375rem}.form-control-color.form-control-sm{height:calc(1.5em + .5rem + 2px)}.form-control-color.form-control-lg{height:calc(1.5em + 1rem + 2px)}.form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;-moz-padding-start:calc(0.75rem - 3px);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:#e9ecef}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #212529}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:.25rem}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:.5rem}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-reverse{padding-right:1.5em;padding-left:0;text-align:right}.form-check-reverse .form-check-input{float:right;margin-right:-1.5em;margin-left:0}.form-check-input{width:1em;height:1em;margin-top:.25em;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{width:2em;margin-left:-2.5em;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-switch.form-check-reverse{padding-right:2.5em;padding-left:0}.form-switch.form-check-reverse .form-check-input{margin-right:-2.5em;margin-left:0}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}.form-range{width:100%;height:1.5rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#adb5bd}.form-range:disabled::-moz-range-thumb{background-color:#adb5bd}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:calc(3.5rem + 2px);line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;width:100%;height:100%;padding:1rem .75rem;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:1px solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:1rem .75rem}.form-floating>.form-control-plaintext::-moz-placeholder,.form-floating>.form-control::-moz-placeholder{color:transparent}.form-floating>.form-control-plaintext::placeholder,.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control-plaintext:not(:-moz-placeholder-shown),.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown),.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:-webkit-autofill,.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control-plaintext~label,.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:-webkit-autofill~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control-plaintext~label{border-width:1px 0}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-floating,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-floating:focus-within,.input-group>.form-select:focus{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.375rem}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:.5rem}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#198754}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:rgba(25,135,84,.9);border-radius:.375rem}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#198754;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#198754}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.form-control-color.is-valid,.was-validated .form-control-color:valid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#198754}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#198754}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#198754}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-valid,.input-group>.form-floating:not(:focus-within).is-valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-control:not(:focus):valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.was-validated .input-group>.form-select:not(:focus):valid{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:rgba(220,53,69,.9);border-radius:.375rem}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#dc3545}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.form-control-color.is-invalid,.was-validated .form-control-color:invalid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#dc3545}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#dc3545}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-control:not(:focus):invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.was-validated .input-group>.form-select:not(:focus):invalid{z-index:4}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:#212529;--bs-btn-bg:transparent;--bs-btn-border-width:1px;--bs-btn-border-color:transparent;--bs-btn-border-radius:0.375rem;--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn-check+.btn:hover{color:var(--bs-btn-color);background-color:var(--bs-btn-bg);border-color:var(--bs-btn-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-secondary{--bs-btn-color:#fff;--bs-btn-bg:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5c636a;--bs-btn-hover-border-color:#565e64;--bs-btn-focus-shadow-rgb:130,138,145;--bs-btn-active-color:#fff;--bs-btn-active-bg:#565e64;--bs-btn-active-border-color:#51585e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-success{--bs-btn-color:#fff;--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-color:#fff;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-info{--bs-btn-color:#000;--bs-btn-bg:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#31d2f2;--bs-btn-hover-border-color:#25cff2;--bs-btn-focus-shadow-rgb:11,172,204;--bs-btn-active-color:#000;--bs-btn-active-bg:#3dd5f3;--bs-btn-active-border-color:#25cff2;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;--bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;--bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}.btn-dark{--bs-btn-color:#fff;--bs-btn-bg:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#424649;--bs-btn-hover-border-color:#373b3e;--bs-btn-focus-shadow-rgb:66,70,73;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4d5154;--bs-btn-active-border-color:#373b3e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#212529;--bs-btn-disabled-border-color:#212529}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0d6efd;--bs-gradient:none}.btn-outline-secondary{--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6c757d;--bs-btn-hover-border-color:#6c757d;--bs-btn-focus-shadow-rgb:108,117,125;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6c757d;--bs-btn-active-border-color:#6c757d;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6c757d;--bs-gradient:none}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-info{--bs-btn-color:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#0dcaf0;--bs-btn-hover-border-color:#0dcaf0;--bs-btn-focus-shadow-rgb:13,202,240;--bs-btn-active-color:#000;--bs-btn-active-bg:#0dcaf0;--bs-btn-active-border-color:#0dcaf0;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0dcaf0;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0dcaf0;--bs-gradient:none}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ffc107;--bs-gradient:none}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-link{--bs-btn-font-weight:400;--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:none;--bs-btn-focus-shadow-rgb:49,132,253;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-group-lg>.btn,.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:0.5rem}.btn-group-sm>.btn,.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:0.25rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropdown-center,.dropend,.dropstart,.dropup,.dropup-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:#212529;--bs-dropdown-bg:#fff;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:0.375rem;--bs-dropdown-border-width:1px;--bs-dropdown-inner-border-radius:calc(0.375rem - 1px);--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-dropdown-link-color:#212529;--bs-dropdown-link-hover-color:#1e2125;--bs-dropdown-link-hover-bg:#e9ecef;--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group{border-radius:.375rem}.btn-group>.btn-group:not(:first-child),.btn-group>:not(.btn-check:first-child)+.btn{margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn~.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:#6c757d;display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link.disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.nav-tabs{--bs-nav-tabs-border-width:1px;--bs-nav-tabs-border-color:#dee2e6;--bs-nav-tabs-border-radius:0.375rem;--bs-nav-tabs-link-hover-border-color:#e9ecef #e9ecef #dee2e6;--bs-nav-tabs-link-active-color:#495057;--bs-nav-tabs-link-active-bg:#fff;--bs-nav-tabs-link-active-border-color:#dee2e6 #dee2e6 #fff;border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.nav-tabs .nav-link{margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width));background:0 0;border:var(--bs-nav-tabs-border-width) solid transparent;border-top-left-radius:var(--bs-nav-tabs-border-radius);border-top-right-radius:var(--bs-nav-tabs-border-radius)}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{isolation:isolate;border-color:var(--bs-nav-tabs-link-hover-border-color)}.nav-tabs .nav-link.disabled,.nav-tabs .nav-link:disabled{color:var(--bs-nav-link-disabled-color);background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:var(--bs-nav-tabs-link-active-color);background-color:var(--bs-nav-tabs-link-active-bg);border-color:var(--bs-nav-tabs-link-active-border-color)}.nav-tabs .dropdown-menu{margin-top:calc(-1 * var(--bs-nav-tabs-border-width));border-top-left-radius:0;border-top-right-radius:0}.nav-pills{--bs-nav-pills-border-radius:0.375rem;--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#0d6efd}.nav-pills .nav-link{background:0 0;border:0;border-radius:var(--bs-nav-pills-border-radius)}.nav-pills .nav-link:disabled{color:var(--bs-nav-link-disabled-color);background-color:transparent;border-color:transparent}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:var(--bs-nav-pills-link-active-color);background-color:var(--bs-nav-pills-link-active-bg)}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-basis:0;flex-grow:1;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(0, 0, 0, 0.55);--bs-navbar-hover-color:rgba(0, 0, 0, 0.7);--bs-navbar-disabled-color:rgba(0, 0, 0, 0.3);--bs-navbar-active-color:rgba(0, 0, 0, 0.9);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(0, 0, 0, 0.9);--bs-navbar-brand-hover-color:rgba(0, 0, 0, 0.9);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(0, 0, 0, 0.1);--bs-navbar-toggler-border-radius:0.375rem;--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .show>.nav-link{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-navbar-color)}.navbar-text a,.navbar-text a:focus,.navbar-text a:hover{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:var(--bs-navbar-toggler-icon-bg);background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-sm .offcanvas .offcanvas-header{display:none}.navbar-expand-sm .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-md .offcanvas .offcanvas-header{display:none}.navbar-expand-md .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xl .offcanvas .offcanvas-header{display:none}.navbar-expand-xl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}.navbar-expand-xxl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xxl .offcanvas .offcanvas-header{display:none}.navbar-expand-xxl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand .offcanvas .offcanvas-header{display:none}.navbar-expand .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}.navbar-dark{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-border-width:1px;--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:0.375rem;--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(0.375rem - 1px);--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(0, 0, 0, 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:#fff;--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y)}.card-subtitle{margin-top:calc(-.5 * var(--bs-card-title-spacer-y));margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}.card-header-tabs{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-bottom:calc(-1 * var(--bs-card-cap-padding-y));margin-left:calc(-.5 * var(--bs-card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}.card-header-pills{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-left:calc(-.5 * var(--bs-card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card-group>.card{margin-bottom:var(--bs-card-group-margin)}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion{--bs-accordion-color:#212529;--bs-accordion-bg:#fff;--bs-accordion-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-width:1px;--bs-accordion-border-radius:0.375rem;--bs-accordion-inner-border-radius:calc(0.375rem - 1px);--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-btn-color:#212529;--bs-accordion-btn-bg:var(--bs-accordion-bg);--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");--bs-accordion-btn-icon-width:1.25rem;--bs-accordion-btn-icon-transform:rotate(-180deg);--bs-accordion-btn-icon-transition:transform 0.2s ease-in-out;--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");--bs-accordion-btn-focus-border-color:#86b7fe;--bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-active-color:#0c63e4;--bs-accordion-active-bg:#e7f1ff}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;border-color:var(--bs-accordion-btn-focus-border-color);outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-header{margin-bottom:0}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}.accordion-item:first-of-type .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-item:last-of-type .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type .accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.accordion-flush .accordion-collapse{border-width:0}.accordion-flush .accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush .accordion-item:first-child{border-top:0}.accordion-flush .accordion-item:last-child{border-bottom:0}.accordion-flush .accordion-item .accordion-button,.accordion-flush .accordion-item .accordion-button.collapsed{border-radius:0}.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color:#6c757d;--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:#6c757d;display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:#fff;--bs-pagination-border-width:1px;--bs-pagination-border-color:#dee2e6;--bs-pagination-border-radius:0.375rem;--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:#e9ecef;--bs-pagination-hover-border-color:#dee2e6;--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:#e9ecef;--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:#6c757d;--bs-pagination-disabled-bg:#fff;--bs-pagination-disabled-border-color:#dee2e6;display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.active>.page-link,.page-link.active{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.disabled>.page-link,.page-link.disabled{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.pagination-lg{--bs-pagination-padding-x:1.5rem;--bs-pagination-padding-y:0.75rem;--bs-pagination-font-size:1.25rem;--bs-pagination-border-radius:0.5rem}.pagination-sm{--bs-pagination-padding-x:0.5rem;--bs-pagination-padding-y:0.25rem;--bs-pagination-font-size:0.875rem;--bs-pagination-border-radius:0.25rem}.badge{--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:0.375rem;display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:1px solid var(--bs-alert-border-color);--bs-alert-border-radius:0.375rem;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{--bs-alert-color:#084298;--bs-alert-bg:#cfe2ff;--bs-alert-border-color:#b6d4fe}.alert-primary .alert-link{color:#06357a}.alert-secondary{--bs-alert-color:#41464b;--bs-alert-bg:#e2e3e5;--bs-alert-border-color:#d3d6d8}.alert-secondary .alert-link{color:#34383c}.alert-success{--bs-alert-color:#0f5132;--bs-alert-bg:#d1e7dd;--bs-alert-border-color:#badbcc}.alert-success .alert-link{color:#0c4128}.alert-info{--bs-alert-color:#055160;--bs-alert-bg:#cff4fc;--bs-alert-border-color:#b6effb}.alert-info .alert-link{color:#04414d}.alert-warning{--bs-alert-color:#664d03;--bs-alert-bg:#fff3cd;--bs-alert-border-color:#ffecb5}.alert-warning .alert-link{color:#523e02}.alert-danger{--bs-alert-color:#842029;--bs-alert-bg:#f8d7da;--bs-alert-border-color:#f5c2c7}.alert-danger .alert-link{color:#6a1a21}.alert-light{--bs-alert-color:#636464;--bs-alert-bg:#fefefe;--bs-alert-border-color:#fdfdfe}.alert-light .alert-link{color:#4f5050}.alert-dark{--bs-alert-color:#141619;--bs-alert-bg:#d3d3d4;--bs-alert-border-color:#bcbebf}.alert-dark .alert-link{color:#101214}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:#e9ecef;--bs-progress-border-radius:0.375rem;--bs-progress-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:var(--bs-progress-bar-color);text-align:center;white-space:nowrap;background-color:var(--bs-progress-bar-bg);transition:var(--bs-progress-bar-transition)}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:var(--bs-progress-height) var(--bs-progress-height)}.progress-bar-animated{animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{animation:none}}.list-group{--bs-list-group-color:#212529;--bs-list-group-bg:#fff;--bs-list-group-border-color:rgba(0, 0, 0, 0.125);--bs-list-group-border-width:1px;--bs-list-group-border-radius:0.375rem;--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:#495057;--bs-list-group-action-hover-color:#495057;--bs-list-group-action-hover-bg:#f8f9fa;--bs-list-group-action-active-color:#212529;--bs-list-group-action-active-bg:#e9ecef;--bs-list-group-disabled-color:#6c757d;--bs-list-group-disabled-bg:#fff;--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#0d6efd;--bs-list-group-active-border-color:#0d6efd;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>.list-group-item::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item-action{width:100%;color:var(--bs-list-group-action-color);text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:var(--bs-list-group-action-hover-color);text-decoration:none;background-color:var(--bs-list-group-action-hover-bg)}.list-group-item-action:active{color:var(--bs-list-group-action-active-color);background-color:var(--bs-list-group-action-active-bg)}.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:calc(-1 * var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#084298;background-color:#cfe2ff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#084298;background-color:#bacbe6}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#084298;border-color:#084298}.list-group-item-secondary{color:#41464b;background-color:#e2e3e5}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#41464b;background-color:#cbccce}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#41464b;border-color:#41464b}.list-group-item-success{color:#0f5132;background-color:#d1e7dd}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#0f5132;background-color:#bcd0c7}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#0f5132;border-color:#0f5132}.list-group-item-info{color:#055160;background-color:#cff4fc}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#055160;background-color:#badce3}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#055160;border-color:#055160}.list-group-item-warning{color:#664d03;background-color:#fff3cd}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#664d03;background-color:#e6dbb9}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#664d03;border-color:#664d03}.list-group-item-danger{color:#842029;background-color:#f8d7da}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#842029;background-color:#dfc2c4}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#842029;border-color:#842029}.list-group-item-light{color:#636464;background-color:#fefefe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#636464;background-color:#e5e5e5}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#636464;border-color:#636464}.list-group-item-dark{color:#141619;background-color:#d3d3d4}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#141619;background-color:#bebebf}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#141619;border-color:#141619}.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.375rem;opacity:.5}.btn-close:hover{color:#000;text-decoration:none;opacity:.75}.btn-close:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);opacity:1}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25}.btn-close-white{filter:invert(1) grayscale(100%) brightness(200%)}.toast{--bs-toast-zindex:1090;--bs-toast-padding-x:0.75rem;--bs-toast-padding-y:0.5rem;--bs-toast-spacing:1.5rem;--bs-toast-max-width:350px;--bs-toast-font-size:0.875rem;--bs-toast-color: ;--bs-toast-bg:rgba(255, 255, 255, 0.85);--bs-toast-border-width:1px;--bs-toast-border-color:var(--bs-border-color-translucent);--bs-toast-border-radius:0.375rem;--bs-toast-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-toast-header-color:#6c757d;--bs-toast-header-bg:rgba(255, 255, 255, 0.85);--bs-toast-header-border-color:rgba(0, 0, 0, 0.05);width:var(--bs-toast-max-width);max-width:100%;font-size:var(--bs-toast-font-size);color:var(--bs-toast-color);pointer-events:auto;background-color:var(--bs-toast-bg);background-clip:padding-box;border:var(--bs-toast-border-width) solid var(--bs-toast-border-color);box-shadow:var(--bs-toast-box-shadow);border-radius:var(--bs-toast-border-radius)}.toast.showing{opacity:0}.toast:not(.show){display:none}.toast-container{--bs-toast-zindex:1090;position:absolute;z-index:var(--bs-toast-zindex);width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:var(--bs-toast-spacing)}.toast-header{display:flex;align-items:center;padding:var(--bs-toast-padding-y) var(--bs-toast-padding-x);color:var(--bs-toast-header-color);background-color:var(--bs-toast-header-bg);background-clip:padding-box;border-bottom:var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);border-top-left-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));border-top-right-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width))}.toast-header .btn-close{margin-right:calc(-.5 * var(--bs-toast-padding-x));margin-left:var(--bs-toast-padding-x)}.toast-body{padding:var(--bs-toast-padding-x);word-wrap:break-word}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color: ;--bs-modal-bg:#fff;--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:1px;--bs-modal-border-radius:0.5rem;--bs-modal-box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-modal-inner-border-radius:calc(0.5rem - 1px);--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:1px;--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:1px;position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - var(--bs-modal-margin) * 2)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin) * 2)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);outline:0}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:var(--bs-modal-header-padding);border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);border-top-left-radius:var(--bs-modal-inner-border-radius);border-top-right-radius:var(--bs-modal-inner-border-radius)}.modal-header .btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);margin:calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto}.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);background-color:var(--bs-modal-footer-bg);border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);border-bottom-right-radius:var(--bs-modal-inner-border-radius);border-bottom-left-radius:var(--bs-modal-inner-border-radius)}.modal-footer>*{margin:calc(var(--bs-modal-footer-gap) * .5)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15)}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}.modal-sm{--bs-modal-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{--bs-modal-width:800px}}@media (min-width:1200px){.modal-xl{--bs-modal-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-footer,.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-footer,.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-footer,.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-footer,.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-footer,.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-max-width:200px;--bs-tooltip-padding-x:0.5rem;--bs-tooltip-padding-y:0.25rem;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-color:#fff;--bs-tooltip-bg:#000;--bs-tooltip-border-radius:0.375rem;--bs-tooltip-opacity:0.9;--bs-tooltip-arrow-width:0.8rem;--bs-tooltip-arrow-height:0.4rem;z-index:var(--bs-tooltip-zindex);display:block;padding:var(--bs-tooltip-arrow-height);margin:var(--bs-tooltip-margin);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:0}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:0;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:0}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:0;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.popover{--bs-popover-zindex:1070;--bs-popover-max-width:276px;--bs-popover-font-size:0.875rem;--bs-popover-bg:#fff;--bs-popover-border-width:1px;--bs-popover-border-color:var(--bs-border-color-translucent);--bs-popover-border-radius:0.5rem;--bs-popover-inner-border-radius:calc(0.5rem - 1px);--bs-popover-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-popover-header-padding-x:1rem;--bs-popover-header-padding-y:0.5rem;--bs-popover-header-font-size:1rem;--bs-popover-header-color: ;--bs-popover-header-bg:#f0f0f0;--bs-popover-body-padding-x:1rem;--bs-popover-body-padding-y:1rem;--bs-popover-body-color:#212529;--bs-popover-arrow-width:1rem;--bs-popover-arrow-height:0.5rem;--bs-popover-arrow-border:var(--bs-popover-border-color);z-index:var(--bs-popover-zindex);display:block;max-width:var(--bs-popover-max-width);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-popover-font-size);word-wrap:break-word;background-color:var(--bs-popover-bg);background-clip:padding-box;border:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-radius:var(--bs-popover-border-radius)}.popover .popover-arrow{display:block;width:var(--bs-popover-arrow-width);height:var(--bs-popover-arrow-height)}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::after,.bs-popover-top>.popover-arrow::before{border-width:var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-top-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:var(--bs-popover-border-width);border-top-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::after,.bs-popover-end>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-right-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:var(--bs-popover-border-width);border-right-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::before{border-width:0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-bottom-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:var(--bs-popover-border-width);border-bottom-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:var(--bs-popover-arrow-width);margin-left:calc(-.5 * var(--bs-popover-arrow-width));content:"";border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-header-bg)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::after,.bs-popover-start>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-left-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:var(--bs-popover-border-width);border-left-color:var(--bs-popover-bg)}.popover-header{padding:var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);margin-bottom:0;font-size:var(--bs-popover-header-font-size);color:var(--bs-popover-header-color);background-color:var(--bs-popover-header-bg);border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-top-left-radius:var(--bs-popover-inner-border-radius);border-top-right-radius:var(--bs-popover-inner-border-radius)}.popover-header:empty{display:none}.popover-body{padding:var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);color:var(--bs-popover-body-color)}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-next-icon,.carousel-dark .carousel-control-prev-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}.spinner-border,.spinner-grow{display:inline-block;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.offcanvas,.offcanvas-lg,.offcanvas-md,.offcanvas-sm,.offcanvas-xl,.offcanvas-xxl{--bs-offcanvas-zindex:1045;--bs-offcanvas-width:400px;--bs-offcanvas-height:30vh;--bs-offcanvas-padding-x:1rem;--bs-offcanvas-padding-y:1rem;--bs-offcanvas-color: ;--bs-offcanvas-bg:#fff;--bs-offcanvas-border-width:1px;--bs-offcanvas-border-color:var(--bs-border-color-translucent);--bs-offcanvas-box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)}@media (max-width:575.98px){.offcanvas-sm{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}}@media (max-width:575.98px) and (prefers-reduced-motion:reduce){.offcanvas-sm{transition:none}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}}@media (max-width:575.98px){.offcanvas-sm.show:not(.hiding),.offcanvas-sm.showing{transform:none}}@media (max-width:575.98px){.offcanvas-sm.hiding,.offcanvas-sm.show,.offcanvas-sm.showing{visibility:visible}}@media (min-width:576px){.offcanvas-sm{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-sm .offcanvas-header{display:none}.offcanvas-sm .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:767.98px){.offcanvas-md{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}}@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.offcanvas-md{transition:none}}@media (max-width:767.98px){.offcanvas-md.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}}@media (max-width:767.98px){.offcanvas-md.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}}@media (max-width:767.98px){.offcanvas-md.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}}@media (max-width:767.98px){.offcanvas-md.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}}@media (max-width:767.98px){.offcanvas-md.show:not(.hiding),.offcanvas-md.showing{transform:none}}@media (max-width:767.98px){.offcanvas-md.hiding,.offcanvas-md.show,.offcanvas-md.showing{visibility:visible}}@media (min-width:768px){.offcanvas-md{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-md .offcanvas-header{display:none}.offcanvas-md .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:991.98px){.offcanvas-lg{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}}@media (max-width:991.98px) and (prefers-reduced-motion:reduce){.offcanvas-lg{transition:none}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}}@media (max-width:991.98px){.offcanvas-lg.show:not(.hiding),.offcanvas-lg.showing{transform:none}}@media (max-width:991.98px){.offcanvas-lg.hiding,.offcanvas-lg.show,.offcanvas-lg.showing{visibility:visible}}@media (min-width:992px){.offcanvas-lg{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-lg .offcanvas-header{display:none}.offcanvas-lg .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1199.98px){.offcanvas-xl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}}@media (max-width:1199.98px) and (prefers-reduced-motion:reduce){.offcanvas-xl{transition:none}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}}@media (max-width:1199.98px){.offcanvas-xl.show:not(.hiding),.offcanvas-xl.showing{transform:none}}@media (max-width:1199.98px){.offcanvas-xl.hiding,.offcanvas-xl.show,.offcanvas-xl.showing{visibility:visible}}@media (min-width:1200px){.offcanvas-xl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xl .offcanvas-header{display:none}.offcanvas-xl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1399.98px){.offcanvas-xxl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}}@media (max-width:1399.98px) and (prefers-reduced-motion:reduce){.offcanvas-xxl{transition:none}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}}@media (max-width:1399.98px){.offcanvas-xxl.show:not(.hiding),.offcanvas-xxl.showing{transform:none}}@media (max-width:1399.98px){.offcanvas-xxl.hiding,.offcanvas-xxl.show,.offcanvas-xxl.showing{visibility:visible}}@media (min-width:1400px){.offcanvas-xxl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xxl .offcanvas-header{display:none}.offcanvas-xxl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas.show:not(.hiding),.offcanvas.showing{transform:none}.offcanvas.hiding,.offcanvas.show,.offcanvas.showing{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;justify-content:space-between;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-header .btn-close{padding:calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);margin-top:calc(-.5 * var(--bs-offcanvas-padding-y));margin-right:calc(-.5 * var(--bs-offcanvas-padding-x));margin-bottom:calc(-.5 * var(--bs-offcanvas-padding-y))}.offcanvas-title{margin-bottom:0;line-height:1.5}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.2em}.placeholder-glow .placeholder{animation:placeholder-glow 2s ease-in-out infinite}@keyframes placeholder-glow{50%{opacity:.2}}.placeholder-wave{-webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.clearfix::after{display:block;clear:both;content:""}.text-bg-primary{color:#fff!important;background-color:RGBA(13,110,253,var(--bs-bg-opacity,1))!important}.text-bg-secondary{color:#fff!important;background-color:RGBA(108,117,125,var(--bs-bg-opacity,1))!important}.text-bg-success{color:#fff!important;background-color:RGBA(25,135,84,var(--bs-bg-opacity,1))!important}.text-bg-info{color:#000!important;background-color:RGBA(13,202,240,var(--bs-bg-opacity,1))!important}.text-bg-warning{color:#000!important;background-color:RGBA(255,193,7,var(--bs-bg-opacity,1))!important}.text-bg-danger{color:#fff!important;background-color:RGBA(220,53,69,var(--bs-bg-opacity,1))!important}.text-bg-light{color:#000!important;background-color:RGBA(248,249,250,var(--bs-bg-opacity,1))!important}.text-bg-dark{color:#fff!important;background-color:RGBA(33,37,41,var(--bs-bg-opacity,1))!important}.link-primary{color:#0d6efd!important}.link-primary:focus,.link-primary:hover{color:#0a58ca!important}.link-secondary{color:#6c757d!important}.link-secondary:focus,.link-secondary:hover{color:#565e64!important}.link-success{color:#198754!important}.link-success:focus,.link-success:hover{color:#146c43!important}.link-info{color:#0dcaf0!important}.link-info:focus,.link-info:hover{color:#3dd5f3!important}.link-warning{color:#ffc107!important}.link-warning:focus,.link-warning:hover{color:#ffcd39!important}.link-danger{color:#dc3545!important}.link-danger:focus,.link-danger:hover{color:#b02a37!important}.link-light{color:#f8f9fa!important}.link-light:focus,.link-light:hover{color:#f9fafb!important}.link-dark{color:#212529!important}.link-dark:focus,.link-dark:hover{color:#1a1e21!important}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:1px;min-height:1em;background-color:currentcolor;opacity:.25}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.opacity-0{opacity:0!important}.opacity-25{opacity:.25!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-0{border:0!important}.border-top{border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-top-0{border-top:0!important}.border-end{border-right:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-start-0{border-left:0!important}.border-primary{--bs-border-opacity:1;border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important}.border-secondary{--bs-border-opacity:1;border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))!important}.border-success{--bs-border-opacity:1;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important}.border-info{--bs-border-opacity:1;border-color:rgba(var(--bs-info-rgb),var(--bs-border-opacity))!important}.border-warning{--bs-border-opacity:1;border-color:rgba(var(--bs-warning-rgb),var(--bs-border-opacity))!important}.border-danger{--bs-border-opacity:1;border-color:rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important}.border-light{--bs-border-opacity:1;border-color:rgba(var(--bs-light-rgb),var(--bs-border-opacity))!important}.border-dark{--bs-border-opacity:1;border-color:rgba(var(--bs-dark-rgb),var(--bs-border-opacity))!important}.border-white{--bs-border-opacity:1;border-color:rgba(var(--bs-white-rgb),var(--bs-border-opacity))!important}.border-1{--bs-border-width:1px}.border-2{--bs-border-width:2px}.border-3{--bs-border-width:3px}.border-4{--bs-border-width:4px}.border-5{--bs-border-width:5px}.border-opacity-10{--bs-border-opacity:0.1}.border-opacity-25{--bs-border-opacity:0.25}.border-opacity-50{--bs-border-opacity:0.5}.border-opacity-75{--bs-border-opacity:0.75}.border-opacity-100{--bs-border-opacity:1}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.font-monospace{font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-light{font-weight:300!important}.fw-lighter{font-weight:lighter!important}.fw-normal{font-weight:400!important}.fw-bold{font-weight:700!important}.fw-semibold{font-weight:600!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{--bs-text-opacity:1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-success{--bs-text-opacity:1;color:rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important}.text-info{--bs-text-opacity:1;color:rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-danger{--bs-text-opacity:1;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-black{--bs-text-opacity:1;color:rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-body{--bs-text-opacity:1;color:rgba(var(--bs-body-color-rgb),var(--bs-text-opacity))!important}.text-muted{--bs-text-opacity:1;color:#6c757d!important}.text-black-50{--bs-text-opacity:1;color:rgba(0,0,0,.5)!important}.text-white-50{--bs-text-opacity:1;color:rgba(255,255,255,.5)!important}.text-reset{--bs-text-opacity:1;color:inherit!important}.text-opacity-25{--bs-text-opacity:0.25}.text-opacity-50{--bs-text-opacity:0.5}.text-opacity-75{--bs-text-opacity:0.75}.text-opacity-100{--bs-text-opacity:1}.bg-primary{--bs-bg-opacity:1;background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important}.bg-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}.bg-success{--bs-bg-opacity:1;background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important}.bg-info{--bs-bg-opacity:1;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}.bg-warning{--bs-bg-opacity:1;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}.bg-danger{--bs-bg-opacity:1;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.bg-black{--bs-bg-opacity:1;background-color:rgba(var(--bs-black-rgb),var(--bs-bg-opacity))!important}.bg-white{--bs-bg-opacity:1;background-color:rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important}.bg-body{--bs-bg-opacity:1;background-color:rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity))!important}.bg-transparent{--bs-bg-opacity:1;background-color:transparent!important}.bg-opacity-10{--bs-bg-opacity:0.1}.bg-opacity-25{--bs-bg-opacity:0.25}.bg-opacity-50{--bs-bg-opacity:0.5}.bg-opacity-75{--bs-bg-opacity:0.75}.bg-opacity-100{--bs-bg-opacity:1}.bg-gradient{background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:var(--bs-border-radius)!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:var(--bs-border-radius-sm)!important}.rounded-2{border-radius:var(--bs-border-radius)!important}.rounded-3{border-radius:var(--bs-border-radius-lg)!important}.rounded-4{border-radius:var(--bs-border-radius-xl)!important}.rounded-5{border-radius:var(--bs-border-radius-2xl)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:var(--bs-border-radius-pill)!important}.rounded-top{border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-end{border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-bottom{border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-start{border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:var(--bs-border-radius)!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map */
/* ============================================================
   qMeet - styles.css
   Site-specific rules. Loaded BEFORE Shared/styles_shared.css
   (via Bundle.config) so shared rules win on equal specificity.
   To override a shared rule, raise this file's selector
   specificity (see the .pill.pill pattern near the bottom).

   Design tokens, base typography, buttons, form inputs, cards,
   alerts, pills, modals, spinners, back-btn, and utility classes
   all live in styles_shared.css. This file holds:
     - Nav-specific CSS variables (cyan highlight palette)
     - Skip-to-content link
     - Toasts
     - Tips panel overrides
     - Navigation chrome
     - Page layout / page-title-flush
     - Tables
     - Banners (chatbar, view-only)
     - Search input with clear (×)
     - Footer
     - qMeet-specific components (section-bar, result-card, etc.)
     - Legacy compatibility (kept so old pages keep rendering)
   ============================================================ */

/* ── Layout / width utilities ───────────────────────────────────
   Replace ad-hoc inline style="max-width:6rem" / "max-width:10rem"
   so narrow numeric inputs (sort order, currency code, amount) stay
   visually consistent across pages. Verbatim from PacklistPRO's
   styles.css, which is where this pair originates.

   Added to qMeet 2026-07-19: the markup here had been using these
   class names since before the site had the rules, so every one of
   them was silently a no-op. Keep the values identical across sites
   — the point of the utility is that a narrow input is the SAME
   narrow everywhere.

   ⚠ These cap SHORT values only — a number box, a currency code.
   Do NOT put them on a <select> whose options are sentences
   ("🔒 Nobody (just me)", "Until: 5:30 PM"): 10rem clips the closed
   select and the user can no longer read their own choice. */
   ⚠ SPECIFICITY, measured — a bare `.input-w-narrow { max-width: 6rem }` (which is
   what PacklistPRO ships and what was copied here first) DOES NOT WORK on these
   sites. Two rules in styles_shared.css beat it, and styles_shared.css loads AFTER
   this file:
     • `.textbox { max-width: 100% }`            — equal specificity, later source
     • `.form-group .textbox { max-width: 480px }` — (0,2,0) vs (0,1,0), wins outright
   Every real usage sits inside a .form-group, so the second is the decisive one and
   the input silently renders at 480px. Scoping to `.form-group .textbox.<class>`
   makes it (0,3,0) and it wins — the same trick, and the same reasoning, as the
   `.form-group .textbox.textbox-uncapped` rule further down this file.
   The unscoped selectors are kept alongside for any future use outside a form-group. */
.input-w-narrow    { max-width: 6rem;  }
.input-w-narrow-md { max-width: 10rem; }
.form-group .textbox.input-w-narrow,
.form-group .dropdown.input-w-narrow    { max-width: 6rem;  }
.form-group .textbox.input-w-narrow-md,
.form-group .dropdown.input-w-narrow-md { max-width: 10rem; }

/* ── 1./2. CSS Variables + Dark Mode ──────────────────────────
   All design tokens now live in Shared/styles_shared.css (single source of
   truth across qMeet / PacklistPRO / qFIT). The empty :root + dark-mode
   section markers that used to sit here were dropped 2026-06-06. */

/* Skip-to-content link — visually hidden until focused, then slides into view
   at the top-left. Keyboard users (Tab on page load) get to bypass the nav.
   WCAG 2.4.1 "Bypass Blocks". Targets <main id="main-content"> in both masters. */

/* Opt a .textbox out of the shared `.form-group .textbox { max-width: 480px }`
   desktop cap so it spans the full form-group width — matching the full-width
   .dropdown controls beside it (e.g. MyProfile's "About Me" vs the Gender select).
   Higher specificity than the shared rule, so it wins regardless of source order. */
.form-group .textbox.textbox-uncapped { max-width: 100%; }

/* Read-only "Account Activity" card (admin-only, MyProfile.aspx). Two-column
   table so every value lines up in its own right-hand column; row dividers
   match the old .account-activity-list look. */
.account-activity-table {
    width: 100%;
    border-collapse: collapse;
}
.account-activity-table th,
.account-activity-table td {
    padding: 0.35rem 0;
    text-align: left;
    vertical-align: top;
    color: var(--color-text);
    font-weight: var(--font-weight-normal);
}
.account-activity-table th {
    white-space: nowrap;
    padding-right: 1.5rem;
}
.account-activity-table td {
    width: 100%;
}
.account-activity-table tr + tr th,
.account-activity-table tr + tr td {
    border-top: 1px solid var(--color-border);
}

/* ── 4. Typography (site-specific extras) ─────────────────── */

.tiny {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Dynamic body labels rendered from code-behind helpers (AddLabel etc.) —
   regular-weight by default, with a .label-dyn-bold modifier that swaps to
   bold. Replaces inline Font.Size/ForeColor/Font.Bold writes the legacy
   Configure*/Add* helpers used to apply. */
.label-dyn        { display: inline; font-size: var(--font-size-sm); color: var(--color-text); font-weight: var(--font-weight-normal); }
.label-dyn-bold   { font-weight: var(--font-weight-bold); }

/* ChatUC recipient status pill — gains a yellow highlight when the status
   text is a quoted away-message. Replaces the legacy lblRecipientStatus.BackColor
   write that produced inline style="background-color:Yellow". */
.chat-recipient-status-active { background: #ffff00; color: #000; padding: 0 0.25rem; border-radius: var(--border-radius-sm); }

/* ChatUC user-tunable font sizes — applied via Style.Add of a CSS custom
   property rather than the legacy Font.Size inline write. */
.chat-msg-textbox  { font-size: var(--chat-msg-font-size, 1rem); }

/* ── 7. Buttons ──────────────────────────────────────────── */
/* Dominant convention (space-separated, combined on same element):
   class="button"             → primary (accent blue)
   class="button save"        → lime green (Save)
   class="button danger"      → red (Delete / destructive)
   class="button transparent" → outlined / ghost
   class="button small"       → smaller variant
*/

/* Clipboard-copied feedback (used by site.js initClipboardButtons) */
.button.copied,
.link.copied   { background-color: var(--color-success); color: #fff; }
/* AutoPostBack inputs (spec line 25) — brief pulse to confirm the change is
   committing. Applied by site.js initAutoPostbackFeedback to controls whose
   ASP.NET-emitted onchange contains __doPostBack. */
input.saving,
select.saving,
.checkbox.saving {
    box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.35);
    transition: box-shadow var(--transition-fast);
}

/* ── 8. Form inputs ──────────────────────────────────────── */


/* Compact FileUpload (replaces a stray style="padding:1px" in Help_Chat.ascx) */
.file-upload-compact { padding: 1px; }

/* Character-counter wrapper. site.js initCharCounters toggles
   .over-threshold once the input is within 5% of MaxLength so the
   user notices the cap before they hit it. */
.char-counter            { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.char-counter.over-threshold { color: var(--color-danger); font-weight: var(--font-weight-medium); }

/* Sizing variants for multi-line textareas — replace inline Height="…px" on
   .textbox controls that the markup used to apply for short/medium/long bodies. */

/* EditEvent Date & Time: keep each native date picker and its adjacent
   30-min time dropdown the same fixed width (they'd otherwise differ — the date
   input is a full-width .textbox while the dropdown auto-sizes to its content).

   TWO containers, because the date/time rows are split across two cards:
     #essentialsWhen — Start and End, in ✅ The Essentials (required, always visible)
     #whenBody       — the RSVP deadline and the Repeats controls, in 🗓️ Date & Time
   Start/End moved out of #whenBody on 2026-08-04 and took this sizing with them;
   if either id disappears from the markup, its date box and time dropdown go back
   to sitting side by side at two different widths. */
#essentialsWhen .date-picker,
#essentialsWhen .dropdown,
#whenBody .date-picker,
#whenBody .dropdown {
    width: 170px;
    max-width: 170px;
    flex: 0 0 auto;
}

/* Single-line input sizing variants — replace inline Width="…px" attributes. */
.textbox-w-datetime  { width: 150px; }
.textbox-w-search    { width: 140px; }
.textbox-w-date      { width: 80px; }
.button-w-page-arrow { width: 100px; }

/* ── 8b. Calendar (asp:Calendar — replaces inline BorderStyle/Font-Names/
       ForeColor/BackColor on the Calendar control in ManageEvent.aspx) ─── */
.qmeet-calendar {
    border-collapse: collapse;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    margin-top: 0.5rem;
}
.qmeet-calendar td,
.qmeet-calendar th {
    padding: 6px 10px;
    text-align: center;
    border: 1px solid var(--color-border);
}
.qmeet-calendar a {
    color: var(--color-text);
    text-decoration: none;
    display: inline-block;
    min-width: 1.5rem;
}
.qmeet-calendar a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}
.qmeet-calendar-title,
.qmeet-calendar .qmeet-calendar-title {
    background-color: var(--color-accent);
    color: #fff;
    font-weight: bold;
}
.qmeet-calendar-title a,
.qmeet-calendar .qmeet-calendar-title a { color: #fff; }
.qmeet-calendar-selected,
.qmeet-calendar .qmeet-calendar-selected {
    background-color: var(--color-accent);
    color: #fff;
    font-weight: bold;
}
.qmeet-calendar-selected a,
.qmeet-calendar .qmeet-calendar-selected a { color: #fff; }
.qmeet-calendar-today,
.qmeet-calendar .qmeet-calendar-today {
    background-color: var(--color-primary-light);
    color: var(--color-text);
    font-weight: bold;
}

/* ── 9. Checkboxes / Radios ─────────────────────────────── */


/* ── 13. Modal site-specific overrides ──────────────────── */

/* Post-login install + push prompts modal styles live in Shared/styles_shared.css
   (single source of truth across qMeet, PacklistPRO, qFIT). */


/* ── 15. Navigation — nav styling defers to styles_shared.css (plus
       Content/nav-hamburger.css for the hamburger-at-every-width switch).
       The block below is the one qMEET-only exception. ───────────── */

/* Two-line nav entries: the label, with a one-line descriptor beneath it. Every
   navigable entry in Site.Master's nav carries one — the eight look-alike Chat /
   Interests entries that prompted it, and since then the rest of the menus too.
   Site.Master repeats the same sentence in the anchor's title=, so the
   descriptor is present on hover as well as on screen.

   Safe here (and NOT on the sister sites' shared stylesheet) because qMEET runs
   the hamburger overlay at EVERY width: every nav row is a full-width in-flow
   row with space to wrap, never a narrow desktop flyout.

   ⚠ CASCADE: Bundle.config loads this file BEFORE styles_shared.css and
   nav-hamburger.css, so these rules win on SPECIFICITY, not order. Each is
   deliberately one class more specific than the `.nav-dropdown .nav-link`
   (0,2,0) and `.nav-menu > .nav-item > .nav-link` (0,3,0) blocks it has to beat
   — those set align-items: center, white-space: nowrap, a root font-size and a
   bold .active weight, all of which would flatten the sub-label back onto one
   line. Do NOT "tidy" these selectors down to a bare `.nav-link-desc`; that
   drops to 0,1,0 and silently loses.

   ⚠ Both selectors are needed and neither covers the other: dropdown ENTRIES are
   `.nav-dropdown .nav-link`, but Home / Dashboard / the whole anonymous bar /
   every dropdown PARENT are direct children of .nav-menu and match only the
   second. */
.nav-dropdown .nav-link.nav-link-desc,
.nav-menu > .nav-item > .nav-link.nav-link-desc {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    white-space: normal;
    line-height: 1.3;
}
/* The label row. A bare text node would do for a plain entry, but five entries
   carry an <asp:Literal> unread/count badge inside the anchor — in a column flex
   container that badge becomes its OWN row and drops under the label. Wrapping
   the label keeps text + emoji + badge on one line, so every entry uses it. */
.nav-dropdown .nav-link.nav-link-desc .nav-link-main,
.nav-menu > .nav-item > .nav-link.nav-link-desc .nav-link-main {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.nav-dropdown .nav-link.nav-link-desc .nav-link-sub,
.nav-menu > .nav-item > .nav-link.nav-link-desc .nav-link-sub {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-normal);
    color: rgba(255,255,255,0.55);
    white-space: normal;
}
/* Keep the descriptor readable once the row takes the accent fill on hover or
   as the current page (.active also bolds the anchor, which the span inherits). */
.nav-dropdown .nav-link.nav-link-desc:hover .nav-link-sub,
.nav-dropdown .nav-link.nav-link-desc.active .nav-link-sub,
.nav-menu > .nav-item > .nav-link.nav-link-desc:hover .nav-link-sub,
.nav-menu > .nav-item > .nav-link.nav-link-desc.active .nav-link-sub {
    color: rgba(255,255,255,0.85);
    font-weight: var(--font-weight-normal);
}
/* Dropdown parents: styles_shared.css hangs the ▾ off .nav-link-has-dropdown::after,
   i.e. the anchor's LAST child box — which in a column flex container lands on a
   third line of its own, under the descriptor. Move it onto the label row. */
.nav-menu > .nav-item > .nav-link.nav-link-desc.nav-link-has-dropdown::after {
    content: none;
}
.nav-menu > .nav-item > .nav-link.nav-link-desc.nav-link-has-dropdown .nav-link-main::after {
    content: "▾";
    font-size: 0.75rem;
}

/* ── 16. Page layout ─────────────────────────────────────── */

/* Page-header title row: Back button + page title on one line. Mirrors PacklistPRO
   so identical page skeletons render identically across the two sites. */

/* Page title with no bottom margin — use when the title sits inside a
   page-header-title-row so the row controls the spacing. */

/* TipsPanel.ascx renders <div class="tips-trigger-wrap"> (Ⓘ trigger) BEFORE
   the .page-header on most pages — the shared float:right layout left Ⓘ
   floating on its own line above the title. Anchor the trigger absolutely
   to the upper-right of the page-wrapper instead, so it appears in the
   upper-right corner of the title row on every page.
   Offsets are deliberately smaller than the page-wrapper's padding so the
   icon nests into the corner ABOVE the page-title baseline rather than
   wrapping onto its own line below the title. */

/* Reserve right space in any .page-header that follows the absolutely-positioned
   ⓘ trigger so a long title can't visually overlap the icon. */

/* ── Chat page header alignment ───────────────────────────────
   Chat.aspx wraps its <h1> + <qm:Tips> in .chat-page-head. Two small fixes
   so the ← back arrow, the "Chat" title, and the Ⓘ tips trigger all share one
   vertical centreline (they were each ~4–5px off against the bare orphan title):

   1) position:relative makes THIS the containing block for the absolutely-
      positioned .tips-trigger-wrap, then top/bottom:0 + flex-centre drop the
      44px tap-target onto the title row's midline instead of pinning its top
      to the title's top (which left the glyph ~5px low). When the tip card is
      open the head grows, but the trigger button is display:none then anyway;
      pointer-events:none keeps the stretched (empty) wrap from ever covering
      the open card's links/close button.
   2) zero the title's 0.5rem bottom margin INSIDE the flex title-row so its
      margin box stops lifting the text ~4px above the margin-less ← arrow. */
.chat-page-head { position: relative; }
.chat-page-head .tips-trigger-wrap {
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}
.chat-page-head .tips-trigger-wrap .tip-icon-button { pointer-events: auto; }
.chat-page-head .page-header-title-row > .page-title { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT VIEW SWITCH — 💬 Full · ⚡ Live · 📶 Low data (.chat-view-switch)
   Emitted by ChatViewSwitch.ascx.vb on Chat.aspx and LiveChat.aspx, and
   hand-rolled inline (with its own tiny copy of these rules) in
   ChatLowData.aspx, which loads no external stylesheet at all.

   🔑 WHY THIS IS NOT .page-tabs. The Interests strip is a PAGE tab bar: it
   owns a full-width row under the H1 and its active tab is styled as the sheet
   the content below belongs to. This one has to sit in LiveChat's .lc-header —
   a tight app bar already holding a name, a presence line and an Options
   button — so it is a compact segmented control instead: a single bordered
   pill, no full-bleed underline, no row of its own. Same job, different
   geometry, so a separate component rather than an override war with
   .page-tabs' margins and border-bottom.

   Colour is entirely token-based, so it follows dark mode with no second
   ruleset. The active segment is filled with the accent (it is where you ARE);
   the others are muted text on the pill's own background.
   ═══════════════════════════════════════════════════════════════════════════ */
.chat-view-switch {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-input);
    overflow: hidden;
    /* Never let the switch stretch a flex app bar taller than its other
       controls; the segments set their own comfortable padding. */
    align-self: center;
}

.chat-view-switch .cvs-seg {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    color: var(--color-text-muted, #6c757d);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast, 0.15s ease),
                background-color var(--transition-fast, 0.15s ease);
}

/* Hairline between segments, never before the first one — this is what makes
   three chips read as ONE control with three positions rather than as three
   loose buttons that happen to be adjacent. */
.chat-view-switch .cvs-seg + .cvs-seg {
    border-left: 1px solid var(--color-border);
}

.chat-view-switch .cvs-seg:hover,
.chat-view-switch .cvs-seg:focus-visible {
    color: var(--color-primary, #00B0F0);
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
    text-decoration: none;
}

.chat-view-switch .cvs-seg:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-primary, #00B0F0);
}

.chat-view-switch .cvs-seg.is-active {
    color: #fff;
    background-color: var(--color-accent);
    font-weight: var(--font-weight-bold, 600);
    /* You are already here — hovering must not suggest it will take you
       somewhere. Same call as .page-tab.is-active. */
    cursor: default;
}

.chat-view-switch .cvs-seg.is-active:hover,
.chat-view-switch .cvs-seg.is-active:focus-visible {
    color: #fff;
    background-color: var(--color-accent);
}

/* Narrow screens: the glyphs alone. The WORD is still in the DOM and still the
   accessible name — this hides it visually only, so nothing is lost to a
   screen reader at any width. (Do not swap this for aria-hidden or for
   dropping the span: "⚡" announced on its own is not a chat view.) */
@media (max-width: 480px) {
    .chat-view-switch .cvs-t {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .chat-view-switch .cvs-seg { padding: 0.35rem 0.6rem; }
}

/* On Chat.aspx the switch shares the title row with the <h1>. */
.chat-page-head .chat-view-switch { margin-left: auto; }
.chat-page-head .chat-view-head-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.chat-page-head .chat-view-head-row > .page-title { margin-bottom: 0; }

/* ── 17. Tables ──────────────────────────────────────────── */


/* ── Tip card display toggle (duplicated from shared CSS because the
   bundler's minifier drops it from styles_shared.css) ────── */

/* ── 18. Banners ─────────────────────────────────────────── */

/* View-only banner — shown when site.js adds .view-only to <body> after
   the user picks "Stay Here (view-only)" on the session-expired modal. */
.banner-viewonly {
    display: none;
    background-color: var(--color-warning-bg);
    border-bottom: 1px solid var(--color-warning-border);
    color: var(--color-warning);
    padding: 0.55rem 1rem;
    font-size: var(--font-size-sm);
    text-align: center;
    font-weight: var(--font-weight-medium);
}
body.view-only .banner-viewonly { display: block; }

/* Anonymous / promo banner — server toggles Visible. */
.banner-anon {
    background-color: var(--color-info-bg);
    border-bottom: 1px solid var(--color-info-border);
    color: var(--color-info);
    padding: 0.55rem 1rem;
    font-size: var(--font-size-sm);
    text-align: center;
}
.banner-anon a { color: inherit; font-weight: var(--font-weight-medium); text-decoration: underline; }

/* Chat-bar banner (active contacts / unread messages summary in Site.Master). */
.banner-chatbar {
    background-color: #808080;
    /* Container text (separators ·, "ACTIVE:" label, spaces) renders black.
       Anchor (username) overrides below take it back to white. */
    color: #000;
    /* Near-flush left so the bar text starts at the edge and gets maximum width.
       Kept identical across all three stacked bars (chatbar/events/invites) — they sit
       directly on top of each other, so differing left insets read as a misalignment. */
    padding: 0.4rem 0.5rem 0.4rem 0.35rem;
    font-size: var(--font-size-sm);
    display: block;
}
.banner-chatbar:empty { display: none; }

/* ── Second notification bar: upcoming events you're interested in / going to.
   Server-rendered by Site.Master.ConfigureEventReminderBar, directly below the
   grey chat bar. A blue accent (distinct from the chat bar's grey) so the two
   bars read as separate. The whole body is one link; the × dismisses it for the
   day (localStorage, handled in the Site.Master inline script). ── */
.banner-events {
    display: flex;
    flex-direction: column;
    background-color: #1f6feb;
    color: #fff;
    /* See .banner-chatbar — all three bars share this inset. */
    padding: 0.4rem 0.5rem 0.4rem 0.35rem;
    font-size: var(--font-size-sm);
}
.banner-events-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.banner-events-body {
    flex: 1 1 auto;
    min-width: 0;
}
/* Reminder-bar links stay white and un-underlined in EVERY state — including
   :visited, which a shared a:visited rule would otherwise tint, and :hover,
   which previously added an underline. Applies to the whole-bar body link (also
   reused by the invites bar). */
.banner-events-body,
.banner-events-body:link,
.banner-events-body:visited,
.banner-events-body:hover,
.banner-events-body:focus,
.banner-events-body:active { color: #fff; text-decoration: none; }
.banner-events-body strong { font-weight: 700; }
.banner-events-icon { margin-right: 0.35rem; }
/* Expander caret — only shown when the body is a client-side toggle (2+ events). */
.banner-events-caret { display: none; }
.banner-events-body[data-expandable] { cursor: pointer; }
.banner-events-body[data-expandable] .banner-events-caret { display: inline-block; margin-left: 0.35rem; }
.banner-events-body[data-expandable] .banner-events-caret::before { content: "▾"; }
.banner-events-body[data-expandable][aria-expanded="true"] .banner-events-caret::before { content: "▴"; }
/* Expandable per-event list. */
/* Two-column grid: when-labels align in the left column, event names in the right.
   li/anchor are display:contents so their two spans land directly in the grid tracks. */
.banner-events-list { list-style: none; margin: 0.35rem 0 0.15rem; padding: 0 0 0 1.9rem;
  display: grid; grid-template-columns: max-content 1fr; column-gap: 0.55rem; row-gap: 0.2rem; align-items: baseline; }
.banner-events-list li { display: contents; }
.banner-events-item { display: contents; }
/* Per-event list links: always white, never underlined (no hover underline). */
.banner-events-item,
.banner-events-item:link,
.banner-events-item:visited,
.banner-events-item:hover,
.banner-events-item:focus,
.banner-events-item:active { color: #fff; text-decoration: none; }
.banner-events-when { font-weight: 700; opacity: 0.95; white-space: nowrap; color: #fff; }
.banner-events-name { color: #fff; }
/* Restore chip — shown (bottom-left, clear of the chat FAB) only after the bar is dismissed.
   Hidden via the inline style="display:none" in markup; the script clears that inline value to
   reveal it, so the base display here MUST be flex (not none) or clearing the inline wouldn't show it. */
.banner-events-restore {
    display: flex;
    position: fixed;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 1000;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 50%;
    background-color: #1f6feb;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
}
.banner-events-x {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.85;
}
.banner-events-x:hover { opacity: 1; }

/* ── Pending-invites bar (third notification bar) ──────────────────────────
   Reuses the events-bar inner classes (.banner-events-summary / -body / -icon / -x);
   only the outer bar color and its own restore chip differ so the two bars read as
   distinct. Purple keeps it clearly separate from the blue events bar. ── */
.banner-invites {
    display: flex;
    flex-direction: column;
    background-color: #8957e5;
    color: #fff;
    /* See .banner-chatbar — all three bars share this inset. */
    padding: 0.4rem 0.5rem 0.4rem 0.35rem;
    font-size: var(--font-size-sm);
}
/* Restore chip — stacked ABOVE the events-bar chip (bottom: 0.75rem) so both stay
   recoverable when each bar is dismissed. Base display flex (see .banner-events-restore). */
.banner-invites-restore {
    display: flex;
    position: fixed;
    left: 0.75rem;
    bottom: 3.45rem;
    z-index: 1000;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 50%;
    background-color: #8957e5;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
}


/* Four name colors by section / state:
   - lblMessages (chatbar-messages): users with unread messages waiting → black (default)
   - lblActiveContacts (chatbar-active): currently-active contacts → white
   - chat-active-user override: an unread-message sender who is also currently active
     (i.e. appears in the active-contacts result set) → white. So you can tell at a
     glance which unread senders are online right now vs. left a message earlier and
     are away.
   - chat-urgent override: messages flagged urgent → magenta. We pin its specificity
     to (0,3,1) — matching chat-active-user — so the source-order tiebreak makes urgent
     win when both flags apply to the same sender. Past bug (memory: feedback_css_specificity_descendant)
     was a single-class chat-urgent silently losing to a more-specific descendant rule.
   Non-anchor text in the bar (· separators, "ACTIVE:" label, spaces) inherits
   the container's color: #000 set on .banner-chatbar. */
.banner-chatbar .chatbar-messages a                   { color: #000; }
.banner-chatbar .chatbar-active   a                   { color: #fff; }
.banner-chatbar .chatbar-messages a.chat-active-user  { color: #fff; }
.banner-chatbar .chatbar-messages a.chat-urgent,
.banner-chatbar .chatbar-active   a.chat-urgent       { color: #ff00ff; }
/* "On LiveChat now" badge: a contact actively viewing the LiveChat page (set via the
   lc:active:<id> app-pool presence key LiveChatApi refreshes every 5s). Distinct from
   the "/Nmin" last-active suffix — green = here in real time right now. The !important
   color wins over the per-section anchor color rules above (the badge is a span inside
   the contact's <a>), so the text stays white on green even for urgent/active senders. */
.banner-chatbar .chatbar-live {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: #18a957;
    color: #fff !important;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    vertical-align: middle;
}
/* Separator between users — drawn as a CSS circle (background + border-radius)
   instead of relying on the Unicode bullet glyph, whose vertical position is
   font-dependent and rendered slightly above the text baseline on Windows
   Chrome. The inline-block dot inherits vertical-align:middle to lock onto the
   x-height of the surrounding text. font-size:0 hides the literal "•" that the
   server still emits inside the span, so only the painted circle is visible. */
.banner-chatbar .chatbar-sep {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #000;
    opacity: 0.55;
    margin: 0 6px;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
}

/* ── Active-contact CHIPS (ChatBarStatus.ashx, option #1) ─────────────────────
   Each active/unread contact renders as a pill: a status dot + name + optional
   place pin + "since" time + a red unread-count bubble. Replaces the old
   bullet-separated text links. The chip is an <a> inside lblMessages
   (.chatbar-messages), so we must beat the `.chatbar-messages a { color:#000 }`
   rule below to keep names white. */
.banner-chatbar .chatbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    margin: 2px 5px 2px 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 500;
    text-decoration: none;
    vertical-align: middle;
    line-height: 1.4;
}
.banner-chatbar .chatbar-chip:hover { background: rgba(255, 255, 255, 0.26); text-decoration: none; }
/* Win the name color back from the per-section anchor rules (specificity 0,3,1). */
.banner-chatbar .chatbar-messages a.chatbar-chip,
.banner-chatbar .chatbar-active   a.chatbar-chip { color: #fff; }
.banner-chatbar .chatbar-chip .cb-name { color: #fff; }
.banner-chatbar .chatbar-chip .cb-since { font-size: 0.72rem; opacity: 0.8; }
/* Urgent chip: paint the WHOLE pill magenta but keep the normal white text and the
   black unread bubble unchanged (override the per-section a.chat-urgent magenta TEXT
   rules above so only the background turns magenta). */
.banner-chatbar .chatbar-messages a.chatbar-chip.chat-urgent,
.banner-chatbar .chatbar-active   a.chatbar-chip.chat-urgent { color: #fff; background: #ff00ff; }
.banner-chatbar .chatbar-chip.chat-urgent:hover { background: #e600e6; }
.banner-chatbar .chatbar-chip.chat-urgent .cb-name { color: #fff; }
/* Status dot: green = on LiveChat now, magenta = urgent, white = active recently. */
.banner-chatbar .cb-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}
.banner-chatbar .cb-dot.cb-live   { background: #18a957; }
.banner-chatbar .cb-dot.cb-urgent { background: #ff00ff; box-shadow: 0 0 0 2px rgba(255, 0, 255, 0.25); }
.banner-chatbar .cb-dot.cb-active { background: #fff; }
/* Unread-count bubble (only emitted when count > 0). Black bg, white text. */
.banner-chatbar .cb-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}
/* Place pin — an "at a place" indicator on an active-contact chip. Double-clicking
   or long-pressing it opens the "My Contacts' Check-ins" panel (.cci-* below), so it
   carries a pointer cursor + a focus ring (it's role=button/tabindex=0). */
.banner-chatbar .cb-pin {
    font-size: 0.82em;
    line-height: 1;
    cursor: pointer;
}
.banner-chatbar .cb-pin:focus-visible { outline: 2px solid var(--color-accent, #0090c8); outline-offset: 2px; border-radius: 3px; }

/* "My Contacts' Check-ins" panel — a modal list opened from a notification-bar place pin.
   Three aligned columns: Name | time range | "status, place · city, state"
   (e.g. Jamie C  3:30-6 PM  fireworks, Park · Troy, MI). */
.cci-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.5);
    display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem; }
.cci-overlay[hidden] { display: none; }
.cci-panel { width: 100%; max-width: 560px; max-height: 80vh; overflow: auto; margin: 0; }
.cci-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: -0.25rem 0 .6rem; }
.cci-title { font-weight: var(--font-weight-bold); font-size: 1.05rem; }
.cci-x { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 .25rem; }
.cci-grid { display: grid; grid-template-columns: auto auto 1fr; gap: .2rem .8rem;
    align-items: baseline; font-size: .8rem; line-height: 1.35; }
.cci-name { font-weight: 600; white-space: nowrap; }
.cci-time { white-space: nowrap; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cci-sp   { min-width: 0; overflow-wrap: anywhere; }
.cci-status { color: var(--color-accent, #0090c8); font-weight: 600; }
.cci-place  { color: var(--color-text-muted); }
/* City/State after the place name, behind a middle-dot separator. Dimmer than the place so the
   place stays the thing you read first (matches the chat status/check-in card's treatment). */
.cci-loc    { color: var(--color-text-muted); opacity: .8; white-space: nowrap; }
.cci-empty { padding: 1rem 0; color: var(--color-text-muted); text-align: center; font-size: .85rem; }

/* ChatUC "my status" label — color signals state.
   Default = white inside the dark chat bar; -urgent = yellow (under 30 min
   left on the timed status); -empty = yellow (no status set, prompting the
   user to pick one). Replaces inline Label.ForeColor = Color.X assignments. */
.chat-my-status         { color: #fff; }
.chat-my-status-urgent  { color: #ffff00; }
.chat-my-status-empty   { color: #ffff00; }

/* ── 19. Form layout helpers ─────────────────────────────── */


/* Char counter for textareas with maxlength */

/* ── 20. Search input with clear (×) ─────────────────────── */


/* Search container (input + button side-by-side) */
.search-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.search-row .input-clearable { flex: 1 1 200px; }

/* ── VerifyDevice: narrow card + oversized one-time-code entry field.
   Moved off inline style= attributes 2026-07-12 so the sizing lives with
   the design system. --- */
.verify-card { max-width: 480px; }
.verify-code { font-size: 2em; height: 2em; }

/* ── ImpersonateUser (admin): result rows + single-line "find a user" box.
   Moved off a page-level <style> block 2026-07-12 so it lives with the rest
   of the design system. Scoped to .imp-picker so the shared .search-row is
   left untouched. --- */
.imp-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            padding: .6rem .25rem; border-bottom: 1px solid var(--border-color, rgba(127,127,127,.25)); }
.imp-card:last-child { border-bottom: 0; }
.imp-card-main { min-width: 0; }
.imp-card-action { flex: 0 0 auto; }
/* Keep the "Find a user" box a normal single-line height and beside the button. */
.imp-picker .search-row { align-items: center; }
.imp-picker .search-row #txtSearch { flex: 1 1 240px; min-width: 200px;
            height: var(--input-height, 2.5rem); min-height: 0; }

/* ── 21. Footer ──────────────────────────────────────────── */
/* Footer markup mirrors PacklistPRO via Shared/styles_shared.css
   (.site-footer-links/-copy/-sep, .linklike-btn); the logged-in
   .site-footer-user label was retired 2026-06-07. */

/* ── 22. Site-specific utility extras (text-warning, d-inline-block) ── */
.text-warning   { color: var(--color-warning); }
.d-inline-block { display: inline-block; }


/* FilesToSend image preview — replaces a per-row inline style built in code-behind.
   Pages that render queued chat-file images use class="files-to-send-preview". */
.files-to-send-preview {
    width: 98%;
    border: 1px solid #000;
    box-shadow: 0 15px 15px #808080;
    margin-bottom: 0.5rem;
}

/* ── FilesToSend2 — queued chat-attachment cards (PacklistPRO-look redesign) ──
   Compact, scannable cards replace the old full-width stacked image previews.
   Built entirely from shared design tokens so they stay theme-aware in dark mode. */
.fts-upload-note { margin: 0 0 0.9rem; }

.fts-queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.25rem 0 0.85rem;
}
.fts-summary-text {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.fts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 700px) {
    .fts-grid { grid-template-columns: 1fr 1fr; }
}

.fts-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 0.55rem 0.7rem;
}
.fts-thumb {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    text-decoration: none;
}
.fts-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fts-icon { font-size: 1.6rem; line-height: 1; }

.fts-info { flex: 1 1 auto; min-width: 0; }
.fts-name {
    display: block;
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.fts-meta { display: block; margin-top: 0.1rem; }

.fts-remove { flex: 0 0 auto; }

/* Admin-only contact info panel on PublicProfile.aspx. Sits below the page title
   so admin data stays visually distinct from the user-visible profile. */
.admin-only-info {
    font-size: var(--font-size-sm);
    margin-bottom: 0.5rem;
}
.admin-only-info .label {
    font-weight: var(--font-weight-bold);
    margin-right: 0.25rem;
}

/* ============================================================
   LEGACY COMPATIBILITY
   These classes are used by older pages that haven't been
   migrated to the modern system yet. Keep them so pages don't
   visually break, but prefer the modern classes above for new
   work. Remove a legacy entry once no page references it.
   ============================================================ */

/* Legacy typography variants — old pages use class="text" / "boldtext" / "smallheading" / "mediumheading" */
.boldtext     { font-family: var(--font-family); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.smallheading { font-family: var(--font-family); font-size: 1rem;   font-weight: var(--font-weight-bold); }
.mediumheading { font-family: var(--font-family); font-size: 1.125rem; font-weight: var(--font-weight-bold); }
.footer { font-size: var(--font-size-sm); font-family: var(--font-family); }
.box-shadow { box-shadow: 7px 7px 10px 0px rgba(50,50,50,0.5); }

.whitetext  { color: #fff; }
.blacktext  { color: #000; }
.graytext   { color: #808080; }
.blue1text  { color: #00B0F0; }

/* Legacy color classes used for old buttons and gradients */
.lime         { background-color: #00ff00; color: #000; border: 1px solid #00ff00; }
.lime:hover   { background-color: #000; color: #00ff00; }
.green        { background-color: #00aa00; color: #fff; border: 1px solid #00aa00; }
.green:hover  { background-color: #fff; color: #00aa00; }
.red          { background-color: #ff0000; color: #fff; border: 1px solid #ff0000; }
.red:hover    { background-color: #fff; color: #ff0000; }
.cyan         { background-color: #00ffff; color: #000; border: 1px solid #00ffff; }
.cyan:hover   { background-color: #000; color: #00ffff; }
.yellow       { background-color: #ffff00; color: #000; border: 1px solid #ffff00; }
.yellow:hover { background-color: #000; color: #ffff00; }
.orange       { background-color: #ff8c00; color: #fff; border: 1px solid #ff8c00; }
.orange:hover { background-color: #fff; color: #ff8c00; }
.purple       { background-color: #5d3fd3; color: #fff; border: 1px solid #5d3fd3; }
.purple:hover { background-color: #fff; color: #5d3fd3; }
.pink         { background-color: #ffc0cb; color: #000; border: 1px solid #ffc0cb; }
.pink:hover   { background-color: #000; color: #ffc0cb; }
.gray         { background-color: #808080; color: #fff; border: 1px solid #808080; }
.gray:hover   { background-color: #fff; color: #808080; }
.black        { background-color: #000; color: #fff; border: 1px solid #000; }
.black:hover  { background-color: #fff; color: #000; }
.white        { background-color: #fff; color: #000; border: 1px solid #fff; }
.white:hover  { background-color: #000; color: #fff; }
.blue         { background-color: #0000ff; color: #fff; border: 1px solid #0000ff; }
.blue:hover   { background-color: #fff; color: #0000ff; }
.magenta      { background-color: #ff00ff; color: #fff; border: 1px solid #ff00ff; }
.magenta:hover{ background-color: #fff; color: #ff00ff; }
/* `.button.magenta` lives in the legacy-color block at the bottom of this file
   (alongside `.button.lime`, `.button.cyan`, etc) — placement there is what
   gives it the cascade-order win over the single-class `.button` in
   styles_shared.css, so the duplicate copy that used to sit here was
   dead weight. Don't re-add it; add new `.button.<color>` variants down there. */
.main         { background-color: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); }
.main:hover   { background-color: #fff; color: var(--color-accent); }
.blue1background { background-color: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); }

/* Outline-button variants — white background, colored text + matching border.
   Used by Help_Chat.ascx to legend the chat-action buttons (EDIT / SAVE / PIN /
   BUMP / REPLY / HIDE / READ). Replaces inline BorderColor/ForeColor/
   BorderStyle/BorderWidth on those asp:Button controls. */
.button-outline-green    { background:#fff; color:#00aa00;     border:1px solid #00aa00;     }
.button-outline-green:hover    { background:#00aa00; color:#fff; }
.button-outline-yellow   { background:#fff; color:#b58900;     border:1px solid #ffff00;     }
.button-outline-yellow:hover   { background:#ffff00; color:#000; }
.button-outline-cyan     { background:#fff; color:#00ffff;     border:1px solid #00ffff;     }
.button-outline-cyan:hover     { background:#00ffff; color:#000; }
.button-outline-magenta  { background:#fff; color:#ff00ff;     border:1px solid #ff00ff;     }
.button-outline-magenta:hover  { background:#ff00ff; color:#fff; }
.button-outline-orange   { background:#fff; color:#ff8c00;     border:1px solid #ff8c00;     }
.button-outline-orange:hover   { background:#ff8c00; color:#fff; }
.button-outline-purple   { background:#fff; color:#5d3fd3;     border:1px solid #5d3fd3;     }
.button-outline-purple:hover   { background:#5d3fd3; color:#fff; }

/* On-black variants (less commonly used) */
.limeonblack, .greenonblack, .redonblack, .cyanonblack, .yellowonblack,
.orangeonblack, .purpleonblack, .pinkonblack, .grayonblack, .blueonblack,
.magentaonblack, .whiteonblack, .darkorangeonblack, .darkorangeonwhite { background-color: #000; color: #fff; }
.limeonblack   { color: #00ff00; }
.greenonblack  { color: #00aa00; }
.redonblack    { color: #ff0000; }
.cyanonblack   { color: #00ffff; }
.yellowonblack { color: #ffff00; }
.orangeonblack,
.darkorangeonblack { color: #ff8c00; }
.purpleonblack { color: #5d3fd3; }
.pinkonblack   { color: #ffc0cb; }
.grayonblack   { color: #808080; }
.blueonblack   { color: #0000ff; }
.magentaonblack{ color: #ff00ff; }
.whiteonblack  { color: #fff; }
.darkorangeonwhite { background-color:#fff; color:#ff8c00; border:1px solid #fff; }

/* Legacy link variants (kept so existing markup still styles) */
.underline { text-decoration: underline; }
.linkblue,    .linkblue:visited    { font-family: var(--font-family); color: #0000ff; font-weight: bold; text-decoration: none; }
.linkblue:hover  { color: red; }
.linkblue1,   .linkblue1:visited   { font-family: var(--font-family); color: var(--color-accent); font-weight: bold; text-decoration: none; }
.linkblue1:hover { color: red; }
.linkgreen,   .linkgreen:visited   { font-family: var(--font-family); color: #00aa00; font-weight: bold; text-decoration: none; }
.linkgreen:hover { color: red; }
.linkwhite,   .linkwhite:visited   { font-family: var(--font-family); color: #fff;    font-weight: bold; text-decoration: none; }
.linkwhite:hover { color: red; }
.linkblack,   .linkblack:visited   { font-family: var(--font-family); color: #000;    font-weight: bold; text-decoration: none; }
.linkblack:hover { color: red; }
.linkgray,    .linkgray:visited    { font-family: var(--font-family); color: #808080; font-weight: bold; text-decoration: none; }
.linkgray:hover  { color: red; }
.linkred,     .linkred:visited     { font-family: var(--font-family); color: red;     font-weight: bold; text-decoration: none; }
.linkred:hover   { color: #000; }

/* ── Dashboard section headers ───────────────────────────
   Colored gradient bar that groups a dashboard panel. Each
   "kind" sets its own accent color via --kind-color. The
   inner dropdown is styled to read against the gradient.
   --------------------------------------------------------- */
.dash-section {
    --kind-color: #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: linear-gradient(90deg, var(--kind-color), #000 100%);
    color: #fff;
    padding: 0.4rem 0.75rem;
    border-radius: var(--border-radius-sm);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow-sm);
}
.dash-section h2,
.dash-section .dash-section-title {
    color: #fff;
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dash-section a, .dash-section a:visited {
    color: #fff; text-decoration: none; font-weight: var(--font-weight-bold);
}
.dash-section a:hover { text-decoration: underline; }
.dash-section .dash-section-control select,
.dash-section .dash-section-control .textbox {
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius-sm);
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
}
.dash-section .dash-section-control select option { color: initial; }

.dash-section-popular  { --kind-color: #00AAAA; }
.dash-section-tasks    { --kind-color: #AA0000; }
.dash-section-events   { --kind-color: #0000FF; }
.dash-section-chat     { --kind-color: #5D3FD3; }
.dash-section-contacts { --kind-color: #ff8c00; }
.dash-section-groups   { --kind-color: #008000; }
.dash-section-here     { --kind-color: #8B8000; }

/* dash-section (colored banner) + dash-panel (content) below it now read as
   one cohesive card. The banner is the card header (loses bottom radius +
   margin so it sits flush against the panel), and the panel is the card
   body (white bg, border continuous with the header, rounded bottom corners,
   shadow). Nested dash-panels inside .main-card (panelPopularPlaces inside
   panelImHere) get reset back to bare so we don't double-card. */
.dash-section {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}
.dash-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.main-card .dash-panel {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 0;
}
/* Popular-places body (panelImHere) — keep main-card's nice padding for the
   form inside, but flatten the top corners + drop the top border so it
   visually connects to the .dash-section-popular banner above. Used in
   addition to .main-card on that panel. */
.main-card.dash-card-body {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
    margin-bottom: 1rem;
}
.dash-panel:empty { padding: 0.4rem; color: var(--color-text-muted); }

/* Kill the "double-spaced records" look. The <hr class='hr'> separators
   between task / contact / chat / group rows inherit the global
   var(--section-gap, 1.5rem) margin from hr.hr — appropriate between page
   sections, way too much between sibling records in a list. Override
   inside the dashboard panels only. */
.dash-panel hr.hr { margin: 0.4rem 0; }
.dash-panel hr.hr:last-child { display: none; }
.dash-task-card,
.dash-chat-from-me { padding: 0.35rem 0.25rem; }

.dash-panel-row {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    padding: 0.4rem 0.5rem;
}
.dash-panel-row:last-child { border-bottom: 0; }

/* ── Dashboard2 — collapsible card dashboard (PacklistPRO-style) ────────────
   Each section is a <details class="main-card dash2-card">; the
   <summary class="card-title"> is the click target (the chevron + native
   marker hiding come from the shared `summary.card-title` rules in
   styles_shared.css). Row rendering reuses the .dash-panel / .dash-* /
   .label-dyn classes above, so this block only adds the collapsible-header
   chrome, the count badge, and the per-card toolbar. */
.dash2-greeting { display: block; margin: -0.25rem 0 1rem; color: var(--color-text-muted); }
.dash2-greeting strong { color: var(--color-text); font-weight: var(--font-weight-bold); }

/* "What's happening near you" social-proof block (Home, authenticated). A 3-column
   grid keeps the icon, number, and text columns aligned vertically down the rows. */
.home-localstats { color: var(--color-text-muted); }
.home-localstats-head { margin-bottom: 0.5rem; }
.home-localstats-head strong { color: var(--color-text); font-weight: var(--font-weight-bold); }
.home-localstats-grid {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.25rem 0.6rem;
    align-items: baseline;
}
.home-localstats-icon { text-align: center; }
.home-localstats-num {
    text-align: right;
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}
.home-localstats-txt { min-width: 0; }
.home-localstats-row { display: contents; color: inherit; text-decoration: none; }
.home-localstats-row:hover .home-localstats-txt,
.home-localstats-row:focus-visible .home-localstats-txt { text-decoration: underline; color: var(--color-text); }

.dash2-quicknav { margin: 0 0 1.25rem; }

.dash2-card > summary.card-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
}
.dash2-card > summary.card-title:hover .dash2-card-name { color: var(--color-accent); }
/* Divider only when the card is open, so a collapsed header reads as a clean bar. */
.dash2-card[open] > summary.card-title {
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.dash2-card > summary.card-title:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(0, 176, 240, 0.35));
    border-radius: var(--border-radius-sm);
}
.dash2-card-icon { flex: 0 0 auto; font-size: 1.15em; line-height: 1; }
.dash2-card-name { min-width: 0; overflow-wrap: anywhere; }

/* Non-expanding dash card (the Check-in card): the whole card is a button that opens
   the shared "Status & Check-in" popup. No disclosure chevron and no bottom divider —
   its header reads exactly like a collapsed .dash2-card header, but it never expands. */
.dash2-card-flat { cursor: pointer; }
.dash2-card-flat .card-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
}
.dash2-card-flat:hover .dash2-card-name { color: var(--color-accent); }
/* Check-in card laid out as a row: name + summary on the left, action button on the right. */
.dash2-here-card { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.dash2-here-main { flex: 1 1 12rem; min-width: 0; }
.dash2-here-btn { flex: 0 1 auto; white-space: nowrap; align-self: center; }
/* When the button can't fit beside the text it wraps to its own line and spans full width. */
@media (max-width: 480px) {
    .dash2-here-btn { flex: 1 0 100%; }
}
.dash2-card-flat:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(0, 176, 240, 0.35));
    border-radius: var(--border-radius-sm);
}

.dash2-count {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.5rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}
.dash2-count.is-zero { background: var(--color-border); color: var(--color-text-muted); }

/* Right-justified check-in status on the "Where are you now?" card header:
   ✓ when a place is currently set, ❓ otherwise. */
.dash2-status { margin-left: auto; flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
/* Current Status / Check-in echoed under the "Where are you?" card name — a two-column
   table so the labels and data line up vertically. */
.dash2-here-table { border-collapse: collapse; margin-top: 0.35rem; font-size: var(--font-size-sm); opacity: 0.85; }
.dash2-here-table td { padding: 0.1rem 0; vertical-align: top; }
.dash2-here-label { font-weight: var(--font-weight-bold); opacity: 0.7; white-space: nowrap; padding-right: 0.5rem !important; }

.dash2-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
}
.dash2-window-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.dash2-window-label .dropdown { width: auto; min-width: 7.5rem; }
.dash2-viewall { margin-left: auto; white-space: nowrap; font-weight: var(--font-weight-medium); }

/* "Where is everyone?" search-location link (📍 City, ST → opens #searchLocModal). */
.dash2-searchloc {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}
.dash2-searchloc a { font-weight: var(--font-weight-medium); }

/* "Include contacts' events / groups" toggle in a card toolbar. */
.dash2-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}
.dash2-toggle input { margin: 0; cursor: pointer; }
.dash2-toggle span { cursor: pointer; }

@media (max-width: 575px) {
    .dash2-viewall { margin-left: 0; width: 100%; }
    .dash2-window-label { width: 100%; }
    .dash2-window-label .dropdown { flex: 1 1 auto; min-width: 0; }
}

/* ── Home / Dashboard responsive card grids ──────────────────────────────────
   Turn the tall single-column stacks into a responsive 2-column grid for the
   SECONDARY cards (recommendations on Home; the "my stuff" cards on Dashboard),
   so each page is roughly half as tall and the live / actionable cards left up
   top read as more important. Collapses to one column below ~30rem per column. */
.home-grid,
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}
/* Cards carry their own bottom margin; drop it inside a grid so the grid gap is
   the only spacing (otherwise rows get doubled gutters). Covers both the cards
   rendered directly as grid children (Home) and those wrapped in an UpdatePanel
   <div> (Dashboard events/contacts/groups). */
.home-grid > .main-card,
.dash-grid .dash2-card,
.dash-grid > .main-card { margin-bottom: 0; }

/* "Filters" disclosure inside the "Where is everyone?" toolbar — tucks the
   radius / sort / search-location controls away so only the time window shows by
   default, taming the densest toolbar on the dashboard. */
.dash2-filters { margin: 0; }
.dash2-filters > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    list-style: none;
}
.dash2-filters > summary::-webkit-details-marker { display: none; }
.dash2-filters > summary::before { content: "\25B8"; }        /* ▸ collapsed */
.dash2-filters[open] > summary::before { content: "\25BE"; }  /* ▾ open */
.dash2-filters[open] > summary { margin-bottom: 0.5rem; }
.dash2-filter-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* Dashboard greeting + one-line "what's happening now" subtitle grouped into a
   single paragraph (was two stacked blocks) to reclaim vertical space up top. */
.dash2-subtitle { display: block; font-weight: 400; color: var(--color-text-muted); }

/* The .home-head-count pill and its chevron-margin fix MOVED to Shared/styles_shared.css
   on 2026-08-06, when the count badges went cross-site: qMEET was the only site that had
   them, and all five needed them. Do NOT re-add a local copy — the shared sheet loads
   after this one, so a stale duplicate here would be invisible until the day it drifted. */

/* Dashboard "Expand All / Collapse All" tools row — quiet, right-aligned link buttons. */
.dash2-cardtools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: -0.25rem 0 0.85rem;
    font-size: var(--font-size-sm);
}
.dash2-cardtools-sep { color: var(--color-text-muted); }

/* Home "you're all caught up" line — shown when no actionable cards rendered. */
.home-allcaught { text-align: center; padding: 0.5rem 0 0.25rem; }

/* ── Group / Event search result cards ───────────────────
   Variants reflect record state. Used by GroupSearch and
   (next pass) EventSearch.
   --------------------------------------------------------- */
.result-card {
    --result-bg: #fff;
    --result-fg: var(--color-text);
    --result-accent: var(--color-border);
    background: var(--result-bg);
    color: var(--result-fg);
    border: 1px solid var(--result-accent);
    border-left: 6px solid var(--result-accent);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.6rem;
    /* Cards have a whole-card onclick handler that routes to details. Was set
       inline via Panel.Style.Add("cursor","pointer") in EventSearch.aspx.vb;
       moved here so the result-card class always carries it. */
    cursor: pointer;
}
/* Plain text links in the card get the muted card foreground. Button-styled
   anchors (View Details, Group Chat) are excluded so they keep .button's own
   colors — otherwise this rule (esp. its :visited form) overrides them and
   turns View Details black and Group Chat black once visited. */
.result-card a:not(.button), .result-card a:not(.button):visited { color: var(--result-fg); text-decoration: none; }
.result-card a:not(.button):hover { text-decoration: underline; }
.result-card-title  { font-size: 1.1rem; font-weight: var(--font-weight-bold); display: block; line-height: 1.2; }
.result-card-status { font-size: 0.85rem; font-weight: var(--font-weight-medium); opacity: 0.85; margin-left: 0.4rem; }
.result-card-meta   { font-size: 0.85rem; opacity: 0.85; margin-top: 0.15rem; display: block; }
.result-card-desc   { font-size: 0.9rem;  margin-top: 0.25rem;  display: block; }
/* FREE badge — pill under the title for events whose CostAndGoal says they
   cost nothing (EventSearch). Success tokens keep it theme-aware in dark mode. */
.result-card-free {
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1.5;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    background: var(--color-success-bg);
    color: var(--color-success);
}
.result-card-status + .result-card-free { margin-left: 0.4rem; }
/* "X days only" pill — outline style matching the ↻ Recurring badge (transparent
   fill, bright-green border). EventSearch, non-recurring events spanning 1–4 days. */
.result-card-days {
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1.5;
    font-weight: var(--font-weight-medium);
    background: transparent;
    color: var(--color-text, #1a1f2e);
    border: 1px solid #00FF00;
}
.result-card-status + .result-card-days,
.result-card-free + .result-card-days { margin-left: 0.4rem; }
.result-card-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.result-card-actions .button { padding: 0.25rem 0.6rem; font-size: 0.85rem; }

/* ── Generic per-row "⋯ More" overflow menu (.row-more) ─────────────────────
   Collapses the secondary / occasional actions of a REPEATING action row
   (contacts, surveys, curated interests, …) behind a single ⋯ trigger, so each
   row leads with just its primary buttons instead of a long messy button strip.
   Built on a native <details> so open/close + keyboard work with zero JS; site.js
   (initRowMoreMenus) only keeps one menu open at a time + closes on outside-click
   / Escape + flips the menu when it would spill off the left edge. The menu is
   absolutely positioned so opening it never reflows the row or the cards below.
   Drop-in — put the primary buttons in the row's normal actions container, then:
     <details class="row-more"><summary class="row-more-btn"
         aria-label="More actions" title="More actions">⋯</summary>
       <div class="row-more-menu"> …secondary buttons… </div>
     </details>                                                                */
.row-more { position: relative; display: inline-flex; }
.row-more[open] { z-index: 5; }   /* lift the open row above later sibling cards */

/* The ⋯ trigger carries the real `.button small transparent` classes in markup,
   so it is the EXACT same height/shape/color as the row's other buttons on every
   page and breakpoint (incl. the compact result-card/contact-row sizing + dark
   mode). Here we only strip the native disclosure marker and add an [open] accent
   — sizing/color come from .button. */
.row-more > summary.row-more-btn { list-style: none; }
.row-more > summary.row-more-btn::-webkit-details-marker { display: none; } /* Safari triangle */
.row-more > summary.row-more-btn::marker { content: ""; }                   /* Firefox/others */
.row-more[open] > summary.row-more-btn {
    background-color: var(--color-primary-light, #e0f6fe);
    color: var(--color-primary-dark, #005a80);
    border-color: var(--color-primary-dark, #005a80);
}

/* The pop-out menu — a small right-aligned dropdown card. Native <details> only
   renders it while [open], so no explicit display toggle is needed. */
.row-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 12rem;
    max-width: min(16rem, 80vw);
    padding: 0.5rem;
    background: var(--color-bg-card, #ffffff);
    border: 1px solid var(--color-border, #cccccc);
    border-radius: var(--border-radius, 8px);
    box-shadow: var(--shadow-msg-menu, 0 6px 20px rgba(0, 0, 0, 0.18));
}
/* Menu buttons stack full-width and read left-aligned like a real menu. */
.row-more-menu .button,
.row-more-menu .rate-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
    margin: 0;
}
/* site.js flips to this when the default right:0 menu would spill off the left
   edge (a ⋯ trigger sitting near the left of a narrow row). */
.row-more-menu.row-more-menu-left { right: auto; left: 0; }

/* "× Not Interested" hide pill — red, and floated to the far right of the
   actions row via margin-left:auto (works even when the row wraps). Sets
   Interested='N'; the "All" view then filters the card out of the default list. */
.result-card-actions .pill.result-card-hide {
    margin-left: auto;
    background-color: var(--color-delete-btn, #d32f2f);
    border-color: var(--color-delete-btn, #d32f2f);
    color: #ffffff;
}
.result-card-actions .pill.result-card-hide:hover,
.result-card-actions .pill.result-card-hide:focus {
    background-color: var(--color-delete-btn-hover, #b71c1c);
    border-color: var(--color-delete-btn-hover, #b71c1c);
    color: #ffffff;
}

/* Interested toggle states (leftmost pill on each event card):
   marked interested → bright-green "★ Interested!"; marked not interested → red.
   Both use white text per spec. !important keeps them ahead of the generic
   .pill rule whichever stylesheet loads last. */
.result-card-actions .pill.result-card-interested-yes,
.result-card-actions .pill.result-card-interested-yes:hover,
.result-card-actions .pill.result-card-interested-yes:focus {
    background-color: #00CC00 !important;
    border-color: #00CC00 !important;
    color: #ffffff !important;
}
/* "Maybe" (Interested='M') → dark green #008000, white text. */
.result-card-actions .pill.result-card-interested-maybe,
.result-card-actions .pill.result-card-interested-maybe:hover,
.result-card-actions .pill.result-card-interested-maybe:focus {
    background-color: #008000 !important;
    border-color: #008000 !important;
    color: #ffffff !important;
}
/* When the event is already marked not-interested, the far-right "× Not Interested"
   hide pill goes bright red (#ff0000) + white to show it's the active state (the
   default hide pill is the muted delete-red). */
.result-card-actions .pill.result-card-hide.result-card-hide-active,
.result-card-actions .pill.result-card-hide.result-card-hide-active:hover,
.result-card-actions .pill.result-card-hide.result-card-hide-active:focus {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #ffffff !important;
}

/* ── Interest-level menu ─────────────────────────────────────────
   Double-click or press-and-hold the "Interested?" pill to open a popup of
   EventDetails' interest levels — Yeah! / Don't Know / Not at all (driven by
   site.js initInterestMenus, which toggles .menu-open on the wrap). The pill
   keeps its single-click interested toggle. The menu is absolutely positioned
   off the pill; .menu-open lifts the wrap above later cards so it isn't
   clipped by them. */
.interest-wrap { position: relative; display: inline-flex; }
.interest-wrap.menu-open { z-index: 1000; }
.interest-toggle {
    /* Suppress text selection / native callout on double-tap & long-press. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.interest-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1;
    min-width: 12rem;
    padding: 0.25rem;
    background: var(--color-bg-card, #fff);
    color: var(--color-text, #222);
    border: 1px solid var(--color-border, #ccc);
    border-radius: var(--border-radius, 8px);
    box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, 0.18));
}
.interest-wrap.menu-open .interest-menu { display: block; }
/* Flip above the pill when there isn't room below (set by initInterestMenus). */
.interest-menu.menu-flip-up { top: auto; bottom: calc(100% + 4px); }
.interest-menu-header {
    padding: 0.3rem 0.7rem 0.35rem;
    font-size: 0.78rem;
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}
.interest-menu .interest-menu-item {
    display: block;
    padding: 0.4rem 0.7rem;
    border-radius: var(--border-radius-sm, 6px);
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--color-text, #222);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.interest-menu .interest-menu-item:hover,
.interest-menu .interest-menu-item:focus {
    background: rgba(0, 0, 0, 0.06);
    text-decoration: none;
}
[data-theme="dark"] .interest-menu .interest-menu-item:hover,
[data-theme="dark"] .interest-menu .interest-menu-item:focus {
    background: rgba(255, 255, 255, 0.10);
}
.interest-menu .interest-menu-item-current { font-weight: var(--font-weight-bold, 700); }
.interest-menu .interest-menu-item-current::after {
    content: " ✓";
    color: var(--color-primary, #0090C8);
}

/* Event-list pager (100 events/page). Each page link reuses the .pill look. */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.25rem 0 0.5rem;
}
.pager .pager-current {
    background-color: var(--color-primary, #0090C8);
    border-color: var(--color-primary, #0090C8);
    color: #ffffff;
    font-weight: 700;
    cursor: default;
    /* Lift the active page out of the row of identical-looking pills. */
    box-shadow: 0 0 0 2px var(--color-bg-card, #fff), 0 0 0 4px var(--color-primary, #0090C8);
    transform: scale(1.08);
}
.pager .pager-gap {
    padding: 0 0.15rem;
    color: var(--color-text-muted, #6c757d);
    user-select: none;
}
/* "Page X of Y" — full-width line above the page pills. */
.pager .pager-status {
    flex: 0 0 100%;
    text-align: center;
    font-weight: 600;
    color: var(--color-text, #1a1f2e);
    margin-bottom: 0.1rem;
}

/* Variants */
.result-card--rejected { --result-bg: #b00020; --result-fg: #fff; --result-accent: #7a0014; }
.result-card--pending  { --result-bg: #fff7d6; --result-fg: #5a4500; --result-accent: #e6c200; }
.result-card--wip      { --result-bg: #fff7d6; --result-fg: #5a4500; --result-accent: #e6c200; }
.result-card--owned    { --result-bg: #d3fad3; --result-fg: #114411; --result-accent: #00aa00; }
.result-card--normal   { --result-bg: var(--color-bg-card); --result-fg: var(--color-text); --result-accent: var(--color-border); }

/* Time-window overlays for EventSearch — applied alongside the state variant.
   A thicker left border = single occurrence, thinner = recurring (per the
   filter-summary legend on the page). */
.result-card--now           { border-left-width: 10px; border-left-color: #00ff7f; }
.result-card--soon          { border-left-width: 10px; border-left-color: #008000; }
.result-card--recurring-now { border-left-width: 4px;  border-left-color: #00ff7f; }
.result-card--recurring-soon{ border-left-width: 4px;  border-left-color: #008000; }

/* ── Inline section bar ───────────────────────────────────
   Lightweight version of .dash-section for details pages —
   single colored band, no flex slot, no control. Set --kind-color
   to theme it. Used by GroupDetails, EventDetails, etc.
   --------------------------------------------------------- */
.section-bar {
    --kind-color: #555;
    background: linear-gradient(90deg, var(--kind-color), #000 100%);
    color: #fff;
    padding: 0.4rem 0.75rem;
    border-radius: var(--border-radius-sm);
    margin: 1rem 0 0.5rem;
    box-shadow: var(--shadow-sm);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.section-bar-groups { --kind-color: #008000; }
.section-bar-events { --kind-color: #0000ff; }
.section-bar-chat   { --kind-color: #5d3fd3; }
.section-bar-manage { --kind-color: #b08800; }

/* Group/Event Suggester — its four section bars get four deliberately distinct hues.
   Dedicated to that page so the site-wide variants above stay unchanged elsewhere. */
.section-bar-ges-groupsug { --kind-color: #15803d; }  /* green  — Groups You Could Create */
.section-bar-ges-eventsug { --kind-color: #1d4ed8; }  /* blue   — Events You Could Create */
.section-bar-ges-grouporg { --kind-color: #b45309; }  /* amber  — Groups That Need an Organizer */
.section-bar-ges-eventorg { --kind-color: #7e22ce; }  /* purple — Events That Need an Organizer */

/* Interest-state section-bar + swatch variants — see styles_qmeet.css */

/* ── ManageInterests2 — interest-library admin ───────────
   PLP-look library curator. Reuses .result-card (left-border
   state), .main-card, .form-group, .empty-state; these mi2-*
   rules only cover the bits the shared components don't:
   the overview chip strip, row layout, badges, and pager.
   All token-driven so dark mode follows automatically.
   --------------------------------------------------------- */
.mi2-count-inline { font-size: 0.9rem; font-weight: var(--font-weight-normal); color: var(--color-text-muted); }

/* Overview count chips */
.mi2-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--section-gap); }
.mi2-stat {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
}
.mi2-stat b { font-size: 1.05rem; color: var(--color-text); }
.mi2-stat-warn { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.mi2-stat-warn b { color: var(--color-warning); }
.mi2-stat-info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info); }
.mi2-stat-info b { color: var(--color-info); }

/* List + rows (built on .result-card) */
.mi2-list { margin-top: 0.75rem; }
.result-card.mi2-row { cursor: default; }
.mi2-row.mi2-editing { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.mi2-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.55rem; }
.mi2-row-main .result-card-status { margin-left: 0; }

/* Small state badges shown beside a row title */
.mi2-badge {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.mi2-badge-pending { background: var(--color-warning-bg); color: var(--color-warning); }
.mi2-badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.mi2-badge-deleted { background: var(--color-danger-bg);  color: var(--color-danger); }

/* The add/rename hint under each editor */
.mi2-edit-hint { margin: 0.1rem 0 0.6rem; }

/* Filter dropdown shouldn't stretch in the search row */
.mi2-filter { flex: 0 0 auto; width: auto; min-width: 9.5rem; }

/* Interests pager */
.mi2-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
.mi2-pager-label { margin: 0; }
.mi2-pager-size { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.mi2-pager-size .input-label { margin: 0; }
.mi2-pager-size .dropdown { width: auto; min-width: 4.5rem; }

/* ── Contact rows ────────────────────────────────────────
   Compact list pattern for people lists (Contacts, Members,
   MemberSearch). Title + meta line + actions row, smaller
   padding than result-card. Variants flag favorite/blocked.
   --------------------------------------------------------- */
.contact-row {
    --row-accent: var(--color-border);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--row-accent);
    border-radius: var(--border-radius-sm);
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
}
.contact-row-title { font-weight: var(--font-weight-bold); }
.contact-row-meta  { font-size: 0.85rem; color: var(--color-text-muted); display: block; margin-top: 0.1rem; }
.contact-row-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.4rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.contact-row-badge--fav { background: #d3fad3; color: #114411; border: 1px solid #00aa00; }
.contact-row-actions {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.contact-row-actions .button { padding: 0.15rem 0.5rem; font-size: 0.8rem; }

.contact-row--favorite { --row-accent: #00aa00; }
.contact-row--blocked  { --row-accent: #b00020; background: #fff5f5; }
.contact-row--blocked .contact-row-title { color: #b00020; }

/* Hover affordance — the row title links to the contact's profile, so
   a subtle lift on hover signals the card is interactive. */
.contact-row { transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.contact-row:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
[data-theme="dark"] .contact-row:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }

/* ── Bulk action toolbar ──────────────────────────────────
   Per-row checkboxes (.bulk-row-check) + a toolbar above the
   list (.bulk-actions) for multi-row operations. Generic pattern
   reusable by any list page. The button stays disabled until
   at least one row is selected (set by the page's JS).
   --------------------------------------------------------- */
.bulk-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
}
.bulk-actions[hidden] { display: none; }
.bulk-actions-selectall-wrap { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
.bulk-actions-count { min-width: 4rem; }
.bulk-actions-btn[disabled],
.bulk-actions-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.bulk-row-check {
    display: inline-flex;
    align-items: center;
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
}
.bulk-row-check input[type="checkbox"] { margin: 0; }

/* ── Match score bar (MemberMatch) ────────────────────────
   A labeled progress bar for showing % match between users.
   Color shifts with strength.
   --------------------------------------------------------- */
.match-bar {
    display: block;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
    margin: 0.2rem 0;
}
.match-bar-fill {
    display: block;
    height: 100%;
    background: var(--color-accent);
    transition: width 0.25s ease;
}
.match-stat { font-size: 0.85rem; color: var(--color-text); }
.match-stat b { color: var(--color-accent); }

/* .countdown — see styles_qmeet.css */

/* ── Interest chips (PublicProfile) ───────────────────────
   Pill-shaped tags showing interests. ONE chip pops: --top ("top interest")
   takes an accent tint and a leading ★; --other keeps the quiet base outline.
   That contrast is the whole legend — a star reads as "favourite" on sight,
   where the old two-shades-of-green coding needed a swatch key above the card
   to decode. (Those greens were hard-coded #00ff00/#80ff80: neon against the
   design system in light mode, and unreadable-bright in dark, since neither
   the fill nor the black text they forced tracked the theme. Everything below
   is tokens, so both themes stay legible.)
   --------------------------------------------------------- */
.interest-chip {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    margin: 0.15rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    background: var(--color-bg-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
/* --primary-light (not --accent-light) is the token that flips per theme:
   pale blue on white, deep blue on black — both carrying --color-text. */
.interest-chip--top {
    background: var(--color-primary-light);
    border-color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}
.interest-chip--top::before {
    content: "\2605";                /* ★ */
    margin-right: 0.3rem;
    color: var(--color-accent);
}
/* .interest-chip--other is deliberately ruleless — "other" IS the base chip.
   The class stays as a render hook so the two levels remain greppable. */

/* QMR-107: an interest chip rendered as an <a> (PublicProfile → MemberSearch
   ?interest=<id>). The chip's own .interest-chip rule already sets colour, so all
   an anchor needs is to lose the default underline and gain an affordance. Keep
   the selector on the ANCHOR (a.interest-chip), not on .interest-chip-link alone —
   a chip that couldn't be linked still carries the base class and must not pick
   up hover/pointer styling it can't act on. */
a.interest-chip {
    text-decoration: none;
    cursor: pointer;
}
a.interest-chip:hover,
a.interest-chip:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-primary-light);
}
a.interest-chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.interest-skill-heading {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    margin: 0.75rem 0 0.25rem;
}

/* Availability table on profile pages — two columns (day | time range).
   Day column is tight; the range lives in one cell so the two times sit
   next to each other instead of being pushed apart by a stretched column. */
.availability-table {
    border-collapse: collapse;
    width: auto;
}
.availability-table td {
    padding: 0.2rem 0;
    font-size: 0.9rem;
    vertical-align: baseline;
}
.availability-table td.avail-day {
    font-weight: var(--font-weight-bold);
    padding-right: 1.25rem;
    white-space: nowrap;
    width: 1%;
}
.availability-table td.avail-times {
    white-space: nowrap;
}

/* ── Details-page members table ─────────────────────────── */
.members-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}
.members-table th,
.members-table td {
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.6rem;
    vertical-align: top;
    text-align: left;
}
.members-table thead th {
    /* --color-bg-nav is a dark navy in BOTH light and dark themes, so white
       header text stays readable. (Was var(--color-text), which flips near-white
       in dark mode → white-on-white unreadable header.) */
    background: var(--color-bg-nav);
    color: #fff;
    font-weight: var(--font-weight-bold);
}
.members-table .role-organizer { color: #008000; font-weight: var(--font-weight-bold); }

/* Shared paginated Members roster (GroupDetails + EventDetails via MemberRoster.vb):
   one compact row format on both pages, plus the server-side (querystring) pager. */
.mr-table td,
.mr-table th { padding: 0.35rem 0.6rem; }
.mr-table .mr-name { font-weight: var(--font-weight-bold); }
.mr-role {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}
.mr-table .mr-ag { white-space: nowrap; font-weight: var(--font-weight-normal, 400); }
.mr-rsvp-sub { display: inline-block; margin-left: 0.25rem; }

/* Roster detail line — "📍 city · 🎯 interests" under the member's name (MemberRoster.Details).
   Its dim colour comes from .small-dim-text on the same element; this rule only handles the
   line break and weight, so it can't fight the theme's dark-mode text colour. The parent
   .mr-name is bold, and the detail line must NOT inherit that. */
.mr-table .mr-details {
    margin-top: 0.15rem;
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.35;
}

.mr-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0.25rem 0 0.5rem;
}
.mr-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm);
    line-height: 1;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg-card, #fff);
}
a.mr-page:hover { border-color: var(--color-primary, #0d6efd); }
.mr-page.is-current {
    background: var(--color-primary, #0d6efd);
    border-color: var(--color-primary, #0d6efd);
    color: #fff;
    font-weight: var(--font-weight-bold);
}
.mr-page.is-disabled { opacity: 0.45; cursor: default; }
.mr-gap { padding: 0 0.15rem; color: var(--color-text-muted, #666); }
[data-theme="dark"] .mr-page { background: var(--color-bg-card, #1e1e1e); }

/* ── Cities Near Me ───────────────────────────────────────────
   Search grid + Leaflet map + the results table. Fully tokenized
   so borders/zebra/hover all track the light↔dark theme (the old
   page hard-coded rgba() greys that washed out in dark mode). */
.cnm-grid {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.4fr auto;
    gap: 0.75rem;
    align-items: end;
}
@media (max-width: 720px) {
    .cnm-grid { grid-template-columns: 1fr 1fr; }
    .cnm-grid .cnm-search-cell { grid-column: 1 / -1; }
    .cnm-grid .cnm-search-cell .button { width: 100%; }
}
/* max-width:60ch was REMOVED here on 2026-08-01, not just overridden. This <p>
   is a direct child of .page-header, and a max-width clamps a flex item's base
   size: the 582px capped box fit beside the title row instead of breaking to
   its own line, squashing "Cities Near Me" to 0-42px wide / up to 470px tall
   at 637-697px viewports. styles_shared.css now gives `.page-header > p`
   min-width:100% so the blurb always sits under the title; the cap would be
   inert under that rule anyway, and leaving a dead declaration here would just
   read as a reading measure that is still in force. The sentence's own length
   (~790px) is what limits the line now. */
.cnm-subtitle { margin: 0.25rem 0 0; color: var(--color-text-muted); }
.cnm-hint { margin: 0.6rem 0 0; }

/* Radius <select> replaced by a range slider (progressive enhancement). */
.cnm-radius-slider { display: flex; align-items: center; gap: 0.5rem; }
.cnm-radius-range { flex: 1 1 auto; min-width: 0; accent-color: var(--color-accent); }
.cnm-radius-out {
    flex: 0 0 auto; min-width: 4.5rem; text-align: right;
    font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium);
}
.cnm-mapwrap { position: relative; margin: 1rem 0; }
.cnm-map {
    height: 440px;
    width: 100%;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    z-index: 0;
}
/* "Click to zoom" affordance — scroll-wheel zoom is off until you click. */
.cnm-map-hint {
    position: absolute; top: 10px; right: 10px; z-index: 400;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    padding: 2px 9px; border-radius: 999px;
    font-size: var(--font-size-xs); pointer-events: none;
}
/* Origin marker: a gold star (Leaflet divIcon) — unmistakable vs the red city dots.
   Shared verbatim by EditEvent's park map (.park-venue-origin-icon), which measures its
   radius from a center the same way — keep both selectors on this rule. */
.cnm-origin-icon,
.park-venue-origin-icon {
    background: transparent; border: none;
    color: #f5a623; font-size: 26px; line-height: 30px; text-align: center;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
}
.cnm-legend {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
    align-items: center; margin: 0 0 0.9rem;
    font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.cnm-lg-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.cnm-lg-star { color: #f5a623; font-size: 1.05rem; line-height: 1; }
.cnm-lg-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: #dc2626; border: 1px solid #b91c1c; display: inline-block;
}
.cnm-lg-major { border: 2px solid #f5a623; }
.cnm-summary { margin: 0 0 0.6rem; }

/* Results toolbar — client-side de-noise controls above the table. */
.cnm-toolbar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.6rem 1rem; margin: 0 0 0.5rem;
}
.cnm-toolbar-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
    flex: 1 1 auto;
}
.cnm-filter { flex: 1 1 200px; min-width: 150px; max-width: 320px; }
.cnm-check { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; margin: 0; }
.cnm-minpop-label { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; margin: 0; }
.cnm-minpop { width: auto; min-width: 6.5rem; }
.cnm-unit-toggle {
    display: inline-flex; flex: 0 0 auto;
    border: 1px solid var(--color-border); border-radius: var(--border-radius);
    overflow: hidden;
}
.cnm-unit {
    border: 0; background: var(--color-bg-card); color: var(--color-text-muted);
    padding: 0.3rem 0.7rem; cursor: pointer; font: inherit; line-height: 1.4;
}
.cnm-unit + .cnm-unit { border-left: 1px solid var(--color-border); }
.cnm-unit.is-active { background: var(--color-accent); color: #fff; font-weight: var(--font-weight-bold); }
.cnm-count { margin: 0 0 0.5rem; }

/* City link (re-center "explore from here") + sortable headers. */
.cnm-city-link { font-weight: var(--font-weight-medium); }
.cnm-major .cnm-city-link { font-weight: var(--font-weight-bold); }
.cnm-table thead th[data-key] { cursor: pointer; user-select: none; }
.cnm-table thead th[data-key]:hover { background: color-mix(in srgb, var(--color-accent) 22%, var(--color-bg-card)); }
.cnm-table thead th.cnm-sort-asc::after { content: " ▲"; font-size: 0.7em; opacity: 0.8; }
.cnm-table thead th.cnm-sort-desc::after { content: " ▼"; font-size: 0.7em; opacity: 0.8; }
.cnm-table tbody tr { cursor: pointer; }
.cnm-table tbody tr.cnm-row-active {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--color-accent);
}

/* Per-city action icons (Events / Groups / Members / external map). */
.cnm-find-col { white-space: nowrap; }
.cnm-actions { display: flex; gap: 0.1rem; }
.cnm-act {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.9rem; height: 1.9rem; border-radius: var(--border-radius);
    text-decoration: none; font-size: 1rem; opacity: 0.75;
}
.cnm-act:hover, .cnm-act:focus { opacity: 1; background: color-mix(in srgb, var(--color-accent) 15%, transparent); }

.cnm-showmore-wrap { text-align: center; margin: 0.75rem 0 0; }

/* Zero-state before the first search. */
.cnm-empty { text-align: center; padding: 2rem 1rem; }
.cnm-empty-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 0.4rem; }
.cnm-empty p { margin: 0.25rem 0; }

.button.is-loading { opacity: 0.85; pointer-events: none; }

/* "Use My Location" row + area stats strip. */
.cnm-geo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; }
.cnm-stats {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0 0 0.75rem;
    font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.cnm-stat { white-space: nowrap; }

/* qMEET activity column + count badges. */
.cnm-act-col { white-space: nowrap; }
.cnm-act-cell { white-space: nowrap; }
.cnm-badge {
    display: inline-flex; align-items: center; gap: 0.15rem;
    padding: 0.05rem 0.4rem; margin: 0 0.2rem 0.1rem 0;
    border-radius: 999px; font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text);
}
.cnm-badge-ev { background: color-mix(in srgb, #2563eb 16%, transparent); }
.cnm-badge-gr { background: color-mix(in srgb, #16a34a 18%, transparent); }
.cnm-badge-mem { background: color-mix(in srgb, #f5a623 22%, transparent); }

@media (max-width: 600px) {
    .cnm-toolbar-filters { gap: 0.5rem 0.7rem; }
    .cnm-filter { flex: 1 1 100%; max-width: none; }
}

/* Mobile: the wide results table becomes one card per city (no sideways scroll). */
@media (max-width: 640px) {
    .cnm-tablewrap { max-height: none; overflow: visible; border: none; box-shadow: none; }
    .cnm-table thead { display: none; }
    .cnm-table, .cnm-table tbody { display: block; width: 100%; }
    .cnm-table tr {
        display: block; position: relative;
        border: 1px solid var(--color-border); border-radius: var(--border-radius);
        margin: 0 0 0.6rem; padding: 0.55rem 0.7rem 0.5rem;
    }
    .cnm-table tr:nth-child(even) { background: none; }
    .cnm-table tr.cnm-row-active { box-shadow: inset 3px 0 0 var(--color-accent); }
    .cnm-table td { display: block; border: none; padding: 0.12rem 0; white-space: normal; text-align: left; }
    .cnm-table td.num { text-align: left; }
    .cnm-table td.rank {
        position: absolute; top: 0.5rem; right: 0.7rem; width: auto; padding: 0;
        color: var(--color-text-muted); font-size: var(--font-size-xs);
    }
    .cnm-table td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: var(--font-weight-bold); color: var(--color-text-muted); margin-right: 0.3rem;
    }
    .cnm-table td.rank + td .cnm-city-link { font-size: var(--font-size-md); }
    .cnm-actions { margin-top: 0.4rem; }
    .cnm-act { min-width: 2.2rem; height: 2.2rem; }   /* larger tap targets */
}

/* MemberSearch: context banner when a Cities-Near-Me deep-link scopes to one city. */
.ms-loc-chip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; margin: 0 0 0.75rem;
    border: 1px solid var(--color-border); border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-card));
}

/* Results table: rounded card wrapper with an inner scroll so a
   1,000-row list stays contained, and a sticky, theme-safe header
   (accent tint, not var(--color-text) which inverts in dark mode). */
.cnm-tablewrap {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}
.cnm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.cnm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg-card));
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    text-align: left;
    padding: 0.55rem 0.7rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--color-accent);
}
.cnm-table tbody td {
    padding: 0.5rem 0.7rem;
    border-top: 1px solid var(--color-border);
    white-space: nowrap;
}
.cnm-table th.num,
.cnm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cnm-table th.rank,
.cnm-table td.rank {
    text-align: right;
    width: 2.5rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cnm-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
}
.cnm-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.cnm-city { font-weight: var(--font-weight-medium); }
.cnm-major .cnm-city { font-weight: var(--font-weight-bold); }
.cnm-star { color: #f5a623; margin-left: 0.3rem; }
.cnm-dist { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }

/* ── Abuse Terms admin (admin-only) ───────────────────────────
   Flex form layout + filter row that replace the per-element inline
   style= attributes; the terms list uses the canonical .admin-queue-table. */
.at-addform {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
}
.at-addform .form-group { margin: 0; }
.at-addform .at-grow { flex: 1 1 16rem; }
.at-addform .at-grow-sm { flex: 1 1 12rem; }
.at-filter-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}
.at-filter-row .form-group { margin: 0; }
.at-note { margin-top: 0.5rem; }
.at-actions { text-align: right; white-space: nowrap; }

/* ── Monitor Abuse admin (admin-only) ─────────────────────────
   Extracts the repeated inline flex/box styles from the flagged-item
   repeater and fixes the broken --surface-2 / --border-color fallbacks
   (neither is a real token, so the snapshot box ignored dark mode). */
.ma-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.ma-filters .form-group { margin: 0; }
.ma-userid { max-width: 7rem; }
/* Keep the in-field × clear button glued to the narrow User ID box: cap the
   .input-clearable wrapper to match so the absolutely-positioned × sits inside
   the field instead of floating out to the form-group width. */
.ma-userid-wrap { max-width: 7rem; }
.ma-card { margin-bottom: 0.75rem; }
.ma-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ma-match { margin: 0.4rem 0 0.2rem; }
.ma-snapshot {
    max-height: 9rem;
    overflow: auto;
    background: color-mix(in srgb, var(--color-text) 5%, var(--color-bg-card));
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.4rem 0.6rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--font-size-sm);
}
.ma-actions { margin-top: 0.5rem; }
.ma-actions > summary { cursor: pointer; font-weight: var(--font-weight-bold); }
.ma-group { margin-top: 0.4rem; }
.ma-group-label { margin-bottom: 0.25rem; }
.ma-btn-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.ma-comment { max-width: 14rem; }
.ma-comment-wrap { display: inline-flex; gap: 0.25rem; align-items: center; }
.button.small.ma-maybe {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: #fff;
}

/* ── Group & Event Suggester ──────────────────────────────────
   Moved out of the page's inline <style>. Broken var fallbacks
   (--border-color / --card-bg / --muted-color were never real tokens,
   so the list ignored dark mode) are corrected to the canonical
   --color-* tokens, and the harsh #0000ff Create-Group button now
   uses the on-palette info blue (still visually distinct from the
   lime Create-Event save button). */
.ges-intro { margin-bottom: 1rem; }
.ges-intro .ges-eg { display: inline; }
.ges-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; margin: 0.5rem 0 1rem; }
.ges-control { display: flex; flex-direction: column; gap: 0.3rem; }
.ges-control > .input-label { margin: 0; }
.ges-control .textbox, .ges-control .dropdown { min-width: 12rem; }
.ges-summary { font-weight: var(--font-weight-bold); margin: 0.25rem 0 1rem; }
.ges-trunc { margin-top: -0.5rem; }
.ges-section { margin-top: 1.5rem; }
.ges-section .section-bar { display: flex; align-items: center; justify-content: space-between; }
.ges-bar-count { font-weight: 700; opacity: 0.85; text-transform: none; letter-spacing: 0; }
.ges-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.ges-item {
    position: relative;   /* anchors the ::before demand bar */
    display: flex;
    align-items: center;
    gap: 0.6rem 0.85rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-card);
}
/* Demand bar — a thin track along the bottom whose width is the row's interested-count as a
   % of the list peak (set inline as --d). Organizer rows never set --d, so they get no bar. */
.ges-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: calc(var(--d, 0) * 1%);
    background: var(--color-info);
    opacity: 0.5;
    border-bottom-left-radius: var(--border-radius);
    pointer-events: none;
}
/* Top-3 (by demand) suggestion rows get a warm border tint + their 🔥 flame revealed. */
.ges-item.ges-top { border-color: color-mix(in srgb, var(--color-warning, #d97706) 42%, var(--color-border)); }
.ges-flame { flex: 0 0 auto; font-size: 0.9rem; line-height: 1; }
.ges-flame[hidden] { display: none; }
.ges-scope {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(127, 127, 127, 0.14);
}
.ges-scope-national { background: rgba(37, 99, 235, 0.16); }
.ges-scope-state { background: rgba(22, 163, 74, 0.16); }
.ges-scope-metro { background: rgba(147, 51, 234, 0.18); }
.ges-scope-city { background: rgba(217, 119, 6, 0.18); }
.ges-name { font-weight: var(--font-weight-bold); flex: 1 1 14ch; min-width: 12ch; word-break: break-word; }
.ges-count { color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; }
.ges-item .button { margin-left: auto; flex: 0 0 auto; }

/* "＋ Create Group" buttons use the on-palette info blue so groups
   read differently from the lime "＋ Create Event" save buttons. */
a.button.save.ges-create-group { background: var(--color-info); border-color: var(--color-info); color: #fff; }
a.button.save.ges-create-group:hover,
a.button.save.ges-create-group:focus {
    background: color-mix(in srgb, var(--color-info) 88%, #000);
    border-color: color-mix(in srgb, var(--color-info) 88%, #000);
    color: #fff;
}
.ges-empty { color: var(--color-text-muted); padding: 1rem 0.25rem; }

/* ── Suggester: collapsible, lazy-loaded section headers ──
   The section-bar is a full-width toggle <button>; it keeps the bar's gradient/uppercase
   look but adds a pointer + the ▼/▲ triangle. Bodies stay hidden until first expand. */
.ges-toggle {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: #fff;
    text-align: left;
}
.ges-toggle:hover { filter: brightness(1.07); }
.ges-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ges-bar-title { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ges-tri { font-size: 0.8em; opacity: 0.9; }
.ges-section-body { margin-top: 0.75rem; }
.ges-section-body > .ges-list { margin-top: 0; }
.ges-loading, .ges-error { color: var(--color-text-muted); padding: 0.75rem 0.25rem; }
.ges-geo-note { margin: 0 0 0.75rem; }

/* Filters panel (collapsible) — a bordered sub-panel inside the page card (so it reads as
   "its own card" without double-carding), plus its "which filters apply where" hint. */
.ges-filter-card {
    margin: 0.25rem 0 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-subtle, rgba(127, 127, 127, 0.05));
}
.ges-filter-hint { margin: 0 0 0.9rem; }

/* "Need an Organizer" rows reuse .ges-item; the meta line carries member + chat counts. */
.ges-org-meta { color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; }
.ges-org-meta b { color: var(--color-text); }

/* ── Suggester: overview strip, spotlight, legend, zones, filter grouping (2026-07-16 de-overwhelm) ── */

/* At-a-glance overview strip — borderless (just a bottom rule) so it doesn't add another box. */
.ges-summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.55rem;
    margin: 0 0 0.8rem;
    padding: 0 0 0.7rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}
.ges-summary-place { font-weight: var(--font-weight-bold); }
.ges-summary-counts { color: var(--color-text-muted); }
.ges-summary-counts b { color: var(--color-text); }

/* Spotlight / hero — the single strongest local idea, in an info-tinted card. */
.ges-spotlight { margin: 0 0 1rem; }
.ges-spotlight[hidden] { display: none; }
.ges-spotlight-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-info) 55%, var(--color-border));
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--color-info) 8%, var(--color-bg-card));
}
.ges-spotlight-main { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 16rem; min-width: 0; }
.ges-spotlight-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--color-info);
}
.ges-spotlight-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.ges-spotlight-name { font-size: 1.15rem; font-weight: var(--font-weight-bold); word-break: break-word; }
.ges-spotlight-count { font-size: 0.85rem; color: var(--color-text-muted); }
.ges-spotlight-count b { color: var(--color-text); }
.ges-spotlight .button { margin-left: auto; flex: 0 0 auto; }

/* Scope colour key (always visible, so the pill colours stay decodable when filters are hidden). */
.ges-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: 0 0 0.85rem; }
.ges-legend-lbl { font-size: 0.8rem; font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.ges-legend .ges-scope { font-size: 0.7rem; }

/* Two-zone split of the sections: a heading rule over each pair (create-new vs take-over). */
.ges-zone-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.9rem 0 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--color-border);
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
}
#gesRoot > .ges-zone-title:first-child { margin-top: 0.4rem; }
.ges-zone-sub { font-size: 0.82rem; font-weight: 400; color: var(--color-text-muted); }

/* Filters-active badge on the "Show Filters" toggle + the Reset link. */
.ges-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    margin-left: 0.45rem;
    border-radius: 999px;
    background: var(--color-info);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
.ges-filter-badge[hidden] { display: none; }

/* Two labelled filter sub-groups inside the card (search/location vs suggestion-strength). */
.ges-filter-hintrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ges-filter-hintrow .ges-filter-hint { flex: 1 1 20rem; margin: 0 0 0.6rem; }
.ges-filter-reset {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}
.ges-filter-reset[hidden] { display: none; }
.ges-control-set { margin: 0; padding: 0; border: none; min-width: 0; }
.ges-control-set + .ges-control-set { margin-top: 0.4rem; padding-top: 0.75rem; border-top: 1px dashed var(--color-border); }
.ges-set-label { display: block; padding: 0; margin: 0 0 0.1rem; font-size: 0.85rem; font-weight: var(--font-weight-bold); color: var(--color-text); }
.ges-set-sub { font-weight: 400; color: var(--color-text-muted); }
.ges-country-hint { margin: 0.25rem 0 0; font-size: 0.75rem; }

/* ── Suggester: per-row actions, density, guidance, save/hide, share, sort (2026-07-16 depth pass) ── */

/* Right-clustered per-row actions (Find them / ☆ Save / ＋ Create / ✕ Hide). */
.ges-row-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ges-row-actions .button { margin-left: 0; }
.ges-find { white-space: nowrap; font-size: 0.85rem; }
.ges-save, .ges-hide {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.15rem 0.32rem;
    border-radius: var(--border-radius);
    color: var(--color-text-muted);
}
.ges-save:hover, .ges-hide:hover { background: rgba(127, 127, 127, 0.12); }
.ges-save.is-saved { color: var(--color-warning, #d97706); }
.ges-hide:hover { color: var(--color-danger, #dc2626); }

/* Density denominator ("· ~28% of members") + the "💡 Bigger as Metro" guidance badge. */
.ges-density { color: var(--color-text-muted); font-weight: 400; }
.ges-hint-badge {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-warning, #d97706) 18%, transparent);
    color: var(--color-warning, #b45309);
}

/* A hidden row while "Show" is on — dimmed so it reads as suppressed-but-recoverable. */
.ges-row-hidden { opacity: 0.5; }

/* "✨ For You" — a suggestion matching one of the viewer's own interests: info-tinted card + a
   ✨ prefix on the name. (::before is free here — the demand bar uses .ges-item::before, this is
   on .ges-name.) Placed after .ges-top so personal relevance wins the shared border slot. */
.ges-item.ges-foryou {
    border-color: color-mix(in srgb, var(--color-info) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 5%, var(--color-bg-card));
}
.ges-item.ges-foryou .ges-name::before { content: "✨ "; }

/* "🔥 Popular here" reuses .ges-hint-badge but in a hotter (danger) tint vs the amber Metro nudge. */
.ges-hint-badge.ges-badge-hot {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 16%, transparent);
    color: var(--color-danger, #b91c1c);
}

/* The "✨ N match your interests" clause in the overview strip — accented to draw the eye. */
.ges-summary-foryou, .ges-summary-foryou b { color: var(--color-info); }

/* Overview-strip copy-link button + the "N hidden — Show" strip. */
.ges-copylink { margin-left: auto; flex: 0 0 auto; background: none; border: none; cursor: pointer; font: inherit; white-space: nowrap; }
.ges-hidden-bar { margin: -0.35rem 0 0.85rem; font-size: 0.85rem; color: var(--color-text-muted); }
.ges-hidden-bar[hidden] { display: none; }
.ges-hidden-bar b { color: var(--color-text); }

/* "★ Saved only" checkbox control inside the filter card. */
.ges-check-inline { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-weight: var(--font-weight-bold); }

/* Narrow screens — stack each result row cleanly (name on its own line; actions below). */
@media (max-width: 32rem) {
    .ges-item .ges-name { flex-basis: 100%; order: 2; }
    .ges-item .ges-scope { order: 1; }
    .ges-item .ges-hint-badge { order: 1; }
    .ges-item .ges-flame { order: 3; }
    .ges-item .ges-count { order: 3; }
    .ges-item .ges-row-actions { order: 4; width: 100%; justify-content: flex-start; margin-left: 0; }
}

/* Notifications — push-diagnostics output <pre> (moved off an inline style). */
.push-diag-out {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 42vh;
    overflow: auto;
    font-size: 11px;
    line-height: 1.45;
    margin: 0.5rem 0 0;
}

/* "No results" empty state */
.linkunderline,
.linkunderline:visited            { font-family: var(--font-family); font-weight: bold; text-decoration: underline; }
.linkunderline:hover { color: red; }
.linkblueunderline   { font-family: var(--font-family); color: blue; }
.linkblackunderline  { font-family: var(--font-family); color: black; }
.linkwhiteunderline  { font-family: var(--font-family); color: white; }
.linkyellowunderline { font-family: var(--font-family); color: yellow; }

/* Admin / View-Feedback queue table — used by Admin.aspx.vb / ViewFeedback.aspx.vb
   to render the moderation lists. Replaces 50+ inline style='border:1px solid' attrs. */
.admin-queue-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0 1rem;
    background-color: var(--color-bg-card, #fff);
}
.admin-queue-table th,
.admin-queue-table td {
    border: 1px solid var(--color-border, #e0e0e0);
    padding: 0.4rem 0.6rem;
    vertical-align: top;
    font-size: var(--font-size-sm, 0.9rem);
}
.admin-queue-table thead th {
    background-color: var(--color-bg, #f5f7fa);
    text-align: left;
    font-weight: var(--font-weight-bold, 600);
}
.admin-queue-table a { color: var(--color-link); }

/* ── Data-table readability layer (qMeet-local) ───────────────
   Zebra striping + row hover + long-text wrap for the qMeet data
   tables (feedback queue, Contact-Us moderation queue, API blocks,
   popular interests). members-table shares .admin-queue-table but
   its rows are sparse and its columns are text, so it's excluded
   from striping and gets hover only. Dark-mode tints follow the
   established dashboard pattern (literal rgba + [data-theme="dark"]
   override). These rules live here (not in Shared) because each
   sister site carries its own copy of these table classes. */

/* Zebra striping — alternate body rows get a faint tint so the eye
   tracks one row across the full width of the table. */
.admin-queue-table:not(.members-table) tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
.popular-interests-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.035);
}
[data-theme="dark"] .admin-queue-table:not(.members-table) tbody tr:nth-child(even),
[data-theme="dark"] .data-table tbody tr:nth-child(even),
[data-theme="dark"] .popular-interests-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.045);
}

/* Row hover — placed AFTER the zebra rules so it wins on striped
   rows (equal specificity → source order). Feedback / member rows
   are clickable, so this doubles as an interaction affordance. */
.admin-queue-table:not(.members-table) tbody tr:hover,
.data-table tbody tr:hover,
.members-table tbody tr:hover {
    background-color: rgba(0, 176, 240, 0.10);
}
[data-theme="dark"] .admin-queue-table:not(.members-table) tbody tr:hover,
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] .members-table tbody tr:hover {
    background-color: rgba(0, 176, 240, 0.18);
}

/* Long free-text cells (feedback comments, emails, URLs) wrap and
   break unbroken strings instead of stretching the table wider. */
.admin-queue-table td { overflow-wrap: anywhere; }

/* ── Feedback queue column alignment (ViewFeedback.aspx only) ──
   The single-character Urgency (U, col 3) and Importance (I, col 4)
   columns read better centered under their headers; the date stays
   on one line. Scoped to the .feedback-queue modifier so the other
   pages that reuse .admin-queue-table (Admin.aspx Contact-Us queue,
   whose col 3/4 are Date/Submitted By) are not affected. */
.feedback-queue thead th:nth-child(3),
.feedback-queue thead th:nth-child(4),
.feedback-queue tbody td:nth-child(3),
.feedback-queue tbody td:nth-child(4) {
    text-align: center;
    white-space: nowrap;
}
.feedback-queue tbody td:nth-child(1) { white-space: nowrap; }

/* Users.aspx — bold per-row name label (replaces the legacy hardcoded
   Label.Font.Bold = True / Font.Size = 11 inline assignments). */
.users-label-bold { font-weight: var(--font-weight-bold, 600); }

/* Users.aspx — each user is wrapped in a .user-row so the client-side
   data-list-filter can hide/show one entry at a time. The trailing <hr>
   sits inside the wrapper so it hides along with the row. */
.user-row { padding: 0.25rem 0.4rem; border-radius: var(--border-radius-sm); transition: background-color var(--transition-fast); }
.user-row[hidden] { display: none; }
/* Hover highlight — each row packs many fields; a tint helps the admin
   keep one user's row together while scanning the wide list. */
.user-row:hover { background-color: rgba(0, 176, 240, 0.06); }
[data-theme="dark"] .user-row:hover { background-color: rgba(0, 176, 240, 0.12); }

/* Dashboard "I'm Here" / Tasks / Contacts cards — white panels inside the dashboard's
   dark area. Used by Dashboard.aspx.vb's panelTasks/panelContacts rendering. */
.dash-task-card { background: var(--color-bg-card, #fff); }

/* Dashboard programmatic-link-button — replaces inline Style.Add("text-decoration","none"). */
.dash-linkbtn { text-decoration: none; }
.dash-linkbtn:hover { text-decoration: underline; }

/* Dashboard upcoming-events row tinting — stronger green = sooner. Modernized 2026-06-05:
   the original literals (#00FF00 / #99FF99 / #BBFFBB / #DDFFDD) were pure-neon and fought
   the link colors; now the same translucent ramp the dark theme uses, layered over the
   light card surface, so the recency encoding reads without shouting. */
.dash-event-today    { background: rgba(46, 204, 113, 0.38); }
.dash-event-tomorrow { background: rgba(46, 204, 113, 0.26); }
.dash-event-d2       { background: rgba(46, 204, 113, 0.16); }
.dash-event-d3       { background: rgba(46, 204, 113, 0.08); }

/* Dashboard chat preview rows — indigo tint = sent by me, green tint = sent to me
   (same hues as the dark-mode overrides; was opaque lavender #CCCCFF / #CCFFCC). */
.dash-chat-from-me { background: rgba(124, 131, 253, 0.20); }
.dash-chat-to-me   { background: rgba(46, 204, 113, 0.18); }

/* Dark-mode overrides for the dashboard row tints. The light values above are
   near-neon and broke in dark mode (light text on bright green = unreadable).
   Re-tint to translucent hues layered over the dark card surface so the
   recency/sender encoding survives with readable contrast. Light mode is
   untouched. (Requirements §3.4 dark mode.) */
[data-theme="dark"] .dash-event-today    { background: rgba(46, 204, 113, 0.32); }
[data-theme="dark"] .dash-event-tomorrow { background: rgba(46, 204, 113, 0.22); }
[data-theme="dark"] .dash-event-d2       { background: rgba(46, 204, 113, 0.14); }
[data-theme="dark"] .dash-event-d3       { background: rgba(46, 204, 113, 0.08); }
[data-theme="dark"] .dash-chat-from-me   { background: rgba(124, 131, 253, 0.22); }
[data-theme="dark"] .dash-chat-to-me     { background: rgba(46, 204, 113, 0.16); }

/* EventDetails interest-vote columns. Colours encode vote weight from "YEAH!" (bright green)
   down to "Naw" (orange) plus a special "Another time" (cyan). Centered text + bold by default. */
.vote-row-bordered  { border: solid; border-width: 1px 0; }
.vote-col           { text-align: center; font-weight: bold; }
.vote-col-yeah      { background-color: #00FF00; text-align: center; }
.vote-col-sure      { background-color: #00CC00; text-align: center; }
.vote-col-maybe     { background-color: #FFFF00; text-align: center; }
.vote-col-naw       { background-color: #FFA500; text-align: center; }
.vote-col-later     { background-color: #00FFFF; text-align: center; }
.vote-results-table { border-collapse: collapse; width: 100%; }

/* EventDetails "Voting Results" — stacked proportion bars. One full-width bar per
   activity; segments flex-sized to each vote count so the room's enthusiasm reads at
   a glance. Segment colours run YEAH! (green) → Another Time (grey), keyed by legend. */
.vote-bars { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.vote-bar-row {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr;
    gap: 0.75rem;
    align-items: center;
}
.vote-bar-name {
    font-weight: var(--font-weight-medium); line-height: 1.25; min-width: 0;
    /* Keep each activity on a single line — truncate with an ellipsis rather than
       wrapping to a second row (full name stays available via the title tooltip). */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vote-bar-track {
    display: flex;
    height: 1.6rem;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-border);
}
.vote-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: #fff;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}
/* Segment / legend-dot colours (green → grey by descending enthusiasm).
   YEAH! and Sure! are both green — they must therefore differ by LIGHTNESS, not just hue:
   the old pair (#16a36a / #4a9d5c) sat at nearly the same luminance and read as one colour
   in the bar and, worse, in the small legend dots. Now YEAH! is a deep emerald and Sure! a
   distinctly lighter green (~3.5x the relative luminance), which also survives greyscale
   and red-green colour blindness. Sure! is too light for the white .vote-seg text, so it
   overrides it with a dark green (this rule comes after .vote-seg, same specificity). */
.vote-seg-yeah  { background-color: #0a6b3d; }
.vote-seg-sure  { background-color: #5fc08a; color: #0b3d26; }
.vote-seg-maybe { background-color: #c9922a; }
.vote-seg-naw   { background-color: #d1604a; }
.vote-seg-later { background-color: #8a94a0; }

.vote-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}
.vote-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.vote-dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; flex: 0 0 auto; }

/* On narrow phones stack the name above its bar so the bar keeps usable width. */
@media (max-width: 480px) {
    .vote-bar-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* EventDetails event-photos thumbnail strip — small bordered preview tiles. */
.event-file-thumb { border: 1px solid #000; margin: 2px; width: 120px; height: 120px; object-fit: cover; }

/* PublicProfile photo — full-width, thin border. */
.public-profile-pic { border: 1px solid #000; width: 100%; height: auto; display: block; }

/* RemoveDuplicateEvents helper notes — slightly muted, smaller than body. */
.dedup-helper-note  { font-size: 12px; margin-bottom: 8px; }

/* Interests grid — taller line-height so the ⤵ "drill down" arrow lines up with each row. */
.interest-row-tall  { line-height: 3.5; }

/* Legacy layout helpers used by old pages */
.center        { margin-left: auto; margin-right: auto; }
.paneltable    { vertical-align: top; background-color: #c0c0c0; border: 10px solid #c0c0c0; padding: 0; table-layout: auto; border-collapse: collapse; margin: 0 auto; }
.tablelines    { border-bottom: 1px solid #000; border-right: 0 solid #00c000; }
.tableshadow   { box-shadow: 7px 7px 10px 0px rgba(50,50,50,0.5); background-color: #ccffcc; }
.table1        { border-spacing: 0; border-collapse: collapse; }
.table2        { border-collapse: collapse; width: 100%; }
.v-top         { vertical-align: top; }
.cell          { border: 1px solid #808080; }
.cell-dark     { border: 1px solid #000; }
.cell-dark-header { border: 1px solid #000; background-color: #000; color: #fff; }
.cell-padded   { padding: 5px; }
.bg-white      { background-color: #fff; }
.chat-urgent   { color: #ff00ff; font-weight: bold; }
.row-tall > td { height: 20px; }

/* Staged-upload preview thumb in the chat composer (the file is uploaded but
   not yet sent). Emitted by ChatThumbHelper, which feeds BOTH render paths —
   ChatFilesReady.ashx (AJAX, right after upload) and ChatUC.ShowFilesReadyToSend
   (postback) — so the preview is the same size whichever path drew it.
   object-fit:contain keeps aspect; border uses --color-text for dark-mode contrast. */
.chat-thumb { border: 1px solid var(--color-text); width: 160px; height: 160px; object-fit: contain; }
/* Inline-image inside a chat message bubble. Width % + border color come
   per-message via inline style (user-driven scale + per-user color); the
   static margin + cursor live here so they aren't repeated 100 times in
   server-rendered HTML. */
.chat-img-inline {
    margin: 2px;
    cursor: zoom-in;
    border: 2px solid transparent;
    border-style: solid;
}

/* ViewFeedback (admin) — thumbnails on the feedback queue row + full-size
   image on the open-record detail panel. Replaces inline width/Style attrs.
   Borders use design-system tokens so dark mode renders readably. */
.feedback-thumb { border: 1px solid var(--color-text); }
.feedback-full  { max-width: 100%; height: auto; border: 1px solid var(--color-border); }

/* ChatUC confirmation badges — appended to the "Posted." toast text after
   the user sends a message, summarizing which flags they checked. Replaces a
   set of 5 inline style='background:X;color:Y' attributes. */
.msg-badge {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: var(--border-radius-sm, 4px);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold, 600);
    line-height: 1.4;
    vertical-align: middle;
}
.msg-badge-urgent  { background: magenta; color: #fff; }
.msg-badge-pinned  { background: cyan;    color: #000; }
.msg-badge-saved   { background: yellow;  color: #000; }
.msg-badge-notify  { background: orange;  color: #000; }
.msg-badge-lowpri  { background: #808080; color: #fff; }
.msg-badge-live    { background: #6f42c1; color: #fff; }

/* ChatUC "..." secondary-menu trigger — static neutral-gray pill that toggles
   the per-message action menu. Pulled out of an inline style attribute that
   was repeating background/color/border on every message render. Only the
   font-size remains data-driven (user-set per-message size). */
.msg-menu-trigger {
    background: #ddd;
    color: #000;
    border: 1px solid #ddd;
}

/* ChatUC per-message action menu items — bg/fg colors stay inline (data-driven
   per action) but the cursor:pointer is static. */
.msg-action-item { cursor: pointer; }

/* Same-size placeholder shown while a staged image's server thumbnail is still
   being generated; matches .chat-thumb so the strip doesn't jump when it loads. */
.chat-thumb-pending {
    display: inline-block;
    width: 160px;
    height: 160px;
    border: 1px solid #999;
    margin: 1px;
    vertical-align: top;
    font-size: 11px;
    line-height: 160px;
    text-align: center;
    color: #666;
}

/* REMOVED 2026-08-11 (QMR-255): the legacy gradient bars .div1 / .divblue / .whitediv /
   .reddiv, whose own comment still claimed they were "used on EventDetails/GroupDetails/
   Interests". Measured first: three appeared in no file outside this stylesheet, and
   .div1's only hit was a doc comment describing a layout EventDetails no longer has.
   🔑 The check that mattered was CssClass assignment from code-behind, not markup — the
   colour helpers below ARE set that way (btnPost.CssClass = "button magenta") and would
   look just as unused to a markup-only search. Modern equivalent: .section-bar variants.
   No service-worker bump: stale CSS carrying rules that match nothing renders identically. */

/* Transparent overlays (used on some chat/profile cards) */
.transparent66 { color: #fff; background-color: rgba(0,0,0,0.66); }
.transparent50 { color: #fff; background-color: rgba(0,0,0,0.5); }
.transparent25 { color: #fff; background-color: rgba(0,0,0,0.25); }

/* Sideways label used on some lists */
.sideways {
    writing-mode: vertical-rl;
    -webkit-transform: rotate(180deg);
    text-align: left;
    vertical-align: bottom;
}

/* Old collapsible blocks (used on some help/admin pages) */
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 0.9375rem;
}
.active, .collapsible:hover { background-color: #555; }
.mycontent { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1; }

/* Old file-picker button styling (kept) */
input[type="file"] { display: none; }
/* …but the shared design-system .file-picker class marks a file input that is
   meant to be VISIBLE and styled (e.g. FilesToSend.aspx, which has no trigger
   label). The bare input[type=file] hide above outweighs shared's
   .file-picker{display:block} on specificity (0,1,1 vs 0,1,0), so re-show it
   here with a selector that beats it. Pages that want the hidden+label pattern
   (ChatUC, ContactUs) use .chat-hidden / a label trigger, not .file-picker. */
input[type="file"].file-picker { display: block; }
input::file-selector-button {
    background-color: var(--color-accent);
    color: #fff;
    border: 0 solid var(--color-accent);
    width: auto;
    min-width: 40px;
    height: 28px;
    font-size: 0.8125rem;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    box-sizing: content-box;
    text-decoration: none;
    font-family: var(--font-family);
    font-weight: bold;
    text-align: center;
    transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
    text-transform: uppercase;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
    margin-right: 4px;
    margin-bottom: 4px;
}

/* Legacy "title" id used at top of Site.Master (kept until pages migrate) */
.title { display: none; }

/* span class="nobr" used in many older pages */
span.nobr { white-space: nowrap; }


/* ── Login page (mirrors PacklistPRO Login.aspx layout) ─────────── */


/* Tips area sits ABOVE the login card; matches its width so the right-aligned
   Ⓘ trigger lines up with the card's right edge. The Tips card itself is
   visually distinct from the login card (lighter background, narrower margin)
   so the user's eye lands on the login form first. */
.login-tips-panel { margin: 0 0 0.75rem; }

/* Password visibility toggle */

/* Links row below Login button */

/* IP address display under the Login button — small muted note with a blank
   line of space above so it sits clearly below the button rather than crowding
   into it. */

/* Forgot-Login layout (matches login card width) */
.forgot-card     { max-width: 480px; margin: 0 auto; }
.forgot-back-row { margin-top: 1rem; }

/* Join wizard (Join1-Join4) — consistent step-card layout */
.join-row.three   .form-group { flex: 1 1 calc(33% - 0.5rem); }
.join-actions-back { margin-top: 1rem; }
.account-created-card { max-width: 560px; margin: 1rem auto; text-align: center; }
.account-created-next { margin-top: 1rem; }
.account-created-steps { text-align: left; margin: 1rem auto 0; max-width: 480px; padding-left: 1.25rem; }
.account-created-steps li { margin-bottom: 0.65rem; line-height: 1.4; }
.account-created-steps li:last-child { margin-bottom: 0; }

/* Me.aspx "Get started" onboarding checklist — shown only when the user has
   missing profile bits (no photo, no bio, no interests, etc.). Sits above
   the main me-actions button stack. */
.me-getstarted { border-left: 4px solid var(--color-accent, #00B0F0); }
.me-getstarted-heading { margin-top: 0; }
.me-getstarted-items { margin: 0.5rem 0 0 1.25rem; padding: 0; }
.me-getstarted-items li { margin-bottom: 0.5rem; line-height: 1.4; }
.me-getstarted-items li:last-child { margin-bottom: 0; }

/* Dashboard "Where are you right now?" — View/Edit + Add New Place buttons
   under the place dropdown (now buttons, not links → lay them out in a row). */
.dash-place-actions {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* "＋ Add a Place" action under the check-in badge's "Still here?" Place picker. */
.here-modal-place-actions {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* "Where are you now?" check-in modal — the form (place picker + comments + up to 4
   photos) can outgrow the viewport on desktop, so cap its height and let the box
   scroll instead of pushing the action buttons off-screen. (Mobile already scrolls
   via the ≤640px .modal-box rule.) */
.here-modal-box {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

/* Add Photos + Clear + I'm Here share one row; the Clear/I'm Here pair is pushed to
   the right edge so the primary actions stay grouped at the end of the line. */
.here-photo-actionrow {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* Photos header: "＋ Add Photos (up to 4)" then "× Clear Check-in & Photos", side by side
   above the thumbnail strip. flex-wrap so the Clear button drops to its own line on a
   narrow phone instead of squashing either label. */
.here-photos-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.here-photos-head .input-label { margin-bottom: 0; }
/* Photos is the last field before the "× Clear Check-in" row; drop its bottom
   margin so it doesn't stack with the clear-row's margin-top into a blank line. */
#herePhotosGroup { margin-bottom: 0; }
/* Footer holds the "(updated: …)" stamp (pushed left via its inline margin-right:auto)
   and the single primary "✓ Save" button on the right. */
.here-modal-foot { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Keep Close (left) and Save (right) small and side-by-side on one line, even on
   phones where the generic .modal-footer rule would otherwise stretch each button
   to full width and stack them. */
.modal-footer.here-modal-foot .button { flex: 0 0 auto; }
/* Clear All + Close sit left; Save is the primary action, pushed to the right edge. */
.here-modal-foot .button.save { margin-left: auto; }

/* ── Email-verification nudge modal (Site.Master #email-verify-modal) ──────────
   Reuses the shared .modal-overlay/.modal-box + .post-login-close shell; these
   rules just center the envelope glyph/title and space the inline status line. */
.email-verify-box { max-width: 460px; text-align: center; }
.email-verify-box .modal-title { text-align: center; }
.email-verify-box p { margin: 0 0 0.75rem; }
.email-verify-icon { font-size: 2.6rem; line-height: 1; margin: 0.25rem 0 0.6rem; }
.email-verify-status { margin: 0.75rem 0 0; text-align: left; }
.email-verify-box .modal-footer { justify-content: center; }

/* Collapsible Status / Place sections in the "Where are you now?" popup — keeps the
   modal tidy: both collapsed by default, Status on top. */
.here-section { border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 0.6rem; overflow: hidden; }
.here-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.75rem; font-weight: var(--font-weight-bold); background: var(--color-surface-2, rgba(127,127,127,0.06)); }
.here-section > summary::-webkit-details-marker { display: none; }
.here-section > summary::after { content: '▾'; margin-left: auto; opacity: 0.55; transition: transform 0.15s ease; }
.here-section[open] > summary::after { transform: rotate(180deg); }
.here-section-title { white-space: nowrap; flex: 0 0 auto; }
.here-section-sub { font-weight: var(--font-weight-normal); font-size: var(--font-size-xs); opacity: 0.7; }
/* Current status / place echoed in a collapsed section header (visible while collapsed). */
.here-section-current { opacity: 0.9; font-style: italic; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Time range under the status/place name in a section header. */
.here-section-time { display: block; font-style: normal; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.here-section-body { padding: 0.5rem 0.75rem 0.75rem; }
.here-section-body > .form-group:first-child { margin-top: 0; }
/* "Clear my check-in" secondary link inside the Place section. */
.here-clear-link { display: inline-block; margin-top: 0.4rem; color: var(--color-danger, #c0392b); }
/* Bottom-left "× Clear" button row inside the Status section. (The Place section's own
   clear row went away 2026-07-26 — its button moved up beside "＋ Add Photos".) */
.here-section-clearrow { display: flex; justify-content: flex-start; margin-top: 0.25rem; }
#herePhotosGroup { margin-bottom: 0.25rem; }
#herePhotoStrip:empty, #herePhotoHint:empty { margin: 0; }

/* Add/View/Edit Place modal (#placeModal) — the form is taller than the
   session/here modals, so cap it to the viewport and let it scroll instead of
   pushing the footer buttons off-screen. Reuses the shared .modal-overlay/
   .modal-box shell; this only widens it a touch and adds the scroll. */
.place-modal-box {
    max-width: 540px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.place-modal-box .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--color-bg-card);
    padding-top: 0.75rem;
    margin-top: 1rem;
}

/* Popular-places ("Where is everyone?") — kill the wide gap above the
   report block (the global hr.hr --section-gap looked like a blank line
   after the list of places). */
#card-popular .dash-report-place { margin-top: 0.25rem; }
#card-popular .dash-report-place .hr { margin: 0.4rem 0; }

/* Popular-places rows: place name + muted meta line (City, State · Map) on the
   left, people-count pill aligned right. */
/* Each row is a <details> panel: the <summary> (place name + count pills) is the
   always-visible clickable header; .pp-detail expands on click. */
.pp-row { display: block; }
summary.pp-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}
summary.pp-summary::-webkit-details-marker { display: none; }
.pp-row[open] > summary.pp-summary { margin-bottom: 0.4rem; }
.pp-detail { min-width: 0; padding-left: 0.25rem; }
.pp-actions { margin-top: 0.5rem; }
.pp-main { min-width: 0; }
.pp-name { font-weight: 600; }
.pp-loc { font-weight: 400; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pp-loc::before { content: "·"; margin: 0 0.4rem; }
.pp-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pp-meta a { white-space: nowrap; }
.pp-people { display: block; margin-top: 0.15rem; font-size: var(--font-size-sm); color: var(--color-text); }
.pp-people-label { display: block; font-weight: 600; }
.pp-person { display: block; margin-top: 0.2rem; }
.pp-person-name { display: inline-block; }
.pp-stats { display: block; margin-top: 0.15rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pp-count { flex: 0 0 auto; }

/* Shared check-in photo strip (Dashboard "Where is everyone?", contacts-at-a-place
   popover, PublicProfile). Small square thumbnails that open the full image. */
.checkin-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.25rem 0;
}
.checkin-photo {
    display: block;
    line-height: 0;
}
.checkin-photo img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* Gender-breakdown count pills on each popular-places row: pink = female,
   blue = male, gray = unknown/other. */
.pp-counts { flex: 0 0 auto; display: inline-flex; gap: 0.3rem; white-space: nowrap; }
/* Two-class selectors (0,2,0) so these win over shared .pill background-color,
   which loads after Content/styles.css and would otherwise override them. */
.pp-counts .pp-count-f { background-color: #e84393 !important; color: #fff !important; border-color: #e84393 !important; }
.pp-counts .pp-count-m { background-color: #0984e3 !important; color: #fff !important; border-color: #0984e3 !important; }
.pp-counts .pp-count-u { background-color: #6c757d !important; color: #fff !important; border-color: #6c757d !important; }

/* Check-In card: "Where are you right now?" label on the left, the selected
   place's 🗺 Map link on the right of the same row. */
.dash-place-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.dash-place-label-row .input-label { margin-bottom: 0.25rem; }
.dash-place-map { white-space: nowrap; }

/* Check In card's single "current place" button + its "(updated: …)" stamp sitting
   right beside it (mirrors ChatUC's "📍 Place:" row). Wraps on narrow screens. */
.dash-place-btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.dash-place-btn-row .qm-place-updated { white-space: nowrap; }

/* Floating "active check-in" badge (Site.Master) — shown site-wide while the user
   has a live check-in. Green = active; amber + faster pulse = about to time out
   (within 30 min of "here until"). Tapping opens the "Still here?" confirm. Sits
   top-LEFT (moved 2026-06-25) to stay clear of LiveChat's bottom composer and the
   OneSignal bell / back-to-top (bottom-right). */
.here-badge {
    position: fixed;
    right: 1rem;
    top: 4.5rem;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 70vw;
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-success, #2e7d32);
    color: #fff;
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}
.here-badge:hover { filter: brightness(1.08); }
.here-badge:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.here-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.here-badge-pin { animation: herePulse 2.4s ease-in-out infinite; }
.here-badge.here-badge-expiring { background: #ffeb00; color: #212121; }
.here-badge.here-badge-expiring:focus-visible { outline-color: #212121; }
.here-badge.here-badge-expiring .here-badge-pin { animation-duration: 0.9s; }
@keyframes herePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
    .here-badge-pin { animation: none; }
}
/* On phones (hamburger-nav mode, <992px) the floating badge moves UP into the
   nav bar, centered horizontally between the brand and the hamburger toggle,
   rather than floating below the header on the right. Capped narrower (50vw)
   so a long place name ellipsizes before it can crowd the brand/toggle. */
@media (max-width: 991px) {
    .here-badge {
        top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 50vw;
        padding: 0.35rem 0.7rem;
    }
}

/* ── Contacts-at-a-Place: notification-bar pill + shared popover ──
   Surfaces the viewer's MUTUAL contacts who are currently checked in somewhere
   (powered by ChatBarStatus.ashx). The notification-bar 📍 pill opens the popover.
   (The floating 👋 badge that also opened it was removed 2026-06-25.) */
.chatbar-places {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    font-weight: 700;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}
.chatbar-places:hover { background: rgba(255, 255, 255, 0.30); }
.chatbar-places .cap-pin { font-size: 0.95em; }
.chatbar-places .cap-count { min-width: 0.8em; text-align: center; }

/* Popover anchored top-left, just under the check-in badge (the 📍 pill that opens
   it lives in the notification bar near the top of the page). */
.cap-popover {
    position: fixed;
    left: 1rem;
    top: 8rem;
    z-index: 1600;
    width: min(22rem, 92vw);
    max-height: 60vh;
    overflow-y: auto;
    background: var(--color-bg-card, #fff);
    color: var(--color-text, #222);
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg);
    padding: 0.6rem 0.75rem;
}
.cap-popover-head {
    font-weight: 700;
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border, #eee);
}
.cap-popover-head .note { font-weight: 400; }
/* Tight stacked rows: place line, status line, photos, then a bottom action row.
   No blank gaps between the place and status lines. */
.cap-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border-subtle, #f0f0f0);
    font-size: var(--font-size-sm);
}
.cap-item:last-child { border-bottom: 0; }
.cap-item .cap-line { line-height: 1.25; }
.cap-item .cap-who { font-weight: 600; }
.cap-item .cap-where { color: var(--color-text-muted, #666); }
.cap-item .cap-when { color: var(--color-text-muted, #999); }
.cap-item .cap-status { font-style: italic; color: var(--color-text-muted, #666); line-height: 1.25; }
/* Map + Google Place links pinned to the bottom of each item, on one row. */
.cap-item .cap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.15rem; }
.cap-item .cap-actions a.link { white-space: nowrap; }

/* .my-sp-line removed 2026-08-01 — it styled the read-only status/place summary in the
   ChatUC OPTIONS "Status / Check-in" card, and that whole card was deleted. */

/* Check-In card tweaks:
   • Comments box matches the dropdowns' full width (the shared
     .form-group .textbox 480px desktop cap otherwise made it narrower).
   • Pull the "I'm Here Now" button up so there's no empty gap above it. */
#card-checkin .form-group textarea.textbox { max-width: none; }
#card-checkin .form-group:last-of-type { margin-bottom: 0.35rem; }

/* GPS check-in — "Use my location" detect button, status, and result list */
.dash-detect {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.dash-detect #detectStatus { margin: 0; }
#btnDetectLocation.is-busy { opacity: 0.6; cursor: progress; }

.dash-detect-results {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* The detect radius is ~1,970 ft, so a dense block can return up to 15 hits.
       Cap the list and scroll it so "pin my exact spot" and ✓ Save stay reachable
       without a long scroll past the results. */
    max-height: 44vh;
    overflow-y: auto;
}
.dash-detect-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.65rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.dash-detect-item:hover,
.dash-detect-item:focus-visible {
    background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
    border-color: var(--color-primary, #4a90d9);
    outline: none;
}
.dash-detect-name { font-weight: 600; }
.dash-detect-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Section heading inside a results list ("On qMEET" / "From Google" in the
   check-in popup's place search). Not a .dash-detect-item — it isn't tappable. */
.dash-detect-group {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.25rem;
}
.dash-detect-group:first-child { margin-top: 0; }

/* The place-search row in #hereModal. Layout comes from the shared .search-row
   (flex + wrap); this only spaces it off the detect results above it. */
.here-place-search { margin-top: 0.6rem; }

/* Actionable help shown when geolocation is denied/unavailable */
.dash-detect-help {
    padding: 0.6rem 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-warning, #e0a800);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm);
}
.dash-detect-help ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }
.dash-detect-help li { margin-bottom: 0.3rem; }
.dash-detect-retry { margin-top: 0.1rem; }

/* "Pin my exact location instead" — the inline GPS-coordinate check-in
   form under the detect results in Site.Master's #hereModal. */
.here-exact { margin: 0.5rem 0 0.25rem; }
.here-exact-form {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}
.here-exact-form .input-label { margin-top: 0.4rem; }
.here-exact-form .input-label:first-child { margin-top: 0; }
.here-exact-acc { display: block; margin-bottom: 0.4rem; }
.here-exact-acc:empty { display: none; margin: 0; }
.here-exact-acc.ok   { color: var(--color-success, #2e7d32); }
.here-exact-acc.warn { color: var(--color-warning, #b26a00); }
.here-exact-form .textbox,
.here-exact-form .dropdown { width: 100%; }
.here-exact-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* "Where are you now?" check-in photos (Site.Master #hereModal). Up to 4 thumbnails
   with a remove (x) overlay; the file input itself is visually hidden behind the
   "+ Add Photos" button. */
.qm-placepics-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.qm-placepics-strip:empty { margin-bottom: 0; }
.qm-placepics-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
}
.qm-placepics-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.qm-placepics-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.qm-placepics-del:hover,
.qm-placepics-del:focus-visible { background: var(--color-danger, #c0392b); outline: none; }
#herePhotoHint { margin-left: 0.5rem; }

/* Search pages (EventSearch / GroupSearch / MemberSearch) */
.search-toggle-row     { margin-bottom: 0.5rem; }
.search-card           { margin-top: 0.5rem; }
.search-footer-actions { margin-top: 1rem; }
.input-clearable-grow  { flex: 1 1 200px; }
.search-results-count  { display: block; margin: 0.75rem 0 0.25rem; }

/* EventSearch "Hide Categories" preference — a wrapping list of category
   checkboxes inside a <details>. RepeatLayout="UnorderedList" keeps each
   checkbox glued to its label inside one <li> chip; the <ul> flex-wraps. */
.hide-cat-details           { margin-top: 0.25rem; }
.hide-cat-summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
    user-select: none;
    color: var(--color-primary, #0090C8);   /* link-like, so it reads as clickable */
    list-style: none;                        /* drop the default ▸ marker (most browsers) */
}
.hide-cat-summary::-webkit-details-marker { display: none; }      /* …and on WebKit/Blink */
.hide-cat-summary:hover .hide-cat-summary-text { text-decoration: underline; }
.hide-cat-caret {
    display: inline-block;
    font-size: 0.8em;
    transition: transform 0.15s ease;
}
.hide-cat-details[open] .hide-cat-caret { transform: rotate(90deg); }
.hide-cat-hint              { font-style: italic; font-weight: 400; }
.hide-cat-details[open] .hide-cat-hint { display: none; }   /* hint only while collapsed */
.hide-cat-count             { margin-left: 0; font-weight: 400; }
ul.hide-cat-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.85rem;
}
.hide-cat-list li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
}
.hide-cat-list input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    accent-color: var(--color-primary, #0090C8);
    cursor: pointer;
}
.hide-cat-list label { cursor: pointer; white-space: nowrap; }

/* Generic vertical CheckBoxList (RepeatLayout="Flow") — used by the RSVP
   "Can't make it? Why not?" reasons. Each input+label pair stacks with a
   comfortable tap target. */
/* CheckBoxList RepeatLayout="Flow" renders each item as sibling <input> + <label>
   with a <br> between items, so a flex column would break the box onto its own line
   above its text. Keep it block-flow: each input sits inline with its own label. */
/* Compact note textareas (the RSVP free-text notes): opt out of the tall default
   textarea min-height (styles_shared sets ~6.25rem) so they start about one line
   and grow only as the member types, via the data-autoresize script. */
textarea.textbox.textbox-compact { min-height: 2.4rem; }

.checkbox-list { display: block; margin: 0.35rem 0 0; }
.checkbox-list label { display: inline; align-items: center; cursor: pointer; line-height: 2; }
.checkbox-list input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    margin-right: 0.45rem;
    vertical-align: middle;
    accent-color: var(--color-primary, #0090C8);
    cursor: pointer;
}
/* EventSearch2: the Hide Categories block sits full-width below the filter grid. */
.es2-hide-cats { margin-top: 0.25rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border, #e0e0e0); }

/* EventSearch "Manage Keyword Lists" — per-user named keyword lists, each edited as a
   Name + Keywords row. The disclosure chrome mirrors the Hide Categories block above. */
.es2-kw-lists { margin-top: 0.25rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border, #e0e0e0); }
.kw-list-details { margin-top: 0.25rem; }
.kw-list-summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
    user-select: none;
    color: var(--color-primary, #0090C8);   /* link-like, so it reads as clickable */
    list-style: none;
}
.kw-list-summary::-webkit-details-marker { display: none; }
.kw-list-summary:hover .kw-list-summary-text { text-decoration: underline; }
.kw-list-caret { display: inline-block; font-size: 0.8em; transition: transform 0.15s ease; }
.kw-list-details[open] .kw-list-caret { transform: rotate(90deg); }
.kw-list-hint { font-style: italic; font-weight: 400; }
.kw-list-details[open] .kw-list-hint { display: none; }   /* hint only while collapsed */
.kw-list-count { margin-left: 0; font-weight: 400; }

/* Editor: a vertical stack of bordered list "cards", each = Name (+ × remove) + Keywords. */
.kw-editor { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.5rem 0; }
.kw-row {
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius, 8px);
    background: var(--color-bg, #fff);
    padding: 0.55rem 0.6rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.kw-field { display: flex; flex-direction: column; gap: 0.2rem; }
.kw-field-label { margin: 0; font-weight: 600; }
.kw-row .textbox { width: 100%; }
.kw-name-row { display: flex; align-items: center; gap: 0.4rem; }
.kw-name-row .kw-name { flex: 1 1 auto; min-width: 0; }
.kw-remove {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-dim, #777);
    font-size: 1.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kw-remove:hover { border-color: var(--color-danger, #c0392b); color: var(--color-danger, #c0392b); }
.kw-add { margin-top: 0.25rem; }
.kw-empty { margin: 0.4rem 0; }

/* Location row(s) — multiple city/state/country triples on EventSearch */
.loc-rows { margin-bottom: 0.25rem; }
.loc-row {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}
/* Each .loc-* input now sits inside an .input-clearable wrapper (in-field × clear
   button), so the row's flex sizing rides on the wrappers; the input fills its wrapper. */
.loc-row .loc-field-city    { flex: 2; min-width: 120px; }
.loc-row .loc-field-state   { flex: 1; min-width: 80px; }
.loc-row .loc-field-country { flex: 1; min-width: 90px; }
.loc-row .input-clearable .textbox { width: 100%; min-width: 0; }

/* SimilarEvents (under construction) */
.similar-events-card { max-width: 560px; margin: 0 auto; }

/* GroupDetails — join/leave row beneath the group card */
.group-join-actions { margin-top: 0.5rem; }

/* ContactUs host cards (page wraps the ContactUs.ascx control) */
.contactus-card { max-width: 800px; }

/* ContactUs file picker — wraps a visually-hidden <input type="file"> with a
   labeled button so the upload UI is obvious. JS in ContactUs.ascx updates
   the file-count span. Mirrors PacklistPRO. */

/* Invite.ascx layout (QR + recipient form) */
.invite-card      { max-width: 480px; margin: 0 auto; text-align: center; }
/* .invite-qr + .invite-link-row MOVED 2026-07-28 → Shared/styles_shared.css §43b
   when Invite was unified across all five sites. Do NOT re-add them here:
   styles_shared.css loads AFTER this sheet, so a local copy is out-ranked and
   only drifts. (.invite-recipient stays — it is qMEET-only.) */
.invite-recipient { text-align: left; margin-top: 0.5rem; }

/* FeedbackSent — post-Contact-Us confirmation card */
.feedback-sent-card { max-width: 560px; margin: 1rem auto; text-align: center; }

/* ViewFeedback (admin) — filter column flex sizing */
.viewfeedback-filter { flex: 1 1 200px; margin-bottom: 0; }

/* ShortenURL (admin tool) */
.shorten-url-card { max-width: 640px; margin: 0 auto; }

/* offline.html — PWA offline fallback page */
.offline-card { max-width: 600px; margin: 3rem auto; text-align: center; }

/* About page — feature bullet list (replaces legacy table-based bullets) */
.about-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}
.about-bullets > li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.5rem;
    line-height: var(--line-height);
}
.about-bullets > li::before {
    content: "•";
    position: absolute;
    left: 0.25rem;
    top: 0.35rem;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    font-size: 1.1em;
}
.about-sub {
    margin: 0.4rem 0 0;
    color: var(--color-text-muted);
}
.about-footer { margin-top: 1.25rem; }

/* Status badge — inline state indicator. Used for event/group approval state
   on ManageEvent / ManageGroup, and for membership state on EventDetails.
   Replaces the legacy inline `lbl.BackColor = Color.Red/Yellow/Transparent`
   pattern from code-behind. */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}
.status-badge--pending   { background-color: var(--color-warning); color: #fff; }
.status-badge--rejected  { background-color: var(--color-danger);  color: #fff; }
.status-badge--approved  { background-color: var(--color-success); color: #fff; }
.status-badge--neutral   { background-color: transparent; color: var(--color-text); }

/* Required fields carry no border highlight — the red "*" asterisk
   (.required-star) plus the server-side RequiredFieldValidators are the cue.
   The legacy magenta outline was removed site-wide at the user's request.
   The .required class can stay on inputs harmlessly (no rule targets it). */

/* User profile (User.aspx) — profile-pic + availability layout */
.profile-pic-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.5rem 0;
}
/* Let the file input grow to fit its native "Choose File" button — the fixed 2.5rem
   shared .file-picker height clipped the button's bottom edge (same fix as .pf-uploadrow). */
.profile-pic-row .file-picker {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
}
.profile-pic-preview {
    display: block;
    width: 160px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-top: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Profile photo gallery (MyProfile editor + PublicProfile) — up to 4 photos,
   the first marked Primary. Tiles are square, cover-cropped thumbnails. */
.profile-photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.25rem 0 0.75rem 0;
}
.profile-photo-tile {
    position: relative;
    display: block;
    width: 120px;
}
.profile-photo-tile > a,
a.profile-photo-tile {
    display: block;
}
.profile-photo-tile img {
    display: block;
    width: 120px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.profile-photo-tile.is-primary img {
    border: 2px solid var(--color-primary, #00bcd4);
}
.profile-photo-badge {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary, #00bcd4);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.profile-photo-actions {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
}
.danger-link {
    color: var(--color-danger, #d32f2f);
}
.availability-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
}
.availability-row {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.85rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: var(--color-surface-2, rgba(0, 0, 0, 0.03));
}
.availability-row:nth-child(even) {
    background: var(--color-surface-3, rgba(0, 0, 0, 0.06));
}
.availability-day {
    flex: 0 0 5.5rem;
    font-weight: 600;
}
.availability-windows {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    flex: 1 1 auto;
}
.availability-window {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.availability-to {
    color: var(--color-text-muted, #6c757d);
    font-size: 0.85rem;
}
.availability-grid .availability-time {
    display: inline-block;
    width: 128px;
    min-width: 0;
}

/* ── MyProfile: availability toolbar ─────────────────────────────────────
   Quick-set presets + the second-window toggle. Ships hidden (inert without
   JS) and is un-hidden by the page script. */
.availability-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin: 0.6rem 0 0;
}
.availability-toolbar[hidden] { display: none; }
.availability-toolbar-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, #6c757d);
    margin-right: 0.15rem;
}
/* Most members only ever use one window a day, so the second start/end pair is
   hidden until asked for — that's 14 of the grid's 28 dropdowns. Targeted by
   position rather than a class so the 7 rows' markup stays untouched. */
#availabilityBody.hide-w2 .availability-windows > .availability-window:nth-child(2) {
    display: none;
}

/* ── MyProfile: collapsed-card value preview ─────────────────────────────
   Lets a collapsed card still show what's in it, so collapsing reduces noise
   instead of hiding information. .card-title is already flex/baseline/gap. */
.card-sub {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.card-sub.is-empty {
    font-style: italic;
    opacity: 0.75;
}

/* ── MyProfile: nested optional disclosure (backup email / phone) ─────── */
.profile-subcard {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 8px);
    background: var(--color-surface-2, rgba(0, 0, 0, 0.02));
    margin-top: 0.75rem;
}
.profile-subcard-title {
    cursor: pointer;
    padding: 0.55rem 0.75rem;
    font-weight: var(--font-weight-medium, 500);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    list-style-position: inside;
}
.profile-subcard-title:hover { color: var(--color-accent); }
.profile-subcard[open] .profile-subcard-title {
    border-bottom: 1px solid var(--color-border);
}
.profile-subcard-body { padding: 0.75rem; }

/* ── MyProfile: tier headings ────────────────────────────────────────────
   Two of them split the page: "👁 Shown on your public profile" over the five
   public cards, "🔒 Private to you" over the More-about-me card. Deliberately
   NOT a .card — a card around cards reads as another collapsible level, and
   these are labels for a run of siblings, not containers. */
.profile-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 1.5rem 0 0.6rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal, 400);
}
.profile-section-head:first-child { margin-top: 0.25rem; }
.profile-section-head-t {
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.01em;
}
.profile-section-head-s {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-normal, 400);
}
/* Sub-heading INSIDE a card, grouping form-groups (e.g. "✉ Email & phone" and
   "🏠 Street address" inside More about me). Lighter than a .card-title so the
   card's own summary still reads as the top of that block. */
.profile-group-head {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold, 700);
    margin: 1.1rem 0 0.35rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}
.profile-group-head:first-of-type { margin-top: 0.6rem; }

/* ── MyProfile: profile-completeness meter ───────────────────────────────
   Counts only what appears on the PUBLIC profile, and only the items this
   member can actually fill in (see the markup comment on #up-strength).
   Scored client-side; nothing here is persisted. Styling is deliberately
   neutral: one accent fill, no red "incomplete" state, no grade — the strip
   reports what has been added, it does not judge what hasn't. */
.profile-strength {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius, 8px);
    background: var(--color-surface-2, rgba(0, 0, 0, 0.02));
    padding: 0.7rem 0.85rem;
    margin: 0 0 0.85rem;
}
.profile-strength[hidden] { display: none; }
.profile-strength-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.profile-strength-label { font-weight: var(--font-weight-bold, 700); }
.profile-strength-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}
.profile-strength-meter {
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
    margin: 0.45rem 0 0;
}
.profile-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--color-accent);
    transition: width 0.25s ease;
}
.profile-strength.is-complete { border-left-color: var(--color-success, #2e7d32); }
.profile-strength.is-complete .profile-strength-fill { background: var(--color-success, #2e7d32); }
.profile-strength.is-complete .profile-strength-count { color: var(--color-success, #2e7d32); }
.profile-strength-todo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}
.profile-strength-todo:empty { display: none; }
.profile-strength-done {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, #6c757d);
}
/* The anti-shame line: says the remaining items are optional and that a blank
   field simply doesn't appear. Empty (and therefore collapsed) once nothing is
   outstanding — see renderStrength. */
.profile-strength-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, #6c757d);
    margin: 0.5rem 0 0;
}
.profile-strength-note:empty { display: none; }
/* Display Name and City block the save outright, so their chips are marked as
   required rather than sitting in the same visual class as the four genuinely
   optional ones. A border, not a red fill — this is a label, not an error. */
.profile-strength-chip.is-required {
    border-color: var(--color-accent);
    font-weight: var(--font-weight-medium, 500);
}
@media (prefers-reduced-motion: reduce) {
    .profile-strength-fill { transition: none; }
}

/* ManageEvent recurring-days — 7 day-of-week checkboxes arranged as a wrap row */
.recurring-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.25rem;
}
.recurring-days .checkbox {
    flex: 0 0 auto;
}

/* EditEvent 📋 Event / 🤝 Meetup — the field groups that belong to only one type, plus
   the "you are changing the type" panel. All three are toggled by the `hidden` ATTRIBUTE
   (server on first render, page script on an in-page switch) rather than by .Visible, so
   the client can reveal them without a postback.

   🔴 THESE [hidden] GUARDS ARE LOAD-BEARING, NOT TIDINESS. A class that sets `display`
   OUTRANKS the user-agent's `[hidden] { display: none }` — .alert-panel sets display:block,
   so without the rule below the change-warning renders as an empty amber bar on every single
   page load. Same reason ~10 other components in this file carry the identical guard. */
.kind-group[hidden],
.rsvp-group[hidden],
.alert-panel[hidden],
.note[hidden] { display: none !important; }

/* .rsvp-group marks EditEvent's four RSVP fields (deadline / approval / max members / max
   guests). ⚠ NOTHING HIDES THEM ANY MORE — the organizer gate that did (ApplyRsvpFieldsGate)
   was deleted 2026-08-05 on the owner's call, so the [hidden] guard above is currently
   unexercised for this class. Kept, along with the class itself, because the guard is
   free and its absence is the failure mode: a class that sets `display` outranks the
   user-agent's [hidden] rule, so re-adding a gate without re-adding the guard renders the
   "hidden" fields anyway.
   A SEPARATE class from .kind-group on purpose: .kind-group means "varies by 📋 Event
   vs 🤝 Meetup" and is the list the client-side type switch drives. These four do NOT
   vary by type. Reusing the name would invite someone to add them to KindGroups() and hand
   them to the client switch. */

/* EditEvent "Repeats" — the per-frequency sub-panel revealed under the Repeats
   dropdown (weekly interval + day boxes, or the monthly day-vs-weekday choice).
   Indented with a left rule so it reads as "settings for the choice above"
   rather than as more top-level fields. */
.repeat-sub {
    margin-top: 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--color-border, #d8d8d8);
}
/* Plain-English echo of the rule that will actually be stored. Deliberately
   quiet — it is confirmation, not an instruction. */
.repeat-summary {
    display: block;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Interests.aspx — back/forward pagination row above the interest panels */
.interests-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}
.interests-pagination .button { min-width: 4rem; }
.interests-pagination__index { width: 4rem !important; text-align: center; }
.interests-pagination__rows  { width: 5rem !important; text-align: center; }

/* Subscribe (push notifications) — state-card layout */
.subscribe-card           { max-width: 480px; margin: 0 auto; text-align: center; }
.subscribe-state-hidden   { display: none; }
.subscribe-loading        { color: var(--color-text-light); }
.subscribe-icon           { font-size: 2.25rem; font-weight: bold; }
.subscribe-icon-ok        { color: var(--color-success); }
.subscribe-icon-err       { color: var(--color-danger); }
.subscribe-headline       { font-weight: bold; margin: 0.75rem 0 0.4rem; }
.subscribe-headline-ok    { color: var(--color-success); }
.subscribe-headline-err   { color: var(--color-danger); }
.subscribe-btn            { min-width: 200px; }
.subscribe-result         { display: block; margin-top: 0.75rem; min-height: 1.2em; }
.subscribe-unsubscribe-row { margin-top: 1.25rem; }
.subscribe-unsubscribe    { font-size: var(--font-size-sm); color: var(--color-text-light); }

/* Subscription-details card on the "subscribed" state — small readout so
   the user (or support staff) can verify the OneSignal wire-up is sane
   without dropping into devtools. Populated by JS on SDK ready. */
.subscribe-details-table td { padding: 0.2rem 0.4rem; vertical-align: top; }
.subscribe-denied-blurb   { margin-bottom: 1rem; }
.subscribe-denied-list {
    text-align: left;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    margin: 0 auto 1.25rem;
    max-width: 360px;
    line-height: 1.8;
}
.subscribe-prompt         { margin: 0.75rem 0 1.25rem; }

/* ContactUs.ascx — "prove you're human" captcha block */
.captcha-card {
    background: var(--color-bg);
    text-align: center;
    margin-top: 1rem;
}
.captcha-prompt   { margin-bottom: 0.5rem; }
.captcha-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.captcha-problem  { margin: 0; color: var(--color-accent); }
.captcha-answer   { max-width: 80px; display: inline-block; }

/* PublicProfile — action row + interest legend */
.profile-actions    { margin-top: 0.5rem; }
.interest-legend    { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* PopularInterests — ranked table layout */
.popular-interests-table {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-collapse: collapse;
}
.popular-interests-table td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.popular-interests-count {
    text-align: right;
    color: var(--color-accent-dark);
    font-weight: var(--font-weight-bold);
    width: 4rem;
}

/* Client-side list filter (PopularInterests, Updates) — centered above the list. */
.popular-interests-filter,
.updates-filter {
    max-width: 480px;
    margin: 0 auto 0.75rem;
}

/* ManageEventMembers — bulk-add results readout */
.bulk-add-results { display: block; margin-top: 0.5rem; }

/* ManageEvent / ManageGroup — pinned save bar at bottom of the page */
.sticky-save-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    z-index: 100;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Save error/warning mirrored into the sticky bar (BasePage populates
   pnlSaveMessage on EditEvent/EditGroup). flex-basis:100% breaks it onto its own
   row ABOVE the buttons so it's always on-screen — the top pnlMessage scrolls
   away on these long forms and a save error there was being missed. */
.sticky-save-bar .alert-panel {
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 0.4rem 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    text-align: center;
}

/* Brief attention flash applied by site.js initScrollToServerMessage when a
   validation / save error banner is scrolled into view after a failed Save —
   so the user's eye lands on the just-surfaced message (EditEvent/EditGroup). */
.alert-panel.alert-flash { animation: alertFlash 0.7s ease-in-out 2; }
@keyframes alertFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .alert-panel.alert-flash { animation: none; }
}

/* MemberSearch — age-range row */
.member-search-card { max-width: 560px; margin: 0 auto; }
.member-age-row     { display: flex; align-items: center; gap: 0.5rem; }
.member-age-box     { width: 5rem; text-align: center; }

/* "Me" account-hub: stacked button list */
.me-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.me-actions .button { width: 100%; text-align: left; }

/* ── EditEvent: the 🛡️ Admin only card ──────────────────────────────────────
   ✓ Approve / × Unapprove were two IsAdmin()-gated buttons sitting in a row of eight
   in EVENT ACTIONS. A member never saw them, so nothing LEAKED — but an admin could
   not tell which buttons were theirs alone and which the organizer had too. Their own
   titled card answers that once for everything inside it (2026-08-06, owner).

   Amber, not red: .admin2-card-danger already owns the red left edge for DESTRUCTIVE
   admin cards, and approval is not destructive — it is a different AUTHORITY. Reusing
   red here would say "danger" about the ✓ Approve button, which is the safe one.
   Matching the 4px left-edge shape keeps it legible as a sibling of that convention.

   The card carries .main-card, so it already has the box; these two rules only add the
   marker. Visibility is server-side (Panel Visible=False unless SecurityHelper.IsAdmin),
   so the colour is a LABEL for the admin, never the gate.

   🔴 QUALIFIED `.main-card.ee-admin-card`, NOT a bare `.ee-admin-card` — and it has to be.
   Bundle.config loads Shared/styles_shared.css AFTER this file, and `.main-card` there sets
   the `border` SHORTHAND, which resets border-left. At equal specificity (0,1,0) the later
   sheet wins, so the bare selector silently did nothing — measured: computed border-left
   came back as the default rgb(85,85,85) 0.67px, not the amber 4px. Adding .main-card makes
   it (0,2,0) and the load order stops mattering. The .card-title rule below is already
   (0,2,0) against a bare `.card-title`, so it was fine as written. */
.main-card.ee-admin-card { border-left: 4px solid var(--color-warning); }
.ee-admin-card > .card-title { border-bottom-color: var(--color-warning); }

/* 🤝 Create Meetup (CreateMeetup.ascx) — the trigger + its explain-first panel.
   The control sits INSIDE .me-actions on EditEvent so its trigger lines up with the
   other stacked actions, which means the two rules above also reach the buttons in
   the explain panel. Those are a normal centered form-actions pair, not stacked list
   items, so undo the inherited stretch for them specifically. */
.meetup-cta { display: block; }
/* Full width in BOTH hosts. On EditEvent .me-actions would do this anyway; on
   EventDetails the control sits below the rail's 2-column .ed3-rail-actions grid
   (deliberately outside it — a half-width grid cell is no place for a panel of
   explanatory text), where nothing else would stretch it.

   justify-content is what actually left-aligns the label, NOT text-align. .button is
   display:inline-flex + justify-content:center, so a real <button>'s text becomes an
   anonymous FLEX ITEM and text-align never reaches it. The neighbouring actions get
   away with .me-actions' text-align:left only because they are <input type="submit">,
   whose label is the element's own value rather than a child box. Both hosts stack
   left-aligned buttons above this one (.me-actions on EditEvent, .ed3-rail-actions —
   which sets flex-start for exactly this reason — on EventDetails), so this matches
   its neighbours in both places. */
.meetup-cta .meetup-toggle { width: 100%; justify-content: flex-start; text-align: left; }
.meetup-explain { text-align: left; }
.meetup-explain ul { margin: 0.5rem 0 0.75rem 1.1rem; padding: 0; }
.meetup-explain li { margin-bottom: 0.35rem; }
.me-actions .meetup-explain .button { width: auto; text-align: center; }
.meetup-error { display: block; margin-top: 0.5rem; color: var(--color-danger, #c62828); }

/* ── 🤝 Create Meetup or Duplicate — the explain-first POPUP ──────────────────
   Reuses the shared .modal-overlay/.modal-box shell. Two shared-CSS defaults need
   overriding for this particular use:

   1. .modal-box is max-width:480px, sized for a one-line confirm ("Delete this?").
      This dialog carries a real explanation plus the link checkbox and its two
      alternative descriptions, which 480px squeezes into an unreadable column.
   2. A long explanation on a short screen must scroll INSIDE the box; without
      max-height the footer buttons fall off the bottom of the viewport with no
      way to reach Cancel. 85vh leaves the backdrop visibly clickable, which is
      itself one of the ways out.

   ⚠ .modal-overlay is position:fixed, so this renders against the VIEWPORT and is
   not clipped by the <details> card it sits inside. Don't give any ancestor a
   transform/filter/will-change — that would create a containing block and drop
   the popup back inside the card.

   (A twin .dupevent-* block lived here for a few hours on 2026-08-02, for the
   separate 📄 Duplicate Event popup. Merged away with that button.) */
.meetup-modal {
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    text-align: left;
}
.meetup-modal p { margin: 0 0 0.6rem 0; }

/* 🔗 The link checkbox — the ONE choice in this dialog, so it is deliberately the
   most prominent thing below the body copy rather than another line of prose.
   The two notes are mutually exclusive; the control's script toggles [hidden].
   ⚠ [hidden] needs no display rule here: .alert-panel sets display:block on the
   WRAPPER, not on these <p>s, so the UA stylesheet's [hidden]{display:none} wins
   for them. (That is exactly the trap the retired .meetup-explain[hidden] rule
   existed for — don't assume it generalises.) */
/* The Actions-rail trigger (EventDetails' second door to the same dialog). Sits below
   the 2-column .ed3-rail-actions grid and owns a full-width row, like .meetup-cta does
   in its own host. justify-content, NOT text-align, is what left-aligns the label —
   .button is inline-flex, so a real <button>'s text is an anonymous flex item that
   text-align never reaches (see the long note on .meetup-cta .meetup-toggle above). */
.copyevent-cta { display: block; margin-top: 0.5rem; }
.copyevent-cta > .button { width: 100%; justify-content: flex-start; text-align: left; }

.meetup-linkbox { margin-top: 1rem; }
.meetup-linkbox .checkbox { font-size: var(--font-size-base); }

/* 🔴 Two-class selector ON PURPOSE — do not simplify to `.meetup-linkbox-note`.
   These <p>s also carry `.note`, which sets a MUTED GREY (--color-text-muted) and
   italics. `.note` lives in Shared/styles_shared.css, which Bundle.config loads
   AFTER Content/styles.css — so at equal specificity (0,1,0) the SHARED rule wins
   on source order and the text stays grey. `.meetup-linkbox .meetup-linkbox-note`
   is (0,2,0) and beats it.

   `color: inherit` rather than a literal: .alert-panel.info fixes its own text to
   #111 on a solid #00B0F0 background in BOTH themes, so inheriting tracks the
   panel if that ever changes — the same reasoning as the `.alert-panel .button
   .transparent { color: currentColor }` rule in the shared sheet. Italics dropped
   because this is a full paragraph explaining the choice, not an aside. */
.meetup-linkbox .meetup-linkbox-note {
    margin: 0.5rem 0 0 0;
    color: inherit;
    font-style: normal;
}

/* qMEET logo wordmark — used by Login, Join, etc. */
.logo-wordmark {
    text-align: center;
    margin: 0.25rem 0 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
}
.logo-q     { color: var(--color-accent); }
.logo-meet  { color: var(--color-text); }
[data-theme="dark"] .logo-meet { color: var(--color-text); }
/* The wordmark is now wrapped in an anchor so it's clickable on Login/Join.
   Strip the default text-decoration and let the hover ring carry feedback. */
.logo-link:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 4px; border-radius: 4px; }

/* Admin.aspx — vertical button stack with logical groups.
   Each button stretches full-width; gaps are uniform rather than the legacy
   `Width="98%"` + `<br /><br />` pattern. */
.admin-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.admin-action-btn { width: 100%; text-align: left; }

/* ── Admin2.aspx — PacklistPRO-look admin console ───────────────────────────
   Collapsible cards reuse .dash2-card (chevron, count badge, toolbar); queue
   items reuse .result-card (state-colored left border). This block only adds
   the pending-review stat strip, the queue-item anchor reset, the action grid,
   and the destructive-card accent. */
.admin2-quicknav { margin: 0 0 1.25rem; }

/* Pending-review stat strip */
.admin2-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
}
.admin2-stat {
    flex: 1 1 7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow var(--transition-fast, .15s) ease, transform var(--transition-fast, .15s) ease;
}
.admin2-stat:hover,
.admin2-stat:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}
.admin2-stat-icon { font-size: 1.15rem; line-height: 1; }
.admin2-stat-num {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.admin2-stat-num.is-zero { color: var(--color-text-light); }
.admin2-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Queue toolbar: dropdown on the left, search row grows to fill */
.admin2-queue-toolbar { justify-content: space-between; }
.admin2-queue-search { flex: 1 1 16rem; margin: 0; }

/* Queue items — built on .result-card, but the whole card is one anchor */
a.admin2-qitem {
    display: block;
    text-decoration: none;
    transition: box-shadow var(--transition-fast, .15s) ease, transform var(--transition-fast, .15s) ease;
}
a.admin2-qitem:hover,
a.admin2-qitem:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.admin2-queue-list { margin-top: 0.25rem; }

/* Action grid — button + one-line description per row */
.admin2-action-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.admin2-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.admin2-action .button { margin: 0; }
.admin2-action-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Destructive card — red left edge + red title so it reads as dangerous */
.admin2-card-danger { border-left: 4px solid var(--color-danger); }
.admin2-card-danger > summary.card-title .dash2-card-name { color: var(--color-danger); }

/* Approval cards sit at the top when an item is selected for review */
.admin2-approve { margin-bottom: var(--section-gap, 1.5rem); }

/* Updates change-log — simple dated entries */
.updates-card  { max-width: 760px; margin: 0 auto; }
.updates-list  { list-style: none; margin: 0; padding: 0; }
.updates-item  {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--color-border);
}
.updates-item:last-child { border-bottom: 0; }
.updates-date  {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-dark);
}
.updates-body  { flex: 1 1 auto; color: var(--color-text); }
@media (max-width: 480px) {
    .updates-item { flex-direction: column; gap: 0.15rem; }
    .updates-date { min-width: 0; }
}

/* Troubleshooting.aspx (was Help.aspx until 2026-08-05) — 8-step recovery
   checklist. Numbered list with accent-colored
   markers and a bit of breathing room between steps. Mirrors PacklistPRO. */

/* Changes.aspx — release notes table groupings + pager. Mirrors PacklistPRO. */

/* TypingSpeed.aspx — full-viewport textarea + live WPM readout. Personal scratchpad
   for a small allowlist of UserIDs; the readout uses the standard chars/5 ÷ minutes
   typing-test convention. The `width:100vw + margin-left:calc(50% - 50vw)` trick
   lets the page break out of `.page-wrapper`'s 1200px max-width to fill the viewport
   edge-to-edge without restructuring the master page. */
.typing-speed-page {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0.25rem 0.5rem 0.5rem;
    box-sizing: border-box;
    /* Fill the remaining viewport: viewport height minus nav (~56px) and a small
       footer cushion. Calc fallback in case --nav-height isn't defined. */
    min-height: calc(100vh - var(--nav-height, 56px) - 1rem);
}
.typing-speed-bar      { display: flex; align-items: center; gap: 1rem; padding: 0.25rem 0; flex-wrap: wrap; }
.typing-speed-stat     { display: flex; align-items: baseline; gap: 0.5rem; }
.typing-speed-value    { font-size: 3rem; font-weight: 700; color: var(--color-accent); line-height: 1; min-width: 4ch; }
.typing-speed-label    { font-size: 1rem; color: var(--color-text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.typing-speed-meta     { font-size: 0.95rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Reset button anchored to the upper-right corner of the page so it stays out
   of the WPM/meta cluster regardless of viewport width. */
.typing-speed-reset    { position: absolute; top: 0.25rem; right: 0.5rem; z-index: 2; }
.typing-speed-textarea {
    flex: 1 1 auto;
    width: 100%;
    /* Fill the rest of the viewport below the bar. */
    min-height: calc(100vh - var(--nav-height, 56px) - 6rem);
    font-size: 1.75rem;
    line-height: 1.55;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-bg, #fff);
    color: var(--color-text);
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
}
.typing-speed-textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ── TypingSpeed2.aspx — PLP-look typing test ──────────────────────────────
   Redesign of TypingSpeed.aspx. A focused "test" card (passage with live
   per-character highlighting + stat tiles + results) plus a "free type"
   scratchpad mode that preserves the original behavior. Every color comes
   from a design token, so dark mode falls out of the cascade for free. */

/* Controls row: mode/limit pills + action buttons. */
.ts2-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}
.ts2-pillgroup {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.ts2-pillgroup-label {
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-right: 0.1rem;
}
.ts2-controls-spacer { flex: 1 1 auto; }

/* Mode visibility is driven entirely by the card's data-mode attribute. */
.ts2-card[data-mode="test"] .ts2-free-only { display: none; }
.ts2-card[data-mode="free"] .ts2-test-only { display: none; }

/* Personal best line. */
.ts2-best { margin: 0 0 1rem; font-size: var(--font-size-sm, 0.875rem); }
.ts2-best strong { color: var(--color-accent); }

/* Live stat tiles. */
.ts2-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.1rem; }
.ts2-stat {
    flex: 1 1 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.7rem 0.5rem;
    background: var(--color-bg, #f5f7fa);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 10px);
    text-align: center;
}
.ts2-stat.is-primary {
    flex-basis: 7rem;
    background: var(--color-accent-light, #e0f6fe);
    border-color: var(--color-accent, #00B0F0);
}
.ts2-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.ts2-stat.is-primary .ts2-stat-value { font-size: 2.4rem; color: var(--color-accent, #00B0F0); }
.ts2-stat-unit { font-size: 0.6em; font-weight: 600; }
.ts2-stat-label {
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* Typing surface (test mode) — the real input is visually hidden; the passage
   is what the user reads, with per-character highlighting. */
.ts2-surface {
    position: relative;
    cursor: text;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 10px);
    background: var(--color-bg-card, #fff);
    padding: 1.1rem 1.25rem;
    transition: border-color var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease);
}
.ts2-card.is-focused .ts2-surface {
    border-color: var(--color-accent, #00B0F0);
    box-shadow: var(--shadow-focus-ring, 0 0 0 3px rgba(0, 176, 240, 0.25));
}
.ts2-passage {
    font-size: 1.5rem;
    line-height: 1.9;
    letter-spacing: 0.01em;
    color: var(--color-text-light, #9aa0a8);   /* untyped text is dim */
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-family);
}
.ts2-passage span { transition: color 0.05s linear; }
.ts2-passage span.is-correct   { color: var(--color-success, #2e7d32); }
.ts2-passage span.is-incorrect { color: var(--color-danger, #c62828); }
.ts2-passage span.is-incorrect.ts2-sp { background: var(--color-danger-bg, #ffebee); border-radius: 2px; }
.ts2-passage span.is-current {
    color: var(--color-text);
    border-left: 2px solid var(--color-accent, #00B0F0);
    margin-left: -2px;
    animation: ts2Caret 1s steps(1) infinite;
}
@keyframes ts2Caret { 50% { border-left-color: transparent; } }

/* Visually hide the real input but keep it focusable & in flow so mobile
   keyboards open and focus/blur events fire. */
.ts2-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
}
/* Subtle "click & type" affordance — a small pill, not an obscuring overlay. */
.ts2-idle {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.75rem;
    background: var(--color-accent, #00B0F0);
    color: #fff;
    font-size: var(--font-size-xs, 0.75rem);
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Free-type textarea (original scratchpad behavior). */
.ts2-freetext {
    width: 100%;
    min-height: 14rem;
    font-size: 1.4rem;
    line-height: 1.6;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 10px);
    background: var(--color-bg-card, #fff);
    color: var(--color-text);
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.ts2-freetext:focus {
    outline: none;
    border-color: var(--color-accent, #00B0F0);
    box-shadow: var(--shadow-focus-ring, 0 0 0 3px rgba(0, 176, 240, 0.25));
}
.ts2-foot-hint { margin-top: 0.85rem; }

/* Results card. */
.ts2-results { text-align: center; }
.ts2-newbest { color: var(--color-success, #2e7d32); font-weight: 700; margin: 0.25rem 0 0.5rem; }
.ts2-result-hero { display: flex; flex-direction: column; align-items: center; margin: 0.5rem 0 1.25rem; }
.ts2-result-wpm {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent, #00B0F0);
    font-variant-numeric: tabular-nums;
}
.ts2-result-wpm-label {
    margin-top: 0.25rem;
    font-size: var(--font-size-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.ts2-result-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.ts2-result-item {
    padding: 0.6rem 0.4rem;
    background: var(--color-bg, #f5f7fa);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 10px);
}
.ts2-result-val {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.ts2-result-key {
    display: block;
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.ts2-results .form-actions { justify-content: center; }

@media (max-width: 575px) {
    .ts2-passage { font-size: 1.25rem; line-height: 1.8; }
    .ts2-stat.is-primary .ts2-stat-value { font-size: 1.9rem; }
    .ts2-result-grid { grid-template-columns: repeat(2, 1fr); }
    .ts2-result-wpm { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ts2-passage span.is-current { animation: none; }
}

/* ── Contact Us Viewer / Status (PacklistPRO-mirrored) ────────────────────
   Used by ContactUsStatus.aspx today; future ContactUsViewer port will reuse
   the same primitives. */

/* Clickable rows in the submissions table. */

/* Status pill */

/* Dark-mode overrides for badges not keyed to a CSS variable. */

/* Read-only info bar inside the detail card (Submitted / Type / Status row). */

/* Detail card layout — close button + sectioned reveals. */
.cus-reply-date { margin-bottom: 0.25rem; }

/* Drag-onto-composer highlight (QMR-210). Added by ChatUC's client script while a file
   is dragged over the message box; removed on drop or leave. Deliberately an outline +
   tint rather than a layout change, so nothing reflows mid-drag and the drop target does
   not move out from under the pointer. Mirrors the .cu-file-dragover cue ContactUs uses. */
textarea.chat-compose.chat-dragover,
.chat-compose.chat-dragover {
    outline: 2px dashed var(--color-accent, #00B0F0);
    outline-offset: -3px;
    background-color: #eef8ff !important;
}

/* Chat composer textbox (ChatUC's tbMessage with class="chat-compose").
   Force black text on a white background regardless of theme — the textarea
   sits inside a dark-themed chat panel where inherited text color reads white,
   and the page's `color-scheme: light dark` meta lets browsers render native
   form-control text in white under dark mode too. Pin both for legibility. */
textarea.chat-compose,
.chat-compose {
    color: #000 !important;
    background-color: #fff !important;
    color-scheme: light;          /* keep native scrollbar / selection light too */
    caret-color: #000;
}
textarea.chat-compose::placeholder,
.chat-compose::placeholder        { color: #6b6b6b !important; }
/* Selection color matches the default button background (accent/primary) so
   highlighted text in the composer reads as part of the site's color system,
   not the OS default (which on Windows is a muddy blue that fights with our
   forced white background). */
textarea.chat-compose::selection,
.chat-compose::selection {
    background-color: var(--color-primary);
    color: #fff;
}
textarea.chat-compose::-moz-selection,
.chat-compose::-moz-selection {
    background-color: var(--color-primary);
    color: #fff;
}

/* Dark-mode overrides — must use !important to beat the light-mode pins above */
[data-theme="dark"] textarea.chat-compose,
[data-theme="dark"] .chat-compose {
    color: #ffffff !important;
    background-color: var(--color-bg-input) !important;
    color-scheme: dark;
    caret-color: #fff;
    border-color: var(--color-border);
}
[data-theme="dark"] textarea.chat-compose::placeholder,
[data-theme="dark"] .chat-compose::placeholder { color: #888 !important; }

/* PWA install button — mirrors PacklistPRO's `.plp-install-btn` so users get
   the same floating bottom-right install prompt on supported browsers.
   Login.aspx is the only page that wires this up today (we surface it pre-
   auth so anonymous visitors can install before signing in). The button is
   created dynamically and only made visible when `beforeinstallprompt` fires
   (Chrome/Edge desktop + Android Chrome). Right-click dismisses for the
   session via sessionStorage. */

/* Session-expired / Unauthorized / Error standalone pages */
.standalone-card     { max-width: 520px; margin: 2rem auto; text-align: center; }
.error-detail {
    background:#f5f5f5;
    padding:1rem;
    border-radius:4px;
    overflow-x:auto;
    font-size:0.8rem;
    white-space:pre-wrap;
    word-break:break-word;
    max-height:400px;
    overflow-y:auto;
}
[data-theme="dark"] .error-detail { background:#2a2a2a; color:#e8eaed; }

/* ── Auto-resize textarea — disable manual handle when JS controls height ── */

/* ── Keyboard shortcuts overlay (built by site.js) ──────────────────────────
   Press '?' to open, '/' to focus search, 'g' then a letter for Gmail-style
   navigation (e.g. 'g d' = Dashboard). Closes on Esc, outside-click, or X. */
@media print {
}

/* ── Back-to-top floating button (ported from PacklistPRO parity) ───
   Bottom-right circular button that fades in after the user scrolls past
   400px. Smooth-scrolls to top on click. Also targeted by the footer
   "Back to top" link via #site-footer-top (site.js initBackToTop). */
@media print { .back-to-top { display: none !important; } }

/* ── On-this-page TOC floating button + overlay (PacklistPRO parity) ──
   Pages opt in via data-page-toc on a parent of the .card sections.
   site.js initPageTOC populates the list. Button sits left of back-to-top. */

.toc-link:hover,
@media print { .toc-btn, .toc-overlay { display: none !important; } }

/* ════════════════════════════════════════════════════════════════════
   CHAT UC STYLES — extracted from the ChatUC.ascx inline <style> block
   on 2026-05-20 so the ~330 lines aren't re-emitted on every render of
   EventDetails.aspx, GroupDetails.aspx, Chat.aspx. Now cached + parsed
   once via the CSS bundle.
   ════════════════════════════════════════════════════════════════════ */

/* ── Shadow tokens for chat UI ─────────────────────────────────── */
:root {
  --shadow-drawer:        -3px 0 10px rgba(0,0,0,0.35);
  --shadow-msg-card:       0 4px 7px  rgba(0,0,0,0.40);
  --shadow-msg-menu:       0 3px 7px  rgba(0,0,0,0.30);
  --shadow-view-select:    3px 3px 6px rgba(0,0,0,0.32);
  --shadow-member-dd:      5px 5px 10px rgba(0,0,0,0.25);
  --shadow-linkwhite:      1px 1px 3px rgba(0,0,0,0.32);
  --shadow-checkbox-ul:    2px 2px 5px rgba(0,0,0,0.32);
  --shadow-compose-top:        inset 0 6px 8px rgba(0,0,0,0.28);
  --shadow-compose-top-2:      inset 0 3px 4px rgba(0,0,0,0.18);
  --shadow-compose-left:       inset  2px 0 4px rgba(0,0,0,0.12);
  --shadow-compose-right:      inset -2px 0 4px rgba(0,0,0,0.12);
  --shadow-compose-highlight:  inset 0 -1px 0 rgba(255,255,255,0.95);
  --shadow-compose-outer:      0 2px 4px rgba(0,0,0,0.18);
  --shadow-compose-focus-ring: 0 0 0 2px rgba(0,176,240,0.50);
  --shadow-compose-focus-halo: 0 1px 5px rgba(0,176,240,0.45);
}

/* ── Options slide drawer ─────────────────────────────────── */
.chat-options-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1040;display:none}
.chat-options-overlay.open{display:block}
.chat-options-drawer{position:fixed;top:0;right:-380px;width:360px;height:100%;background:var(--color-bg-card);color:var(--color-text);z-index:1050;overflow-y:auto;transition:right .25s ease;padding:10px 14px;box-shadow:var(--shadow-drawer);font-size:13px}
.chat-options-drawer.open{right:0}
.options-section{border-top:1px solid var(--color-border);padding:8px 0}
.options-section h5{margin:0 0 6px 0;font-size:13px;font-weight:bold;color:var(--color-text)}
.options-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.options-label{min-width:90px;font-size:12px;color:var(--color-text)}
.options-row .textbox{flex:1}

/* All chat checkboxes use the shared `.checkbox` class (defined in
   styles_shared.css) — a white-bg appearance:none box with the accent-color
   border and a blue check-fill when checked. No per-option custom styling. */

/* ── RT (real-time) check pulse ────────────────────────────────────
   The "RT" label gently pulses green each time an auto-refresh poll reloads
   the message list (class added by the realtime poller in ChatUC.ascx, applied
   to the <label>, not the appearance:none checkbox box — scale/glow on the box
   itself didn't render visibly). The colour shift is the always-visible signal;
   the gentle scale-up + text glow add emphasis while staying slow and smooth,
   not a flash. Additive + uniquely-named — touches no existing rule. */
@keyframes rtPulse {
  0%   { color: var(--color-primary, #0090C8); transform: scale(1); }
  50%  { color: #28a745; text-shadow: 0 0 8px rgba(40,167,69,0.7); transform: scale(1.35); }
  100% { color: var(--color-primary, #0090C8); transform: scale(1); }
}
/* `!important` defeats Bootstrap's prefers-reduced-motion reset
   (`*,*::before,*::after { animation-duration:.01ms!important }`), which
   otherwise zeroes this pulse to ~0ms — completing instantly/invisibly — on
   devices that have "reduce motion" enabled. .rt-pulse's class specificity
   already beats the `*` selector, so the !important duration wins. This pulse
   is a deliberate, gentle status cue the user asked to always be visible. */
.rt-pulse { animation: rtPulse 1.2s ease-in-out !important; transform-origin: center; display: inline-block; }

/* ── "Live" auto-refresh toggle pill ───────────────────────────────
   Replaced the cbRealtime "LIVE" checkbox (2026-06-23). First pill in the chat
   pills row; a tap flips the 30s realtime auto-refresh (qmeetToggleLive). OFF =
   the plain outline pill (the .pill.pill.small toolbar override below); ON =
   bright-green (#00ff00) fill.
   The ON selector DOUBLES .chat-live-on to reach (0,4,0) so it beats BOTH the
   qMeet `.pill.pill.small` transparent toolbar override (0,3,0, defined LATER —
   was winning the resting state on source order, so the green only showed on
   :hover) AND the shared `.pill[aria-pressed="true"]` blue active style (0,2,0,
   set because the pill carries aria-pressed for a11y). Same doubled-modifier
   trick the .chat-status-set pill below uses; :hover/:focus pinned so
   .pill:hover can't swap the green back to the outline look. */
.chat-live-pill { color: var(--color-primary, #0090C8); }
.pill.chat-live-pill.chat-live-on.chat-live-on,
.pill.chat-live-pill.chat-live-on.chat-live-on:hover,
.pill.chat-live-pill.chat-live-on.chat-live-on:focus {
  background-color: #00ff00;
  border-color: #00ff00;
  color: #000;
  font-weight: 600;
}

/* ── Options drawer header layout ─────────────────────────── */
.opt-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.opt-drawer-title{font-size:14px;letter-spacing:.05em;color:var(--color-text)}
.opt-drawer-close{background:transparent;border:none;color:var(--color-text-muted);font-size:22px;font-weight:bold;line-height:1;cursor:pointer;padding:0 6px}

/* Send Options section — 3-column grid layout for the 5 send-flag checkboxes
   (NOTIFY / URGENT / PIN / SAVE / Hi-Res). Replaces the older colored .opt-pill
   wrapper design. */
/* FLEX-WRAP, not a fixed grid (changed 2026-07-30). It was
   `display:grid; grid-template-columns:repeat(3,auto)` — three columns whatever the labels
   were, and grid columns do NOT wrap, so the third chip simply overflowed the drawer's right
   edge and got clipped. That went unnoticed while the labels were "PIN" / "SAVE" / "HI-RES";
   renaming them to "Pin for them" / "Save for them" made it obvious. Flex lets each chip size
   to its own content and drop to the next line when it doesn't fit, at any drawer width — so
   it needs no per-breakpoint column count. margin-bottom separates the chips from the button
   row that follows them. */
.send-options-grid{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-start;margin-bottom:12px}
/* Send-flag chips as TOGGLE pills (2026-06-25) — each flag is an outline chip when OFF and
   fills with its colour when its inner checkbox is CHECKED, so active send flags read at a
   glance (same idea as the "Live" pill above). The checked fill colours still match each
   flag's Post-button colour (orange notify / magenta urgent / cyan pin / yellow save / grey
   hi-res). Driven by :has(input:checked) on the wrapper span; the label inherits the chip
   colour. Self-contained fg/bg so it stays legible in both light and dark themes. */
/* white-space:nowrap keeps each chip intact — a chip should wrap as a UNIT to the next line,
   never break "Pin for them" across two lines inside its own border. */
.send-options-grid .cb-row { border:1.5px solid; border-radius:5px; padding:3px 9px; background:transparent; cursor:pointer; white-space:nowrap; transition:background-color .12s,color .12s; }
.send-options-grid .cb-row .input-label { color:inherit; cursor:pointer; }
.cb-notify { border-color:#fd7e14; color:#c85e00; }
.cb-urgent { border-color:#ff00ff; color:#b300b3; }
.cb-pin    { border-color:#00b3b3; color:#008b8b; }
.cb-save   { border-color:#d4b106; color:#9a8200; }
.cb-hires  { border-color:#9aa0a6; color:#5f6368; }
.cb-notify:has(input:checked) { background:#fd7e14; border-color:#fd7e14; color:#fff; }
.cb-urgent:has(input:checked) { background:#ff00ff; border-color:#ff00ff; color:#fff; }
.cb-pin:has(input:checked)    { background:cyan;    border-color:cyan;    color:#000; }
.cb-save:has(input:checked)   { background:yellow;  border-color:yellow;  color:#000; }
.cb-hires:has(input:checked)  { background:#d0d0d0; border-color:#d0d0d0; color:#000; }

/* Thin cluster labels inside the Options drawer (Actions section's Broadcast /
   Upload files / Recent message sub-rows). Quiet uppercase captions that separate
   the grouped button rows without adding visual weight. */
.options-subhead { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); margin:8px 0 3px; }
.options-subhead:first-of-type { margin-top:2px; }

/* ── ChatUC layout helpers ─ */
/* !important on .chat-hidden so this utility hide-class beats .button (defined in
   styles_shared.css with display:inline-flex, loaded AFTER this file via Bundle.config —
   same specificity, later rule normally wins). Without !important the class silently
   does nothing on any element that also has the .button class.
   `.chat-hidden`, `.chat-pad-left-4`, `.chat-margin-3`, `.bold`, and `.upload-progress-text`
   are also redeclared in the ChatUC2 block lower in this file and the later rule wins —
   the earlier ones were removed. `.chat-pad-row` keeps its `padding` here because the
   lower flex-row redeclaration doesn't carry that forward; same idea for `.cb-row`'s
   `white-space:nowrap` and `.tagchips-recent-hint`'s `margin-bottom`. */
.chat-pad-row         { padding:0 8px; }
.cb-row               { white-space:nowrap; }
.tagchips-recent-hint { margin-bottom:4px; }
/* Chat recipient dropdowns (ddlEvent/ddlGroup/ddlCategory/ddlInterest/ddlMember) —
   replaces inline Font-Bold/Width="100%" on five DropDownLists in ChatUC. */
.chat-recipient-select{ font-weight:bold; }
/* Post / low-priority post buttons — replaces inline Font-Bold/Font-Size/
   Height/Width on btnPost & btnPostLowPriority in ChatUC. */
.button.chat-post-btn { font-weight:bold; font-size:9pt; height:32px; width:50px; padding:0; min-width:0; }

/* "Sending…" state for the post buttons: added on click (qmeetDisablePost), removed on
   reload / PRM endRequest (qmeetReenablePostButtons). A thick white border marks it busy
   (no color inversion) without disabling it (disabling risks a stuck button if the postback hangs).
   Rendered as a box-shadow ring: !important + a ring (not a real border) so it wins over every
   button variant's own border, follows the rounded corners, and never shifts layout. */
.chat-post-sending { box-shadow: 0 0 0 4px #ffffff !important; cursor: progress; }

/* Optimistic "Sending…" toast — the instant you hit Post a GRAY toast rises at the
   top (the same toast element the green "Sent to …" confirmation uses), so it simply
   turns green when the async send lands. Replaced the old in-list pending bubble,
   which appeared at the far (bottom) end of the list from the top compose box. */
.chat-sending-mark { display:inline-flex; align-items:center; }
.chat-sending-spin  { width:.95em; height:.95em; border-width:.14em; margin-inline-end:.45em; }

/* Optimistic per-message action feedback (instant, before the postback re-renders the list).
   .chat-acting = state change (Pin/Save/Urgent) → brief dim acknowledge; .chat-removing =
   the message leaves the view (Delete/Hide/Reply+Hide/Unsend/Snooze) → fade + slight shrink.
   Both are transient — the server re-render replaces the card with its real state. */
.msg-card.chat-acting  { opacity: .5; pointer-events: none; transition: opacity .12s ease; }
.msg-card.chat-removing { opacity: 0; transform: scale(.96); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease; }

/* "Working" affordance: dim + lock the message list while a re-rendering chat postback
   (recipient switch, view/sort, search, paging, options-apply) is in flight. */
.chat-list-loading { opacity: .45; pointer-events: none; transition: opacity .12s ease; }

/* ── Chat toast (Bootstrap toast with chat-specific layout) ─ */
.chat-toast-fixed     { z-index:1200; }
.chat-toast-el        { cursor:pointer; box-shadow:0 8px 28px rgba(0,0,0,0.85),0 2px 8px rgba(0,0,0,0.65); }
.chat-toast-body      { font-size:10pt; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── My-status textbox (clear-button overlay) ───────────── */
.status-input-wrap    { position:relative; width:100%; }
.status-input         { padding-right:28px; box-sizing:border-box; }
.status-clear-btn     { position:absolute; right:4px; top:50%; transform:translateY(-50%); background:transparent; border:none; color:#888; font-weight:bold; font-size:14px; cursor:pointer; padding:0 6px; box-shadow:none; height:auto; line-height:1; }

/* ── Image lightbox (full-screen viewer for chat photos) ── */
.chat-lightbox        { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.92); z-index:2000; align-items:center; justify-content:center; flex-direction:column; }
.chat-lightbox.is-open{ display:flex; }
.chat-lb-close        { position:absolute; top:10px; right:16px; background:none; border:none; color:#fff; font-size:30px; cursor:pointer; line-height:1; padding:0; }
.chat-lb-img          { max-width:95vw; max-height:80vh; object-fit:contain; }
.chat-lb-counter      { color:#ccc; font-size:12px; margin-top:8px; }
.chat-lb-controls     { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px; }
.chat-lb-nav          { background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.3); font-size:14pt; padding:6px 18px; }
.chat-lb-fullink      { color:#aaa; font-size:12px; text-decoration:underline; }

/* ── Realtime-checkbox helper text positioned under the checkbox ── */
.realtime-help        { font-size:11px; color:#666; margin-top:2px; margin-left:22px; }

/* ── Upload progress wrap margin (when shown by JS toggle) ── */
.upload-progress-wrap { margin-top:4px; }

/* ── Tag-modal recent-tag chips ─────────────────────────── */
.tag-chip { background:#17a2b8; color:#fff; cursor:pointer; font-size:9pt; border:none; }
.tag-chip:focus-visible { outline:2px solid #0d6efd; outline-offset:2px; }

/* ── Message cards ────────────────────────────────────────── */
.msg-card{border-top:1px solid #000;border-bottom:1px solid #000;padding:4px 14px 2px 14px;margin:0 8px 18px 8px;border-radius:10px;word-wrap:break-word;box-shadow:var(--shadow-msg-card);line-height:1.2;max-width:78%;box-sizing:border-box}
.msg-card.from-me  {margin:0 8px 18px auto}
.msg-card.from-them{margin:0 auto 18px 8px}
.msg-header{line-height:1.4;margin-bottom:2px}
.msg-sender{margin-right:3px;text-decoration:none}
.msg-time{margin-right:4px}
.msg-badge{font-size:8pt;padding:1px 5px;border-radius:3px;margin-right:2px;vertical-align:middle;border:1px solid rgba(0,0,0,0.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)}
.msg-badge-urgent {background:magenta; color:#fff;}
.msg-badge-pinned {background:cyan;    color:#000;}
.msg-badge-saved  {background:yellow;  color:#000;}
.msg-badge-notify {background:orange;  color:#000;}
.msg-badge-lowpri {background:#888;    color:#fff;}
.msg-badge-tag    {background:#17a2b8; color:#fff;}
.msg-badge-live   {background:#6f42c1; color:#fff;}
.msg-time-bold    {font-weight:bold;}
.msg-action-tag   {background:#17a2b8; color:#fff;}
.msg-body{margin:4px 0;line-height:1.2}
/* Auto-formatted lists inside chat bubbles (display-only): a run of 2+ consecutive
   "- " lines renders as a <ul.chat-list>, and 2+ "1."/"1)" lines as an <ol.chat-list>.
   Emitted by ChatPanel.RenderMessageText (server) + the LiveChat/optimistic JS. Explicit
   list-style/padding so these show markers even under a shared reset. */
ul.chat-list, ol.chat-list { margin: .25rem 0; padding-left: 1.6rem; }
ul.chat-list { list-style: disc; }
ol.chat-list { list-style: decimal; }
ul.chat-list li, ol.chat-list li { margin: .1rem 0; padding: 0; line-height: 1.3; }
.msg-history{opacity:.75;border-left:3px solid currentColor;padding-left:8px;margin:6px 0 4px 0;line-height:1.3;font-style:italic}
.msg-actions{padding:4px 0 2px 0}
/* Even gap around each message action button so HIDE/REPLY+HIDE/⋯ etc.
   don't crowd each other. The ⋯ trigger is itself a .button nested inside
   .msg-menu-wrap, so it must NOT also carry the margin — otherwise the gap
   after ⋯ doubles (trigger margin + wrap margin) and reads wider than the
   gap between the plain buttons. Let the wrap own the spacing on that side. */
.msg-actions .button{margin:2px 5px}
.msg-actions .msg-menu-wrap{margin:2px 5px}
.msg-actions .msg-menu-wrap .button{margin:0}

/* ── Single Inbox ──────────────────────────────────────────────
   Flat mode: a "with <Name>" chip on each bubble names the conversation
   partner. Grouped mode: one collapsible card per partner. Colours use
   neutral rgba overlays + the primary accent so both Light & Dark read
   correctly without theme-specific vars. */
.inbox-with-chip{display:inline-block;font-size:8pt;font-weight:700;text-decoration:none;
  padding:1px 7px;border-radius:20px;margin-right:2px;vertical-align:middle;
  background:rgba(0,176,240,0.16);color:var(--color-primary,#0090C8);
  border:1px solid rgba(0,176,240,0.45)}
.inbox-with-chip:hover{background:rgba(0,176,240,0.28)}

.qmeet-thread{border:2px solid rgba(127,127,127,0.28);border-radius:12px;margin:5px 8px;overflow:hidden;
  background:rgba(127,127,127,0.06);box-shadow:4px 4px 8px rgba(0,0,0,0.33)}
/* Same drop shadow on every button + pill on the page (4px down/right, 8px blur,
   33% black). `body`/`body .button.transparent` prefixes beat the shared .button
   and .button.transparent box-shadow rules that load after this file. Covers the
   transparent toolbar buttons (ALL, CC, X MSG, OPTIONS, LIVECHAT …) and the status
   pills (Status?, Archive, +Hidden …). Excludes buttons inside chat bubbles. */
body .button,
body .button.transparent,
body .button:hover,
body .button:focus-visible,
body .button:active,
body .pill{box-shadow:4px 4px 8px rgba(0,0,0,0.33)}
body .msg-card .button{box-shadow:none}
/* Each contact card is outlined in that contact's chosen color (set inline as --cc). */
.qmeet-thread[style*="--cc"]{border-color:var(--cc)}
.qmeet-thread-head{display:flex;align-items:center;gap:10px;padding:6px 12px;cursor:pointer;user-select:none}
.qmeet-thread-head:hover{background:rgba(127,127,127,0.10)}

/* UNREAD FROM THEM (.unread-from-them, set server-side when the newest message in the
   thread is theirs AND something is still unread): the card is FILLED with the contact's
   colour rather than just outlined, so an unread message is unmissable while scanning.
   The fill goes on .qmeet-thread-head, which IS the whole card while collapsed (the body
   is display:none) - an expanded card keeps a readable white/dark body under a coloured
   header instead of tinting the message bubbles.
   `--cct` is the server-computed readable ink (CardInk: WCAG relative luminance, so it picks
   the higher-contrast of black/white - Rec.601 got this wrong on 5 of the 10 palette colours),
   so this works on any contact colour in BOTH light and dark mode without a media query.
   The three-class selector (0,3,0) deliberately outranks .qmeet-thread-head:hover (0,2,0)
   above and .chat3 .qmeet-thread's background in the chat3 skin. */
.qmeet-thread.unread-from-them .qmeet-thread-head{background:var(--cc)}
.qmeet-thread.unread-from-them .qmeet-thread-head:hover{background:var(--cc);filter:brightness(0.93)}
.qmeet-thread.unread-from-them .qmeet-thread-name,
.qmeet-thread.unread-from-them .qmeet-thread-prev,
.qmeet-thread.unread-from-them .qmeet-thread-time,
.qmeet-thread.unread-from-them .qmeet-thread-lastactive,
.qmeet-thread.unread-from-them .qmeet-thread-status,
.qmeet-thread.unread-from-them .qmeet-chev{color:var(--cct)}
/* The dimmed secondary lines are near-invisible against a saturated fill at .6 opacity -
   lift them to a level that still reads as secondary but stays legible. */
.qmeet-thread.unread-from-them .qmeet-thread-prev{opacity:.9}
.qmeet-thread.unread-from-them .qmeet-thread-time,
.qmeet-thread.unread-from-them .qmeet-thread-lastactive,
.qmeet-thread.unread-from-them .qmeet-chev{opacity:.8}
/* The avatar is INVERTED server-side on a filled card (ink disc, contact-colour initials),
   because its normal background IS --cc and would vanish into the fill. Nothing to do here -
   don't add a background override, the avatar's paint is inline and would need !important.
   The unread count badge is normally site-blue, which fights a saturated fill - invert it
   to the ink colour with the contact colour as its text. */
.qmeet-thread.unread-from-them .qmeet-count{background:var(--cct);color:var(--cc)}
.qmeet-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-weight:800;color:#04222b;font-size:14px;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
/* A recolorable sender name (1:1 received message): suppress text-selection/callout so
   double-click and press-and-hold trigger the recolor cleanly instead of selecting text. */
.msg-sender[data-cp]{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.qmeet-thread-meta{flex:1;min-width:0}
.qmeet-thread-name{font-weight:800;font-size:15px;color:var(--color-text,#111);
  display:flex;align-items:baseline;gap:7px}
.qmeet-thread-nametext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qmeet-thread-lastactive{flex:0 0 auto;font-weight:400;font-size:11px;
  color:var(--color-text,#666);opacity:.6;white-space:nowrap}
.qmeet-thread-prev{color:var(--color-text,#444);opacity:.65;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.qmeet-thread-status{color:var(--color-primary,#0090C8);opacity:.85;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.qmeet-thread-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.qmeet-thread-timerow{display:flex;align-items:center;gap:4px}
.qmeet-thread-time{color:var(--color-text,#666);opacity:.6;font-size:11px;white-space:nowrap}
/* Small inline expand/collapse caret next to the time. Points down when collapsed,
   flips up when the conversation is open. */
.qmeet-chev{opacity:.55;transition:transform .15s ease;font-size:10px;display:inline-block;line-height:1}
.qmeet-thread.open .qmeet-chev{transform:rotate(180deg)}
.qmeet-count{background:var(--color-primary,#0090C8);color:#fff;font-weight:800;font-size:11px;
  border-radius:20px;padding:1px 8px;min-width:20px;text-align:center}
.qmeet-thread-body{display:none;padding:4px 8px 10px;border-top:1px solid rgba(127,127,127,0.22)}
.qmeet-thread.open .qmeet-thread-body{display:block}
.qmeet-thread-reply{margin:8px 8px 2px}
.qmeet-lockline{font-size:11px;color:var(--color-primary,#0090C8);margin:4px 8px 2px;opacity:.9}
.qmeet-thread-more{text-align:center;margin:2px 0 6px}
/* Messages inside a grouped ("Unified inbox") contact card: each bubble spans the
   full card width with an even 8px gutter on both sides. The chat-bubble hug
   (from-me margin-left:auto / from-them margin-right:auto) plus the base 94%/78%
   max-width left a ~6% empty strip on the un-hugged edge — so a their-message read
   flush-left with a big gap on the right (and my-messages the mirror). In the
   grouped view the sender is already identified by the header + per-contact colour,
   so drop the hug: max-width:none and symmetric 8px side margins make the left and
   right gutters equal. Wins over the base (.msg-card, 78%) and the chat3 skin
   (.chat3 .msg-card, 84%) on specificity. */
.qmeet-thread-body .msg-card{max-width:none}
.qmeet-thread-body .msg-card.from-me{margin-left:8px;margin-right:8px}
.qmeet-thread-body .msg-card.from-them{margin-left:8px;margin-right:8px}

/* A magenta "URGENT" pill next to the contact's name when an unread urgent message is
   waiting from them. Magenta matches the per-message .msg-badge-urgent identity and is a
   reserved status color (never a contact color). The card outline itself is left alone —
   it keeps the per-contact --cc color and normal width. */
.qmeet-urgent-pill{flex:0 0 auto;background:magenta;color:#fff;font-weight:800;font-size:10px;
  line-height:1.5;border-radius:20px;padding:0 7px;white-space:nowrap;text-transform:uppercase;
  letter-spacing:.02em;align-self:center}

/* Chat status/view pills (STATUS?, -PINS, +HIDDEN) — text + outline match the
   transparent buttons sitting in the same toolbar to their left, and the
   background is transparent so the pill blends into the toolbar instead of
   reading as a separate white chip.
   Doubled class (.pill.pill) raises specificity to (0,2,0) so this qMeet
   override still wins now that Shared/styles_shared.css loads LAST in the
   bundle (shared's .pill is (0,1,0), .pill.small (0,2,0)). Do NOT simplify
   back to bare .pill or the shared white-chip style will take over. */
.pill.pill, .pill.pill.small{
    color: var(--color-primary, #0090C8);
    border-color: var(--color-primary, #0090C8);
    background-color: transparent;
}

/* ══ CHAT PILLS ROW — ONE FILL, ONE MEANING (palette fixed 2026-07-30) ═══════════
   Until this pass the row reused two fills for unrelated things, on the same line,
   at the same time:
       #00ff00  = auto-refresh is ON   *and*  your status is set
       #ffff00  = an active filter     *and*  your status is about to expire
   so the colour carried no information at all. The rule now is:

       #00ff00  green   → LIVE RIGHT NOW      (.chat-live-on; also the LIVECHAT ⚡
                                               button on a message card, same meaning)
       #6f42c1  violet  → YOUR STATUS IS SET  (.chat-status-set)
       #ff8c00  orange  → WARNING / ENDING    (.chat-status-ending)
       #ffff00  yellow  → A FILTER IS ON      (.chat-filter-pill, below)

   ⚠ STILL OVERLAPPING, deliberately left: #ffff00 also fills a SAVED message bubble
   and #00ff00 a pinned+saved one. Those live in the MESSAGE zone, users have learned
   them, and the contact colour-picker excludes hues near them by design — repainting
   them is a much bigger change than this one. Different zone, different size, and the
   pills all carry text, so it reads.

   Contrast, measured not guessed: violet+white 6.27:1, orange+black 9.0:1,
   yellow+black 19.6:1 — all pass AA at the 12px .pill.small size. ⚠ Do NOT put white
   on #ff8c00 (2.33:1) or on #e65100 (3.79:1 — which is what .home-radar-status--maybe
   already ships; that one is pre-existing and out of scope here). */

/* ChatUC "My Status" pill (lblMyStatus) — violet fill once the viewer actually has a
   chat status set; the "＋ Set status" prompt keeps the outline look above. The
   transparent .pill.pill.small override is (0,3,0), so a plain .pill.chat-status-set
   (0,2,0) loses — the doubled modifier class lifts this to (0,3,0) and source order
   (it sits AFTER the override) breaks the tie, the same trick the .home-radar-status
   pills document. :hover/:focus pinned so .pill:hover can't swap the border back to
   the primary color. */
.pill.chat-status-set.chat-status-set,
.pill.chat-status-set.chat-status-set:hover,
.pill.chat-status-set.chat-status-set:focus{
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}
/* …turning orange once the status is within 15 minutes of auto-clearing
   (code-behind swaps chat-status-set → chat-status-ending). Same doubled-class
   specificity trick so it beats the .pill.pill.small outline override. */
.pill.chat-status-ending.chat-status-ending,
.pill.chat-status-ending.chat-status-ending:hover,
.pill.chat-status-ending.chat-status-ending:focus{
    background-color: #ff8c00;
    border-color: #ff8c00;
    color: #000;
}
/* Both SET states are press-and-hold-to-clear (2026-08-02), and the pill is an <a> full of
   text — so without this a hold selects the status message, raises the iOS/Android
   text-selection callout, and starts a link drag on desktop, all on top of the clear we are
   trying to run. The unset "＋ Set status" pill deliberately does NOT get this: it has no hold
   gesture, so there is nothing to protect and no reason to make its label unselectable.
   ⚠ -webkit-touch-callout is the one that actually kills the iOS Safari long-press menu;
   user-select alone does not. Keep both. */
.pill.chat-status-set,
.pill.chat-status-ending{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ChatUC ACTIVE-FILTER pills — the "× Something" family in .chat-pills-row:
   × Search · × Archive · × Pins off · × Showing hidden · × Low hidden · × <dates>.
   Solid yellow so a filter that is silently changing WHICH messages you see is
   impossible to miss; clicking any of them resets that one setting to its default
   (lblSearching_Click, lblArchive_Click, lblIgnoringPins_Click, lblShowingHidden_Click,
   lblHidingLowPri_Click, lblDateRange_Click — every one of them is a plain reset).

   RENAMED from .chat-search-pill 2026-07-30 and widened to the whole family. Search
   was the only one that had ever been given this treatment; the other five rendered
   as outline pills reading "-Pins" / "+Hidden" / "-Low", where the minus sign implied
   the tap would REMOVE pins when it actually turns pinning back ON. One look for one
   behaviour is the whole point — don't re-fork it per pill.
   ⚠ #ffff00 is ALSO .chat-status-ending (a status about to auto-clear). That collision
   predates this rule and is still open; if the status pill's palette is ever revisited,
   yellow should end up meaning "an active filter" and nothing else.

   Same doubled-class specificity trick as the status pills above (it must beat the
   (0,3,0) .pill.pill.small transparent toolbar override), with :hover/:focus pinned so
   .pill:hover can't swap the fill back to the outline look. */
.pill.chat-filter-pill.chat-filter-pill,
.pill.chat-filter-pill.chat-filter-pill:hover,
.pill.chat-filter-pill.chat-filter-pill:focus{
    background-color: #ffff00;
    border-color: #ffff00;
    color: #000;
}

/* ChatUC "⇄ View" pill (btnFlip) — moved out of the action-button row 2026-07-30.
   It is an <input type="submit">, not an <a>/<span> like every other pill, so it needs
   two things the shared .pill never had to provide: font-family (form controls do NOT
   inherit it) and line-height (the input's default would make it taller than its
   siblings). Everything else — the 999px radius, the cyan outline, the padding — comes
   from .pill / .pill.small / the .pill.pill.small qMeet override, which is the point:
   the View pill should read as one of the state pills, not as a button that wandered in. */
.chat-view-pill{
    font-family: inherit;
    line-height: 1.5;
    font-weight: 600;      /* the primary state in the row — slightly heavier than its siblings */
    -webkit-appearance: none;
    appearance: none;
}
/* A TEMPORARY view (picked from the long-press picker) vs. one of your two saved presets.
   These rendered identically before, so nothing said whether a tap would take you back to
   your presets. The label carries "(temp)" for touch; this dashed border is the pointer-
   and-glance version. Doubled so it beats the (0,3,0) .pill.pill.small border-color. */
.pill.chat-view-temp.chat-view-temp,
.pill.chat-view-temp.chat-view-temp:hover,
.pill.chat-view-temp.chat-view-temp:focus{
    border-style: dashed;
    font-style: italic;
}

/* The pills row carries btnFlip since 2026-07-30, and btnFlip was a 44px-tall .button
   before the move. Without this it would have SHRUNK to the 24px pill height — a real
   tap-target regression on the row's most-used control. 32px keeps the row compact while
   staying clear of the 24px accessibility floor, and it is applied to the whole row so
   the pills stay a matched set. */
.chat-pills-row .pill{ min-height: 32px; }

/* Any select styled as .button inherits .button { text-align:center }, which on
   Windows Chrome makes the dropdown LIST render its options centered too. Force
   left-align on the options so long labels line up on the left edge. (The chat
   view dropdowns moved into the OPTIONS drawer as .textbox, so this is currently
   a defensive rule with no active select.button consumer.) */
select.button option {
    text-align: left;
}

/* ── kebab dropdown menu ──────────────────────────────────────── */
.msg-menu-wrap{position:relative;display:inline-block;vertical-align:middle}
.msg-menu{position:absolute;bottom:110%;left:0;background:#fff;border:1px solid #ccc;border-radius:5px;z-index:300;min-width:180px;box-shadow:var(--shadow-msg-menu);display:none}
.msg-menu.open{display:block}
.msg-action-item{padding:14px 16px;cursor:pointer !important;white-space:nowrap;font-size:13pt;border-bottom:1px solid #eee;user-select:none;-webkit-user-select:none;background:#fff !important;color:#000 !important}
.msg-action-item:last-child{border-bottom:none}
.msg-action-item:hover{background:#f0f0f0 !important;font-weight:bold}

/* ── Message-actions popup (modal replacement for the kebab dropdown) ──
   #msg-actions-modal reuses the shared .modal-overlay/.modal-box pattern;
   the item list is cloned from the hidden per-message .msg-menu, so the
   .msg-action-item rules above (incl. their dark-mode variants) style the
   items. The list just takes over the container chrome .msg-menu provided. */
.msg-actions-box{max-width:380px}
.msg-actions-list{border:1px solid #ccc;border-radius:5px;overflow:hidden auto;max-height:65vh}
[data-theme="dark"] .msg-actions-list{border-color:#555}

/* ── Reply quote ──────────────────────────────────────────── */
.reply-quote{background:#f0f0f0;border-left:3px solid #888;padding:8px 36px 8px 12px;margin-bottom:6px;border-radius:3px;position:relative;font-size:15px}
.reply-quote-label{font-weight:bold;color:#555;margin-bottom:4px;font-size:13px}
.reply-quote-close{position:absolute;top:4px;right:8px;background:none;border:none;cursor:pointer;color:#555;font-size:16px;font-weight:bold;line-height:1;padding:0}
.reply-quote-toggle{color:#0d6efd;font-weight:bold;text-decoration:none;white-space:nowrap}
.reply-quote-toggle:hover{text-decoration:underline}

/* ── View bar dropdown styled to match .button.button-sm.button-secondary ── */
.view-select {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: var(--btn-transition);
    white-space: nowrap;
    min-height: 36px;
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    box-shadow: none;
    margin-right: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.25rem 1.5rem 0.25rem 0.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300B0F0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
.view-select:hover {
    background-color: var(--color-primary-light);
    color: var(--color-accent-dark);
}
.view-select:focus {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ── Misc chat UI ─────────────────────────────────────────────── */
.view-bar{margin:4px 0}
.indicators-bar{margin:3px 0;font-size:13px}

/* ── Simplified non-member chat (event / group / category / interest) ─────────
   Per site owner: for every chat type EXCEPT 1:1 Member chat, the ONLY controls
   that should show are the recipient dropdown, the compose box, and the main ▶ Post
   button. The wrapper gets the .chat-recipient-only class server-side (ChatUC's
   ChatRowSimplifiedClass, applied only on the standalone Chat page for non-U chats),
   and we hide the LOW-priority button plus the whole options / file / view / indicator
   toolbar here. The message list (outside .chat-pad-row) and the bottom pagination
   (hidden server-side in LoadChat) are unaffected by these rules. */
.chat-recipient-only [id$="btnPostLowPriority"],
.chat-recipient-only .chat-margin-3,
.chat-recipient-only .upload-progress-wrap,
.chat-recipient-only .indicators-bar,
.chat-recipient-only .view-bar { display: none !important; }

/* "Show More" pager for simplified chat — tucked into the TOP-RIGHT of the history (above the
   message list). Loads another page of older messages, which append below. The row collapses
   whenever there's nothing more to load (button Visible=False → empty row). */
.chat-show-more-row { text-align: right; margin: 0.25rem 0; min-height: 0; }
.chat-show-more-row:empty { display: none; }
.chat-show-more-btn { font-size: 0.8rem; padding: 0.15rem 0.6rem; opacity: 0.85; }
.chat-show-more-btn:hover { opacity: 1; }
.upload-progress-track{width:100%;height:10px;border:1px solid #999;box-sizing:border-box;margin-top:3px}
.upload-progress-bar{height:100%;width:0%;background:#4a8}
textarea.chat-compose{
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
  resize:none;
  min-height:2.2em;
  padding:8px;
  border:1px solid #000;
  border-radius:8px;
  line-height:1.0;
  background:#ffffff;
  box-shadow:
    var(--shadow-compose-top),
    var(--shadow-compose-top-2),
    var(--shadow-compose-left),
    var(--shadow-compose-right),
    var(--shadow-compose-highlight),
    var(--shadow-compose-outer);
  transition:box-shadow .15s ease, border-color .15s ease;
}
/* Intentionally no focus styling: the thick recipient-colored confirmation
   border (--recip-color, below) already signals state, and a blue focus border
   + ring/halo layered on top of it reads as confusing. Keep the focused box
   visually identical to its resting state — just suppress the native outline. */
textarea.chat-compose:focus{
  outline:none;
}

/* Round the Member recipient dropdown to match the textbox/buttons.
   Vertical padding + min-height keep tall names from clipping at the bottom,
   especially once the 3px recipient-color border is applied. */
select[id$='ddlMember']{border-radius:8px;box-shadow:var(--shadow-member-dd);padding-top:6px;padding-bottom:6px;min-height:2.6rem;line-height:1.3}

/* ── Dark mode overrides ───────────────────────────────────── */
[data-theme="dark"] textarea.chat-compose {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    color-scheme: dark;
    caret-color: #ffffff;
    border-color: #555 !important;
}
[data-theme="dark"] textarea.chat-compose::placeholder {
    color: #9a9a9a !important;
}

/* ── Compose box: recipient-colored border + "To:" overlay placeholder ───────── */
/* The recipient's avatar color is injected as the inline --recip-color custom property by
   the server (ApplyRecipientBorder). The [style*=] selector scopes these to when it's set;
   placed AFTER the dark-mode border override above so it wins source-order at equal
   specificity (in both light and dark) and recolors the thick confirmation border. */
textarea.chat-compose[style*="--recip-color"] {
    border-color: var(--recip-color) !important;
    border-width: 3px !important;
}
/* Same colored confirmation border on the recipient dropdown so ddlMember
   matches tbMessage (same color + thickness) for the selected user. */
select[id$='ddlMember'][style*="--recip-color"] {
    border: 3px solid var(--recip-color) !important;
}
.chat-compose-wrap { position: relative; }
/* Styled "To: <name>" block that sits inside the empty compose box like a rich placeholder
   (mixed font sizes the native ::placeholder can't do). pointer-events:none so clicks reach
   the textarea; JS sizes the box to fit it and hides it once the user types. */
.compose-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 11px 12px;
    pointer-events: none;
    color: #9a9a9a;   /* light mode: slightly lighter so the overlay reads as placeholder text */
    overflow: hidden;
}
.compose-overlay .co-to    { font-size: 20px; font-weight: 600; color: #8a8a8a; line-height: 1.2; }
.compose-overlay .co-sub   { font-size: 14px; line-height: 1.3; }
.compose-overlay .co-admin { font-size: 12px; line-height: 1.3; margin-top: 4px; opacity: .9; }
[data-theme="dark"] .compose-overlay        { color: #9a9a9a; }
[data-theme="dark"] .compose-overlay .co-to { color: #b8b8b8; }
[data-theme="dark"] .msg-bg-plain {
    background-color: #bfbfbf !important;
}

/* ── Chat message TEXT palette (Received Text / Sent Text dropdowns) ──────────
   The renderer emits color:var(--mtext-<token>) when the user picks an explicit text
   colour. Unlike the bubble background (which adapts per theme), a chosen text colour is
   theme-INDEPENDENT: one value used in both Light and Dark. The grayscale ramp and pure
   100% hues are absolute; the spectrum tints reuse their light-palette value. */
:root {
  --mtext-gray-100: #ffffff; --mtext-gray-90: #e5e5e5; --mtext-gray-80: #cccccc;
  --mtext-gray-70: #b3b3b3;  --mtext-gray-60: #999999; --mtext-gray-50: #808080;
  --mtext-gray-40: #666666;  --mtext-gray-30: #4d4d4d; --mtext-gray-20: #333333;
  --mtext-gray-10: #1a1a1a;  --mtext-gray-0: #000000;

  --mtext-red-100: #ff0000; --mtext-red-50: #ff8080; --mtext-red-40: #ff9999; --mtext-red-30: #ffb3b3; --mtext-red-20: #ffcccc; --mtext-red-10: #ffe6e6;
  --mtext-red-magenta-100: #ff007f; --mtext-red-magenta-50: #ff80bf; --mtext-red-magenta-40: #ff99cc; --mtext-red-magenta-30: #ffb3d9; --mtext-red-magenta-20: #ffcce5; --mtext-red-magenta-10: #ffe6f2;
  --mtext-magenta-100: #ff00ff; --mtext-magenta-50: #ff80ff; --mtext-magenta-40: #ff99ff; --mtext-magenta-30: #ffb3ff; --mtext-magenta-20: #ffccff; --mtext-magenta-10: #ffe6ff;
  --mtext-purple-100: #8000ff; --mtext-purple-50: #bf80ff; --mtext-purple-40: #cc99ff; --mtext-purple-30: #d9b3ff; --mtext-purple-20: #e5ccff; --mtext-purple-10: #f2e6ff;
  --mtext-blue-100: #0000ff; --mtext-blue-50: #8080ff; --mtext-blue-40: #9999ff; --mtext-blue-30: #b3b3ff; --mtext-blue-20: #ccccff; --mtext-blue-10: #e6e6ff;
  --mtext-blue-cyan-100: #0080ff; --mtext-blue-cyan-50: #80bfff; --mtext-blue-cyan-40: #99ccff; --mtext-blue-cyan-30: #b3d9ff; --mtext-blue-cyan-20: #cce5ff; --mtext-blue-cyan-10: #e6f2ff;
  --mtext-cyan-100: #00ffff; --mtext-cyan-50: #80ffff; --mtext-cyan-40: #99ffff; --mtext-cyan-30: #b3ffff; --mtext-cyan-20: #ccffff; --mtext-cyan-10: #e6ffff;
  --mtext-cyan-lime-100: #00ff80; --mtext-cyan-lime-50: #80ffbf; --mtext-cyan-lime-40: #99ffcc; --mtext-cyan-lime-30: #b3ffd9; --mtext-cyan-lime-20: #ccffe5; --mtext-cyan-lime-10: #e6fff2;
  --mtext-lime-100: #00ff00; --mtext-lime-50: #80ff80; --mtext-lime-40: #99ff99; --mtext-lime-30: #b3ffb3; --mtext-lime-20: #ccffcc; --mtext-lime-10: #e6ffe6;
  --mtext-lime-yellow-100: #80ff00; --mtext-lime-yellow-50: #bfff80; --mtext-lime-yellow-40: #ccff99; --mtext-lime-yellow-30: #d9ffb3; --mtext-lime-yellow-20: #e5ffcc; --mtext-lime-yellow-10: #f2ffe6;
  --mtext-yellow-100: #ffff00; --mtext-yellow-50: #ffff80; --mtext-yellow-40: #ffff99; --mtext-yellow-30: #ffffb3; --mtext-yellow-20: #ffffcc; --mtext-yellow-10: #ffffe6;
  --mtext-orange-100: #ff7f00; --mtext-orange-50: #ffbf80; --mtext-orange-40: #ffcc99; --mtext-orange-30: #ffd9b3; --mtext-orange-20: #ffe5cc; --mtext-orange-10: #fff2e6;

  /* 90/80/70/60 levels (fill the 100→50 gap). */
  --mtext-red-90: #ff1a1a; --mtext-red-80: #ff3333; --mtext-red-70: #ff4d4d; --mtext-red-60: #ff6666;
  --mtext-red-magenta-90: #ff1a8c; --mtext-red-magenta-80: #ff3399; --mtext-red-magenta-70: #ff4da5; --mtext-red-magenta-60: #ff66b2;
  --mtext-magenta-90: #ff1aff; --mtext-magenta-80: #ff33ff; --mtext-magenta-70: #ff4dff; --mtext-magenta-60: #ff66ff;
  --mtext-purple-90: #8d1aff; --mtext-purple-80: #9933ff; --mtext-purple-70: #a64dff; --mtext-purple-60: #b366ff;
  --mtext-blue-90: #1a1aff; --mtext-blue-80: #3333ff; --mtext-blue-70: #4d4dff; --mtext-blue-60: #6666ff;
  --mtext-blue-cyan-90: #1a8dff; --mtext-blue-cyan-80: #3399ff; --mtext-blue-cyan-70: #4da6ff; --mtext-blue-cyan-60: #66b3ff;
  --mtext-cyan-90: #1affff; --mtext-cyan-80: #33ffff; --mtext-cyan-70: #4dffff; --mtext-cyan-60: #66ffff;
  --mtext-cyan-lime-90: #1aff8d; --mtext-cyan-lime-80: #33ff99; --mtext-cyan-lime-70: #4dffa6; --mtext-cyan-lime-60: #66ffb3;
  --mtext-lime-90: #1aff1a; --mtext-lime-80: #33ff33; --mtext-lime-70: #4dff4d; --mtext-lime-60: #66ff66;
  --mtext-lime-yellow-90: #8dff1a; --mtext-lime-yellow-80: #99ff33; --mtext-lime-yellow-70: #a6ff4d; --mtext-lime-yellow-60: #b3ff66;
  --mtext-yellow-90: #ffff1a; --mtext-yellow-80: #ffff33; --mtext-yellow-70: #ffff4d; --mtext-yellow-60: #ffff66;
  --mtext-orange-90: #ff8c1a; --mtext-orange-80: #ff9933; --mtext-orange-70: #ffa54d; --mtext-orange-60: #ffb266;
}

/* ── Chat bubble palette (Received Msg / Sent Msg dropdowns) ──────────────────
   Same tokens as Preferences ▸ Site Background. The message renderer emits
   data-bubble="<token>" on .msg-card; these rules paint the bubble per theme —
   light tints in Light mode, dark shades in Dark mode — so the inline text colour
   (var(--color-text)) always has contrast. Hex values mirror the [data-bg=...]
   palette in Shared/styles_shared.css. Base rules first so the specific token rules
   (equal specificity) win on source order; the dark base also catches the tokens
   that have no dark shade (spectrum -10 + light-half grays → look like a default
   dark bubble, keeping light text readable). */
.msg-card[data-bubble] { background-color: #ffffff; }

.msg-card[data-bubble="gray-100"] { background-color: #ffffff; }
.msg-card[data-bubble="gray-90"]  { background-color: #e5e5e5; }
.msg-card[data-bubble="gray-80"]  { background-color: #cccccc; }
.msg-card[data-bubble="gray-70"]  { background-color: #b3b3b3; }
.msg-card[data-bubble="gray-60"]  { background-color: #999999; }
.msg-card[data-bubble="gray-50"]  { background-color: #808080; }

.msg-card[data-bubble="red-50"]          { background-color: #ff8080; }
.msg-card[data-bubble="red-40"]          { background-color: #ff9999; }
.msg-card[data-bubble="red-30"]          { background-color: #ffb3b3; }
.msg-card[data-bubble="red-20"]          { background-color: #ffcccc; }
.msg-card[data-bubble="red-10"]          { background-color: #ffe6e6; }
.msg-card[data-bubble="red-magenta-50"]  { background-color: #ff80bf; }
.msg-card[data-bubble="red-magenta-40"]  { background-color: #ff99cc; }
.msg-card[data-bubble="red-magenta-30"]  { background-color: #ffb3d9; }
.msg-card[data-bubble="red-magenta-20"]  { background-color: #ffcce5; }
.msg-card[data-bubble="red-magenta-10"]  { background-color: #ffe6f2; }
.msg-card[data-bubble="magenta-50"]      { background-color: #ff80ff; }
.msg-card[data-bubble="magenta-40"]      { background-color: #ff99ff; }
.msg-card[data-bubble="magenta-30"]      { background-color: #ffb3ff; }
.msg-card[data-bubble="magenta-20"]      { background-color: #ffccff; }
.msg-card[data-bubble="magenta-10"]      { background-color: #ffe6ff; }
.msg-card[data-bubble="purple-50"]       { background-color: #bf80ff; }
.msg-card[data-bubble="purple-40"]       { background-color: #cc99ff; }
.msg-card[data-bubble="purple-30"]       { background-color: #d9b3ff; }
.msg-card[data-bubble="purple-20"]       { background-color: #e5ccff; }
.msg-card[data-bubble="purple-10"]       { background-color: #f2e6ff; }
.msg-card[data-bubble="blue-50"]         { background-color: #8080ff; }
.msg-card[data-bubble="blue-40"]         { background-color: #9999ff; }
.msg-card[data-bubble="blue-30"]         { background-color: #b3b3ff; }
.msg-card[data-bubble="blue-20"]         { background-color: #ccccff; }
.msg-card[data-bubble="blue-10"]         { background-color: #e6e6ff; }
.msg-card[data-bubble="blue-cyan-50"]    { background-color: #80bfff; }
.msg-card[data-bubble="blue-cyan-40"]    { background-color: #99ccff; }
.msg-card[data-bubble="blue-cyan-30"]    { background-color: #b3d9ff; }
.msg-card[data-bubble="blue-cyan-20"]    { background-color: #cce5ff; }
.msg-card[data-bubble="blue-cyan-10"]    { background-color: #e6f2ff; }
.msg-card[data-bubble="cyan-50"]         { background-color: #80ffff; }
.msg-card[data-bubble="cyan-40"]         { background-color: #99ffff; }
.msg-card[data-bubble="cyan-30"]         { background-color: #b3ffff; }
.msg-card[data-bubble="cyan-20"]         { background-color: #ccffff; }
.msg-card[data-bubble="cyan-10"]         { background-color: #e6ffff; }
.msg-card[data-bubble="cyan-lime-50"]    { background-color: #80ffbf; }
.msg-card[data-bubble="cyan-lime-40"]    { background-color: #99ffcc; }
.msg-card[data-bubble="cyan-lime-30"]    { background-color: #b3ffd9; }
.msg-card[data-bubble="cyan-lime-20"]    { background-color: #ccffe5; }
.msg-card[data-bubble="cyan-lime-10"]    { background-color: #e6fff2; }
.msg-card[data-bubble="lime-50"]         { background-color: #80ff80; }
.msg-card[data-bubble="lime-40"]         { background-color: #99ff99; }
.msg-card[data-bubble="lime-30"]         { background-color: #b3ffb3; }
.msg-card[data-bubble="lime-20"]         { background-color: #ccffcc; }
.msg-card[data-bubble="lime-10"]         { background-color: #e6ffe6; }
.msg-card[data-bubble="lime-yellow-50"]  { background-color: #bfff80; }
.msg-card[data-bubble="lime-yellow-40"]  { background-color: #ccff99; }
.msg-card[data-bubble="lime-yellow-30"]  { background-color: #d9ffb3; }
.msg-card[data-bubble="lime-yellow-20"]  { background-color: #e5ffcc; }
.msg-card[data-bubble="lime-yellow-10"]  { background-color: #f2ffe6; }
.msg-card[data-bubble="yellow-50"]       { background-color: #ffff80; }
.msg-card[data-bubble="yellow-40"]       { background-color: #ffff99; }
.msg-card[data-bubble="yellow-30"]       { background-color: #ffffb3; }
.msg-card[data-bubble="yellow-20"]       { background-color: #ffffcc; }
.msg-card[data-bubble="yellow-10"]       { background-color: #ffffe6; }
.msg-card[data-bubble="orange-50"]       { background-color: #ffbf80; }
.msg-card[data-bubble="orange-40"]       { background-color: #ffcc99; }
.msg-card[data-bubble="orange-30"]       { background-color: #ffd9b3; }
.msg-card[data-bubble="orange-20"]       { background-color: #ffe5cc; }
.msg-card[data-bubble="orange-10"]       { background-color: #fff2e6; }

/* 90/80/70/60 levels — light tints filling the 100→50 gap. */
.msg-card[data-bubble="red-90"]          { background-color: #ff1a1a; }
.msg-card[data-bubble="red-80"]          { background-color: #ff3333; }
.msg-card[data-bubble="red-70"]          { background-color: #ff4d4d; }
.msg-card[data-bubble="red-60"]          { background-color: #ff6666; }
.msg-card[data-bubble="red-magenta-90"]  { background-color: #ff1a8c; }
.msg-card[data-bubble="red-magenta-80"]  { background-color: #ff3399; }
.msg-card[data-bubble="red-magenta-70"]  { background-color: #ff4da5; }
.msg-card[data-bubble="red-magenta-60"]  { background-color: #ff66b2; }
.msg-card[data-bubble="magenta-90"]      { background-color: #ff1aff; }
.msg-card[data-bubble="magenta-80"]      { background-color: #ff33ff; }
.msg-card[data-bubble="magenta-70"]      { background-color: #ff4dff; }
.msg-card[data-bubble="magenta-60"]      { background-color: #ff66ff; }
.msg-card[data-bubble="purple-90"]       { background-color: #8d1aff; }
.msg-card[data-bubble="purple-80"]       { background-color: #9933ff; }
.msg-card[data-bubble="purple-70"]       { background-color: #a64dff; }
.msg-card[data-bubble="purple-60"]       { background-color: #b366ff; }
.msg-card[data-bubble="blue-90"]         { background-color: #1a1aff; }
.msg-card[data-bubble="blue-80"]         { background-color: #3333ff; }
.msg-card[data-bubble="blue-70"]         { background-color: #4d4dff; }
.msg-card[data-bubble="blue-60"]         { background-color: #6666ff; }
.msg-card[data-bubble="blue-cyan-90"]    { background-color: #1a8dff; }
.msg-card[data-bubble="blue-cyan-80"]    { background-color: #3399ff; }
.msg-card[data-bubble="blue-cyan-70"]    { background-color: #4da6ff; }
.msg-card[data-bubble="blue-cyan-60"]    { background-color: #66b3ff; }
.msg-card[data-bubble="cyan-90"]         { background-color: #1affff; }
.msg-card[data-bubble="cyan-80"]         { background-color: #33ffff; }
.msg-card[data-bubble="cyan-70"]         { background-color: #4dffff; }
.msg-card[data-bubble="cyan-60"]         { background-color: #66ffff; }
.msg-card[data-bubble="cyan-lime-90"]    { background-color: #1aff8d; }
.msg-card[data-bubble="cyan-lime-80"]    { background-color: #33ff99; }
.msg-card[data-bubble="cyan-lime-70"]    { background-color: #4dffa6; }
.msg-card[data-bubble="cyan-lime-60"]    { background-color: #66ffb3; }
.msg-card[data-bubble="lime-90"]         { background-color: #1aff1a; }
.msg-card[data-bubble="lime-80"]         { background-color: #33ff33; }
.msg-card[data-bubble="lime-70"]         { background-color: #4dff4d; }
.msg-card[data-bubble="lime-60"]         { background-color: #66ff66; }
.msg-card[data-bubble="lime-yellow-90"]  { background-color: #8dff1a; }
.msg-card[data-bubble="lime-yellow-80"]  { background-color: #99ff33; }
.msg-card[data-bubble="lime-yellow-70"]  { background-color: #a6ff4d; }
.msg-card[data-bubble="lime-yellow-60"]  { background-color: #b3ff66; }
.msg-card[data-bubble="yellow-90"]       { background-color: #ffff1a; }
.msg-card[data-bubble="yellow-80"]       { background-color: #ffff33; }
.msg-card[data-bubble="yellow-70"]       { background-color: #ffff4d; }
.msg-card[data-bubble="yellow-60"]       { background-color: #ffff66; }
.msg-card[data-bubble="orange-90"]       { background-color: #ff8c1a; }
.msg-card[data-bubble="orange-80"]       { background-color: #ff9933; }
.msg-card[data-bubble="orange-70"]       { background-color: #ffa54d; }
.msg-card[data-bubble="orange-60"]       { background-color: #ffb266; }

[data-theme="dark"] .msg-card[data-bubble] { background-color: #33373e; }

[data-theme="dark"] .msg-card[data-bubble="gray-50"] { background-color: #808080; }
[data-theme="dark"] .msg-card[data-bubble="gray-40"] { background-color: #666666; }
[data-theme="dark"] .msg-card[data-bubble="gray-30"] { background-color: #4d4d4d; }
[data-theme="dark"] .msg-card[data-bubble="gray-20"] { background-color: #333333; }
[data-theme="dark"] .msg-card[data-bubble="gray-10"] { background-color: #1a1a1a; }
[data-theme="dark"] .msg-card[data-bubble="gray-0"]  { background-color: #000000; }

[data-theme="dark"] .msg-card[data-bubble="red-50"]          { background-color: #800000; }
[data-theme="dark"] .msg-card[data-bubble="red-40"]          { background-color: #660000; }
[data-theme="dark"] .msg-card[data-bubble="red-30"]          { background-color: #4d0000; }
[data-theme="dark"] .msg-card[data-bubble="red-20"]          { background-color: #330000; }
[data-theme="dark"] .msg-card[data-bubble="red-magenta-50"]  { background-color: #800040; }
[data-theme="dark"] .msg-card[data-bubble="red-magenta-40"]  { background-color: #660033; }
[data-theme="dark"] .msg-card[data-bubble="red-magenta-30"]  { background-color: #4d0026; }
[data-theme="dark"] .msg-card[data-bubble="red-magenta-20"]  { background-color: #330019; }
[data-theme="dark"] .msg-card[data-bubble="magenta-50"]      { background-color: #800080; }
[data-theme="dark"] .msg-card[data-bubble="magenta-40"]      { background-color: #660066; }
[data-theme="dark"] .msg-card[data-bubble="magenta-30"]      { background-color: #4d004d; }
[data-theme="dark"] .msg-card[data-bubble="magenta-20"]      { background-color: #330033; }
[data-theme="dark"] .msg-card[data-bubble="purple-50"]       { background-color: #400080; }
[data-theme="dark"] .msg-card[data-bubble="purple-40"]       { background-color: #330066; }
[data-theme="dark"] .msg-card[data-bubble="purple-30"]       { background-color: #26004d; }
[data-theme="dark"] .msg-card[data-bubble="purple-20"]       { background-color: #1a0033; }
[data-theme="dark"] .msg-card[data-bubble="blue-50"]         { background-color: #000080; }
[data-theme="dark"] .msg-card[data-bubble="blue-40"]         { background-color: #000066; }
[data-theme="dark"] .msg-card[data-bubble="blue-30"]         { background-color: #00004d; }
[data-theme="dark"] .msg-card[data-bubble="blue-20"]         { background-color: #000033; }
[data-theme="dark"] .msg-card[data-bubble="blue-cyan-50"]    { background-color: #004080; }
[data-theme="dark"] .msg-card[data-bubble="blue-cyan-40"]    { background-color: #003366; }
[data-theme="dark"] .msg-card[data-bubble="blue-cyan-30"]    { background-color: #00264d; }
[data-theme="dark"] .msg-card[data-bubble="blue-cyan-20"]    { background-color: #001a33; }
[data-theme="dark"] .msg-card[data-bubble="cyan-50"]         { background-color: #008080; }
[data-theme="dark"] .msg-card[data-bubble="cyan-40"]         { background-color: #006666; }
[data-theme="dark"] .msg-card[data-bubble="cyan-30"]         { background-color: #004d4d; }
[data-theme="dark"] .msg-card[data-bubble="cyan-20"]         { background-color: #003333; }
[data-theme="dark"] .msg-card[data-bubble="cyan-lime-50"]    { background-color: #008040; }
[data-theme="dark"] .msg-card[data-bubble="cyan-lime-40"]    { background-color: #006633; }
[data-theme="dark"] .msg-card[data-bubble="cyan-lime-30"]    { background-color: #004d26; }
[data-theme="dark"] .msg-card[data-bubble="cyan-lime-20"]    { background-color: #00331a; }
[data-theme="dark"] .msg-card[data-bubble="lime-50"]         { background-color: #008000; }
[data-theme="dark"] .msg-card[data-bubble="lime-40"]         { background-color: #006600; }
[data-theme="dark"] .msg-card[data-bubble="lime-30"]         { background-color: #004d00; }
[data-theme="dark"] .msg-card[data-bubble="lime-20"]         { background-color: #003300; }
[data-theme="dark"] .msg-card[data-bubble="lime-yellow-50"]  { background-color: #408000; }
[data-theme="dark"] .msg-card[data-bubble="lime-yellow-40"]  { background-color: #336600; }
[data-theme="dark"] .msg-card[data-bubble="lime-yellow-30"]  { background-color: #264d00; }
[data-theme="dark"] .msg-card[data-bubble="lime-yellow-20"]  { background-color: #1a3300; }
[data-theme="dark"] .msg-card[data-bubble="yellow-50"]       { background-color: #808000; }
[data-theme="dark"] .msg-card[data-bubble="yellow-40"]       { background-color: #666600; }
[data-theme="dark"] .msg-card[data-bubble="yellow-30"]       { background-color: #4d4d00; }
[data-theme="dark"] .msg-card[data-bubble="yellow-20"]       { background-color: #333300; }
[data-theme="dark"] .msg-card[data-bubble="orange-50"]       { background-color: #804000; }
[data-theme="dark"] .msg-card[data-bubble="orange-40"]       { background-color: #663300; }
[data-theme="dark"] .msg-card[data-bubble="orange-30"]       { background-color: #4d2600; }
[data-theme="dark"] .msg-card[data-bubble="orange-20"]       { background-color: #331900; }

/* 90/80/70/60 levels — dark shades filling the 100→50 gap. */
[data-theme="dark"] .msg-card[data-bubble="red-90"]          { background-color: #e60000; }
[data-theme="dark"] .msg-card[data-bubble="red-80"]          { background-color: #cc0000; }
[data-theme="dark"] .msg-card[data-bubble="red-70"]          { background-color: #b30000; }
[data-theme="dark"] .msg-card[data-bubble="red-60"]          { background-color: #990000; }
[data-theme="dark"] .msg-card[data-bubble="red-magenta-90"]  { background-color: #e60072; }
[data-theme="dark"] .msg-card[data-bubble="red-magenta-80"]  { background-color: #cc0066; }
[data-theme="dark"] .msg-card[data-bubble="red-magenta-70"]  { background-color: #b30059; }
[data-theme="dark"] .msg-card[data-bubble="red-magenta-60"]  { background-color: #99004c; }
[data-theme="dark"] .msg-card[data-bubble="magenta-90"]      { background-color: #e600e6; }
[data-theme="dark"] .msg-card[data-bubble="magenta-80"]      { background-color: #cc00cc; }
[data-theme="dark"] .msg-card[data-bubble="magenta-70"]      { background-color: #b300b3; }
[data-theme="dark"] .msg-card[data-bubble="magenta-60"]      { background-color: #990099; }
[data-theme="dark"] .msg-card[data-bubble="purple-90"]       { background-color: #7300e6; }
[data-theme="dark"] .msg-card[data-bubble="purple-80"]       { background-color: #6600cc; }
[data-theme="dark"] .msg-card[data-bubble="purple-70"]       { background-color: #5a00b3; }
[data-theme="dark"] .msg-card[data-bubble="purple-60"]       { background-color: #4d0099; }
[data-theme="dark"] .msg-card[data-bubble="blue-90"]         { background-color: #0000e6; }
[data-theme="dark"] .msg-card[data-bubble="blue-80"]         { background-color: #0000cc; }
[data-theme="dark"] .msg-card[data-bubble="blue-70"]         { background-color: #0000b3; }
[data-theme="dark"] .msg-card[data-bubble="blue-60"]         { background-color: #000099; }
[data-theme="dark"] .msg-card[data-bubble="blue-cyan-90"]    { background-color: #0073e6; }
[data-theme="dark"] .msg-card[data-bubble="blue-cyan-80"]    { background-color: #0066cc; }
[data-theme="dark"] .msg-card[data-bubble="blue-cyan-70"]    { background-color: #005ab3; }
[data-theme="dark"] .msg-card[data-bubble="blue-cyan-60"]    { background-color: #004d99; }
[data-theme="dark"] .msg-card[data-bubble="cyan-90"]         { background-color: #00e6e6; }
[data-theme="dark"] .msg-card[data-bubble="cyan-80"]         { background-color: #00cccc; }
[data-theme="dark"] .msg-card[data-bubble="cyan-70"]         { background-color: #00b3b3; }
[data-theme="dark"] .msg-card[data-bubble="cyan-60"]         { background-color: #009999; }
[data-theme="dark"] .msg-card[data-bubble="cyan-lime-90"]    { background-color: #00e673; }
[data-theme="dark"] .msg-card[data-bubble="cyan-lime-80"]    { background-color: #00cc66; }
[data-theme="dark"] .msg-card[data-bubble="cyan-lime-70"]    { background-color: #00b35a; }
[data-theme="dark"] .msg-card[data-bubble="cyan-lime-60"]    { background-color: #00994d; }
[data-theme="dark"] .msg-card[data-bubble="lime-90"]         { background-color: #00e600; }
[data-theme="dark"] .msg-card[data-bubble="lime-80"]         { background-color: #00cc00; }
[data-theme="dark"] .msg-card[data-bubble="lime-70"]         { background-color: #00b300; }
[data-theme="dark"] .msg-card[data-bubble="lime-60"]         { background-color: #009900; }
[data-theme="dark"] .msg-card[data-bubble="lime-yellow-90"]  { background-color: #73e600; }
[data-theme="dark"] .msg-card[data-bubble="lime-yellow-80"]  { background-color: #66cc00; }
[data-theme="dark"] .msg-card[data-bubble="lime-yellow-70"]  { background-color: #5ab300; }
[data-theme="dark"] .msg-card[data-bubble="lime-yellow-60"]  { background-color: #4d9900; }
[data-theme="dark"] .msg-card[data-bubble="yellow-90"]       { background-color: #e6e600; }
[data-theme="dark"] .msg-card[data-bubble="yellow-80"]       { background-color: #cccc00; }
[data-theme="dark"] .msg-card[data-bubble="yellow-70"]       { background-color: #b3b300; }
[data-theme="dark"] .msg-card[data-bubble="yellow-60"]       { background-color: #999900; }
[data-theme="dark"] .msg-card[data-bubble="orange-90"]       { background-color: #e67200; }
[data-theme="dark"] .msg-card[data-bubble="orange-80"]       { background-color: #cc6600; }
[data-theme="dark"] .msg-card[data-bubble="orange-70"]       { background-color: #b35900; }
[data-theme="dark"] .msg-card[data-bubble="orange-60"]       { background-color: #994c00; }

[data-theme="dark"] .reply-quote {
    background: var(--color-bg-input);
    border-left-color: #555;
}
[data-theme="dark"] .reply-quote-label {
    color: #aaa;
}
[data-theme="dark"] .reply-quote-close {
    color: #aaa;
}
[data-theme="dark"] .reply-quote-toggle {
    color: #6ea8fe;
}
[data-theme="dark"] .msg-menu {
    background: #2a2a2a;
    border-color: #555;
}
[data-theme="dark"] .msg-action-item {
    background: #2a2a2a !important;
    color: #e8eaed !important;
    border-bottom-color: #444;
}
[data-theme="dark"] .msg-action-item:hover {
    background: #3a3a3a !important;
}

/* Round all controls inside the OPTIONS drawer to match the compose textbox/Member dropdown */
.chat-options-drawer .textbox,
.chat-options-drawer input[type="text"],
.chat-options-drawer select,
.chat-options-drawer textarea{border-radius:8px;background-color:var(--color-bg-input);color:var(--color-text)}

/* Status/-Pins/+Hidden/Date Range/Archive/Search notifier tags.
   Background pinned here to replace inline BackColor="Black" on seven
   ChatUC LinkButtons (lblMyStatus, lblDateRange, lblArchive,
   lblIgnoringPins, lblShowingHidden, lblHidingLowPri, lblSearching). */
a.linkwhite{
  display:inline-block;
  padding:2px 10px;
  border-radius:8px;
  font-size:10pt;
  line-height:1.5;
  vertical-align:middle;
  margin:0 2px;
  background-color:#000;
  box-shadow:var(--shadow-linkwhite);
}

/* Post button used for the most recent message gets a white inset border. */
.button.last-used-post{box-shadow:inset 0 0 0 2px #fff !important;}

/* `.checkbox.toolbar` — modifier for a checkbox sitting inline with the
   .button.transparent toolbar buttons (currently the "U/L" checkbox in the
   chat compose row). Colors the rendered <label> text the same primary-cyan
   as the buttons' outline so the row reads as one continuous strip.
   The wrapping span gets the color too — when asp:CheckBox has Text, ASP.NET
   puts CssClass on the span, and we want the label child to inherit. */
.checkbox.toolbar, .checkbox.toolbar label { color: var(--color-primary, #0090C8); }
.checkbox.toolbar > input[type="checkbox"] { outline: 1px solid var(--color-primary, #0090C8); outline-offset: -1px; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   Breakpoints:
     480px  — small phones
     640px  — large phones / phablets
     768px  — tablets (already used for page-wrapper, form-group)
     992px  — desktop (already used for nav)
   ════════════════════════════════════════════════════════════════════ */

/* ── Tables: horizontal scroll on narrow screens ──────────── */
@media (max-width: 768px) {
    .data-table,
    .admin-queue-table,
    .members-table { font-size: var(--font-size-xs); }

    .data-table th,
    .data-table td,
    .admin-queue-table th,
    .admin-queue-table td,
    .members-table th,
    .members-table td { padding: 0.35rem 0.4rem; }

}

/* ── Page header: stack title + actions vertically ────────── */


/* ── Dashboard sections: stack title/controls on narrow ──── */
@media (max-width: 480px) {
    .dash-section { flex-wrap: wrap; }
    .dash-section .dash-section-control { width: 100%; }
    .dash-section .dash-section-control select,
    .dash-section .dash-section-control .textbox { width: 100%; }
}

/* ── Result cards: let meta wrap; shrink action buttons ──── */
@media (max-width: 480px) {
    .result-card { padding: 0.6rem 0.75rem; }
    .result-card-title { font-size: 1rem; }
    .result-card-status { display: block; margin-left: 0; margin-top: 0.15rem; }
    .result-card-actions .button { font-size: 0.8rem; padding: 0.2rem 0.45rem; }
}

/* ── Contact rows: tighter on mobile ─────────────────────── */
@media (max-width: 480px) {
    .contact-row { padding: 0.5rem 0.6rem; }
    .contact-row-actions .button { font-size: 0.75rem; padding: 0.1rem 0.4rem; }
}

/* ── Sticky save bar: full-width on mobile ────────────────── */
@media (max-width: 640px) {
    .sticky-save-bar {
        left: 0;
        right: 0;
        transform: none;
        border-radius: 0;
        justify-content: center;
    }
}

/* ── Availability grid: stack day label above its time windows ── */
@media (max-width: 480px) {
    .availability-day { flex-basis: 100%; }
    .availability-windows { gap: 0.4rem 0.75rem; }
    .availability-window { flex: 1 1 100%; }
    .availability-grid .availability-time {
        width: auto;
        min-width: 0;
        flex: 1 1 4.5rem;
    }
}

/* ── Chat options drawer: fit narrow viewports ────────────── */
@media (max-width: 400px) {
    .chat-options-drawer { width: calc(100vw - 20px); right: calc(-100vw); }
    .chat-options-drawer.open { right: 0; }
}

/* ── Chat message cards: wider on small screens ───────────── */
@media (max-width: 480px) {
    .msg-card { max-width: 92%; }
}

/* ── Chat bar banner: allow wrapping on mobile ───────────── */
@media (max-width: 640px) {
    .banner-chatbar { padding: 0.3rem 0.5rem; font-size: var(--font-size-xs); line-height: 1.6; }
    .cb-row { white-space: normal; }
}

/* ── Message action items: allow wrapping in bottom sheet ── */
@media (max-width: 480px) {
    .msg-action-item { white-space: normal; font-size: 11pt; padding: 12px 14px; }
}

/* ── Search row: stack on small screens ───────────────────── */
@media (max-width: 480px) {
    .search-row { flex-direction: column; }
    .search-row .input-clearable { flex-basis: auto; }
    .search-row .button { width: 100%; justify-content: center; }
}

/* ── Footer: tighter spacing on mobile ───────────────────── */


/* ── Member search age row: wrap inputs ──────────────────── */
@media (max-width: 480px) {
    .member-age-row { flex-wrap: wrap; }
}

/* ── Chat compose area: tighter padding ──────────────────── */
/* The `.send-options-grid { grid-template-columns: repeat(2, auto) }` override that lived here
   is GONE (2026-07-30): the send-flag chips are a wrapping flex row now, so they reflow at every
   width on their own and a per-breakpoint column count is both inert and misleading. */

/* ── Chat lightbox: larger image on mobile ───────────────── */
@media (max-width: 480px) {
    .chat-lb-img { max-width: 100vw; max-height: 70vh; }
    .chat-lb-controls { gap: 8px; flex-wrap: wrap; justify-content: center; }
    .chat-lb-nav { padding: 6px 12px; font-size: 12pt; }
}

/* ── Global: prevent horizontal page scroll on narrow viewports.
   Long unbroken strings (URLs, hashes, IDs) inside .page-wrapper used to push
   the body wider than the viewport, producing both a horizontal scrollbar AND
   off-screen content on phones. Pinning body to overflow-x:hidden and forcing
   word-wrap on the wrapper kills both. .typing-speed-page deliberately breaks
   out of the wrapper (100vw bleed); pin its width too so it can't overflow. ── */
@media (max-width: 640px) {
    html, body { overflow-x: hidden; }
    .page-wrapper { word-wrap: break-word; overflow-wrap: anywhere; }
    .typing-speed-page { max-width: 100vw; }
}

/* ── Tables: horizontal-scroll wrappers + tighter padding.
   Wide data tables (Admin queue, members list, vote results, calendar, etc.)
   used to burst the page width on phones. Pinning them to display:block +
   overflow-x:auto lets the user pan the table without breaking the page.
   .qmeet-calendar shrinks padding so the 7-column grid fits in ~360px.
   .test-table / .sql-results-table / .cuv-table are admin-built tables — admins
   reach for phones too, so include them so the admin console doesn't bust. ── */
@media (max-width: 640px) {
    .data-table,
    .admin-queue-table,
    .members-table,
    .vote-results-table,
    .popular-interests-table,
    .subscribe-details-table,
    .availability-table,
    .test-table,
    .sql-results-table,
    .cuv-table,
    .table2 {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* The members roster has only 1–2 narrow columns and never needs to scroll, so
       the shared display:block rule above is wrong for it: block makes the OUTER box
       100% but lets the rows/cells shrink to content and float narrow inside the card.
       Keep it a real table at full width so every row spans the whole card. */
    .members-table.mr-table {
        display: table;
        width: 100%;
        min-width: 0;
        overflow-x: visible;
    }
    .qmeet-calendar { font-size: var(--font-size-xs); }
    .qmeet-calendar td,
    .qmeet-calendar th { padding: 3px 4px; }
    .qmeet-calendar a { min-width: 1.2rem; }
}

/* Opt-in horizontal-scroll wrapper for any raw <table>. Pages with legacy
   markup can wrap a <div class="table-responsive"> around the table to keep
   it from busting the viewport on phones. Always block-scrolls on mobile;
   on desktop it's a no-op. ── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-responsive > table { min-width: 100%; }

/* ── Forms: prevent iOS auto-zoom-on-focus.
   Mobile Safari zooms into any form control whose computed font-size is below
   16px when the user taps to focus it. Several of our compact inputs (textbox,
   dropdown, datebox, status-input, file-upload) inherit a smaller body font.
   Pin them to 16px on small viewports so the focus tap doesn't reframe the
   whole page. Desktop sizing is unaffected. ── */
@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select,
    .textbox,
    .textarea,
    .dropdown,
    .date-picker { font-size: 16px; }
}

/* ── Buttons: 44×44 minimum tap target on mobile.
   WCAG 2.5.5 + iOS/Android UX guidelines call for a 44px touch target. Our
   compact .button.small (used in result-card-actions, contact-row-actions,
   chat msg-actions) sits at ~28-32px on desktop, which is fine for a mouse
   but tough for fingers. Bump the floor on phones; let the .button-w-* sizing
   utilities stay as-is. ── */
@media (max-width: 640px) {
    .button,
    button.button,
    a.button,
    input[type="submit"].button,
    input[type="button"].button {
        min-height: 40px;
    }
    .nav-toggle { min-width: 44px; min-height: 44px; }
}

/* ── Forms: stack form-actions buttons full-width on tiny screens.
   Multi-button confirm/cancel rows (Save / Cancel / Delete) were squishing on
   narrow phones; stack and stretch so each button gets full thumb-tap area. ── */
@media (max-width: 480px) {
    .form-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .form-actions .button { width: 100%; justify-content: center; }
}

/* ── Loc-row (EventSearch / member search city/state/country): the three flex
   children were squishing each input to ~80px on narrow phones. Let the city
   span the full row and have state/country share line two. ── */
@media (max-width: 480px) {
    .loc-row { gap: 0.4rem; }
    .loc-row .loc-field-city    { flex: 1 1 100%; min-width: 0; }
    .loc-row .loc-field-state   { flex: 1 1 calc(50% - 0.2rem); min-width: 0; }
    .loc-row .loc-field-country { flex: 1 1 calc(50% - 0.2rem); min-width: 0; }
}

/* ── Banners: drop horizontal padding so narrow text doesn't wrap to 4 lines.
   Affects chat-bar, view-only, anonymous-promo, and any other site-wide
   notification strip mounted in the masters. ── */
@media (max-width: 480px) {
    .banner-anon,
    .banner-viewonly { padding: 0.5rem 0.6rem; font-size: var(--font-size-xs); line-height: 1.4; }
}

/* ── Section bars: keep title and control on one row but allow wrap on tiny
   screens where a long "▼ All categories" dropdown would overflow. ── */
@media (max-width: 480px) {
    .dash-section { padding: 0.35rem 0.55rem; gap: 0.3rem; }
    .dash-section h2,
    .dash-section .dash-section-title { font-size: 0.95rem; letter-spacing: 0.02em; }
    .section-bar { padding: 0.35rem 0.55rem; font-size: 0.95rem; letter-spacing: 0.02em; }
}

/* ── Page-header title row: stack back-btn above title on tiny screens so
   long page titles ("Manage Event Members → Bulk add") don't elide. ── */
@media (max-width: 480px) {
    .page-header-title-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

/* ── Image thumbnails: shrink the 120/160px fixed widths on phones so the
   row doesn't horizontally scroll. EventDetails photo strip and User profile
   pic both used to bleed off the right edge of small screens. ── */
@media (max-width: 480px) {
    .event-file-thumb     { width: 88px; height: 88px; }
    .profile-pic-preview  { width: 120px; }
    .files-to-send-preview{ width: 100%; }
}

/* ── Error / diagnostic <pre> blocks: keep the panel inside the viewport.
   Stacktraces are long and unbroken; let them wrap (already set) but tighten
   padding/font so the wrap doesn't produce 30+ lines on a phone. ── */
@media (max-width: 480px) {
    .error-detail { padding: 0.6rem; font-size: 0.72rem; max-height: 260px; }
}

/* ── Sticky-save bar on phones: keep above the iOS home-indicator and let
   the inner buttons share the row without overflow. The base rule already
   pins it left/right at <=640px; this adds safe-area padding. ── */
@media (max-width: 640px) {
    .sticky-save-bar {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .sticky-save-bar .button { flex: 1 1 auto; justify-content: center; }
}

/* ── Footer: stack link-row and copy-row, and let the link separators fold.
   On <=480 the chain of "About · Help · Tips · …" used to overflow to a
   second row anyway; this just lets it wrap cleanly with smaller gaps. ── */
@media (max-width: 480px) {
    .site-footer-links,
    .site-footer-copy { line-height: 1.6; padding: 0.25rem 0.5rem; }
    .site-footer-links a,
    .site-footer-copy  a { display: inline-block; padding: 0.15rem 0.25rem; }
}

/* ── Modal box: take more of the viewport on phones so the action buttons
   inside (Log in / Stay here / Close / etc.) aren't squeezed. ── */
@media (max-width: 480px) {
    .modal-box     { width: calc(100vw - 1.5rem); max-width: 100%; padding: 1rem; }
    .modal-footer  { flex-wrap: wrap; gap: 0.4rem; }
    .modal-footer .button { flex: 1 1 100%; justify-content: center; }
}

/* ── Captcha row on ContactUs: shrink answer box to ~60px so the problem
   text and Submit can share the row on tiny phones. ── */
@media (max-width: 360px) {
    .captcha-row     { gap: 0.35rem; }
    .captcha-answer  { max-width: 60px; }
}

/* ── Chat reply quote: tighter padding + smaller close-button hit area so a
   long quoted message doesn't take half the chat panel. ── */
@media (max-width: 480px) {
    .reply-quote      { padding: 0.3rem 1.6rem 0.3rem 0.5rem; font-size: var(--font-size-xs); }
    .reply-quote-close{ top: 0.25rem; right: 0.3rem; }
}

/* ── Nav brand: shrink the qMEET wordmark on tiny phones so it shares a row
   with the hamburger toggle and any unread badge without wrapping. ── */
@media (max-width: 360px) {
    .nav-brand { font-size: 1.1rem; }
}

/* ── Print page: table should not scroll ─────────────────── */
@media print {
    .data-table,
    .admin-queue-table,
    .members-table,
    .vote-results-table,
    .popular-interests-table,
    .subscribe-details-table,
    .availability-table,
    .test-table,
    .sql-results-table,
    .cuv-table,
    .table-responsive,
    .table2 { display: table; overflow: visible; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — 2026-06-06 follow-up
   Catches a handful of patterns that prior passes didn't cover:
   raw <pre>/<code> blocks, images without a sized wrapper, the
   .page-header actions row when it has a sibling, and PWA standalone-
   mode safe-area inset at the top of the nav.
   ════════════════════════════════════════════════════════════════════ */

/* ── <img> / <pre> / <code> baseline: keep content inside the viewport.
   Images without a width attribute or sizing class (e.g. inline images in
   ContactUsStatus admin replies, EventDetails body copy) used to push the
   page wider than the viewport on phones. Pinning max-width:100% is a
   non-invasive cap — explicit Width="…" attributes still win because the
   ASP.NET Image control emits inline `style="width:..."` which beats a
   class selector. <pre>/<code> get word-wrap so a long stacktrace or SQL
   line can't horizontally scroll the whole page. ── */
@media (max-width: 640px) {
    .page-wrapper img:not([width]):not(.no-fluid) {
        max-width: 100%;
        height: auto;
    }
    .page-wrapper pre,
    .page-wrapper code {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .page-wrapper pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: pre-wrap;
    }
}

/* ── Page header: stack title row + actions row on phones so a long
   page title doesn't elbow the 📋 Share / 🖨 Print buttons off-screen.
   EventDetails / GroupDetails / Dashboard / ContactUsStatus all use
   the .page-header-actions slot. ── */
@media (max-width: 640px) {
    .page-header {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .page-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        width: 100%;
    }
    .page-header-actions .button { flex: 0 1 auto; }
}

/* ── Modal overlay: keep tall modals scrollable on short phone viewports.
   The post-login modal (Install + Push cards + instructions) can exceed
   100vh on a 568px-tall phone in landscape; without overflow:auto the
   user can't reach the bottom buttons. Inner .modal-box also caps its
   own height so the *box* scrolls, not the page behind it (preserves the
   backdrop-tap-to-close affordance). ── */
@media (max-width: 640px) {
    .modal-overlay {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem;
        align-items: flex-start;
    }
    .modal-box {
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
        margin: 0.5rem auto;
    }
}

/* ── Bulk actions toolbar: let the count text shrink so the action button
   always stays visible on narrow screens. The 4rem floor on .bulk-actions-count
   pushed the "Remove" / "Unblock" buttons partly off-screen on 320px phones. ── */
@media (max-width: 480px) {
    .bulk-actions { gap: 0.4rem; }
    .bulk-actions-count { min-width: 0; flex: 0 1 auto; font-size: var(--font-size-xs); }
    .bulk-actions-btn { flex: 1 1 auto; }
}

/* ══ Notched / safe-area devices (iPhone X and later, and friends) ══════════════
   QMR-234, 2026-08-11. Replaces a two-rule `@media (display-mode: standalone)`
   block that lived here and reserved insets on .site-nav and .site-footer.

   ⚠ THOSE TWO RULES HAD NEVER DONE ANYTHING, and neither had the three other
   env(safe-area-inset-*) rules elsewhere in this file. env() only returns a real
   number when the viewport meta carries viewport-fit=cover; without it the page is
   laid out INSIDE the safe area by the browser and every inset resolves to its 0px
   fallback. Site.Master now sets viewport-fit=cover, so this whole family goes live
   together — the meta tag and this block are a pair.

   The old .site-footer rule was also wrong in a way that only showed once the
   insets were live: `padding-bottom: env(...)` REPLACED the footer's 1.5rem rather
   than adding to it, so on any standalone install with no bottom inset (a desktop
   PWA, an older phone) the footer lost its bottom padding entirely. Every value
   below is a calc() over the shipped number for exactly that reason.

   SPECIFICITY IS DELIBERATE. Content/styles.css loads BEFORE Shared/styles_shared.css
   (Bundle.config), and .site-nav / .page-wrapper / .site-footer / .back-to-top /
   .toc-btn are all defined there — so a bare `.page-wrapper { }` here would lose the
   cascade silently. The leading `body ` / `main` qualifier is what wins it.

   ON A DEVICE WITH NO INSETS every rule here collapses to the value it already had,
   so this is a no-op on desktop, Android without a cutout, and older phones. ── */

/* The nav's painted area grows upward under the status bar. --nav-height is
   redefined rather than just padding the bar, because a dozen other rules position
   things "below the nav" off that token (dropdown panels, sticky offsets,
   scroll-padding-top) and would otherwise drift by the inset. Doubled :root beats
   the shared sheet's own :root at equal-order-but-later. */
:root:root { --nav-height: calc(56px + env(safe-area-inset-top, 0px)); }
body .site-nav { padding-top: env(safe-area-inset-top, 0px); }
/* Nav CONTENT is inset from the cutout; the bar's BACKGROUND still bleeds to the
   physical edge, which is the whole point of viewport-fit=cover. */
body .site-nav .nav-inner {
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}

/* Page gutters. The three base values mirror styles_shared.css's own .page-wrapper
   breakpoints (0.65rem at <=575, 1rem, 1.5rem at >=768) — if those move, move these.
   Left/right only: the wrapper never touches the top or bottom edge. Scoped to
   `screen` so the print rule's `padding: 0` is left alone. */
@media screen and (max-width: 575px) {
    body main.page-wrapper {
        padding-left: calc(0.65rem + env(safe-area-inset-left, 0px));
        padding-right: calc(0.65rem + env(safe-area-inset-right, 0px));
    }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
    body main.page-wrapper {
        padding-left: calc(1rem + env(safe-area-inset-left, 0px));
        padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    }
}
@media screen and (min-width: 768px) {
    body main.page-wrapper {
        padding-left: calc(1.5rem + env(safe-area-inset-left, 0px));
        padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
    }
}

/* The three stacked notification bars run edge to edge, so their TEXT needs the side
   inset or it slides under the cutout in landscape. Base values copied from the
   "all three bars share this inset" padding they already carry. */
body .banner-chatbar,
body .banner-events,
body .banner-invites {
    padding-left: calc(0.35rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.5rem + env(safe-area-inset-right, 0px));
}

/* Footer sits on the bottom edge, so it takes the home-indicator inset as well.
   Values mirror styles_shared.css (1.5rem/1rem, tightening to 1rem/0.75rem on
   phones). */
@media screen {
    body .site-footer {
        padding-left: calc(1rem + env(safe-area-inset-left, 0px));
        padding-right: calc(1rem + env(safe-area-inset-right, 0px));
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
}
@media screen and (max-width: 575px) {
    body .site-footer {
        padding-left: calc(0.75rem + env(safe-area-inset-left, 0px));
        padding-right: calc(0.75rem + env(safe-area-inset-right, 0px));
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Fixed controls are positioned against the VIEWPORT, so no amount of page padding
   reaches them — each needs its own offset raised by the inset. .sticky-save-bar
   (<=640px) and .qm-mp-movebar already carry a bottom inset of their own and are
   deliberately NOT repeated here. The top-right pill cluster is handled at its own
   block further down, through --pill-cluster-right / --pill-cluster-top, because a
   later rule there would override anything written here. */
body .back-to-top {
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
body .toc-btn {
    right: calc(4.2rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
body .banner-events-restore {
    left: calc(0.75rem + env(safe-area-inset-left, 0px));
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
body .banner-invites-restore {
    left: calc(0.75rem + env(safe-area-inset-left, 0px));
    bottom: calc(3.45rem + env(safe-area-inset-bottom, 0px));
}
body .chat-toast-fixed {
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px));
}

/* ── Section bar + dash-section: allow the heading text to wrap rather than
   force horizontal overflow when a category name + control crowds the row. ── */
@media (max-width: 480px) {
    .section-bar { white-space: normal; overflow-wrap: anywhere; }
    .dash-section h2,
    .dash-section .dash-section-title { overflow-wrap: anywhere; min-width: 0; }
}

/* ── Captcha / inline math problem rows: ContactUs.ascx already covers
   captcha-row at 360px. Extend the same wrap to .form-actions ROWS that
   ContactUs.ascx mounts inside .alert-panel banners so a long error
   message doesn't force the parent to scroll. ── */
@media (max-width: 480px) {
    .alert-panel { overflow-wrap: anywhere; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — 2026-06-10 follow-up
   A prior audit found no horizontal-overflow breaks (every min-width is
   <=220px, so nothing busts a 320px viewport). This pass only extends the
   site's established "primary CTAs and cards go full-width on phones"
   pattern — already applied to .form-actions / .search-row / .modal-footer
   buttons — to the last couple of fixed-min-width components that didn't yet
   follow it. Purely additive, scoped to narrow breakpoints; desktop is
   untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fixed-min-width primary buttons: stretch to full thumb-width on phones.
   .subscribe-btn (Notifications push CTA) carried a 200px min-width that left
   it hugging the centre of a full-bleed card on small screens; full-width
   matches every other mobile CTA on the site. ── */
@media (max-width: 480px) {
    .subscribe-btn { min-width: 0; width: 100%; }
}

/* The .countdown narrow-screen rules live AFTER the .countdown base block
   below (a same-specificity rule must follow it in source order to win the
   cascade on mobile). See "Countdown: full-width on phones" further down. ── */

/* ── Countdown widget (EventDetails) ───────────────────────── */

.countdown {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0.75rem 0.5rem 0;
    border-radius: var(--border-radius);
    background-color: var(--color-primary-light);
    border-left: 4px solid var(--color-primary);
    min-width: 220px;
}
.countdown--ends { border-left-color: var(--color-danger); background-color: var(--color-danger-bg); }

.countdown-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-medium);
}
.countdown-digits {
    font-size: 2rem;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    display: flex;
    gap: 0.2rem;
    align-items: baseline;
}
.countdown-digits span,
.countdown-digits .label { font-size: 1em; }
.countdown-units {
    display: flex;
    gap: 0.9rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Countdown: full-width on phones (2026-06-10 follow-up).
   On phones each timer already sits on its own row (separate UpdatePanels),
   so let the 220px inline-flex box fill the row as a banner instead of
   leaving dead space to its right. These rules MUST follow the .countdown
   base block above — same specificity, so source order decides the winner.
   box-sizing:border-box is required: the base rule's horizontal padding +
   left border would otherwise push width:100% past the viewport edge.
   On the smallest phones trim the 2rem digits so a "12:23:59" readout never
   crowds a 320px-class screen. */
@media (max-width: 480px) {
    .countdown {
        display: flex;
        width: 100%;
        min-width: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
}
@media (max-width: 360px) {
    .countdown-digits { font-size: 1.6rem; }
}

/* ── Search & pagination rows ──────────────────────────────── */

.search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0.75rem;
}
.search-row .textbox,
.search-row .input-clearable { flex: 1 1 220px; min-width: 180px; }
.search-row .button { flex: 0 0 auto; }

.input-clearable-grow { flex: 1 1 220px; min-width: 180px; }

/* EventSearch's search box stays a single compact row even on phones: the search
   term fills the width and the 🔍 button sits to its right. Without this, the
   global "@media (max-width:480px) .search-row{flex-direction:column}" rule
   centered a narrow input with the button stacked full-width below it (the "huge
   space around the box"). The in-field × clears the term — no separate button. */
.search-card .search-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.search-card .search-row .input-clearable-grow {
    flex: 1 1 auto;
    min-width: 0;
}
.search-card .search-row .button {
    width: auto;
    flex: 0 0 auto;
}

/* ── Mobile: keep stacked search boxes a normal height ─────────────────────────
   The global "@media(max-width:480px){.search-row{flex-direction:column}}" rule
   stacks a search row into a COLUMN on phones. A child input's `flex: 1 1 220px`
   basis is then measured on the (now VERTICAL) main axis, so the box renders
   ~220px TALL — e.g. ImpersonateUser's "Find a user" box, and any other page whose
   .search-row stacks. Reset the basis to auto and stretch items to full width so
   the box keeps its natural single-line height. Placed AFTER the base .search-row
   rules so it wins by source order; scoped so the row-preserving pages
   (.search-card / .interest-search-row, higher specificity) are untouched. */
@media (max-width: 480px) {
    .search-row,
    .imp-picker .search-row { align-items: stretch; }
    .search-row .textbox,
    .search-row .input-clearable,
    .search-row .input-clearable-grow,
    .imp-picker .search-row #txtSearch { flex-basis: auto; }
}

/* ── Alert-panel body wrapper ───────────────────────────────────────────────────
   HISTORICAL: .alert-panel used to be display:flex, so several block children
   (e.g. EditEvent/EditGroup's "not live yet" banner = a <b>heading</b> + a <ul>)
   lined up as side-by-side COLUMNS, and .alert-flow existed to collapse them back
   into one full-width flex child. The shared .alert-panel is plain BLOCK flow as
   of 2026-07-21 (see styles_shared.css §10), so that no longer happens and the
   wrapper is optional — kept because ~a dozen pages still carry the markup, and
   the margin rules below still do useful work. The flex declaration is inert
   under block flow and harmless if the panel is ever a flex item again. */
.alert-panel > .alert-flow { flex: 1 1 100%; min-width: 0; }
.alert-flow > :first-child { margin-top: 0; }
.alert-flow ul { margin-bottom: 0; }

/* ── Rich-text formatting buttons (Bold / Underline / Italic / List) ───────────
   These sit in a .form-actions row under the description box on EditEvent/
   EditGroup. The shared mobile rule stretches .form-actions .button to full width;
   these little formatting buttons should stay their natural size and wrap instead.
   Higher specificity (.form-actions.format-buttons) wins over the mobile rule. */
.form-actions.format-buttons { flex-direction: row; flex-wrap: wrap; align-items: center; }
.form-actions.format-buttons .button { width: auto; flex: 0 0 auto; justify-content: center; }

/* ── EventSearch / GroupSearch: 🔍 Search + ↺ Reset stay side by side ───────────
   The shared mobile rule stacks .form-actions buttons full-width; for these two
   filter actions we want them on one row (Search grows via its inline flex:1 1 auto,
   Reset stays compact). Higher specificity wins over the mobile stacking rule. */
.form-actions.search-actions { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0.5rem; }
.form-actions.search-actions .button { width: auto; }

/* ── EventSearch / GroupSearch: ▼ Show Filters + 🗺 Show Map stay side by side ──
   Same story as .search-actions: the shared mobile rule would stack these two
   toggle buttons full-width; keep them on one row (Show Map sits to the right of
   Show Filters), each sized to its content. */
.form-actions.search-toggle-row { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0.5rem; }
.form-actions.search-toggle-row .button { width: auto; flex: 1 1 auto; }

/* ── Filter panel corner × (EventSearch / GroupSearch) ─────────────────────────
   A dismiss button pinned to the top-right of the open Filters card. Tapping it
   applies the current filters and collapses the panel (server handler shared with
   🔍 Search). .has-filter-close makes the card the positioning context; padding-right
   keeps the grid clear of the button. */
.has-filter-close { position: relative; }
.has-filter-close > .es2-filter-grid,
.has-filter-close > .form-group:first-of-type { padding-right: 2.25rem; }
.filter-close-x {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2rem;
    height: 2rem;
    min-width: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--border-color, #ccc);
    background: transparent;
    color: var(--text-muted, #666);
    cursor: pointer;
    z-index: 3;
}
.filter-close-x:hover,
.filter-close-x:focus {
    background: var(--color-danger-bg, #fdecea);
    color: var(--color-danger, #b3261e);
    border-color: var(--color-danger, #b3261e);
}

/* ── Rich-text description editor (EditEvent / EditGroup) ──────────────────────
   Progressive enhancement built by Scripts/richtext.js over the hidden .rt-source
   textarea: a toolbar (B / I / U / lists) above a contenteditable surface. Uses the
   shared --color-* tokens so it follows light/dark automatically. */
.rt-source { display: none !important; }
.rt-editor { margin-top: 0.25rem; }
.rt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: var(--color-bg-input);
}
.rt-btn {
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}
.rt-btn.rt-b { font-weight: 800; }
.rt-btn.rt-i { font-style: italic; }
.rt-btn.rt-u { text-decoration: underline; }
.rt-btn:hover,
.rt-btn:focus { border-color: var(--color-accent); outline: none; }
.rt-btn.rt-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.rt-content {
    min-height: 8rem;
    height: auto;
    max-height: 600px;
    overflow-y: auto;
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.rt-content:focus { outline: none; border-color: var(--color-border-focus); }
.rt-content ul,
.rt-content ol { margin: 0.35rem 0 0.35rem 1.5rem; padding-left: 0.5rem; }
.rt-content li { margin: 0.15rem 0; }
.rt-content p { margin: 0 0 0.5rem; }
.rt-content.rt-empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
    pointer-events: none;
}
.char-counter-over { color: var(--color-danger); font-weight: 700; }

.interests-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0.75rem;
}
.interests-pagination .button { flex: 0 0 auto; min-width: 2.5rem; }
.interests-pagination .textbox.interests-pagination__index { width: 4rem; text-align: center; }
.interests-pagination .textbox.interests-pagination__rows  { width: 4rem; }
.interests-pagination .label { margin-left: 0.5rem; }

.swatch {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    font-weight: var(--font-weight-medium);
}
.swatch--top         { background-color: #d4edbc; color: #2d5016; border-color: #84cc16; }
.swatch--interested  { background-color: #b9d8a7; color: #1b3b0f; border-color: #65a30d; }
.swatch--indifferent { background-color: #cfe2ff; color: #084298; border-color: #0d6efd; }
.swatch--notint      { background-color: #f8d7da; color: #842029; border-color: #dc3545; }

.section-bar-top           { border-left: 4px solid #84cc16; background-color: #d4edbc22; }
.section-bar-interested    { border-left: 4px solid #65a30d; background-color: #b9d8a722; }
.section-bar-indifferent   { border-left: 4px solid #0d6efd; background-color: #cfe2ff22; }
.section-bar-notinterested { border-left: 4px solid #dc3545; background-color: #f8d7da22; }
.section-bar-untagged      { border-left: 4px solid #6c757d; background-color: #f3f4f622; }

/* ── ChatUC2 (Chat, Chat2, EventDetails chat, GroupDetails chat) ── */

.chat-hidden { display: none !important; }

.chat-pad-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.chat-pad-left-4 { padding-left: 0.5rem; }
/* Flex-wrap with a gap so the toolbar buttons (View, CC, X MSG, OPTIONS, LIVECHAT …)
   and the status pills keep both horizontal AND vertical spacing when they wrap to a
   new line — plain inline flow gave wrapped rows zero vertical buffer. Mirrors .view-bar. */
.chat-margin-3 { margin: 0.5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
/* Narrower toolbar buttons — tighten horizontal padding and drop the shared 44px
   min-width (min-height stays, preserving the vertical tap target) so View / CC /
   X MSG / OPTIONS / LIVECHAT / X U/L / Unread / 64H / All pack tighter. */
.chat-margin-3 .button.small,
.view-bar .button.small {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    min-width: 0;
}
.chat-recipient-select { flex: 1 1 220px; min-width: 200px; }
/* Compose-area wrapper inside .chat-pad-row (flex container). flex-basis 100%
   + wrap on the parent puts the composer on its own row spanning the full
   width. min-width:0 lets the textbox honor its width:100% without being held
   open by the textarea's intrinsic min-content size. */
.chat-compose-row { flex: 1 1 100%; min-width: 0; }
.chat-compose,
.chat-msg-textbox { width: 100%; min-height: 4.5rem; resize: vertical; box-sizing: border-box; }
.chat-post-btn { flex: 0 0 auto; align-self: stretch; padding: 0.5rem 1rem; font-weight: var(--font-weight-medium); }
/* The two post buttons travel as ONE flex unit (replaces the old <nobr> in ChatUC.ascx):
   on narrow wraps they move to the next line together, never splitting. Internal gap 5px
   matches the old inline spacing between LOW and ▶. */
.chat-post-btns { display: flex; gap: 5px; flex: 0 0 auto; align-items: stretch; }
/* Recipient status (lblRecipientStatus, a direct-child .note of .chat-pad-row) keeps its
   own full row now that the toolbar table no longer forces it to wrap. */
.chat-pad-row > .note { flex: 1 1 100%; }

.reply-quote {
    background-color: var(--color-info-bg);
    border-left: 3px solid var(--color-info);
    padding: 0.4rem 0.75rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.4rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    position: relative;
}
.reply-quote-label { font-weight: bold; margin-bottom: 0.25rem; }
.reply-quote-close {
    position: absolute; top: 0.4rem; right: 0.5rem;
    background: none; border: none; cursor: pointer;
    color: var(--color-text-muted); font-size: 1rem; line-height: 1; padding: 0 0.25rem;
    font-style: normal;
}
.reply-quote-close:hover { color: var(--color-text); }

.view-bar, .view-select {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.5rem 0;
}
/* Top pager (btnBack1 / btnForward1), which rides the right-hand end of .chat-pills-row rather
   than owning a row. It briefly lived in its own .view-bar div and cost a full line of vertical
   space above the thread on every page past the first — for two small buttons.
   margin-left:auto needs a real flex ITEM to push, hence the wrapper span; and the span must not
   be display:contents or the auto-margin has nothing to apply to. With both buttons
   Visible="False" (page 1) it renders as an empty, zero-width, zero-padding span, so it adds no
   ghost gap to the pills row. */
.chat-pager { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; }
/* Match the 32px pill height. Without this the pager's .button min-height (44px) made the whole
   pills row grow 32→44px the moment a second page existed — a smaller version of the same
   "pushes the messages down" complaint that got the pager moved out of its own row. Now the row
   is 32px whether or not the pager is showing, so paging never shifts the thread vertically. */
.chat-pager .button.small { min-height: 32px; padding-top: 0; padding-bottom: 0; }
.view-select { display: inline-flex; }
.button-w-page-arrow { min-width: 2.5rem; text-align: center; }

.indicators-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
    align-items: center; margin: 0.3rem 0 0.5rem; font-size: var(--font-size-sm);
}
/* Collapse the toolbar's counter/pagination bars when they have nothing to show, so there's no
   empty line between the toolbar buttons and the messages below. We can't use :empty — ASP.NET
   emits whitespace text nodes between the server controls — so test for element children:
   the view-bar's page buttons are Visible=False on the first page (no element children), and the
   indicators-bar's upload/image counters render as empty <a>/<span> until something is uploaded. */
.view-bar:not(:has(*)),
.indicators-bar:not(:has(*:not(:empty))) {
    display: none;
}

.linkwhite { color: #fff; text-decoration: none; }
.linkwhite:hover { text-decoration: underline; }
.linkblue  { color: var(--color-link); text-decoration: none; }
.linkblue:hover { text-decoration: underline; }

.cb-rounded-wrap {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    background-color: var(--color-primary-light); font-size: var(--font-size-sm);
}

.upload-progress-wrap { margin: 0.4rem 0; padding: 0.5rem; background-color: var(--color-info-bg); border-radius: var(--border-radius-sm); }
.upload-progress-text { font-size: var(--font-size-sm); margin-bottom: 0.25rem; }
.upload-progress-track { height: 6px; border-radius: 3px; background-color: var(--color-border); overflow: hidden; }
.upload-progress-bar { height: 100%; background-color: var(--color-accent); transition: width 0.2s ease-out; width: 0%; }

.chat-options-overlay {
    position: fixed; inset: 0; background-color: rgba(0,0,0,0.35); z-index: 9990; display: none;
}
.chat-options-overlay.open { display: block; }
.chat-options-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 75vw);
    /* Never wider than 75% of the screen, on any device. */
    max-width: 75vw;
    background-color: var(--color-bg); border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl); z-index: 9991; display: none; flex-direction: column;
    overflow-y: auto; transform: translateX(100%); transition: transform 0.25s var(--ease-out-quint);
}
.chat-options-overlay.open + .chat-options-drawer,
.chat-options-drawer.open { display: flex; transform: translateX(0); }
.opt-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border);
    background-color: var(--color-primary-light);
}
.opt-drawer-title { font-weight: var(--font-weight-bold); margin: 0; }
.opt-drawer-close {
    background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--color-text-muted);
}
.opt-drawer-close:hover { color: var(--color-text); }

.options-section { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); }
.options-section:last-child { border-bottom: none; }
.options-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.options-row:last-child { margin-bottom: 0; }
.options-label { min-width: 110px; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.options-row .textbox { flex: 1 1 180px; }
/* Search row's clearable wrapper grows to fill the row but never collapses below
   a usable width — mirrors the contextual `.input-clearable` sizing used by
   .search-row / .ct-search-bar / .pi-filter elsewhere (replaces an inline style). */
.options-row .input-clearable { flex: 1; min-width: 120px; }

.opt-pill-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opt-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--color-border);
    background-color: var(--color-bg); font-size: var(--font-size-sm);
    cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
.opt-pill:hover { background-color: var(--color-primary-light); border-color: var(--color-primary); }
.opt-pill input[type="checkbox"] { margin: 0; cursor: pointer; }

.opt-pill-notify  { color: #0a7d2a; }
.opt-pill-urgent  { color: #c0392b; }
.opt-pill-pin     { color: #8e44ad; }
.opt-pill-save    { color: #2c7be5; }
.opt-pill-hires   { color: #d35400; }
.cb-color { accent-color: currentColor; }
.cb-row { display: inline-flex; align-items: center; gap: 0.35rem; }

/* PopulateEvents (admin import): one source checkbox + status pill per row. */
.pe-source-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
/* Free-tier / usage limit note that drops to its own line under the source checkbox. */
.pe-source-note { flex: 1 1 100%; margin: -0.1rem 0 0.2rem 1.6rem; }

.status-input-wrap { position: relative; flex: 1 1 200px; }
.status-input { width: 100%; padding-right: 2rem; }
.status-clear-btn {
    position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--color-text-muted);
    font-size: 1rem; line-height: 1; padding: 0 0.25rem;
}
.status-clear-btn:hover { color: var(--color-text); }

.tagchips-recent-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.realtime-help {
    background-color: var(--color-info-bg); border-left: 3px solid var(--color-info);
    padding: 0.5rem 0.75rem; border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm); margin: 0.5rem 0;
}

.chat-lightbox {
    position: fixed; inset: 0; background-color: rgba(0,0,0,0.92); z-index: 10000;
    display: none; align-items: center; justify-content: center; flex-direction: column;
}
.chat-lightbox.open { display: flex; }
.chat-lb-img { max-width: 92vw; max-height: 80vh; object-fit: contain; box-shadow: var(--shadow-xl); }
.chat-lb-close {
    position: absolute; top: 1rem; right: 1rem; background: rgba(0,0,0,0.5);
    color: #fff; border: none; border-radius: 999px; width: 2.5rem; height: 2.5rem;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.chat-lb-counter { color: #fff; margin-top: 0.5rem; font-size: var(--font-size-sm); }
.chat-lb-controls { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.chat-lb-nav {
    background: rgba(255,255,255,0.15); color: #fff; border: none;
    padding: 0.5rem 0.85rem; border-radius: var(--border-radius-sm); cursor: pointer;
}
.chat-lb-nav:hover { background: rgba(255,255,255,0.3); }
.chat-lb-fullink { color: #fff; text-decoration: underline; font-size: var(--font-size-sm); }

.chat-toast-fixed { position: fixed; top: 1rem; left: 1rem; z-index: 9999; pointer-events: none; }
.chat-toast-el { pointer-events: auto; max-width: 320px; }
.chat-toast-body { font-size: var(--font-size-sm); }
/* Same rule as the .site-toast family: a click anywhere dismisses (hence the
   cursor:pointer on .chat-toast-el up at ~line 5033), but a RED toast — a send or
   upload failure — is closable only by its ×, so its body reverts to the arrow.
   showChatToast() adds .chat-toast-error whenever the background it is handed is red,
   and skips the body-click handler for exactly the same toasts. */
.chat-toast-el.chat-toast-error { cursor: default; }

/* Site-toast stack/positioning is now fully shared (Shared/styles_shared.css):
   top-center, 560px cap, identical on all 3 sites. The old top-right override
   that lived here was removed during cross-site toast unification (it was also
   largely dead — Shared loads after this file in Bundle.config, so its shared
   .site-toast-stack already won on equal specificity). The .chat-toast-* rules
   above are a SEPARATE feature (urgent-chat popup) and intentionally stay. */

.buttonsmall {
    padding: 0.3rem 0.6rem; font-size: var(--font-size-sm); border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border); background-color: var(--color-bg); color: var(--color-text); cursor: pointer;
}
.buttonsmall:hover { background-color: var(--color-primary-light); }


/* ── Legacy color helpers (button modifiers) ───────────────── */

.button.magenta { background-color: #ff00ff; color: #fff; border-color: #ff00ff; }
.button.magenta:hover  { background-color: #fff; color: #ff00ff; }
.button.orange  { background-color: #fd7e14; color: #fff; }
.button.orange:hover   { background-color: #d96807; color: #fff; }
.button.lime    { background-color: #84cc16; color: #fff; }
.button.lime:hover     { background-color: #65a30d; color: #fff; }
.button.cyan    { background-color: #00b0f0; color: #fff; }
.button.cyan:hover     { background-color: #008bbf; color: #fff; }
.button.gray    { background-color: #6c757d; color: #fff; }
.button.gray:hover     { background-color: #565e64; color: #fff; }
.button.red     { background-color: #dc3545; color: #fff; }
.button.red:hover      { background-color: #b02a37; color: #fff; }
.button.purple  { background-color: #6f42c1; color: #fff; }
.button.purple:hover   { background-color: #553098; color: #fff; }

.magenta { color: #ff00ff; }
.orange  { color: #fd7e14; }
.lime    { color: #84cc16; }
.cyan    { color: #00b0f0; }
.gray    { color: #6c757d; }
.red     { color: #dc3545; }
.purple  { color: #6f42c1; }

.bold { font-weight: var(--font-weight-bold); }

/* ════════════════════════════════════════════════════════════════════
   PRINT STYLESHEET
   Users occasionally want a paper copy of an event/group detail page,
   a confirmation, or their feedback. Without these rules the printed
   output includes the site nav, chat bar, footer link row, post-login
   modal containers, tip cards, toast stack, FABs — and in dark mode,
   ink-heavy dark backgrounds. This block strips the chrome, forces a
   light palette, prints link URLs alongside the link text, and asks
   the renderer to keep cards on one page.

   Other narrow print rules already live earlier in the file
   (.back-to-top, .toc-btn, table overflow). Those stay; this block
   only adds to them.
   ════════════════════════════════════════════════════════════════════ */
@media print {

    /* ── Page setup ──────────────────────────────────────────── */
    @page { margin: 0.5in; }

    /* ── Hide site chrome and interactive-only UI ────────────── */
    .skip-link,
    .site-nav,
    .nav-toggle,
    .banner-chatbar,
    .banner-events,
    .banner-invites,
    .banner-invites-restore,
    .tip-card,
    .tip-icon-button,
    .site-toast-stack,
    .modal-overlay,
    .chat-fab,
    .chat-drawer,
    .chat-toggle-btn,
    .form-actions,
    .save-bar,
    .sticky-save-bar,
    .input-clear-btn,
    .site-footer-links,
    #site-footer-top,
    [data-confirm],
    [data-save-btn] {
        display: none !important;
    }

    /* ── Force a print-friendly palette regardless of theme ── */
    html,
    html[data-theme="dark"],
    body,
    body.offline {
        background: #fff !important;
        color: #000 !important;
    }

    /* Strip dark-mode + heavy-shadow styling from common surfaces so
       backgrounds don't waste ink and shadows don't print as smudges. */
    .main-card,
    .card,
    .result-card,
    .alert-panel,
    .countdown,
    [data-theme="dark"] .main-card,
    [data-theme="dark"] .card,
    [data-theme="dark"] .result-card,
    [data-theme="dark"] .alert-panel,
    [data-theme="dark"] .countdown {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border-color: #999 !important;
    }

    /* ── Strip wide max-widths so content uses the full page ── */
    .page-wrapper {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ── Keep cards / forms / countdowns from splitting awkwardly ── */
    .main-card,
    .card,
    .result-card,
    .alert-panel,
    .countdown,
    .form-group {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    h1, h2, h3, h4 {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* ── Print link URLs alongside link text. Skip in-page anchors,
         javascript:, mailto:, tel: (visible text is already the address). ── */
    a[href]:not([href^="#"]):not([href^="javascript:"]):not([href^="mailto:"]):not([href^="tel:"])::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
        word-break: break-all;
    }
    .visually-hidden a::after { content: none !important; }
}
/* ── API Usage admin page (.au-*) ──────────────────────────────────
   ApiUsage.aspx: traffic stat chips, top-source mini tables, recent-call
   filter row, and the block-management form. Cross-site (same on PLP/qMeet/qFIT). */
.au-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.au-stat {
    display: flex; flex-direction: column; min-width: 9rem;
    padding: 0.6rem 0.9rem; border: 1px solid var(--color-border);
    border-radius: 8px; background: var(--color-bg-card);
}
.au-stat-num { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.au-stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.au-stat-bad .au-stat-num { color: var(--color-danger, #c0392b); }
.au-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; }
.au-top-table { font-size: var(--font-size-sm); width: 100%; }
.au-top-table td:first-child { word-break: break-all; }
.au-refused { color: var(--color-danger, #c0392b); font-weight: 600; }
.au-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.au-filter-row .textbox { flex: 1 1 16rem; min-width: 0; width: auto; }
.au-recent-table { font-size: var(--font-size-xs); width: 100%; }
.au-recent-table code { word-break: break-all; }
.au-block-form {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 1rem; align-items: end; margin-bottom: 1rem;
}
.au-block-form .form-actions { grid-column: 1 / -1; }
.au-config { margin: 0; padding-left: 1.2rem; }
/* ── Event Details — WEATHER section (.ed-*) ───────────────────────
   Async-loaded forecast (WeatherService → GetEventWeather WebMethod).
   A horizontally scrollable strip of per-day tiles so a multi-week
   event never forces the section taller than the rest of the page.
   Mirrors PacklistPRO's .td-weather-* Trip Dashboard rules. */
.ed-weather-loc { margin: 0 0 0.5rem; }
.ed-weather-days {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}
.ed-weather-day {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 76px;
    padding: 0.5rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg);
    text-align: center;
}
.ed-weather-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.2;
}
.ed-weather-date strong {
    display: block;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}
.ed-weather-icon { font-size: 1.6rem; line-height: 1; }
.ed-weather-temp { font-size: var(--font-size-sm); white-space: nowrap; }
.ed-weather-precip { font-size: var(--font-size-xs); color: var(--color-info); white-space: nowrap; }
.ed-weather-horizon { margin: 0.5rem 0 0; }
/* Open-Meteo attribution, tucked into a subtle info icon on the location line —
   dim by default, full-opacity on hover/focus; tooltip carries the credit. */
.ed-weather-credit-link {
    text-decoration: none;
    color: var(--color-text-muted);
    opacity: 0.7;
    cursor: help;
    font-size: 0.85em;
    margin-left: 0.15rem;
}
.ed-weather-credit-link:hover,
.ed-weather-credit-link:focus { opacity: 1; }

/* ───────────────────────────────────────────────────────────────────────
   EventDetails2.aspx — card-based event view (page-specific helpers).
   Token-driven so dark mode comes for free. The cards, collapse behaviour,
   badges and countdown all reuse shared/qMeet components; these classes only
   lay out the hero facts, detail rows and prose blocks built in code-behind.
   ─────────────────────────────────────────────────────────────────────── */
/* Linked-group line ("👥 Part of …") in the page header. The header is a
   flex row (back+title cluster / actions); force this line onto its own full
   width row so it always wraps UNDER the event name instead of bunching beside
   it when a long title leaves no room on a phone. */
.page-header > .event-group-line { flex: 1 0 100%; min-width: 0; }

.ed2-hero .countdown { margin: 0 0 0.85rem; }
.ed2-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.85rem; }
.ed2-badges:last-child { margin-bottom: 0; }

/* Hero quick-fact rows: icon + label + value */
.ed2-fact { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.45rem 0; }
.ed2-fact + .ed2-fact { border-top: 1px solid var(--color-border); }
.ed2-fact-ico { flex: 0 0 1.6rem; font-size: 1.15rem; line-height: 1.4; text-align: center; }
.ed2-fact-body { display: flex; flex-direction: column; min-width: 0; }
.ed2-fact-k {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
}
.ed2-fact-v { font-size: var(--font-size-base); color: var(--color-text); overflow-wrap: anywhere; }
.ed2-fact-sub { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Detail label/value rows (When & where, Who can attend) */
.ed2-row { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; padding: 0.3rem 0; }
.ed2-row-k { flex: 0 0 8.5rem; font-weight: var(--font-weight-bold); color: var(--color-text); }
.ed2-row-v { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

/* Prose blocks (Cost, What to wear, …) and the prominent description */
.ed2-block { margin: 0 0 0.85rem; }
.ed2-block:last-child { margin-bottom: 0; }
.ed2-block-k { display: block; font-weight: var(--font-weight-bold); margin-bottom: 0.15rem; }
.ed2-block-v { color: var(--color-text); }
.ed2-desc { font-size: var(--font-size-base); line-height: 1.55; margin: 0 0 1rem; }

/* Sub-section heading inside a card (auto-divides multi-section cards) */
.ed2-subhead {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin: 1.1rem 0 0.55rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
}
.ed2-subhead:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.ed2-meta { margin: 1rem 0 0; }

/* Photo gallery */
.ed2-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Voting */
.ed2-vote-intro { margin: 0 0 0.75rem; }
.ed2-vote-table td { padding: 0.35rem 0.4rem; vertical-align: middle; }

/* Member RSVP status colours */
.ed2-rsvp-yes { color: var(--color-success); }
.ed2-rsvp-no { color: var(--color-danger); }
.ed2-rsvp-maybe { color: var(--color-text); }

/* Action button rows (Manage card + bottom toolbar) */
.ed2-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Edit Event card (EventDetails organizer tools): the four actions laid out as a
   neat 2×2 grid, each button filling its cell so they line up in even columns.
   Collapses to a single column on narrow phones. */
.ed3-edit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.ed3-edit-actions .button { width: 100%; }
@media (max-width: 480px) {
    .ed3-edit-actions { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ed3 — Detail-page layout (EventDetails + GroupDetails), 2026-07-10 rethink.
   Two-column composition on desktop: a scannable content column + a sticky
   facts/action rail. Single column on phones, where the rail's facts and
   actions surface first (right under the slim hero), then the content.
   Reuses .card / .ed2-fact / .met-tag / .button / .status-badge — these
   classes only add the grid, the slim hero, the rail and the section groups.
   ═══════════════════════════════════════════════════════════════════════ */

/* Status-chip row under the page title (badges + any approval note). Hidden
   when the code-behind added nothing (asp:Panel renders an empty <div>). */
.ed3-badges { margin: 0 0 1.1rem; }
.ed3-badges:empty { display: none; margin: 0; }
.ed3-badges .ed2-badges { margin: 0; }
.ed3-badges .alert-panel { margin: 0.6rem 0 0; }

/* Slim countdown bar — added alongside .countdown on the timer panels. When a
   panel is Visible=false nothing renders, so there is no empty-gap wrapper. */
.ed3-cd.countdown {
    flex-direction: row; align-items: baseline; gap: 0.55rem;
    width: auto; min-width: 0; padding: 0.4rem 0.95rem; margin: 0 0 1.25rem;
}
.ed3-cd .countdown-digits { font-size: 1.35rem; }
.ed3-cd .countdown-units { display: none; }

/* Friendly countdown readout ("2 days : 6 hours : 16 minutes") — replaces the
   old HH:MM:SS digit stack. Sits inline with the "Starts in" label on the slim
   ed3 bar; wraps within its own line on narrow phones instead of overflowing. */
.countdown-friendly {
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* Two-column grid — the rail is FIRST in source so it stacks directly under
   the hero on phones; explicit column placement moves it to the right on
   desktop, where it sticks as the content column scrolls. */
.ed3-grid { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); align-items: start; }
.ed3-main, .ed3-rail { min-width: 0; grid-column: 1; }
.ed3-main { display: flex; flex-direction: column; gap: var(--section-gap); }
/* The flex `gap` already spaces the main-column cards; the shared `.card`
   margin-bottom would double it (very visible between two collapsed detail
   cards like "Most Often Available" / "Interests"). Let gap own the spacing. */
.ed3-main .card { margin-bottom: 0; }
/* The voting + results cards live inside one UpdatePanel (a single flex child),
   so the .ed3-main `gap` can't space them apart — restore a gap manually. */
.ed3-voting-results-gap { margin-top: var(--section-gap); }
.ed3-rail { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 900px) {
    .ed3-grid { grid-template-columns: minmax(0, 1.6fr) minmax(15.5rem, 1fr); }
    .ed3-main { grid-column: 1; grid-row: 1; }
    .ed3-rail { grid-column: 2; grid-row: 1; position: sticky; top: 0.75rem; }
}

/* Rail cards + small uppercase heading */
.ed3-rail .card { margin: 0; padding: 1rem 1.1rem; }
.ed3-rail-h {
    font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-text-muted); font-weight: var(--font-weight-bold); margin: 0 0 0.7rem;
}
.ed3-rail .ed2-fact:first-of-type { padding-top: 0; }
.ed3-rail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ed3-rail-actions .button { width: 100%; justify-content: flex-start; }
.ed3-rail-actions .button.ed3-copy-link { justify-content: center; }
/* A privacy rule or an existing relationship can hide one of PublicProfile's pair
   ("Chat" goes when the member isn't accepting messages, "Add Contact" once they
   already are one) — the survivor then sat at half width with a hole beside it.
   Scoped to .pp-actions rather than every .ed3-rail-actions on purpose: GroupDetails
   deliberately(?) runs a lone half-width "＋ Join Group" and isn't this page's call
   to restyle. Only fires when the button is literally the sole child. */
.pp-actions > .button:only-child { grid-column: 1 / -1; }
/* These two are asp:Buttons — <input type=submit>, which centers its own text and
   ignores the justify-content .ed3-rail-actions sets for its flex <button>/<a> users
   elsewhere. Without this, Add Contact/Chat read centered while Copy Link, Block and
   Presence below them read left, in one 4-button column. Scoped, for the same reason
   the rule above is: the other .ed3-rail-actions rails don't have this problem. */
.pp-actions .button { text-align: left; }
.ed3-rail-more { margin-top: 0.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
/* Leave Group renders as an <input type=submit> (centers its text by default) —
   left-align it to match the flex-start <button> actions above it. */
.ed3-rail-more .button { justify-content: flex-start; text-align: left; }

/* Collapsible rail cards (At a Glance / Actions): keep the compact uppercase
   rail heading but turn the <summary> into a ▸/▾ disclosure toggle. */
.ed3-rail summary.ed3-rail-h { list-style: none; cursor: pointer; display: flex; align-items: center; }
.ed3-rail summary.ed3-rail-h::-webkit-details-marker { display: none; }
.ed3-rail summary.ed3-rail-h::before {
    content: "\25B8";              /* ▸ */
    margin-right: 0.4rem;
    transition: transform 0.2s ease;
}
.ed3-rail details[open] > summary.ed3-rail-h::before { content: "\25BE"; }   /* ▾ */
.ed3-rail details:not([open]) > summary.ed3-rail-h { margin-bottom: 0; }

/* Section label grouping a run of cards ("About the Members", "Organizer
   Tools"), with an optional audience badge. */
.ed3-section-label {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-muted); font-weight: var(--font-weight-bold); margin: 0;
}
.ed3-audience-badge {
    text-transform: none; letter-spacing: 0; font-size: var(--font-size-xs);
    background: var(--color-warning-bg); color: var(--color-warning);
    border: 1px solid var(--color-warning-border); border-radius: 999px;
    padding: 0.1rem 0.55rem; font-weight: var(--font-weight-bold);
}

/* Low-prominence report row at the very bottom of the content column. */
.ed3-report-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.25rem 0 0; }
.ed3-report-foot:empty { display: none; }

/* ── RSVP Details card (EventDetails, organizer-only) ───────────────
   Every member's free-text RSVP answers grouped by question, responder
   beside each answer. One .rsvp-q block per question. */
.rsvp-details { display: flex; flex-direction: column; gap: 1rem; }
.rsvp-q + .rsvp-q { border-top: 1px solid var(--color-border); padding-top: 1rem; }
.rsvp-q-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    margin: 0 0 0.5rem; font-size: var(--font-size-base); font-weight: var(--font-weight-bold);
    color: var(--color-text);
}
.rsvp-q-count {
    font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
    background: var(--color-surface-2, var(--color-border)); color: var(--color-text-muted);
    border-radius: 999px; padding: 0.05rem 0.5rem; min-width: 1.5em; text-align: center;
}
.rsvp-q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.rsvp-q-item {
    display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem;
    align-items: baseline;
}
.rsvp-q-who { font-weight: var(--font-weight-bold); white-space: nowrap; }
.rsvp-q-what { overflow-wrap: anywhere; white-space: pre-wrap; }
.rsvp-q-none { font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; }
/* "Can't make it?" free-text note, shown under any reason chips for that member. */
.rsvp-cant-note { display: block; margin-top: 0.2rem; overflow-wrap: anywhere; white-space: pre-wrap; font-style: italic; color: var(--color-text-muted); }

/* ── "Who's Here" / "Who Went" card ────────────────────────────────
   The people who marked themselves Arrived/Attended, shown with LARGE recognizable
   photos. One column on mobile (each photo full card width) growing to a responsive
   grid on wider screens. Each tile is a link to the member's public profile. */
.whos-here-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 0.5rem; }
@media (min-width: 560px) {
    .whos-here-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.whos-here-tile {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.whos-here-photo {
    display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 14px; background: var(--color-bg-input, #eee);
}
.whos-here-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.whos-here-mono {
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; font-weight: var(--font-weight-bold); color: var(--color-text-muted);
}
.whos-here-name {
    margin-top: 0.45rem; text-align: center; font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere; line-height: 1.25;
}
.whos-here-org { display: block; font-weight: 400; font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* Age/gender chip appended after the name, e.g. "47/M". Muted, normal weight. */
.whos-here-ag { font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }
/* Cancel the chip's flex gap right before the ", 47/m" so the comma hugs the name. */
.whos-here-chip .whos-here-ag { margin-left: -0.35rem; }
/* Big crowd (40+): halve the photo tiles so the card stays compact. */
@media (min-width: 560px) {
    .whos-here-grid--dense { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 0.6rem; }
}
.whos-here-grid--dense .whos-here-name { font-size: var(--font-size-sm); margin-top: 0.3rem; }
.whos-here-tile:hover .whos-here-name { text-decoration: underline; }
.whos-here-tile:focus-visible { outline: 2px solid var(--color-primary, #0090C8); outline-offset: 3px; border-radius: 14px; }
.whos-here-count { color: var(--color-text-muted); font-weight: 400; }
/* People without a profile photo — listed as plain name chips after the photo grid,
   no placeholder image. */
.whos-here-names {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem;
}
.whos-here-grid + .whos-here-names {
    padding-top: 0.9rem; border-top: 1px solid var(--color-border, #ddd);
}
.whos-here-chip {
    display: inline-flex; align-items: baseline; gap: 0.35rem;
    padding: 0.4rem 0.75rem; border-radius: 999px;
    background: var(--color-bg-input, #eee); color: inherit;
    font-weight: var(--font-weight-bold); text-decoration: none; line-height: 1.2;
}
.whos-here-chip .whos-here-org { display: inline; }
.whos-here-chip:hover { text-decoration: underline; }
.whos-here-chip:focus-visible { outline: 2px solid var(--color-primary, #0090C8); outline-offset: 2px; }
/* Profile + Chat buttons beside each attendee. The tile/chip is itself an <a>, so the
   action row is a SIBLING inside a wrapping cell — never a nested <a>. */
.whos-here-cell { display: flex; flex-direction: column; }
.whos-here-cell .whos-here-tile { flex: 1 1 auto; }
.whos-here-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; justify-content: center; }
.whos-here-chipcell { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.whos-here-chipcell .whos-here-actions { margin-top: 0; }

/* ── "Where Is Everyone?" live check-in card ──────────────────────────
   Day-of check-in (the I'm Here / I'm Still Here button) + a live Leaflet map of
   members who shared their location. Members-only, shown only inside the event's
   live window (30 min before start → event end). The #eventPresenceMap container
   reuses the page's .search-map sizing. */
.wie { display: flex; flex-direction: column; gap: 0.85rem; }
.wie-intro { margin: 0; }
.wie-checks { display: flex; flex-direction: column; gap: 0.5rem; }
.wie-check { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; line-height: 1.3; }
.wie-check input { margin-top: 0.15rem; flex: 0 0 auto; }
.wie-comment { max-width: 520px; min-height: 3.4rem; }
.wie-optional { font-weight: 400; color: var(--color-text-muted, #6b7280); font-size: 0.9em; }
.wie-msg { margin: 0; }
/* showMsg() adds .alert-panel to this <p>, and .alert-panel (styles_shared.css, which
   loads AFTER this file) carries "margin: 0.5rem 0 1rem" at the same one-class
   specificity — so it WON, and the 1rem bottom margin stacked on top of .wie's own
   0.85rem gap into a blank line directly above "Use the map to locate the group…".
   Two classes outrank one; the flex gap is the only spacing this row should get. */
.wie-msg.alert-panel { margin: 0; }
/* display:flex would beat the UA's [hidden] { display: none } (one class vs one
   attribute), so the whole map block — including the note — rendered before the
   member had checked in at all. State the hidden case explicitly. */
.wie-map-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
.wie-map-wrap[hidden] { display: none; }
.wie-map-loading { margin: 0.25rem 0; }
/* The "Use the map to locate the group…" line sits directly above the map: kill the
   paragraph's own margins (the wrap is a flex column and already supplies the gap). */
.wie-map-note { margin: 0; }
.wie-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; margin: 0; }
/* Both legend entries are commented out in LoadWhereIsEveryone, so this div renders EMPTY —
   and an empty flex item still costs a gap above and below it, which read as a blank line
   under the note. Hide it while empty; it comes back on its own if the entries are restored. */
.wie-legend:empty { display: none; }
.wie-legend-dot {
    display: inline-block; width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,.5);
    margin-right: 0.45rem; vertical-align: middle;
}
.wie-legend-org { background: #2563eb; }
.wie-legend-member { background: #dc2626; }
.wie-map-empty { margin: 0.25rem 0; }
@media (max-width: 600px) {
    .rsvp-q-item { grid-template-columns: 1fr; gap: 0; }
    .rsvp-q-who { white-space: normal; }
}

/* "Are You Going?" breakdown — one pill row per response, members listed after. */
.rsvp-going { display: flex; flex-direction: column; gap: 0.5rem; }
.rsvp-going-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.rsvp-going-names { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.rsvp-going-names .rsvp-q-who { white-space: normal; }
.rsvp-sep { color: var(--color-text-muted); }
.rsvp-pill {
    display: inline-flex; align-items: baseline; gap: 0.35rem; flex: 0 0 auto;
    font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
    border: 1px solid transparent; border-radius: 999px; padding: 0.1rem 0.6rem; white-space: nowrap;
}
.rsvp-pill-n { opacity: 0.75; font-variant-numeric: tabular-nums; }
.rsvp-pill--yes   { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.rsvp-pill--info  { background: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info-border); }
.rsvp-pill--maybe { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.rsvp-pill--no    { background: var(--color-danger-bg);  color: var(--color-danger);  border-color: var(--color-danger-border); }
.rsvp-pill--muted { background: var(--color-bg-input);   color: var(--color-text-muted); border-color: var(--color-border); }

/* ── Contact List page (ContactList.aspx) ──────────────────────────
   Ported from PacklistPRO. Collapsible-card chevron for <details> whose
   <summary> is the card title, plus the shared contact-row layout
   (search results, My Contacts, Blocked) with avatar, presence dot,
   favorite star, and filter box. */
summary.card-title { list-style: none; cursor: pointer; }
summary.card-title::-webkit-details-marker { display: none; }
summary.card-title::before {
    content: "\25B8";          /* ▸ */
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
}
details[open] > summary.card-title::before { content: "\25BE"; }   /* ▾ */

.ct-search-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.ct-search-bar .input-clearable { flex: 1 1 16rem; }
.ct-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ct-row {
    display: flex;
    flex-wrap: wrap;                 /* let the action buttons drop to their own line when narrow */
    align-items: center;
    gap: 0.5rem 0.75rem;             /* row-gap when wrapped · column-gap inline */
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 0.375rem);
}
.ct-row-info {
    flex: 1 1 12rem;       /* keeps name/place readable; forces actions to WRAP, not squish the text */
    min-width: 0;
}
.ct-name { word-break: break-word; }
.ct-status { font-style: italic; }
/* Live check-in bundle (current Place + check-in Photos), shown on ContactList rows and the
   Dashboard "Active Contacts" card. Gated by the subject's "Check In Place, Status & Photos"
   privacy. The photo strip reuses the shared .checkin-photos styling. */
.ct-checkin { margin-top: 0.25rem; }
.ct-checkin-place { display: inline-block; font-size: 13px; }
.ct-checkin-time { white-space: nowrap; }
/* Check-in Comment/note ("Who else should join you?…") — a quoted, muted line on its own
   row under the place name / time / photos on every check-in surface. */
.ct-checkin-comment { font-size: 12px; font-style: italic; line-height: 1.3; margin-top: 2px; }
/* Map / Google Place links under a contact's check-in place. */
.ct-checkin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ct-checkin-actions .button.small { padding: 2px 8px; font-size: 12px; }
/* Read-only Place card ("Place" modal view): space the Map (addr) / Map (gps) / Google Place
   buttons out so they don't crowd each other or the surrounding text. */
#pmViewMap { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 6px; }
#pmViewMap .button.small { padding: 3px 10px; }
/* Dashboard "Active Contacts": wraps the clickable radar card + its (non-anchored) check-in
   block so the photo strip's links aren't nested inside the card's outer anchor. */
.home-radar-row { border-top: 1px solid rgba(127,127,127,0.18); }
.home-radar-row:first-child { border-top: 0; }
.home-radar-row .home-radar-card { border-top: 0; }
.home-radar-row .ct-checkin { padding: 0 6px 8px 6px; margin-top: 0; }
/* Remove the blank gap between the status line (last line in the card) and the place line
   (the sibling .ct-checkin) by dropping the card's bottom padding when a check-in follows. */
.home-radar-row .home-radar-card:not(:only-child) { padding-bottom: 0; }
/* PublicProfile "Live presence" card — the standalone status + check-in place bundle.
   Larger than the compact contact-row version: the status reads at body size and the
   place line sits just beneath it. */
.profile-presence { display: flex; flex-direction: column; gap: 4px; }
.profile-presence-status { font-style: italic; font-size: 15px; font-weight: 600; }
.profile-presence .ct-checkin { margin-top: 0; }
.profile-presence .ct-checkin-place { font-size: 15px; }
/* 💬 status + 📍 place both lead with a .ci-lead-ico span; a fixed icon column (scoped to
   this card, so it's a no-op on the contact-row/dashboard surfaces) lines the two lines up. */
.profile-presence .ci-lead-ico { display: inline-block; width: 1.4em; text-align: center; }

/* ── PublicProfile (pp-*) ──────────────────────────────────────────────────
   The Actions card reads in three tiers so the eye lands on the one thing most
   visitors came to do (reach this member) instead of raking five same-weight
   buttons: the ＋/💬 pair up top in .ed3-rail-actions, utilities in .pp-rail-links,
   then privacy & safety fenced off below in .pp-rail-quiet. */
.pp-rail-links { margin-top: 0.5rem; }
.pp-rail-links .button { width: 100%; }
/* Rules you reach for rarely and reversibly (Block, Presence) — still one tap away,
   just clearly not part of the row above. Hidden wholesale from code-behind when both
   its buttons are, so this border never hangs under nothing. */
.pp-rail-quiet {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.pp-rail-quiet .button { width: 100%; justify-content: flex-start; text-align: left; }
/* Footnote to the Presence button above it — was a blue .inline-tip, which read as an
   alert about a setting nobody had touched. */
.pp-presence-note { margin: 0.1rem 0 0; line-height: 1.4; }

/* Interests: clamp a long chip list to ~4 rows behind the .pp-chips-toggle button,
   fading the cut so it reads as "more below" rather than a crop. Code-behind only
   adds .is-clamped (and the button) past the cap, so short lists are untouched. */
.pp-chips.is-clamped {
    position: relative;
    max-height: 8.5rem;
    overflow: hidden;
}
.pp-chips.is-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.75rem;
    background: linear-gradient(to bottom, transparent, var(--color-bg-card));
    pointer-events: none;
}
.pp-chips-toggle { margin-top: 0.5rem; }
.pp-chip-key { margin-top: 0.6rem; }

/* Empty-profile stand-in — .empty-state's own 2rem padding stacks on the card's,
   and its .empty-state-sub bottom margin dangles when there's no CTA under it. */
.pp-empty { padding: 1.25rem 1rem; }
.pp-empty .empty-state-sub:last-child { margin-bottom: 0; }

/* ChatUC recipient check-in place panel: a dismissible card at the top of the message list
   showing the person you're chatting with their current place + check-in photos, a time range,
   and Map / Google Places links. Reuses the shared .checkin-photos strip for the thumbnails. */
.chat-place-panel {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface, rgba(127,127,127,0.06));
    padding: 0.5rem 0.6rem;
    margin: 0 0 0.6rem;
}
.chat-place-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.chat-place-panel-title {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}
.chat-place-panel-x {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 0.15rem;
    color: var(--color-text-dim, #888);
}
.chat-place-panel-x:hover { color: var(--color-text, inherit); }

/* ── Retention-notice dismiss × ────────────────────────────────────────────────
   The "Messages older than N days are deleted automatically" line had no dismiss
   affordance at all before 2026-07-30 and rendered on every 1:1 chat render, forever.
   FLOATED, not flexed: .inline-tip's content is a SENTENCE, and .alert-panel's own
   comment in styles_shared.css spells out why turning a sentence container into a flex
   row shreds it into narrow columns (every inline fragment between the <a> and the text
   becomes its own flex item). A float keeps normal text flow and lets the sentence wrap
   around the button. 32px square so it clears the 24px tap-target floor. */
.chat-retention-note { position: relative; }
.chat-retention-x {
    float: right;
    margin: -0.15rem -0.15rem 0 0.4rem;
    min-width: 32px;
    min-height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 0.25rem;
    color: var(--color-text-dim, #888);
}
.chat-retention-x:hover { color: var(--color-text, inherit); }
.chat-retention-x:focus-visible { outline: 2px solid var(--color-link, #06f); outline-offset: 2px; }

.chat-place-panel-status { font-size: 13px; font-style: italic; margin: 0.1rem 0 0.1rem; }
.chat-place-panel-time { font-size: 12px; margin: 0.1rem 0 0.25rem; }
/* Action row: Map + Google Places buttons on the left, Close pushed to the right. */
.chat-place-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.chat-place-panel-actions .chat-place-panel-close { margin-left: auto; }

.ct-row-actions {
    display: flex;
    gap: 0.4rem;
    flex: 1 1 auto;        /* when wrapped to its own line, spans the row and right-aligns */
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ct-row-actions.ct-add-col { flex: 0 0 auto; }   /* the search-row Add column stays small */
.ct-search-row .ct-add-col { order: -1; }        /* Add button to the LEFT of search results */
.ct-filter {
    margin-bottom: 0.75rem;
    max-width: 24rem;
}

/* Colored initials avatar + green presence dot (matches the chat .qmeet-av look) */
.ct-av {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1;
    user-select: none;
}
.ct-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--color-bg-card);
}

/* Favorite star toggle — an outline button that turns gold when on. Shared CSS
   (.button.transparent) loads after this file, so the on/off colors need >2-class
   specificity to win. Off = muted gray ☆; on = ★ on a SOLID gold fill (dark text)
   so the favorited state is unmistakable and matches the gold ★ badge + row tint. */
.button.transparent.ct-fav {
    line-height: 1;
    color: var(--color-text-muted, #888);
    border-color: var(--color-border, #cccccc);
}
.button.transparent.ct-fav.ct-fav-on {
    color: #111;
    border-color: #f5b301;
    background-color: #f5b301;
}
.ct-fav-badge {
    color: #f5b301;
    font-size: 1em;
}
/* Per-contact presence toggle. Default = "Presence shown"; the ON state
   ("Presence hidden") tints muted-red so a contact you've hidden from is
   obvious at a glance, mirroring the favorite toggle's filled state.
   NOTE: no `.transparent` in this selector — the row button is emitted as
   "button small ct-hidepres" (see MyContacts.aspx.vb BuildRowHtml). While the
   selector required .transparent it matched nothing and the ON state never
   tinted at all. */
.button.ct-hidepres.ct-hidepres-on {
    color: #fff;
    border-color: #b23b3b;
    background-color: #b23b3b;
}
/* Per-contact urgent-alert mute. Default = "Urgent Alerts On"; the ON state
   ("Urgent Alerts Off") tints amber — deliberately NOT the muted-red used for
   presence-hidden or the .danger red used by Block. Muting someone's urgent
   alerts is a quiet personal preference, not a safety action, and the colour
   shouldn't imply otherwise. */
.button.ct-urgentmute.ct-urgentmute-on {
    color: #111;
    border-color: #d99400;
    background-color: #d99400;
}
/* Favorited rows stand out: gold left edge + a subtle gold tint (both themes) */
.ct-row-fav {
    border-left: 3px solid #f5b301;
    background: rgba(245, 179, 1, 0.10);
}

/* ── MyContacts refresh: photo avatars, inline star, scannable meta, collapsible check-in,
   Favorites/All grouping, count chips, and the inline nickname editor. ─────────────────── */

/* Real profile photo fills the avatar circle (monogram stays as the load/fallback). */
.ct-av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* Subtle row hover (kept off the gold favorite tint, which gets its own hover). */
.ct-row:not(.ct-row-fav):hover { background: rgba(127, 127, 127, 0.06); }
.ct-row-fav:hover { background: rgba(245, 179, 1, 0.16); }

/* Name line: inline ★ toggle + name (+ real name when nicknamed). */
.ct-name-row { display: flex; align-items: center; gap: 0.3rem; }
.ct-name-row .ct-name { min-width: 0; }

/* Bare star favorite toggle beside the name — its filled/outline state IS the favorite marker
   (replaces the old separate badge). Muted when off, gold when on. */
.ct-fav-inline {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    font-size: 1.15rem;
    color: var(--color-text-muted, #888);
}
.ct-fav-inline:hover { color: #f5b301; }
.ct-fav-inline.ct-fav-on { color: #f5b301; }
.ct-fav-inline:focus-visible { outline: 2px solid #f5b301; outline-offset: 2px; border-radius: 4px; }

/* One combined "📍 place · last active" line replaces two stacked gray lines. */
.ct-meta { margin-top: 0.1rem; }
.ct-meta .ct-loc, .ct-meta .ct-active { white-space: normal; }

/* Live check-in bundle collapses behind a compact pill so the row stays short. */
.ct-checkin-wrap { margin-top: 0.35rem; }
.ct-checkin-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: 13px;
    padding: 2px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.06);
}
.ct-checkin-summary::-webkit-details-marker { display: none; }
.ct-checkin-summary::after { content: "\25BE"; font-size: 0.8em; opacity: 0.7; }   /* ▾ */
.ct-checkin-wrap[open] > .ct-checkin-summary::after { content: "\25B4"; }           /* ▴ */
.ct-checkin-wrap[open] > .ct-checkin-summary { margin-bottom: 0.35rem; }
.ct-checkin-wrap[open] .ct-checkin-more { display: none; }   /* collapsed-only hint */

/* "★ Favorites" / "All Contacts" group headers when the list has both. */
.ct-group-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #888);
    margin: 0.25rem 0 -0.1rem;
    padding-left: 0.1rem;
}
.ct-group-label:first-child { margin-top: 0; }

/* Muted (n) count appended to a card summary. */
.ct-count { color: var(--color-text-muted, #888); font-weight: 400; }

/* Filter label above the in-list filter box, so it never reads as a "find new people" search. */
.ct-filter-label { display: block; margin-bottom: 0.25rem; }

/* Inline nickname editor — takes its own full-width line inside the (flex-wrap) row. */
.ct-nick-editor {
    flex: 1 1 100%;
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 0.375rem);
    background: rgba(127, 127, 127, 0.05);
}
.ct-nick-editor-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.25rem 0;
}
.ct-nick-editor-row .ct-nick-input { flex: 1 1 12rem; }
.ct-nick-hint { margin: 0.15rem 0 0; }

/* ── MyContacts round 2: filter chips + sort, shared-context / presence-hidden lines, label
   chips + editor, invite picker, People-Who-Added-You rows. ──────────────────────────────── */

/* Quick-filter chips + sort toolbar above the contact list. */
.ct-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
}
.ct-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ct-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 12px;
    line-height: 1;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    user-select: none;
}
.ct-chip:hover { border-color: #2563eb; }
.ct-chip-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.ct-sort-label {
    font-size: 12px;
    color: var(--color-text-muted, #888);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.ct-sort { width: auto; min-width: 0; padding: 3px 8px; font-size: 12px; }

/* "How you know them" — one dim line. */
.ct-shared { margin-top: 0.15rem; }

/* Per-contact state pills — the at-a-glance read of the three flags whose
   toggles are otherwise buried in the ⋯ overflow (presence, urgent alerts) or
   only implied by a button (Block). Each pill's tint matches its toggle's ON
   state above, so the pill and the button never disagree about severity:
   muted-red = presence hidden, amber = urgent alerts off, .danger red = blocked.
   Tinted (not solid) fills — a pill reports state, it doesn't invite a click.
   Shared with PublicProfile's hero (see .pp-flags) so one flag reads the same
   on both pages. */
.ct-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}
.ct-flag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 11px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    color: inherit;
    white-space: nowrap;
}
.ct-flag-pill--presence {
    background: rgba(178, 59, 59, 0.12);
    border: 1px solid rgba(178, 59, 59, 0.40);
}
.ct-flag-pill--urgent {
    background: rgba(217, 148, 0, 0.14);
    border: 1px solid rgba(217, 148, 0, 0.45);
}
.ct-flag-pill--blocked {
    background: rgba(178, 59, 59, 0.18);
    border: 1px solid rgba(178, 59, 59, 0.55);
}

/* Same pills in the PublicProfile hero: bigger tap/read target than the contact
   row (the hero has room, and here they're the ONLY at-a-glance signal — the
   rail's prose notes sit far below the fold on a phone). */
.pp-flags { margin-top: 0.35rem; }
.pp-flags .ct-flag-pill { font-size: 12px; padding: 4px 10px; }

/* Private label chips on a contact row. */
.ct-labels { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.15rem 0; }
.ct-label-chip {
    font-size: 11px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.28);
    color: inherit;
}

/* Labels editor + invite picker share the nickname-editor shell (full-width row line). */
.ct-labels-editor, .ct-invite-panel {
    flex: 1 1 100%;
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 0.375rem);
    background: rgba(127, 127, 127, 0.05);
}
.ct-invite-group { margin: 0.35rem 0; }
.ct-invite-head { margin-bottom: 0.2rem; }
.ct-invite-pick { display: block; width: 100%; text-align: left; margin: 0.2rem 0; }
.ct-invite-close { margin-top: 0.35rem; }

/* People Who Added You rows get a blue left accent to read as "incoming". */
.ct-addedyou-row { border-left: 3px solid #3b82f6; }

/* Live-refresh indicator (online count + last-updated) under the toolbar. */
.ct-live { margin: 0 0 0.5rem; font-size: 12px; }
.ct-live:empty { display: none; }

/* ============================================================================
   EventSearch2 — redesigned events browse page (PacklistPRO-style cards).
   Each event is a native <details> card that expands on header click. Interest
   is a segmented control in the body, set via AJAX. Leans on shared design
   tokens (with fallbacks) so it adapts to light/dark automatically.
   ========================================================================== */

/* Always-visible search bar above the collapsible filters card. */
.es2-searchbar { display: flex; gap: .5rem; margin-bottom: .75rem; }
.es2-searchbar-input { flex: 1 1 auto; }

/* "Filters & Sorting" card: show a plain × close glyph in the upper-right
   corner (like the Tips/toast closers) rather than the filled-button look the
   shared .card-options-topbar rule gives. Scoped to .es2-filters so other sites'
   use of .card-options-topbar (PLP ShoppingList, etc.) keeps the filled style. */
.es2-filters .card-options-topbar .tip-icon-button {
    min-width: 2rem;
    min-height: 2rem;
    color: var(--color-text-muted, #6c757d);
    background-color: transparent;
    box-shadow: none;
    font-weight: 400;
    font-size: 1.5rem;
}
.es2-filters .card-options-topbar .tip-icon-button:hover {
    color: var(--color-text, #1a1f2e);
    background-color: var(--color-primary-light, #e0f6fe);
}
.es2-filters .card-options-topbar .tip-icon-button:active {
    box-shadow: none;
}

/* Filters card body laid out as a responsive grid (single column on mobile). */
.es2-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .25rem 1rem;
    margin-bottom: .5rem;
}

/* Filter sub-section — clusters related controls (e.g. the four location filters:
   City / State / Country / Radius) under one labelled heading so a long flat list of
   ~14 dropdowns reads as a few groups instead of a scattered wall. Spans the full grid
   width and lays its own children out in the same responsive sub-grid. Shared by
   EventSearch and GroupSearch (.es2-filter-grid / stacked .form-group panels alike). */
.es2-filter-group {
    grid-column: 1 / -1;
    margin: .25rem 0 .35rem;
    padding: .5rem .65rem .35rem;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 8px);
    background: var(--color-bg, #f7f9fc);
}
.es2-filter-group-head {
    font-size: var(--font-size-xs, .75rem);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-text-muted, #6c757d);
    margin-bottom: .35rem;
}
.es2-filter-group-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .25rem 1rem;
}

/* ── Collapsible filter cards (FindEvents) ────────────────────────────────────────────
   FindEvents renders each .es2-filter-group as a native <details> (collapsed by default,
   session-persisted via site.js's [data-persist] handler) so the filters panel opens as a
   short list of headings rather than ~14 dropdowns. GroupSearch still uses plain <div>s,
   so every rule here is scoped to details/summary and cannot reach it. */
details.es2-filter-group > summary.es2-filter-group-head {
    cursor: pointer;
    list-style: none;          /* hide the UA triangle; we draw our own caret below */
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 0;          /* the body supplies the gap only once opened */
    padding: .1rem 0;
    user-select: none;
}
details.es2-filter-group > summary.es2-filter-group-head::-webkit-details-marker { display: none; }
/* Caret — rotates to ▾ when the card is open. */
details.es2-filter-group > summary.es2-filter-group-head::before {
    content: "\25B8";
    font-size: .9em;
    line-height: 1;
    transition: transform .15s ease;
}
details.es2-filter-group[open] > summary.es2-filter-group-head::before { transform: rotate(90deg); }
details.es2-filter-group[open] > summary.es2-filter-group-head { margin-bottom: .35rem; }
details.es2-filter-group > summary.es2-filter-group-head:hover,
details.es2-filter-group > summary.es2-filter-group-head:focus-visible {
    color: var(--color-accent-deeper, var(--color-accent-dark, #0090C8));
}
@media (prefers-reduced-motion: reduce) {
    details.es2-filter-group > summary.es2-filter-group-head::before { transition: none; }
}
/* The Trip group's asp:Panel renders a plain <div> around its <details>, so the wrapper
   (not the card) is the grid item that has to span the full filter grid. */
.es2-filter-group-wrap { grid-column: 1 / -1; }
.es2-filter-group-wrap > .es2-filter-group { margin: .25rem 0 .35rem; }

/* ── 📍 GPS filter helpers + ✈️ trip destinations (EventSearch / FindEvents) ──────────
   The two geo buttons and the trip destination list sit inside .es2-filter-group-body,
   which is an auto-fit grid — both blocks span the full width so they read as actions
   rather than as another field in the column flow. */
.es2-geo-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}
.es2-geo-btn { white-space: nowrap; }
.es2-geo-btn.is-loading { opacity: .65; cursor: progress; }
.es2-geo-btn[disabled] { cursor: not-allowed; }
.es2-geo-status {
    flex: 1 1 100%;
    min-height: 1.2em;
    font-size: var(--font-size-sm, .875rem);
    color: var(--color-text-muted, #6c757d);
}
.es2-geo-status.is-error { color: var(--color-danger, #dc3545); }
.es2-geo-hint {
    flex: 1 1 100%;
    font-size: var(--font-size-sm, .875rem);
    color: var(--color-text-muted, #6c757d);
}
/* Sits directly under the Radius dropdown and names the point the radius is measured
   FROM ("within 50 miles of Novi, MI"), which the option text alone can't say. The .is-warn
   variant carries the three states the user needs to act on: "Any Distance" being the OFF
   switch rather than the widest ring, a typed city we can't place on the map, and no centre
   at all (where the dropdown is disabled as well). Warning uses the alert BACKGROUND tokens,
   not --color-warning as text: that orange is only defined once and drops to ~3:1 against
   the dark-mode card, while the bg/border pair is defined for both schemes. */
/* The Radius option labels are the longest in the panel ("Any Distance — ignores
   City/State"), and a <select> clips its SELECTED label to the control width — at one
   ~155px column that leaves "Any Distance — ignores C", which is worse than saying nothing.
   Own row + a capped control: 1/-1 spans the EXPLICIT grid, so unlike `span 2` it can never
   invent an implicit track and push the panel sideways when the group is a single column on
   a phone. The cap keeps it from stretching to a full-width select on a desktop. */
.es2-radius-group { grid-column: 1 / -1; }
.es2-radius-group .dropdown { max-width: 22rem; }

.es2-radius-note {
    grid-column: 1 / -1;   /* full Location-group width — the warn states are 2-3 sentences */
    margin-top: .25rem;
    font-size: var(--font-size-sm, .875rem);
    color: var(--color-text-muted, #6c757d);
}
.es2-radius-note:empty { display: none; }
.es2-radius-note.is-warn {
    padding: .3rem .5rem;
    border: 1px solid var(--color-warning-border, #ffcc80);
    border-radius: var(--border-radius-sm, 6px);
    background: var(--color-warning-bg, #fff3e0);
    color: var(--color-text, #212529);
}
/* Disabled Radius = "there is nothing to measure from"; the note right below says so. */
.es2-filter-group select.dropdown:disabled { opacity: .6; cursor: not-allowed; }

/* Shown under City/State/Country while a trip is driving the location filter. */
.es2-loc-overridden {
    grid-column: 1 / -1;
    font-style: italic;
}
.es2-trip-dests { list-style: none; margin: .25rem 0 0; padding: 0; }
.es2-trip-dests li { margin: .15rem 0; }
.es2-trip-dests label { margin-left: .35rem; }

/* ⚡ Here & Now receipt — the "these are the filters it used" panel above the results. */
/* Uses the INFO alert tokens rather than a hand-picked grey: those are the only
   surface/border pair defined for both light and dark schemes, so the panel follows the
   theme instead of staying pale-on-pale when dark mode is on. */
.es2-herenow-receipt {
    border: 1px solid var(--color-info-border);
    border-left: 3px solid var(--color-info);
    border-radius: var(--border-radius, .375rem);
    background: var(--color-info-bg);
    padding: .6rem .75rem;
    margin: .35rem 0 .5rem;
}
.es2-herenow-head {
    font-weight: var(--font-weight-bold, 700);
    margin-bottom: .35rem;
}
.es2-herenow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .1rem .9rem;
    font-size: var(--font-size-sm, .875rem);
}
.es2-herenow-list li.is-set { font-weight: var(--font-weight-bold, 700); }
.es2-herenow-k { color: var(--color-text-muted, #6c757d); }
.es2-herenow-k::after { content: ":"; }
.es2-herenow-tag {
    font-size: .75em;
    font-weight: normal;
    color: var(--color-info);
    white-space: nowrap;
}

.es2-results-head { margin: .25rem 0 .75rem; }

/* Sort control, lifted OUT of the filters panel to sit by the result count so re-sorting
   is a one-tap action that never requires opening the panel (EventSearch + GroupSearch).
   AutoPostBack applies it instantly. Right-aligned, wraps under the count on narrow screens. */
.es2-sortbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .35rem;
}
.es2-sort-label {
    margin: 0;
    font-size: var(--font-size-sm, .875rem);
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}
.es2-sort-select.dropdown {
    width: auto;
    min-width: 190px;
    max-width: 100%;
}

/* Quick-filter presets — a quiet pill row under the search bar (EventSearch + GroupSearch)
   that applies a common filter view in one tap, so users get a useful narrowed list WITHOUT
   opening the full filter panel. Each is a server LinkButton (works with the panel collapsed);
   applying one surfaces the matching removable chip in the results header. Styled as quiet
   OUTLINE pills so they read as fast-paths, distinct from the filled active-filter chips. */
.es2-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: -.35rem 0 .6rem;
}
.es2-presets-label {
    font-size: var(--font-size-xs, .75rem);
    color: var(--color-text-muted, #6c757d);
    margin-right: .1rem;
}
.es2-preset {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 999px;
    background: var(--color-bg-card, #fff);   /* --color-surface is undefined — see .send-menu */
    color: var(--color-text, inherit);
    font-size: var(--font-size-xs, .75rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
/* ⚡ Here & Now is the one preset that is NOT a server LinkButton — it takes a GPS fix first,
   so it's a <button>. Reset the UA button styling that .es2-preset (written for <a>) doesn't
   cover, and give it the accent tint: it's the flagship fast path, not just another pill. */
button.es2-preset {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.es2-preset-herenow {
    border-color: var(--color-accent, #00B0F0);
    color: var(--color-accent-deeper, var(--color-accent-dark, #0090C8));
    font-weight: var(--font-weight-semibold, 600);
}
/* The Quick-views status line reserves a full flex row; collapse it while it's empty so it
   doesn't leave a permanent blank gap under the pills (inside the filters panel the original
   #esGeoStatus keeps its reserved height, where the layout has room for it). */
.es2-presets .es2-geo-status:empty { min-height: 0; margin: 0; }
.es2-preset-herenow.is-loading { opacity: .65; cursor: progress; }
.es2-preset-herenow[disabled] { cursor: not-allowed; }
.es2-preset:hover, .es2-preset:focus-visible {
    border-color: var(--color-accent, #00B0F0);
    background: var(--color-accent-light, #e0f6fe);
    color: var(--color-accent-deeper, var(--color-accent-dark, #0090C8));
    text-decoration: none;
    outline: none;
}

/* .es2-search-paused was REMOVED 2026-07-29. FindEvents' "a search term bypasses the filters"
   note is now the cross-site `.search-filter-notice` (§50 of Shared/styles_shared.css), shared
   with PacklistPRO's Packlist / Tasklist / ShoppingList — one string, one class, four pages.
   The rule that lived here also had a dark-mode fault worth not re-creating: it set
   --color-accent-light (#e0f6fe, no dark override) as the background and never set `color`,
   so in dark mode it painted near-white type on near-white. */

/* Postback-in-flight feedback for the search / show-more buttons (search-loading.js swaps
   the label to "Searching…" on click). Visual only — the click's form submit has already
   fired, so dimming + blocking further clicks here can't cancel the in-flight postback. */
.button.is-loading {
    opacity: .7;
    cursor: progress;
    pointer-events: none;
}

.es2-legend {
    display: block;
    color: var(--color-text-light, var(--color-text-muted, #888));
    font-size: var(--font-size-xs, .75rem);
    margin-top: .15rem;
}

/* ── Active-filter chips (results header — EventSearch + GroupSearch) ──────────
   Every non-default filter renders as a removable pill under the result count, so
   it's obvious WHY the list is narrow. The × posts back to reset that one filter.
   "Clear all filters" is styled quieter (neutral → danger on hover) so it reads as
   a secondary action, not another filter. */
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .3rem .2rem .6rem;
    border: 1px solid var(--color-accent, #00B0F0);
    border-radius: 999px;
    background: var(--color-accent-light, #e0f6fe);
    color: var(--color-accent-deeper, var(--color-accent-dark, #0090C8));
    font-size: var(--font-size-xs, .75rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    max-width: 100%;
}
.filter-chip:hover, .filter-chip:focus-visible {
    background: var(--color-accent, #00B0F0);
    color: #fff;
    outline: none;
}
.filter-chip-label { font-weight: var(--font-weight-bold, 700); }
.filter-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    font-size: .95rem;
    line-height: 1;
    background: rgba(0, 0, 0, .08);
}
.filter-chip:hover .filter-chip-x, .filter-chip:focus-visible .filter-chip-x { background: rgba(255, 255, 255, .25); }
.filter-chips-clear {
    border-color: var(--color-border, #cbd5e1);
    background: transparent;
    color: var(--color-text-muted, #6c757d);
}
.filter-chips-clear:hover, .filter-chips-clear:focus-visible {
    background: var(--color-danger, #c62828);
    border-color: var(--color-danger, #c62828);
    color: #fff;
}

/* ── "My Events" / "My Groups" view pill (results header — EventSearch + GroupSearch) ──
   The nav's My Events / My Groups items are not pages: they are ?preset=my on THESE two
   pages, so the moment any filter moves the state off the preset the view silently becomes
   an ordinary search with nothing on screen saying so and no way back. This row is the
   missing half — it NAMES the view while the preset is intact, and turns into a one-tap
   restore ("← Back to My Events") once a filter has moved it.

   Deliberately NOT styled like .filter-chip above: a chip is one removable filter, this is
   the identity of the whole view, so it gets the calmer info palette and no ×. Every colour
   is a theme-aware token — .es2-search-paused died of hard-coding --color-accent-light
   (#e0f6fe, no dark override) as a background, and that mistake is not worth repeating. */
.es2-viewpill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: 0 0 .5rem;
}
.es2-viewpill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .75rem;
    border: 1px solid var(--color-info-border, #81d4fa);
    border-radius: 999px;
    background: var(--color-info-bg, #e1f5fe);
    color: var(--color-text, #1a1f2e);
    font-size: var(--font-size-sm, .875rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}
/* The restore control is an <asp:LinkButton>, i.e. a real <a> that posts back — so it takes
   the site-wide link colour unless told otherwise, and needs button affordances of its own. */
a.es2-viewpill-back {
    border-color: var(--color-info, #0277bd);
    color: var(--color-info, #0277bd);
    cursor: pointer;
}
a.es2-viewpill-back:hover, a.es2-viewpill-back:focus-visible {
    background: var(--color-info, #0277bd);
    border-color: var(--color-info, #0277bd);
    color: #fff;
    text-decoration: none;
    outline: none;
}
/* --color-info is NOT overridden for dark mode (one flat #0277bd), and against
   --color-info-bg's dark value (#082a3d) it falls under 4.5:1. Same lift the shared
   .search-filter-notice-clear uses, so the actionable pill stays the readable one. */
[data-theme="dark"] a.es2-viewpill-back { border-color: #7fd3f7; color: #7fd3f7; }
[data-theme="dark"] a.es2-viewpill-back:hover,
[data-theme="dark"] a.es2-viewpill-back:focus-visible {
    background: #7fd3f7;
    border-color: #7fd3f7;
    color: #082a3d;
}
.es2-viewpill-note {
    font-size: var(--font-size-xs, .75rem);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #6c757d);
}

/* ── Clustered result-map (shared by EventSearch + GroupSearch) ───────────────
   Was duplicated as an inline <style> block in each page's <head>; centralized here.
   ZIP-precise pins are blue, city-center pins red (GroupSearch only ever shows red —
   groups carry no ZIP). */
.search-map { height: 460px; width: 100%; border-radius: 10px; border: 1px solid rgba(128, 128, 128, .35); margin: .5rem 0; z-index: 0; }
.search-map-legend { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin: .25rem 0 .5rem; }
.sm-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .5); margin-right: .35rem; vertical-align: middle; }
.sm-legend-zip { background: #2563eb; }
.sm-legend-city { background: #dc2626; }
/* "You are here" — matches .sm-pin-me in searchmap.js. */
.sm-legend-me { background: #7c3aed; }
.sm-cap-zip { color: #2563eb; }
.sm-cap-city { color: #dc2626; }

/* ── Event card (collapsible) ─────────────────────────────────────────────── */
.es2-card {
    margin-bottom: .75rem;
    border-left: 4px solid var(--color-border, #e0e0e0);
    transition: box-shadow var(--transition-fast, .15s);
}
.es2-card[open] { box-shadow: var(--shadow-card-hover, var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12))); }

/* ── Shared search-result left-border accent (EventSearch + GroupSearch) ──────
   ONE subtle accent system for both browse pages so they read as siblings. A thin
   coloured LEFT BORDER only — never a full-card colour fill (the loud .result-card--*
   fill variants are reserved for member/account/match/survey cards, untouched here).
   Colours mirror the 3-bucket badge system: danger (red) · attention (amber) ·
   owned (calm green) · else the neutral grey default. Each rule sets BOTH
   `border-left-color` (EventSearch's .es2-card draws the border directly) AND
   `--result-accent` (GroupSearch's .result-card derives its border from that var),
   so a single class name styles either card type.

   Compound `.es2-card.X` / `.result-card.X` selectors (specificity 0,2,0) out-rank
   `.main-card { border: 1px solid … }` from the shared sheet, which loads AFTER this
   file and would otherwise flatten border-left back to a 1px grey line. */
.es2-card.rc-danger,    .result-card.rc-danger    { border-left-color: var(--color-danger, #c62828);  --result-accent: var(--color-danger, #c62828);  border-left-width: 5px; }
.es2-card.rc-attention, .result-card.rc-attention { border-left-color: var(--color-warning, #e65100); --result-accent: var(--color-warning, #e65100); border-left-width: 5px; }
.es2-card.rc-owned,     .result-card.rc-owned     { border-left-color: #2e9e4f;                        --result-accent: #2e9e4f;                        border-left-width: 5px; }
/* 🤝 MEETUP accent — "what KIND of thing is this", not "how urgent is it".
   Violet, because every other accent on this page is already spoken for by the urgency
   scale (red danger / amber attention / green owned-or-now) and a fourth shade of those
   would read as a fourth severity level. A meetup is not more or less urgent than an
   event; it is a different kind of row.
   ⚠ Declared BEFORE the time-proximity rules on purpose, so state and urgency both OUT-RANK
   it at equal specificity: a meetup happening today must still show the amber "now" accent.
   Nothing is lost when that happens — the 🤝 Meetup badge is rendered independently of this
   class and still says so in words. */
.es2-card.es2-card-meetup, .result-card.es2-card-meetup { border-left-color: #6d28d9; --result-accent: #6d28d9; border-left-width: 5px; }

/* Time-proximity accents (declared AFTER state, so they win when both apply).
   Width encodes urgency: THICK amber = today / in progress, THIN amber = within 3 days. */
.es2-card.rc-now,  .result-card.rc-now  { border-left-color: var(--color-warning, #e65100); --result-accent: var(--color-warning, #e65100); border-left-width: 6px; }
.es2-card.rc-soon, .result-card.rc-soon { border-left-color: var(--color-warning, #e65100); --result-accent: var(--color-warning, #e65100); border-left-width: 3px; }

/* Clickable summary header — custom chevron, no native marker. */
summary.es2-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}
summary.es2-summary::-webkit-details-marker { display: none; }
summary.es2-summary::before {
    content: "\25B8"; /* ▸ */
    color: var(--color-text-muted, #6c757d);
    flex: 0 0 auto;
    margin-top: .15rem;
    transition: transform var(--transition-fast, .15s);
}
details[open] > summary.es2-summary::before { transform: rotate(90deg); }
summary.es2-summary:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(0,176,240,.4)); border-radius: var(--border-radius-sm, 6px); }

.es2-summary-main { flex: 1 1 auto; min-width: 0; }
.es2-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.es2-title { font-weight: var(--font-weight-bold, 600); font-size: var(--font-size-base, 1.125rem); color: var(--color-text, #1a1f2e); }
.es2-meta {
    color: var(--color-text-muted, #6c757d);
    font-size: var(--font-size-sm, .875rem);
    margin-top: .25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1rem;
}
/* Force the location (and any linked-group) onto its own line, under the date range. */
.es2-meta-when { flex-basis: 100%; }
.es2-distance { color: var(--color-accent-dark, var(--color-accent, #0090C8)); }
.es2-loc-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; cursor: pointer; }
.es2-loc-link:hover, .es2-loc-link:focus-visible { color: var(--color-accent-dark, var(--color-accent, #0090C8)); text-decoration-style: solid; }
.es2-loc-warn { color: var(--color-warning, #d9822b); margin-left: .15rem; }

/* ── Badges (status / recurring / interest at a glance) ───────────────────── */
.es2-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.es2-badges-body { margin: 0 0 .6rem; }
.es2-badge {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: var(--font-size-xs, .75rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.5;
    white-space: nowrap;
    background: var(--color-bg, #f5f7fa);
    color: var(--color-text-muted, #6c757d);
    border: 1px solid var(--color-border, #e0e0e0);
}
.es2-badge-danger  { background: var(--color-danger-bg, #ffebee);  color: var(--color-danger, #c62828);  border-color: var(--color-danger-border, #ef9a9a); }
.es2-badge-warning { background: var(--color-warning-bg, #fff3e0); color: var(--color-warning, #e65100); border-color: var(--color-warning-border, #ffcc80); }
/* Attention (amber) — the ONLY "you should notice this" status colour besides danger.
   Used for time-urgency (Today / In progress / soon), Proposed, and Work-in-progress, so
   the whole status row reads as just three buckets: danger (red) · attention (amber) ·
   factual (the neutral base badge). Reserve colour for signal; keep routine facts quiet. */
.es2-badge-attention { background: var(--color-warning-bg, #fff3e0); color: var(--color-warning, #e65100); border-color: var(--color-warning-border, #ffcc80); }
.es2-badge-info    { background: var(--color-info-bg, #e1f5fe);    color: var(--color-info, #0277bd);    border-color: var(--color-info-border, #81d4fa); }
/* Recurring badge — outline style (bright-green border, no fill). Only used for ↻ Recurring. */
.es2-badge-success { background: transparent; color: var(--color-text, #1a1f2e); border-color: #00FF00; }
.es2-badge-cyan    { background: var(--color-accent-light, #e0f6fe); color: var(--color-accent-deeper, var(--color-accent-dark, #0090C8)); border-color: var(--color-accent, #00B0F0); }
.es2-badge-free     { background: #00a000; color: #fff; border-color: #00a000; }
.es2-badge-interest { background: #00FF00; color: #003300; border-color: #00FF00; }
.es2-badge-maybe    { background: #008000; color: #fff; border-color: #008000; }
/* Time-proximity badges — solid green so "happening now / soon" reads at a glance. */
.es2-badge-now      { background: #00FF00; color: #003300; border-color: #00FF00; }
.es2-badge-soon     { background: #006400; color: #fff; border-color: #006400; }
/* People-count card pills, each a distinct hue so they read apart at a glance:
   invited = violet, going = green, interested = amber, members = slate-blue. */
/* 🤝 Meetup — the TYPE badge. Same violet family as the card's left accent above, so the
   badge and the stripe read as one signal rather than two unrelated decorations. NOT one of
   the urgency colours: a meetup is a kind of row, not a status. */
.es2-badge-meetup     { background: #efe7fb; color: #6d28d9; border-color: #c4b5fd; }
.es2-badge-invited    { background: #efe7fb; color: #6d28d9; border-color: #c4b5fd; }
.es2-badge-going      { background: #e3f6e8; color: #15803d; border-color: #a7e0bb; }
.es2-badge-interested { background: #fff4e0; color: #b45309; border-color: #fcd9a3; }
.es2-badge-members    { background: #e6edfb; color: #1d4ed8; border-color: #b6c8f3; }
/* Interest-match pill (GroupSearch) — teal, distinct from the slate-blue members pill. */
.es2-badge-interests  { background: #d9f5f0; color: #0f766e; border-color: #9fe3d8; }
/* Member-views pill — admin/organizer only. Graphite/slate so it reads as an
   analytics stat, distinct from the people-count hues above. */
.es2-badge-views      { background: #eceff3; color: #475569; border-color: #cbd5e1; }
/* These badges inside a GroupSearch result-card (block-flow children) — give them their own line. */
.result-card-countpill { display: inline-block; margin: .25rem .35rem 0 0; }

/* ── Your own RSVP, at a glance (FindEvents card summary) ─────────────────────
   The viewer's answer to "Are you going?" on their own card. THREE tiers for six
   answers: the label already says which of the six it was, so the colour only has
   to separate committed / tentative / declined.

   Deliberately avoids amber and red. On this card both are already spoken for —
   amber = time-urgency / Proposed / Work-in-progress, red = Canceled / Rejected —
   and a red "you're not going" would read as an alert about the EVENT rather than
   a note about the viewer. The ✓ / × glyphs in the labels carry the distinction
   too, so none of this is colour-alone. */

/* Committed (Arrived / Attended / Went / Definitely). SOLID --color-success with
   white text, NOT --color-success on --color-success-bg: dark mode redefines only
   the -bg token (to #1b3a1e) and leaves --color-success at #2e7d32, which lands at
   2.45:1 there. White on #2e7d32 is 5.1:1 and identical in both themes — same
   reasoning (and same measurements) as .ql-sent-pill in styles_shared.css. */
.es2-badge-rsvp-yes  { background: var(--color-success, #2e7d32); color: #fff; border-color: var(--color-success, #2e7d32); }
/* Tentative (Probably / Maybe) — outline, so it is visibly weaker than "going"
   without minting a second hue. --color-text flips with the theme; the green stays
   on the border only, where contrast doesn't apply. */
.es2-badge-rsvp-soft { background: transparent; color: var(--color-text, #1a1f2e); border-color: var(--color-success, #2e7d32); }
/* Declined (Probably not / No) — quiet, but NOT the base badge's --color-text-muted:
   that token is tuned for --color-bg-card and lands at 3.65:1 over --color-bg, under
   AA. Full --color-text reads properly in both themes and the border still marks it
   out as a badge. */
.es2-badge-rsvp-no   { background: var(--color-bg-card, #fff); color: var(--color-text, #1a1f2e); border-color: var(--color-border, #e0e0e0); }

.es2-badge-hidden   { display: none; }

/* ── Quiet stats line (people counts) ─────────────────────────────────────────
   Popularity counts (going / interested / invited / members / views) used to be a
   run of individually-coloured pills, which dominated each card. They carry no
   "act now" urgency, so they're demoted to one muted ·-separated line — glanceable
   but visually recessive. Shared by EventSearch (.es2-card summary) and GroupSearch
   (.result-card). */
.es2-stats {
    margin-top: .35rem;
    font-size: var(--font-size-xs, .75rem);
    color: var(--color-text-muted, #6c757d);
    line-height: 1.5;
}
.es2-stats .es2-stat + .es2-stat::before { content: " · "; color: var(--color-border, #cbd5e1); }

/* ── Expanded body ────────────────────────────────────────────────────────── */
.es2-body { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--color-border, #e0e0e0); }
.es2-desc { margin: .25rem 0 .75rem; color: var(--color-text, #1a1f2e); white-space: pre-wrap; }
.es2-line { font-size: var(--font-size-sm, .875rem); color: var(--color-text, #1a1f2e); margin-bottom: .4rem; }
.es2-line-label { color: var(--color-text-muted, #6c757d); font-weight: var(--font-weight-medium, 500); }
/* Last-updated freshness line — quiet metadata, sits just above the actions row. */
.es2-updated { color: var(--color-text-muted, #6c757d); font-size: var(--font-size-xs, .8125rem); margin-top: .35rem; }
.es2-updated .es2-line-label { color: inherit; }

/* Interest segmented control — pills; active level is color-coded. */
.es2-interest { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .85rem; }
.es2-int-btn { cursor: pointer; }
.es2-int-btn[disabled] { opacity: .6; cursor: default; }
.es2-int-btn.active[data-level="Y"] { background: #00FF00;                       border-color: #00FF00;                       color: #003300; }
.es2-int-btn.active[data-level="M"] { background: #008000;                       border-color: #008000;                       color: #fff; }
.es2-int-btn.active[data-level="N"] { background: var(--color-danger, #c62828);  border-color: var(--color-danger, #c62828);  color: #fff; }
.es2-int-btn.active[data-level="Q"] { background: var(--color-accent, #00B0F0);  border-color: var(--color-accent, #00B0F0);  color: #fff; }
/* "These are not an RSVP" — the .inline-tip that moved out of the tutorial overlay
   on 2026-07-31 and now sits under the control it explains. Two local overrides only:
   display:block so a full sentence reads as a caption of the control rather than as a
   shrink-wrapped chip beside it), and a negative top margin to cancel .es2-interest's .85rem bottom margin —
   an inline-block's margins do NOT collapse with a sibling's, so without this the tip
   floats 1.25rem clear of the buttons and stops reading as attached to them. */
.es2-interest-tip { display: block; margin: -.5rem 0 .75rem; }

/* Match GroupSearch's .result-card-actions spacing so the View Details / Map /
   Share buttons don't butt up against each other. */
.es2-actions { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Pager / footer ───────────────────────────────────────────────────────── */
.es2-showmore { text-align: center; margin: 1rem 0; }
.es2-showmore .note { display: block; margin-bottom: .5rem; }
/* Home interest-suggestion cards: rows past the initial batch stay hidden until
   the "Show More" button (qmSuggShowMore) reveals them. The compound selector
   keeps this ahead of the later `.home-invite-card { display: flex }` rule, which
   otherwise wins on equal specificity and reveals every hidden card. */
.sugg-hidden,
.home-invite-card.sugg-hidden { display: none !important; }
.es2-footer-actions { margin-top: 1rem; }

/* Card removal animation when a card no longer matches the active filter. */
.es2-removing {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity .25s var(--ease-in-out, ease), transform .25s var(--ease-in-out, ease);
}
@media (prefers-reduced-motion: reduce) { .es2-removing { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   Interests2.aspx — PacklistPRO-styled interest tagging
   Reuses the existing .swatch palette so chips, filter pills, and rating
   buttons all read from one set of level colors:
     Love  #d4edbc / #2d5016 / #84cc16   Like #b9d8a7 / #1b3b0f / #65a30d
     Meh   #cfe2ff / #084298 / #0d6efd   Hide #f8d7da / #842029 / #dc3545
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Intro / progress ─────────────────────────────────────────────────────── */
/* The intro is a slim card (not a <details>) — its own <h2> needs the bottom
   margin a <summary> would have carried. */
.interest-intro > .card-title { margin-bottom: 0.5rem; }
.interest-intro .interest-progress {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text, #1a1f2e);
    margin: 0.25rem 0 0.5rem;
}
/* Progress toward the "you've tagged plenty" mark. All spans — the label this
   lives in renders a <span>, so a <div> track would be invalid inside it. */
.interest-progress .ip-bar {
    display: block;
    height: 8px;
    margin-bottom: 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--color-border, #e0e0e0);
    background: var(--color-bg, #f5f7fa);
    overflow: hidden;
}
.interest-progress .ip-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    /* Like → Love, in the same .swatch palette as the chips the bar counts
       (it measures Love + Like). Was neon #80ff80→#00ff00, which after the
       chips moved to sage would have left this the only neon in the card. */
    background: linear-gradient(90deg, #b9d8a7, #84cc16);
    transition: width 0.4s ease;
}
@media (prefers-reduced-motion: reduce) { .interest-progress .ip-fill { transition: none; } }
.interest-progress .ip-text { display: block; }
.interest-howto { margin-top: 0.5rem; }
.interest-howto > summary {
    cursor: pointer;
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-accent, #00B0F0);
    font-size: 0.9rem;
    padding: 0.25rem 0;
    list-style: revert;
}
.interest-howto > summary:hover { text-decoration: underline; }
.interest-howto-body { margin-top: 0.5rem; }
.interest-legend { list-style: none; padding: 0; margin: 0.5rem 0; }
.interest-legend li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    line-height: 1.4;
}
.interest-legend .swatch { flex: 0 0 auto; }

/* ── Filter pills (asp:CheckBox renders span.class > input + label) ────────── */
.interest-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.25rem 0 0.85rem;
}
.interest-filter-pill { display: inline-flex; position: relative; }
.interest-filter-pill > input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.interest-filter-pill > label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-border, #e0e0e0);
    background: var(--color-bg-card, #fff);
    color: var(--color-text-muted, #6c757d);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.interest-filter-pill > input:hover + label { border-color: var(--color-accent, #00B0F0); }
.interest-filter-pill > input:focus-visible + label {
    outline: 2px solid var(--color-accent, #00B0F0);
    outline-offset: 2px;
}
/* Love / Like filter pills double as the color legend for the chips below, so
   they always carry the chip colour — now the .swatch palette this block's
   header promises, not the neon #00ff00/#80ff80 they had drifted to. That drift
   made the legend lie: .swatch--top/--interested (the "How tagging works" key)
   and .rate-top/.rate-yes:hover (the browse buttons that preview the result)
   both render sage, so hovering 😍 Love showed one colour and produced another.
   Meh/Hide never drifted, which left max-saturation neon sitting beside pastel
   #cfe2ff/#f8d7da in the same row. The checked/active state is shown with a
   heavier border + focus-style ring rather than a colour change, so the sample
   colour stays constant. */
.interest-filter-pill.is-top > label { background: #d4edbc; color: #2d5016; border-color: #84cc16; }
.interest-filter-pill.is-yes > label { background: #b9d8a7; color: #1b3b0f; border-color: #65a30d; }
.interest-filter-pill.is-top > input:checked + label { background: #d4edbc; color: #2d5016; border-color: #4d7c0f; box-shadow: 0 0 0 2px rgba(77, 124, 15, 0.35); }
.interest-filter-pill.is-yes > input:checked + label { background: #b9d8a7; color: #1b3b0f; border-color: #3f6212; box-shadow: 0 0 0 2px rgba(63, 98, 18, 0.35); }
.interest-filter-pill.is-meh > input:checked + label { background: #cfe2ff; color: #084298; border-color: #0d6efd; }
.interest-filter-pill.is-no  > input:checked + label { background: #f8d7da; color: #842029; border-color: #dc3545; }

/* ── Your-interest chips, grouped by level ────────────────────────────────── */
.interest-tag-group { margin: 0.35rem 0 0.65rem; }
.interest-tag-group-head {
    font-size: 0.78rem;
    font-weight: var(--font-weight-bold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #6c757d);
    margin: 0.35rem 0 0.35rem;
}
.interest-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    margin: 0.2rem 0.25rem 0.2rem 0;
    border-radius: 999px;
    border: 1px solid var(--color-border, #e0e0e0);
    background: var(--color-bg-card, #fff);
    font-size: 0.9rem;
    vertical-align: middle;
}
.interest-tag-name { font-weight: var(--font-weight-medium, 500); }
/* Post-count badge inside a chatable interest pill (Dashboard Interests card) — shows
   how many messages the interest chat has. Only rendered when the count is > 0. */
.interest-tag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1;
}
.interest-tag-do,
.interest-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.interest-tag-do { font-size: 0.95rem; }
.interest-tag-remove { font-size: 1.3rem; opacity: 0.6; }
.interest-tag-do:hover,
.interest-tag-remove:hover {
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none;
    opacity: 1;
}
/* Browse & Rate search row: keep the box + 🔍 together on one line and cap the
   input width so it doesn't stretch across the whole card (the "tons of space"
   look). The in-field × clears the term — no separate Clear button. */
.interest-search-row { flex-wrap: nowrap; justify-content: flex-start; }
.interest-search-row .input-clearable-grow { flex: 1 1 auto; min-width: 0; max-width: 26rem; }
@media (max-width: 480px) {
    /* Override the global .search-row{flex-direction:column} so the 🔍 button
       stays on the same line right after the box (never stacks below). */
    .interest-search-row { flex-direction: row; flex-wrap: nowrap; }
    .interest-search-row .input-clearable-grow { max-width: none; }
    .interest-search-row .button { width: auto; }
}

/* Love/Like use the .swatch palette named in this block's header — see the
   .interest-filter-pill note above for why the neon they had drifted to went. */
.interest-tag.is-top { background: #d4edbc; color: #2d5016; border-color: #84cc16; }
.interest-tag.is-yes { background: #b9d8a7; color: #1b3b0f; border-color: #65a30d; }
.interest-tag.is-meh { background: #cfe2ff; color: #084298; border-color: #0d6efd; }
.interest-tag.is-no  { background: #f8d7da; color: #842029; border-color: #dc3545; }

/* ── Browse & rate rows ───────────────────────────────────────────────────── */
.interest-rate-list { margin-top: 0.25rem; }
.interest-rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.15rem;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}
.interest-rate-row:last-child { border-bottom: none; }
.interest-rate-link {
    flex: 1 1 11rem;
    min-width: 0;
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-text, #1a1f2e);
    text-decoration: none;
}
.interest-rate-link:hover { color: var(--color-accent, #00B0F0); text-decoration: none; }
.interest-rate-search { opacity: 0.45; font-size: 0.85em; }
.interest-rate-buttons { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ── XS-07: browse order control + the per-row "N coming up" count ────────────
   The count is the evidence for the new default order (most upcoming events
   first), so it has to be readable without competing with the rating buttons —
   hence dim, small, and NOT flex-growing. `flex: 0 0 auto` keeps it beside the
   name on a wide row and lets it wrap under on a phone, where .interest-rate-row
   is already flex-wrap. */
.interest-order-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin: 0.25rem 0 0.5rem;
}
.interest-order-row .input-label { margin: 0; }
.interest-order-row .dropdown { width: auto; min-width: 12rem; }
.interest-upcoming {
    flex: 0 0 auto;
    font-size: 0.85em;
    white-space: nowrap;
    color: var(--color-text-muted, #6b7280);
}
.interest-upcoming.is-none { opacity: 0.6; font-style: italic; }

.rate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 2.1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-border, #e0e0e0);
    background: var(--color-bg-card, #fff);
    color: var(--color-text, #1a1f2e);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.rate-btn:hover { text-decoration: none; }
.rate-btn:focus-visible { outline: 2px solid var(--color-accent, #00B0F0); outline-offset: 2px; }
.rate-emoji { font-size: 1.1rem; line-height: 1; }
.rate-btn-sm { min-height: 2.1rem; padding: 0.25rem 0.6rem; font-size: 0.8rem; }

/* Level-tinted borders; fill on hover/focus so the choice is obvious. */
.rate-top { border-color: #84cc16; }
.rate-top:hover, .rate-top:focus-visible { background: #d4edbc; color: #2d5016; border-color: #84cc16; }
.rate-yes { border-color: #65a30d; }
.rate-yes:hover, .rate-yes:focus-visible { background: #b9d8a7; color: #1b3b0f; border-color: #65a30d; }
.rate-meh { border-color: #0d6efd; }
.rate-meh:hover, .rate-meh:focus-visible { background: #cfe2ff; color: #084298; border-color: #0d6efd; }
.rate-no { border-color: #dc3545; }
.rate-no:hover, .rate-no:focus-visible { background: #f8d7da; color: #842029; border-color: #dc3545; }
.rate-btn.is-neutral { border-color: var(--color-border, #e0e0e0); }
.rate-btn.is-neutral:hover { background: var(--color-bg, #f5f7fa); border-color: var(--color-accent, #00B0F0); }

/* Vet mode: fill in the Group button the row is ALREADY filed under, so "which one is
   set" is legible from the controls themselves and not only from the badge. Reuses each
   variant's own :hover fill rather than inventing a palette — the hovered and the current
   state looking alike is the point (this is what tapping it would leave you with). The
   pale fills are deliberately theme-independent, same as the :hover rules above. */
.rate-btn.is-current {
    font-weight: var(--font-weight-bold, 700);
    border-width: 2.5px;
}
.rate-top.is-current { background: #d4edbc; color: #2d5016; }
.rate-yes.is-current { background: #b9d8a7; color: #1b3b0f; }
.rate-meh.is-current { background: #cfe2ff; color: #084298; }
.rate-no.is-current  { background: #f8d7da; color: #842029; }
.rate-btn.is-neutral.is-current {
    background: var(--color-bg, #f5f7fa);
    border-color: var(--color-text-muted, #6c757d);
    color: var(--color-text, #1a1f2e);
}

/* The vet-mode row badge naming the CURRENT group in words ("Group 2" / "Ungrouped" /
   "Deleted"). It used to be a bare digit at the tail of the button row, rendered only when
   a group was set — which is silent in exactly the case ddlFilter defaults to. Sized for a
   word now, and `flex: 0 0 auto` keeps it beside the name the way .interest-upcoming does
   on the end-user list rather than stretching the row. */
.interest-rate-grp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--color-bg, #f5f7fa);
    border: 1px solid var(--color-border, #e0e0e0);
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}
/* Grouped rows keep the quiet default look — the number is the information, and 1/2/3/4
   are peers (nothing here asserts a ranking between them). Ungrouped and Deleted are the
   two states a curator is actively hunting, so those two get told apart at a glance. */
.interest-rate-grp.is-grouped { color: var(--color-text, #1a1f2e); }
.interest-rate-grp.is-none {
    border-style: dashed;
    font-weight: var(--font-weight-medium, 500);
    font-style: italic;
}
.interest-rate-grp.is-del { background: #f8d7da; border-color: #dc3545; color: #842029; }

/* Curator-row category, in small print. Context for the name, not a control — so no pill
   chrome, no border, and it recedes next to the group badge it sits beside. Same flex/dim
   treatment as .interest-upcoming above, which does the same job for the end-user list.
   🛑 There is NO "unset" variant on purpose — the row renders this only when a category is
   set (owner's call; 4,712 of 4,713 rows have none, so an empty-state badge was noise on
   every line). The card's ddlCategory is where "(none)" is stated. */
.interest-rate-cat {
    flex: 0 0 auto;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--color-text-muted, #6c757d);
}

/* ── Pager ────────────────────────────────────────────────────────────────── */
.interest-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border, #e0e0e0);
}
.interest-pager-label {
    flex: 1 1 6rem;
    text-align: center;
    color: var(--color-text-muted, #6c757d);
    font-size: 0.85rem;
}
.interest-pager-size { display: inline-flex; align-items: center; gap: 0.4rem; }
.interest-pager-size .input-label { margin: 0; }
.interest-pager-size .dropdown { width: auto; min-width: 4rem; }

/* ── Admin tools card ─────────────────────────────────────────────────────── */
.interest-admin > summary.card-title { cursor: pointer; }
.interest-admin[open] > summary.card-title { margin-bottom: 0.75rem; }

/* ══════════════════════════════════════════════════════════════════════════
   MANAGE EVENT TAGS 2 (ManageEventTags2.aspx) — PLP-look tag chips.
   Event tags render as chips; each carries a vote-summary badge so the
   organizer can see at a glance what members want to do. Generic chrome
   (cards, search row, buttons, empty-state) uses the shared component classes;
   only the chips + stat strip are page-specific, and all colors come from the
   shared tokens that adapt to dark mode (no light-only hexes on adaptive text).
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero card */
.met-hero .met-event-name {
    font-size: var(--font-size-xl, 1.375rem);
    font-weight: var(--font-weight-bold, 600);
    line-height: 1.25;
    margin: 0 0 0.35rem;
    color: var(--color-text, #1a1f2e);
}
.met-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    margin-top: 0.7rem;
    font-size: 0.9rem;
    color: var(--color-text-muted, #6c757d);
}
.met-stat { display: inline-flex; align-items: center; gap: 0.3rem; }
.met-stat b { color: var(--color-text, #1a1f2e); font-weight: var(--font-weight-bold, 600); }
.met-stat-dim { font-style: italic; }
.met-stat-link {
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-link, #00B0F0);
    text-decoration: none;
    white-space: nowrap;
}
.met-stat-link:hover { text-decoration: underline; }

/* Chip container — shared by current tags, search results, and popular */
.met-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.25rem; }

/* A tag currently on the event (accent border + adaptive info tint = "on") */
.met-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.28rem 0.3rem 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-accent, #00B0F0);
    background: var(--color-info-bg, #e1f5fe);
    color: var(--color-text, #1a1f2e);
    font-size: 0.92rem;
}
.met-tag-name {
    font-weight: var(--font-weight-medium, 500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* QMR-107: a tag chip rendered as an <a> — EventDetails → FindEvents?search=,
   GroupDetails → FindGroups?search=. .met-tag already supplies the pill, border
   and colour; the anchor only drops the underline and gains an affordance. The
   right-hand padding stays 0.3rem from .met-tag (it was sized for the vote badge),
   so pad the link back out to match the left when there's no badge inside. */
a.met-tag {
    text-decoration: none;
    cursor: pointer;
    padding-right: 0.7rem;
}
a.met-tag:hover,
a.met-tag:focus-visible {
    background: var(--color-accent, #00B0F0);
    color: #fff;
}
a.met-tag:focus-visible {
    outline: 2px solid var(--color-accent, #00B0F0);
    outline-offset: 2px;
}

/* Vote-summary badge inside a tag chip */
.met-votes {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--color-border, #e0e0e0);
    background: var(--color-bg-card, #fff);
    color: var(--color-text-muted, #6c757d);
    font-size: 0.76rem;
    font-weight: var(--font-weight-bold, 600);
    line-height: 1.4;
    white-space: nowrap;
}
.met-votes.is-keen {
    border-color: var(--color-success-border, #a5d6a7);
    background: var(--color-success-bg, #e8f5e9);
    color: var(--color-success, #2e7d32);
}

/* × remove control on a tag chip */
.met-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.6;
    transition: background-color 0.15s, opacity 0.15s;
}
.met-tag-remove:hover,
.met-tag-remove:focus-visible {
    background: rgba(127, 127, 127, 0.25);
    opacity: 1;
    text-decoration: none;
    outline: none;
}

/* "＋ Tag" add chips (search results + popular quick-add) */
.met-add {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-border, #e0e0e0);
    background: var(--color-bg-card, #fff);
    color: var(--color-text, #1a1f2e);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.met-add::before {
    content: "＋";
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-save-btn, #32cd32);
}
.met-add:hover,
.met-add:focus-visible {
    border-color: var(--color-save-btn, #32cd32);
    background: var(--color-success-bg, #e8f5e9);
    color: var(--color-text, #1a1f2e);
    text-decoration: none;
    outline: none;
}

/* Sub-label above the popular-tags row */
.met-sub {
    margin: 0.95rem 0 0.4rem;
    font-size: 0.78rem;
    font-weight: var(--font-weight-bold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #6c757d);
}

/* "Make It Visible" card, already-live state. Once the event/group is visible the
   publish card has no action left, so the code-behind swaps in .met-publish-live to
   drop the card chrome (border/shadow/title/button) and leave one slim success line —
   consistent across EditEventTags + EditGroupTags. */
.met-publish-live {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0.15rem 0;
    margin-bottom: 0.6rem;
}
.met-publish-live .card-title,
.met-publish-live .form-actions { display: none; }
.met-publish-live-text {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-muted, #6c757d);
}
.met-publish-live-text b { color: var(--color-success, #2e7d32); }

/* ══════════════════════════════════════════════════════════════════════════
   INTEREST TRACKER (InterestTracker.aspx) — PLP-look cards.
   The Status value drives the card's coloured left border (.it-card.is-*).
   Fixed status hues mirror the existing .interest-tag / .swatch families.

   Two structural rules carry most of the page's calm:
     • A card with no status yet is JUST its name + one dropdown. The Skill
       select (and the flags row) live behind .it-card.is-set, which the page
       script toggles the moment a status is picked.
     • The count tiles ARE the status filter. They render as <button>s; the
       real <select> (.it-filter-group) is hidden once the script confirms
       it's running by putting .it-js on <html>.
   ══════════════════════════════════════════════════════════════════════════ */

/* At-a-glance count strip — also the status filter */
.it-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
}
.it-stat {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    flex: 1 1 6rem;
    min-width: 0;
    text-align: center;
    padding: 0.55rem 0.5rem;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 10px);
    background: var(--color-bg, #f5f7fa);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* Only advertise the tiles as clickable once the script that wires them ran. */
.it-js .it-stat { cursor: pointer; }
.it-js .it-stat:hover { border-color: var(--color-primary, #00B0F0); background: var(--color-primary-light, #e7f7fe); }
.it-stat:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.it-stat.is-active {
    border-color: var(--color-primary, #00B0F0);
    box-shadow: inset 0 0 0 1px var(--color-primary, #00B0F0);
}
.it-stat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold, 600);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.it-stat-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-muted, #6c757d);
}
.it-stat.is-soon  { border-top: 3px solid #0d6efd; }
.it-stat.is-often { border-top: 3px solid #2e9e5b; }
.it-stat.is-again { border-top: 3px solid #0f9d8a; }
.it-stat.is-unset { border-top: 3px solid #adb5bd; }

/* The tiles replace this select; it stays in the DOM as the postback source of
   truth, and stays VISIBLE if the script never ran. Same deal for the fallback
   Save row, which .it-autosave hides only once callMethod is known reachable. */
.it-js .it-filter-group { display: none; }
.it-autosave .it-fallback-save { display: none; }
/* The save-model notice is swapped by the same switch, and in the same direction: the
   page states one model or the other, never both and never neither. Default (no script)
   shows the deferred line beside the fallback Save row above; .it-autosave flips both. */
.it-autosave-only { display: none; }
.it-autosave .it-autosave-only { display: block; }

/* List + card */
.it-list { display: flex; flex-direction: column; gap: 0.6rem; }
.it-card {
    display: grid;
    /* 28rem for the controls is MEASURED, not taste: the longest status option
       ("✅ Done — would do again") needs 224px of text + 48px of select padding
       and arrow = 272px, and a native select silently truncates its own SELECTED
       value. Narrower and the card lies about the status it's showing. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-left: 6px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 10px);
    box-shadow: var(--shadow-sm);
    padding: 0.7rem 0.85rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.it-card.is-removing { opacity: 0; transform: translateX(1.5rem); }
.it-card-head {
    display: flex;
    align-items: center;
    gap: 0.35rem 0.7rem;
    flex-wrap: wrap;
    min-width: 0;
}
.it-card-name {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold, 600);
    line-height: 1.2;
    word-break: break-word;
}
.it-card-controls {
    display: grid;
    /* Skill's longest option ("Intermediate") only needs ~150px, so cap it and
       give every remaining pixel to Status, which needs 272px (see .it-card). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 9.5rem);
    gap: 0.6rem 0.85rem;
}
/* No status yet → no Skill select, and Status takes the whole control cell. */
.it-card:not(.is-set) .it-card-controls { grid-template-columns: 1fr; }
.it-card:not(.is-set) .it-skill { display: none; }
.it-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.it-field .dropdown { width: 100%; }

/* "✓ Saved" pip — autosave's only feedback, so it must never shift the row. */
.it-saved {
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--color-text-muted, #6c757d);
}
/* Idle (the usual state) it's an empty span — don't let it eat a flex gap. */
.it-saved:empty { display: none; }
.it-saved.is-ok    { color: var(--color-success, #2e7d32); font-weight: var(--font-weight-bold, 600); }
.it-saved.is-error { color: var(--color-danger, #dc3545); font-weight: var(--font-weight-bold, 600); }

/* Flags row — needs BOTH the global toggle and a status on this card. */
.it-card-flags { display: none; }
.it-show-flags .it-card.is-set .it-card-flags {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin-top: 0.1rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--color-border, #e0e0e0);
}

/* Status palette — the card's left border (light mode) */
.it-card.is-unset   { border-left-color: #ced4da; }
.it-card.is-soon    { border-left-color: #0d6efd; }
.it-card.is-someday { border-left-color: #6c757d; }
.it-card.is-often   { border-left-color: #2e9e5b; }
.it-card.is-again   { border-left-color: #0f9d8a; }
.it-card.is-crossed { border-left-color: #adb5bd; }
.it-card.is-remove  { border-left-color: #dc3545; }

[data-theme="dark"] .it-stat { background: rgba(255, 255, 255, 0.03); }

/* Stack the card on narrow screens */
@media (max-width: 767px) {
    .it-card { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 575px) {
    .it-card-controls { grid-template-columns: 1fr; }
    .it-stat-num { font-size: 1.3rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   ManageEventMembers2 — member roster (PacklistPRO-look redesign)
   Layout glue only, built on the shared tokens + .result-card / .status-badge
   / .pill. Colors come from theme variables so dark mode follows for free.
   ════════════════════════════════════════════════════════════════════════ */

/* Hero — event name + at-a-glance count chips */
.mem2-hero-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: 0.6rem;
    overflow-wrap: anywhere;
}
.mem2-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mem2-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.mem2-stat-ico { align-self: center; }
.mem2-stat-n { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--color-text); }

/* Member card — reuses .result-card; the left border encodes role/state while
   the card body stays on the theme surface so every badge/button is legible.
   (Comes after the .result-card / .result-card--* rules above, so these
   border-left-color overrides win the cascade.) */
.mem2-card { cursor: default; }                 /* reset .result-card whole-card pointer */
.mem2-card--organizer { border-left-color: var(--color-success, #2e7d32); }
.mem2-card--banned    { border-left-color: var(--color-danger, #c62828); opacity: 0.82; }
.mem2-card--normal    { border-left-color: var(--color-border); }

.mem2-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.mem2-name { font-size: 1.05rem; font-weight: var(--font-weight-bold); }
.mem2-name:hover { text-decoration: underline; }
.mem2-you { font-style: italic; }
.mem2-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem; }
.mem2-sep { color: var(--color-text-light); }

/* Collapsible RSVP details */
.mem2-details { margin-top: 0.5rem; }
.mem2-details > summary {
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}
.mem2-details > summary:hover { color: var(--color-accent); }
.mem2-details[open] > summary { margin-bottom: 0.35rem; }
.mem2-dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 0.6rem; }
.mem2-dl dt { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.mem2-dl dd { margin: 0; font-size: var(--font-size-sm); overflow-wrap: anywhere; }

/* Action row + status filter pills */
.mem2-actions { margin-top: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mem2-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }

/* ⋯ More — collapses the occasional per-member actions (Make organizer, Ban,
   Website invite) off the card face so each card leads with just its primary
   buttons. Shared by EditEventMembers + EditGroupMembers. */
.mem2-more { margin-top: 0.45rem; }
.mem2-more > summary {
    list-style: none;
    width: max-content;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}
.mem2-more > summary::-webkit-details-marker { display: none; }
.mem2-more > summary:hover,
.mem2-more[open] > summary { color: var(--color-accent); }
.mem2-more[open] > summary { margin-bottom: 0.45rem; }
.mem2-more-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg);
}

/* Member-list pager (client-side paging of the members card). */
.mem2-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; }
.mem2-pager-label { white-space: nowrap; }

@media (max-width: 575px) {
    .mem2-dl { grid-template-columns: 1fr; gap: 0; }
    .mem2-dl dt { margin-top: 0.3rem; }
    .mem2-actions .button,
    .mem2-more-menu .button { flex: 1 1 auto; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   Users2 — admin user roster (PacklistPRO-look redesign of Users.aspx)
   Layout glue only, built on the shared tokens + .result-card / .status-badge
   / .pill. Colors come from theme variables so dark mode follows for free.
   ════════════════════════════════════════════════════════════════════════ */

/* Hero — lead line + at-a-glance count chips */
.u2-hero-lead { margin: 0 0 0.6rem; color: var(--color-text-muted); }
.u2-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.u2-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.u2-stat-ico { align-self: center; }
.u2-stat-n { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--color-text); }

/* Account card — reuses .result-card; the left border encodes Active vs
   Deactivated while the body stays on the theme surface so every badge/button
   is legible. (Comes after the .result-card / .result-card--* rules above, so
   these border-left-color overrides win the cascade.) */
.u2-card { cursor: default; }                 /* reset .result-card whole-card pointer */
.u2-card--active      { border-left-color: var(--color-border); }
.u2-card--deactivated { border-left-color: var(--color-danger, #c62828); opacity: 0.82; }

.u2-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.u2-name { font-size: 1.05rem; font-weight: var(--font-weight-bold); }
.u2-name:hover { text-decoration: underline; }
.u2-you { font-style: italic; }
.u2-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem; }
.u2-sep { color: var(--color-text-light); }

/* Admin badge — accent-filled variant of .status-badge */
.u2-badge-admin { background-color: var(--color-accent); color: #fff; }

/* Collapsible login / device details */
.u2-details { margin-top: 0.5rem; }
.u2-details > summary {
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}
.u2-details > summary:hover { color: var(--color-accent); }
.u2-details[open] > summary { margin-bottom: 0.35rem; }
.u2-dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 0.6rem; }
.u2-dl dt { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.u2-dl dd { margin: 0; font-size: var(--font-size-sm); overflow-wrap: anywhere; }

/* Action row + status filter pills */
.u2-actions { margin-top: 0.6rem; }
.u2-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }

@media (max-width: 575px) {
    .u2-dl { grid-template-columns: 1fr; gap: 0; }
    .u2-dl dt { margin-top: 0.3rem; }
    .u2-actions .button { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   MemberMatch2 — PLP-look member-match page (mm2-*)
   Builds on shared .result-card / .match-bar / .status-badge;
   only the page-specific layout lives here.
   ============================================================ */
.mm2-intro { color: var(--color-text-muted); margin: 0 0 0.65rem; }

/* Hero at-a-glance stat strip */
.mm2-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; }
.mm2-stat { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.mm2-stat-ico { align-self: center; font-size: 1.05rem; }
.mm2-stat-n { font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); color: var(--color-text); font-variant-numeric: tabular-nums; }
.mm2-stat-l { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Best-Matches strength pills */
.mm2-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }

/* Match card — extends .result-card; left edge encodes match strength.
   The base .result-card hardcodes --result-bg:#fff and expects a
   .result-card--state variant to set the surface tokens; our strength
   classes only set the accent, so set the surface here too — otherwise the
   card stays white in dark mode and the light text is unreadable (same fix
   as .pr-card / .result-card--normal). Theme tokens keep light mode correct. */
.mm2-card {
    /* The whole card is a click target → the member's profile (site.js delegated handler);
       keep the .result-card pointer so it reads as tappable. Interactive controls inside
       (Add/Remove/Chat/View) stop the card-nav, so they still do their own thing. */
    cursor: pointer;
    --result-bg: var(--color-bg-card);
    --result-fg: var(--color-text);
    /* Avatar column (auto) + body column (flexible, allowed to shrink). The card body
       (name/badges/bars/actions) lives in .mm2-card-main so it stacks vertically to the
       right of the initials avatar. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;
}
/* AJAX "re-ranking…" indicator shown while a MemberMatch filter change updates the results
   UpdatePanel (reuses the shared .spinner). Muted, inline, unobtrusive. */
.mm2-updating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.mm2-card--strong { --result-accent: var(--color-success, #2e7d32); }
.mm2-card--good   { --result-accent: var(--color-accent, #00B0F0); }
.mm2-card--light  { --result-accent: var(--color-border); }

/* Body column beside the avatar; min-width:0 lets long names/pills wrap instead of
   forcing the grid track wider. */
.mm2-card-main { min-width: 0; }
/* The initials avatar (shared .ct-av look) sits a hair below the card's top padding so
   it lines up with the name row. */
.mm2-card > .ct-av { margin-top: 0.1rem; }

.mm2-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.5rem; }
.mm2-name { font-size: 1.05rem; font-weight: var(--font-weight-bold); }
.mm2-loc { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.mm2-shared { margin: 0.4rem 0 0.2rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.mm2-shared b { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }

.mm2-bars { display: flex; flex-direction: column; gap: 0.25rem; }

.mm2-incontacts { align-self: center; color: var(--color-success, #2e7d32); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }

/* Add/Remove-Contact toggle + "✓ Contact" badge: only one button shows at a time
   (the other carries the `hidden` attribute, flipped by the page script). .button and
   .status-badge both set `display`, which beats the UA [hidden] rule — so force it. */
.ms2-add[hidden],
.ms2-remove[hidden],
.mm2-contact-badge[hidden] { display: none !important; }

/* Matches-by-interest groups */
.mm2-int { margin-bottom: 0.85rem; }
.mm2-int-people { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }

@media (max-width: 575px) {
    .mm2-card .result-card-actions .button { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   MemberSearch2 — PLP-look "Find Members" search (ms2-*).
   Reuses the .mm2-* cards/hero, .result-card and .status-badge;
   only the search-specific layout glue lives here.
   ============================================================ */
.ms2-intro { color: var(--color-text-muted); margin: 0 0 0.65rem; }

/* "to" separator inside the age range row (neutralise .input-label block margin) */
.member-age-to { margin: 0; align-self: center; color: var(--color-text-muted); }

/* Recency checkboxes grouped as a subtle sub-section under the core filters */
.ms2-recency { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--color-border); }
.ms2-recency .form-group { margin-bottom: 0.4rem; }
.ms2-recency .form-group:last-child { margin-bottom: 0; }

/* Interest picker — revealed by JS only for "Specified Below" */
.ms2-picker { margin-top: 0.75rem; padding-top: 0.85rem; border-top: 1px dashed var(--color-border); }
.ms2-picker .form-group:last-child { margin-bottom: 0; }
.ms2-picker .toolbar-row { align-items: flex-start; }
.ms2-picked-box { min-height: 5.5rem; }

/* ── Interest typeahead ────────────────────────────────────────────────
   A text box + suggestion list drive the picker. The interest index is
   lazy-loaded from GetInterestIndex (it is no longer rendered as a
   ~4,700-option <select>), and the pick rides in a hidden field, so the
   only thing left needing to be hidden here is the ＋ Add postback
   trigger the suggestion list clicks for us. */
.ms2-interest-add { display: none; }

.ms2-interest-picker { position: relative; }   /* anchor for the absolute suggestion list */

.ms2-suggest-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    margin: 0.15rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--color-bg-card, #fff);   /* --color-surface is undefined — see .send-menu */
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.5rem);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ms2-suggest-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: var(--color-text);
    line-height: 1.3;
}
.ms2-suggest-item:hover,
.ms2-suggest-item.active {
    background-color: var(--color-primary-light);
}
.ms2-suggest-empty {
    padding: 0.5rem 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Primary search CTA — centred, prominent */
.ms2-search-row { display: flex; justify-content: center; margin: 0.5rem 0 1.5rem; }
.ms2-search-row .button { min-width: 220px; font-size: var(--font-size-lg); padding: 0.7rem 1.75rem; }

.ms2-results-head { display: block; margin: 1.25rem 0 0.5rem; }

@media (max-width: 575px) {
    .ms2-search-row .button { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   PopularInterests2.aspx — PacklistPRO-look ranked leaderboard.
   Built entirely on the shared design tokens so light/dark "just work".
   (The original .popular-interests-table styles above are kept for the
   legacy PopularInterests.aspx, which still uses them.)
   ════════════════════════════════════════════════════════════════════════ */
.pi-intro { margin: 0 0 0.85rem; }

/* Hero stat chips */
.pi-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.pi-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
}
.pi-stat b { color: var(--color-text); font-weight: var(--font-weight-bold); }
.pi-stat-mine {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-card));
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
    color: var(--color-text);
}
.pi-stat-link { cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); }
.pi-stat-link:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

/* Filter row */
.pi-filter { margin-bottom: 0.9rem; }
.pi-filter .input-clearable { max-width: 30rem; }
.pi-filter-count { display: block; margin-top: 0.3rem; }
.pi-nomatch { margin-top: 0.6rem; text-align: center; }

/* Ranked list */
.pi-list { display: flex; flex-direction: column; gap: 0.4rem; }

.pi-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.8rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    border-radius: var(--border-radius-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                background-color var(--transition-fast);
}
.pi-item:hover,
.pi-item:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.pi-item:hover .pi-rank-name { color: var(--color-accent-dark); }
.pi-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Rank badge (medal or number) */
.pi-rank-num {
    flex: 0 0 auto;
    min-width: 2.1rem;
    text-align: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}
.pi-rank1 .pi-rank-num,
.pi-rank2 .pi-rank-num,
.pi-rank3 .pi-rank-num { font-size: 1.3rem; }
.pi-item.pi-rank1 { border-left-color: #f5b301; }  /* gold   */
.pi-item.pi-rank2 { border-left-color: #b6bcc4; }  /* silver */
.pi-item.pi-rank3 { border-left-color: #cd7f32; }  /* bronze */

/* Name + popularity bar stack */
.pi-rank-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pi-rank-name {
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    transition: color var(--transition-fast);
}
.pi-bar {
    display: block;
    height: 6px;
    width: 100%;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}
.pi-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
}

/* Member count */
.pi-rank-count {
    flex: 0 0 auto;
    min-width: 3.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}
.pi-rank-count b { font-size: var(--font-size-base); font-variant-numeric: tabular-nums; }
.pi-rank-count-lbl { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* "Yours" — interests the current user loves/likes */
.pi-item.is-yours { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-card)); }
.pi-yours {
    display: inline-flex;
    align-items: center;
    margin-left: 0.45rem;
    padding: 0.05rem 0.45rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-accent-dark);
    background: var(--color-accent-light);
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    border-radius: 999px;
    vertical-align: middle;
}

@media (max-width: 420px) {
    .pi-item { gap: 0.55rem; padding: 0.5rem 0.6rem; }
    .pi-rank-num { min-width: 1.7rem; }
    .pi-rank-count { min-width: 3rem; }
}

/* ── MessageSent2 — confirmation hero (PLP-look redesign) ────────────────
   Page-scoped to qMeet. Reuses shared tokens so it's theme-aware; the only
   bespoke piece is the success-tinted check badge. The shared .ms-detail-text
   carries the muted follow-up paragraph (constrained for readable line length
   when centered). --------------------------------------------------------- */
.ms2-hero { padding-top: var(--card-padding-lg); padding-bottom: var(--card-padding-lg); }

.ms2-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
    font-size: 2.1rem;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    animation: ms2CheckPop 0.28s var(--ease-out-back, ease-out) both;
}

.ms2-headline { margin: 0 0 0.5rem; }

/* Keep the centered follow-up paragraph to a comfortable measure. */
.ms2-hero .ms-detail-text {
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

@keyframes ms2CheckPop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ms2-check { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ProductRatings2 — colour-coded rating cards + chips, collapsed filter grid.
   Builds on the shared .result-card system (qMeet-local, above). The same
   .pr-q-* quality band is applied to the card (left border) and to each score
   chip (fill); compound selectors keep those two uses from colliding.
   ════════════════════════════════════════════════════════════════════════ */

/* Each result is an <a class="result-card pr-card pr-q-…">. Inherit the
   result-card shell; just add a hover lift and tidy the inner spacing.
   The base .result-card hardcodes --result-bg:#fff and expects a
   .result-card--state variant to override it for dark mode; our quality
   classes only set the accent, so we set the surface tokens here — otherwise
   the card stays white in dark mode and the light text is unreadable. */
.pr-card {
    --result-bg: var(--color-bg-card);
    --result-fg: var(--color-text);
    /* Rendered as an <a>, which defaults to display:inline — that collapses the
       card box to the title's line height so the border only spans the title and
       the meta/chips overflow below. The original .result-card is a <div>. */
    display: block;
    text-decoration: none;
    transition: transform var(--transition-fast, .15s) var(--ease-out-quint, ease), box-shadow var(--transition-fast, .15s) ease;
}
.pr-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pr-card:hover .result-card-title { text-decoration: underline; }
.pr-card .result-card-title { display: inline; }
.pr-card .result-card-meta { color: var(--color-text-muted); }

/* Card left-border accent by overall quality. */
.pr-card.pr-q-great { --result-accent: var(--color-save-btn, #32cd32); }
.pr-card.pr-q-good  { --result-accent: var(--color-success, #2e7d32); }
.pr-card.pr-q-ok    { --result-accent: var(--color-warning, #e65100); }
.pr-card.pr-q-poor  { --result-accent: var(--color-danger,  #c62828); }

/* "Yours" badge — sits just after the product title. */
.pr-yours {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.02rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.02em;
    vertical-align: middle;
    background: var(--color-accent-light, #e0f6fe);
    color: var(--color-accent-deeper, #005a80);
    border: 1px solid var(--color-accent, #00B0F0);
}

/* Row of taste / value / overall score chips under the meta line. */
.pr-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}
.pr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    background: var(--color-bg, #f5f7fa);
    border: 1px solid var(--color-border, #e0e0e0);
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}
.pr-chip.pr-q-great,
.pr-chip.pr-q-good { background: var(--color-success-bg, #e8f5e9); border-color: var(--color-success-border, #a5d6a7); color: var(--color-success, #2e7d32); }
.pr-chip.pr-q-ok   { background: var(--color-warning-bg, #fff3e0); border-color: var(--color-warning-border, #ffcc80); color: var(--color-warning, #e65100); }
.pr-chip.pr-q-poor { background: var(--color-danger-bg,  #ffebee); border-color: var(--color-danger-border,  #ef9a9a); color: var(--color-danger,  #c62828); }
.pr-chip--overall { font-weight: var(--font-weight-bold, 700); }

/* Result-count line above the cards. */
.pr-result-count {
    display: block;
    margin: 0.25rem 0 0.6rem;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-medium, 500);
}

/* Collapsed "Filters & Sort" disclosure — keeps the pile of selects out of the
   way until wanted (the whole point of the redesign). */
.pr-filters { margin: 0.5rem 0 0.25rem; }
.pr-filters > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.2rem;
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-text, #1a1f2e);
    list-style: none;
    user-select: none;
}
.pr-filters > summary::-webkit-details-marker { display: none; }
.pr-filters > summary::before {
    content: "▸";
    font-size: 0.8rem;
    color: var(--color-text-muted, #6c757d);
    transition: transform var(--transition-fast, .15s) ease;
}
.pr-filters[open] > summary::before { transform: rotate(90deg); }
.pr-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 0.9rem;
    margin-top: 0.5rem;
}
.pr-filter-grid .form-group { margin-bottom: 0; }

/* Delete + its confirm checkbox travel together (shown only in edit mode). */
.pr-delete-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
/* Push the destructive control to the far end of the actions row when there's
   room, so it isn't sitting right beside Save. */
@media (min-width: 640px) {
    .form-actions .pr-delete-wrap { margin-left: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   EmailTest2 — outbound email / carrier email-to-SMS test tool (PLP-look).
   Layout glue only; all colors are shared theme tokens so dark mode follows
   for free. Reuses .main-card / .card-accent / .check-row / .form-group.
   ════════════════════════════════════════════════════════════════════════ */

/* Hero — lead + "SMTP config in use" fact chips */
.et2-hero-lead { margin: 0 0 0.85rem; }
.et2-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.et2-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}
.et2-fact-k {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}
.et2-fact-v {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
}

/* Recipient checklist — checkbox + the address it targets */
.et2-recip-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.35rem 0 0.6rem;
}
.et2-recip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
}
.et2-recip .check-row { min-height: 38px; }      /* denser than the 44px default in this list */
.et2-recip .check-row label { font-weight: var(--font-weight-medium); }
.et2-custom { margin-top: 0.25rem; }

/* Addresses (rendered as <code>) read as plain muted monospace, not chips, so
   they stay quiet inside the dense list and on the colored result rows. */
.et2-addr,
.et2-result-addr {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

/* Results — summary line + one row per channel */
.et2-summary {
    margin: 0 0 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem;
}
.et2-sum { font-weight: var(--font-weight-bold); }
.et2-sum-ok { color: var(--color-success); }
.et2-sum-fail { color: var(--color-danger); }
.et2-sum-sep { color: var(--color-text-light); }

.et2-result-list { display: flex; flex-direction: column; gap: 0.5rem; }
.et2-result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
}
.et2-result--ok   { border-left-color: var(--color-success); background: var(--color-success-bg); }
.et2-result--fail { border-left-color: var(--color-danger);  background: var(--color-danger-bg); }
.et2-result-ico { font-size: 1.05rem; line-height: 1; font-weight: var(--font-weight-bold); }
.et2-result--ok   .et2-result-ico { color: var(--color-success); }
.et2-result--fail .et2-result-ico { color: var(--color-danger); }
.et2-result-label { font-weight: var(--font-weight-bold); }
.et2-result-status {
    margin-left: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}
.et2-result-err {
    flex-basis: 100%;
    margin-top: 0.15rem;
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    overflow-wrap: anywhere;
}
@media (max-width: 575px) {
    .et2-result-status { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   SimilarEvents2.aspx — PacklistPRO-look "check before you create" finder.
   Layout glue only; builds on the shared .result-card / .match-bar /
   .status-badge / .empty-state so light/dark "just work". (se2-*)
   ════════════════════════════════════════════════════════════════════════ */
.se2-intro { color: var(--color-text-muted); margin: 0 0 0.9rem; }

/* Prominent proposed-name field — this is the page's single focal input */
.se2-name-group { margin-bottom: 0.85rem; }
.se2-name-input { font-size: var(--font-size-lg); }

.se2-options { margin-bottom: 0.25rem; }
.se2-upcoming-group .checkbox-nowrap { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Centred, prominent primary CTA (mirrors MemberSearch2's search row) */
.se2-search-row { display: flex; justify-content: center; margin-top: 0.5rem; }
.se2-search-row .button { min-width: 240px; font-size: var(--font-size-lg); padding: 0.7rem 1.75rem; }

/* Pre-search "how it helps" steps */
.se2-steps { list-style: none; counter-reset: se2; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.se2-steps > li { display: flex; align-items: flex-start; gap: 0.7rem; }
.se2-step-ico { flex: 0 0 auto; font-size: 1.4rem; line-height: 1.4; width: 2.2rem; text-align: center; }
.se2-steps > li > div { padding-top: 0.1rem; }

/* Results region */
.se2-results { margin-top: 0.25rem; }
.se2-results-head { margin: 0.25rem 0 0.6rem; }
.se2-summary { display: block; font-size: var(--font-size-base); }
.se2-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }

/* Match card — extends .result-card; left edge encodes match strength.
   (Comes after the .result-card / .result-card--* rules above, so these win.) */
.se2-card--strong { --result-accent: var(--color-success, #2e7d32); }
.se2-card--good   { --result-accent: var(--color-accent, #00B0F0); }
.se2-card--weak   { --result-accent: var(--color-border); }

.se2-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.5rem; }
.se2-card-head .result-card-title { flex: 1 1 auto; }

/* Keyword-overlap headline + meter */
.se2-shared { margin: 0.4rem 0 0.3rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.se2-shared b { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.se2-meter { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; max-width: 22rem; }
.se2-meter .match-bar { flex: 1 1 auto; }
.se2-meter-pct { flex: 0 0 auto; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.se2-timing { color: var(--color-text-muted); }

/* Create-it-anyway CTA */
.se2-cta { border-left: 6px solid var(--color-save-btn, #32cd32); }
.se2-cta-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.se2-cta-text { flex: 1 1 16rem; }
.se2-cta-head { margin: 0 0 0.2rem; }
.se2-cta-sub { margin: 0; }
.se2-cta-btn { flex: 0 0 auto; }

@media (max-width: 575px) {
    .se2-search-row .button { width: 100%; }
    .se2-cta-btn { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   RemoveDuplicateEvents — admin duplicate-event cleanup (PacklistPRO-look, rde-*)
   Layout glue only; every color is a shared theme token so dark mode follows for
   free. Reuses .main-card / .card-accent / .table-responsive / .modal-* / .pill.
   ════════════════════════════════════════════════════════════════════════ */

/* Hero — lead + at-a-glance count chips (same chip shape as Users2's .u2-stat) */
.rde-hero-lead { margin: 0 0 0.7rem; color: var(--color-text-muted); }
.rde-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rde-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.rde-stat-ico { align-self: center; }
.rde-stat-n { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--color-text); }

/* Scan card */
.rde-scan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.rde-scan-note { margin: 0; flex: 1 1 16rem; }

/* Results toolbar — only-diff toggle + group filter + select-all/clear */
.rde-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin-bottom: 0.6rem;
}
.rde-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}
.rde-search { flex: 1 1 14rem; min-width: 0; }
.rde-toolbar-actions { display: flex; gap: 0.4rem; margin-left: auto; }

/* Sections */
.rde-section { margin-top: 1.25rem; }
.rde-section:first-child { margin-top: 0; }
.rde-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--color-border);
    margin: 0 0 0.5rem;
}
.rde-section-ico { width: 0.85rem; height: 0.85rem; border-radius: 50%; display: inline-block; }
.rde-section-ico--definite { background: var(--color-danger, #c62828); }
.rde-section-ico--possible { background: var(--color-warning, #e65100); }
.rde-section-count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}
.rde-section-help { margin: 0 0 0.7rem; }

/* All-clear note for an empty section */
.rde-none {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--border-radius);
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
    font-weight: var(--font-weight-medium);
}
.rde-none-ico { font-weight: var(--font-weight-bold); }

/* Group card — colored header bar encodes definite (red) vs possible (orange) */
.rde-group {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 0.9rem;
    box-shadow: var(--shadow-sm);
}
.rde-group-hdr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: #fff;
    font-size: var(--font-size-sm);
}
.rde-group--definite > .rde-group-hdr { background: var(--color-danger, #c62828); }
.rde-group--possible > .rde-group-hdr { background: var(--color-warning, #e65100); }
.rde-group-kind {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
}
.rde-group-id { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.rde-group-count { margin-left: auto; white-space: nowrap; opacity: 0.92; }
.rde-group-body { padding: 0.6rem 0.75rem; }
.rde-group-trim { margin: 0 0 0.6rem; }

/* Comparison table — transposed: fields down the left, one column per event */
.rde-cmp { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.rde-cmp th,
.rde-cmp td {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    vertical-align: top;
    text-align: left;
}
.rde-field-head { width: 9rem; background: var(--color-bg); }
.rde-field {
    width: 9rem;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}
.rde-evcol { background: var(--color-bg); min-width: 11rem; }
.rde-evhead { display: flex; flex-direction: column; gap: 0.25rem; }
.rde-evctrls { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; }
.rde-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}
.rde-del-ctrl { color: var(--color-danger); }
.rde-evid { font-weight: var(--font-weight-bold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.rde-evadded { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* Keeper column highlight — green top edge + tinted header */
.rde-evcol.rde-keeping {
    background: var(--color-success-bg);
    box-shadow: inset 0 3px 0 var(--color-save-btn, #32cd32);
}

/* Value cells */
.rde-val { overflow-wrap: anywhere; }
.rde-diffcell { background: var(--color-warning-bg); }
.rde-empty { color: var(--color-text-light); }

/* Identical-group note row (always visible, even under "only differences") */
.rde-identical-cell {
    text-align: center;
    color: var(--color-success);
    background: var(--color-success-bg);
    font-weight: var(--font-weight-medium);
}

/* Delete bar */
.rde-delete-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
}

/* Confirm modal — keep the message's blank lines */
.rde-confirm-msg { margin-top: 0.5rem; line-height: 1.6; white-space: pre-line; }

/* Dark mode tweaks */
[data-theme="dark"] .rde-group { border-color: #444; }
[data-theme="dark"] .rde-evcol.rde-keeping { box-shadow: inset 0 3px 0 var(--color-success, #2e7d32); }

@media (max-width: 575px) {
    .rde-toolbar-actions { margin-left: 0; }
    .rde-field-head,
    .rde-field { width: auto; white-space: normal; }
    .rde-delete-bar .button { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   Word of the Day  (Word2.aspx)  —  .wd-*
   PacklistPRO-look dictionary tool. Design tokens only, so light
   and dark mode both work without per-rule dark overrides.
   ============================================================ */

.wd-hero { position: relative; }

/* Centered "feature" header — eyebrow, big word, phonetic, actions. */
.wd-hero-head { text-align: center; }

.wd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.wd-eyebrow-date {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

.wd-headword {
    margin: 0.5rem 0 0;
    font-size: clamp(2.1rem, 7vw, 3.1rem);
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-transform: capitalize;
    word-break: break-word;
}

.wd-phonetic {
    margin-top: 0.4rem;
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

.wd-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Definitions, grouped by part of speech, below a divider. */
.wd-meanings {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    text-align: left;
}
.wd-pos-group + .wd-pos-group {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--color-border);
}
.wd-pos {
    display: block;
    margin: 0 0 0.5rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-transform: capitalize;
    letter-spacing: 0.01em;
    color: var(--color-text);
}
.wd-deflist {
    margin: 0;
    padding-left: 1.4rem;
}
.wd-def {
    margin-bottom: 0.7rem;
    line-height: 1.55;
    color: var(--color-text);
}
.wd-def:last-child { margin-bottom: 0; }
.wd-example {
    display: block;
    margin-top: 0.3rem;
    padding-left: 0.7rem;
    border-left: 3px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    font-style: italic;
    color: var(--color-text-muted);
}

/* Synonyms — clickable chips that look the related word up next. */
.wd-syn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
}
.wd-syn-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-right: 0.1rem;
}
.wd-syn {
    font: inherit;
    cursor: pointer;
    padding: 0.14rem 0.65rem;
    font-size: var(--font-size-sm);
    color: var(--color-link, var(--color-accent));
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
    border-radius: 999px;
    transition: background-color var(--transition-fast, 0.15s ease),
                border-color var(--transition-fast, 0.15s ease);
}
.wd-syn:hover,
.wd-syn:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    border-color: var(--color-accent);
    text-decoration: none;
    outline: none;
}

/* Loading state inside the hero. */
.wd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
}

/* Explore / look-up card. */
.wd-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.wd-search-row .input-clearable { flex: 1 1 14rem; min-width: 0; }
.wd-explore-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

@media (max-width: 575px) {
    .wd-search-row .button,
    .wd-explore-actions .button { flex: 1 1 auto; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   SessionTest2.aspx — PacklistPRO-look "Session Persistence Test" (st-*).
   A live session-variable probe: status banner + stat tiles + a capped
   activity console. Built on the shared tokens so light/dark "just work".
   The classic SessionTest.aspx is untouched.
   ════════════════════════════════════════════════════════════════════════ */
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; }

.st-lead { margin: 0 0 1rem; color: var(--color-text); }

/* Status banner — data-state drives the colour from semantic tokens (dark-aware) */
.st-status {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--color-border);
    border-left-width: 5px;
    border-radius: var(--border-radius);
    background: var(--color-bg);
    margin-bottom: 1rem;
    transition: background var(--transition-mid, .25s) ease, border-color var(--transition-mid, .25s) ease;
}
.st-status-ico { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.st-status-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.st-status-main { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); }
.st-status-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.st-status[data-state="holding"] { background: var(--color-success-bg); border-color: var(--color-success-border); }
.st-status[data-state="holding"] .st-status-main { color: var(--color-success); }
.st-status[data-state="lost"],
.st-status[data-state="error"] { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.st-status[data-state="lost"] .st-status-main,
.st-status[data-state="error"] .st-status-main { color: var(--color-danger); }
.st-status[data-state="changed"] { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.st-status[data-state="changed"] .st-status-main { color: var(--color-warning); }
.st-status[data-state="lost"] .st-status-ico,
.st-status[data-state="error"] .st-status-ico { animation: countdownPulse 1.4s ease-in-out infinite; }

/* Fact chips under the banner */
.st-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.st-fact {
    display: inline-flex; flex-direction: column; gap: 0.05rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
}
.st-fact-k { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.st-fact-v { font-size: var(--font-size-sm); color: var(--color-text); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }

/* Controls row */
.st-controls { align-items: flex-end; margin-bottom: 1rem; }
.st-interval { flex: 0 0 auto; }
.st-interval .input-label { margin-bottom: 0.25rem; }
.st-interval-row { display: flex; align-items: center; gap: 0.4rem; }
.st-interval .textbox { width: 5rem; }
.st-interval-unit { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.st-control-actions { flex-wrap: wrap; }

/* Stat tiles */
.st-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.st-stat {
    flex: 1 1 8rem; min-width: 7rem;
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border); border-radius: var(--border-radius);
    background: var(--color-bg);
}
.st-stat-n { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-stat-l { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.st-stat.is-bad { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.st-stat.is-bad .st-stat-n { color: var(--color-danger); }
.st-stat.is-warn { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.st-stat.is-warn .st-stat-n { color: var(--color-warning); }

.st-insight { margin: 0.9rem 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Activity log console */
.st-log-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.st-log-tools { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.st-log-legend { margin: 0.25rem 0 0.6rem; }
.st-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; vertical-align: middle; background: var(--color-border); }
.st-dot.is-loss { background: var(--color-danger); }

.st-log {
    max-height: 24rem; overflow-y: auto;
    border: 1px solid var(--color-border); border-radius: var(--border-radius);
    background: var(--color-bg);
    font-size: var(--font-size-sm);
}
.st-log:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.st-log-empty { padding: 1.25rem; text-align: center; color: var(--color-text-light); font-style: italic; }
.st-log-row {
    display: grid;
    grid-template-columns: 7.5rem 6rem 4rem 1fr;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
    border-left: 4px solid transparent;
    align-items: baseline;
}
.st-log-row:last-of-type { border-bottom: 0; }
.st-log-time { color: var(--color-text-muted); white-space: nowrap; }
.st-log-sess { color: var(--color-text-muted); white-space: nowrap; }
.st-log-val { font-weight: var(--font-weight-bold); color: var(--color-text); white-space: nowrap; }
.st-log-note { color: var(--color-text); overflow-wrap: anywhere; }

.st-log-row.is-ok      { border-left-color: var(--color-success, #2e7d32); }
.st-log-row.is-loss    { border-left-color: var(--color-danger); background: var(--color-danger-bg); }
.st-log-row.is-loss .st-log-val,
.st-log-row.is-loss .st-log-note { color: var(--color-danger); }
.st-log-row.is-changed { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.st-log-row.is-changed .st-log-note { color: var(--color-warning); }
.st-log-row.is-session { border-left-color: var(--color-accent); background: var(--color-accent-light); }
.st-log-row.is-info    { border-left-color: var(--color-accent); }
.st-log-row.is-error   { border-left-color: var(--color-danger); background: var(--color-danger-bg); }
.st-log-row.is-error .st-log-note { color: var(--color-danger); }
.st-log-row.is-idle    { border-left-color: var(--color-border); }

@media (max-width: 575px) {
    .st-control-actions { width: 100%; }
    .st-control-actions .button { flex: 1 1 auto; text-align: center; }
    .st-log-row { grid-template-columns: 1fr auto; gap: 0.15rem 0.5rem; }
    .st-log-val { grid-column: 2; text-align: right; }
    .st-log-note { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════
   CHAT UC2 STYLES — PacklistPRO-look reskin of the chat control
   (ChatUC2.ascx, hosted by Chat2.aspx). Everything is scoped under
   .chat2 so the original ChatUC is left completely untouched. The
   message bubbles (.msg-*), the options drawer, image lightbox,
   toast and the tag / message-action modals keep their existing
   classes (styled earlier in this file); only the composer,
   toolbar, view filter, status chips and pagers are re-skinned to
   the shared design system here.
   ════════════════════════════════════════════════════════════════ */
.chat2 { display: flex; flex-direction: column; gap: 0.85rem; }

/* ── Composer card ─────────────────────────────────────────────── */
.chat2-composer {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Recipient picker row — the visible dropdown flex-grows to fill it. */
.chat2-recipient-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chat2-recipient-row .chat-recipient-select { flex: 1 1 14rem; min-width: 10rem; font-weight: var(--font-weight-bold); }
/* Collapse the row when no recipient dropdown is rendered (e.g. embedded chat). */
.chat2-recipient-row:not(:has(select)) { display: none; }

/* Message box */
.chat2-input { position: relative; }
.chat2 .chat-compose,
.chat2 .chat-msg-textbox {
    width: 100%;
    min-height: 4.25rem;
    border-radius: var(--border-radius-sm);
    padding: var(--input-padding);
    box-sizing: border-box;
    resize: vertical;
}

/* Compose action bar: attach controls left, Post on the right. */
.chat2-compose-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chat2-attach-group,
.chat2-send-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.chat2-send-group { margin-left: auto; }
/* btnPost is colour-coded by the code-behind (.button.main/.magenta/… — never .small),
   so :not(.small) targets only the primary Post button for the prominent treatment. */
.chat2-send-group .button:not(.small) { min-width: 5.5rem; font-weight: var(--font-weight-bold); }
.chat2-attach-group .indicators-bar { margin: 0; display: inline-flex; gap: 0.4rem; align-items: center; }

/* ── Toolbar (what's shown + tools) ────────────────────────────── */
.chat2-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.5rem 0.75rem;
}
.chat2-view { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.chat2-view > label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-medium); white-space: nowrap; }
.chat2-view .dropdown { min-width: 11rem; }
.chat2-tools { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.chat2-tools .checkbox.toolbar { margin: 0; }

/* ── Active view-state chips (Archive / -Pins / +Hidden / -Low / Search) ── */
.chat2-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.chat2-pills:not(:has(a)) { display: none; }

/* ── Message list ──────────────────────────────────────────────── */
.chat2-messages { display: flex; flex-direction: column; padding-top: 0.15rem; }

/* ── Pagers ────────────────────────────────────────────────────── */
.chat2-pager { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chat2-pager .ms-auto { margin-left: auto; }
.chat2-pager.view-bar { margin: 0; }
.chat2-pager-bottom { justify-content: space-between; margin-top: 0.35rem; }

/* ── Simplified (non-member) chat: strip the chrome down to recipient +
      message box + Post + list + Show More — parity with ChatUC. ── */
.chat2.chat-recipient-only .chat2-toolbar,
.chat2.chat-recipient-only .chat2-pills,
.chat2.chat-recipient-only .chat2-pager,
.chat2.chat-recipient-only .chat2-attach-group,
.chat2.chat-recipient-only [id$="btnPostLowPriority"],
.chat2.chat-recipient-only [id$="btnClearMessage"],
.chat2.chat-recipient-only .upload-progress-wrap { display: none !important; }

/* ── Narrow screens ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .chat2-send-group { margin-left: 0; width: 100%; }
    .chat2-send-group .button:not(.small) { flex: 1 1 auto; }
    .chat2-toolbar { flex-direction: column; align-items: stretch; }
    .chat2-view .dropdown { flex: 1 1 auto; }
}

/* ====================================================================
   CHAT UC3 STYLES - a calmer, friendlier PacklistPRO-look redesign of
   the chat control (ChatUC3.ascx, hosted by Chat3.aspx). Scoped under
   .chat3 (the in-UpdatePanel surface) and .chat3-drawer (the options
   drawer, which renders OUTSIDE .chat3 at the page root). The proven
   code-behind + inline scripts are reused unchanged; this section only
   restyles the shell, modernises the message bubbles, and turns the
   options drawer into a tidy accordion. Built entirely on the shared
   design tokens, so Light / Dark track automatically. ChatUC and
   ChatUC2 carry neither .chat3 nor .chat3-drawer and are untouched.
   ==================================================================== */

/* ---- Surface root ------------------------------------------------- */
.chat3 { display: flex; flex-direction: column; gap: 0.9rem; }

/* ---- Composer card ------------------------------------------------ */
.chat3-composer {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Recipient picker row: a "To" chip + the active recipient dropdown.
   Only the dropdown matching the current chat type is rendered, so the
   row (and the To chip) hides itself when none is - e.g. embedded chat
   inside Event / Group detail pages. */
.chat3-recipient-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chat3-recipient-row:not(:has(select)) { display: none; }
.chat3-to-label {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}
.chat3-recipient-row .chat-recipient-select {
    flex: 1 1 14rem; min-width: 10rem; font-weight: var(--font-weight-bold);
}

/* Message input - drop the heavy inset shadows + hard black border of the
   shared textarea.chat-compose for a clean single-border field. The
   recipient-colour confirmation border (textarea.chat-compose[style*=
   "--recip-color"], !important, in CHAT UC STYLES) still wins when set. */
.chat3-input { position: relative; }
.chat3 textarea.chat-compose,
.chat3 .chat-msg-textbox {
    width: 100%;
    box-sizing: border-box;
    min-height: 4.5rem;
    resize: vertical;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.65rem 0.75rem;
    line-height: 1.45;
    background: var(--color-bg-input);
    color: var(--color-text);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat3 textarea.chat-compose:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus-ring, 0 0 0 3px rgba(0, 176, 240, 0.25));
}

/* Compose action bar: subtle attach controls on the left, the prominent
   primary Post on the right. */
.chat3-compose-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chat3-attach-group,
.chat3-send-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.chat3-send-group { margin-left: auto; }
.chat3-send-group .button:not(.small) { min-width: 6rem; font-weight: var(--font-weight-bold); }
.chat3-attach-group .indicators-bar {
    margin: 0; display: inline-flex; gap: 0.4rem; align-items: center; font-size: var(--font-size-sm);
}

/* ---- Control bar (Showing filter + tools) ------------------------- */
.chat3-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 0.45rem 0.7rem;
}
.chat3-view { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.chat3-view > label {
    font-size: var(--font-size-sm); color: var(--color-text-muted);
    font-weight: var(--font-weight-medium); white-space: nowrap;
}
.chat3-view .dropdown { min-width: 11rem; }
.chat3-tools { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.chat3-tools .checkbox.toolbar { margin: 0; }

/* ---- Active view-state chips (Archive / -Pins / +Hidden / etc.) ---- */
.chat3-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.chat3-pills:not(:has(a)) { display: none; }

/* ---- Pagers ------------------------------------------------------- */
.chat3-pager { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chat3-pager .ms-auto { margin-left: auto; }
.chat3-pager.view-bar { margin: 0; }
.chat3-pager-bottom { justify-content: space-between; margin-top: 0.35rem; }

/* ---- Message list + empty state ----------------------------------- */
.chat3-messages { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.1rem; }
.chat3-messages .empty-state {
    background: var(--color-bg-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
    margin-top: 0.25rem;
}

/* ---- Message bubbles ---------------------------------------------- */
/* Bubble background + text colours are set inline by the renderer (per
   message / per contact / per palette), so we deliberately leave colour
   alone and only modernise the SHAPE: drop the hard black top / bottom
   borders + heavy drop shadow for soft rounded cards with a chat "tail"
   corner, roomier padding, and a clear action footer. */
.chat3 .msg-card {
    border: none;
    border-top: none;
    border-bottom: none;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0.85rem 0.45rem;
    margin: 0 0 0.7rem;
    max-width: 84%;
    line-height: 1.4;
}
.chat3 .msg-card.from-me   { margin-left: auto;  margin-right: 0; border-bottom-right-radius: 5px; }
.chat3 .msg-card.from-them { margin-right: auto; margin-left: 0;  border-bottom-left-radius: 5px; }
/* White / "plain" received bubbles need a hairline to read as cards on
   the light page background. */
.chat3 .msg-card.msg-bg-plain { border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .chat3 .msg-card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }

.chat3 .msg-header { line-height: 1.35; margin-bottom: 0.15rem; }
.chat3 .msg-sender { font-weight: var(--font-weight-bold); text-decoration: none; }
.chat3 .msg-sender:hover { text-decoration: underline; }
.chat3 .msg-time { opacity: 0.75; }
.chat3 .msg-body { margin: 0.3rem 0 0.15rem; line-height: 1.45; }
.chat3 .msg-history {
    border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
    opacity: 0.8; padding-left: 0.6rem; margin: 0.4rem 0 0.3rem; font-style: italic;
}

/* Badges -> clean rounded pills (keep their semantic colours from CHAT UC
   STYLES; just lose the heavy border + inset highlight). */
.chat3 .msg-badge {
    border: none;
    box-shadow: none;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-weight: var(--font-weight-bold);
}

/* Action row -> a tidy footer separated by a hairline, evenly spaced. */
.chat3 .msg-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
    margin-top: 0.4rem; padding-top: 0.35rem;
    border-top: 1px solid rgba(127, 127, 127, 0.2);
}
.chat3 .msg-actions .button,
.chat3 .msg-actions .msg-menu-wrap { margin: 0; }
.chat3 .msg-actions .button.small { font-size: var(--font-size-xs); padding: 0.2rem 0.55rem; }

/* ---- Unified Feed conversation cards ------------------------------ */
.chat3 .qmeet-thread {
    border-radius: var(--border-radius);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
    margin: 0.45rem 0;
    background: var(--color-bg-card);
}
/* Honor the per-contact color outline (set inline as --cc) in the chat3 skin too. */
.chat3 .qmeet-thread[style*="--cc"] {
    border-color: var(--cc);
}

/* ---- Simplified (non-member) chat: strip the chrome down to recipient
        + message box + Post + list, matching ChatUC / ChatUC2. -------- */
.chat3.chat-recipient-only .chat3-toolbar,
.chat3.chat-recipient-only .chat3-pills,
.chat3.chat-recipient-only .chat3-pager,
.chat3.chat-recipient-only .chat3-attach-group,
.chat3.chat-recipient-only [id$="btnPostLowPriority"],
.chat3.chat-recipient-only [id$="btnClearMessage"],
.chat3.chat-recipient-only .upload-progress-wrap { display: none !important; }

/* ====================================================================
   Options drawer - reskinned as a tidy accordion. Scoped to
   .chat3-drawer so ChatUC / ChatUC2 drawers keep their flat layout.
   Each section header (h5.chat3-optsummary) collapses its body via
   aria-expanded; EVERY section is collapsed by default (2026-07-31 — Sending
   was the last one open), so the drawer opens as a short list of group
   headings instead of a wall of colour / size pickers. Per-section state is
   sticky per device (see _restoreOptSections in ChatPanel.ascx).
   ==================================================================== */
.chat3-drawer { max-width: 90vw; }

/* Scroll layout: pin the header, let the option groups scroll. Previously the whole
   drawer was one scroll container, which on tall content (several accordion sections
   expanded) left the lower options unreachable. The drawer is a flex column (from
   .chat-options-drawer.open) — give the head a fixed size and the body the remaining
   space with its own scroll. 100dvh tracks the *visible* viewport so the bottom of the
   list isn't hidden under mobile browser chrome; min-height:0 is what actually lets the
   flex body scroll instead of growing past the drawer. */
.chat3-drawer { height: 100dvh; overflow: hidden; }
.chat3-drawer .opt-drawer-head { flex: 0 0 auto; }
.chat3-drawer .opt-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.chat3-drawer .opt-drawer-head {
    display: flex; align-items: center; gap: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.55rem; margin-bottom: 0.7rem;
}
.chat3-drawer .opt-drawer-title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); letter-spacing: 0; color: var(--color-text); }
.chat3-drawer .opt-drawer-note { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.chat3-drawer .opt-drawer-close { margin-left: auto; }

/* Each section is a bordered, collapsible group. */
.chat3-drawer .options-section {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
    margin-bottom: 0.55rem;
    padding: 0;
    overflow: hidden;
}
.chat3-drawer .options-section > .chat3-optsummary {
    margin: 0;
    padding: 0.6rem 0.7rem;
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg-card));
    cursor: pointer; user-select: none;
}
.chat3-drawer .options-section > .chat3-optsummary:hover { color: var(--color-accent); }
.chat3-drawer .options-section > .chat3-optsummary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.chat3-drawer .options-section > .chat3-optsummary::after {
    content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; margin-left: 0.5rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg); transition: transform 0.18s ease;
}
.chat3-drawer .options-section > .chat3-optsummary[aria-expanded="true"]::after { transform: rotate(45deg); }
.chat3-drawer .options-section > .chat3-optsummary:hover::after { border-color: var(--color-accent); }
/* Collapse: hide every sibling after a collapsed header. */
.chat3-drawer .options-section > .chat3-optsummary[aria-expanded="false"] ~ * { display: none !important; }
/* Pad the body of an expanded section. */
.chat3-drawer .options-section > .chat3-optsummary ~ * { padding-left: 0.7rem; padding-right: 0.7rem; }
.chat3-drawer .options-section > .chat3-optsummary[aria-expanded="true"] + * { padding-top: 0.6rem; }
.chat3-drawer .options-section > .chat3-optsummary[aria-expanded="true"] ~ *:last-child { padding-bottom: 0.6rem; }
/* The admin "Danger Zone" group hides entirely for non-admins (both
   buttons render Visible=False, so the section has no .button to show). */
.chat3-drawer .chat3-admin-section:not(:has(.button)) { display: none; }

[data-theme="dark"] .chat3-drawer .options-section > .chat3-optsummary {
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg-card));
}

/* ---- Narrow screens ----------------------------------------------- */
@media (max-width: 640px) {
    .chat3-send-group { margin-left: 0; width: 100%; }
    .chat3-send-group .button:not(.small) { flex: 1 1 auto; }
    .chat3-view { flex: 1 1 auto; }
    .chat3-view .dropdown { flex: 1 1 auto; }
    .chat3 .msg-card { max-width: 92%; }
}

/* ── Home "Invitations" cards (events/groups you've been invited to) ──
   One row per invite: details on the left, actions (interest pills for events,
   View/Dismiss for groups) on the right; stacks on narrow screens. */
.home-invite-card { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
    padding: 10px 0; border-top: 1px solid rgba(127,127,127,0.22); }
.home-invite-card:first-child { border-top: 0; }
.home-invite-main { flex: 1 1 240px; min-width: 0; }
.home-invite-title { font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.home-invite-kind { flex: 0 0 auto; opacity: .85; }
.home-invite-meta { color: var(--color-text, #444); opacity: .75; font-size: 13px; margin-top: 2px; }
.home-invite-inviter { color: var(--color-text, #666); opacity: .6; font-size: 12px; margin-top: 2px; }
/* The sender's personal note on an invite / share. Deliberately the ONLY part of the card
   that isn't dimmed — it is the one line a person actually wrote, and the accent rule marks
   it as quoted speech rather than more of the card's own metadata. Long notes (up to 500
   chars) wrap; overflow-wrap keeps an unbroken URL from widening the whole row. */
.home-invite-comment {
    margin: 5px 0 3px;
    padding: 5px 10px;
    border-left: 3px solid var(--color-accent, #00B0F0);
    border-radius: 0 6px 6px 0;
    background: rgba(127, 127, 127, 0.09);
    color: var(--color-text, #333);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
/* Inside the batch-review list the note is a preview, not the headline — pull it back in
   line with the row it belongs to and drop the list marker's indent. */
.pending-batch-comment { margin: 4px 0 2px; font-size: 12px; }

/* ── "Comment (optional)" note boxes on the qMEET-only invite surfaces ──────────────
   MyContacts' row invite picker and the organizer Send Invites card on
   EditEventMembers / EditGroupMembers. Both beat styles_shared.css's `.textarea`
   min-height floor so rows="2" governs; both win on SPECIFICITY (0,1,1 vs 0,1,0), not
   on order — styles_shared.css loads AFTER this file, so an equal-specificity rule here
   would lose. That is also why both boxes must carry class "textarea", never "textbox"
   (the floor matches `textarea.textbox` at 0,1,1, which would tie and then win).
   The share-panel's own box lives in styles_shared.css alongside the rest of .share-*. */
textarea.ct-invite-note { min-height: 0; height: auto; }
.ct-invite-note-label { display: block; margin: 0.5rem 0 0.25rem; }
textarea.invite-note-box { min-height: 0; height: auto; }
.home-invite-respond, .home-invite-actions { display: flex; align-items: center; gap: 6px;
    flex: 0 0 auto; flex-wrap: wrap; }
@media (max-width: 640px) {
    .home-invite-respond, .home-invite-actions { width: 100%; }
}

/* ── Home "On Your Radar" cards (upcoming events you're interested in / attending) ──
   One clickable row per event: status pill + title/meta; the whole row links to details. */
.home-radar-list { display: flex; flex-direction: column; }
.home-radar-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
    padding: 10px 6px; border-top: 1px solid rgba(127,127,127,0.22); border-radius: 8px; }
.home-radar-card:first-child { border-top: 0; }
.home-radar-card:hover, .home-radar-card:focus { background: rgba(127,127,127,0.08); text-decoration: none; }
.home-radar-status { flex: 0 0 auto; align-self: flex-start; cursor: inherit; }
.home-radar-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.home-radar-title { font-weight: 700; }
.home-radar-meta { color: var(--color-text, #444); opacity: .75; font-size: 13px; margin-top: 2px; }
.home-radar-go { flex: 0 0 auto; font-size: 22px; line-height: 1; opacity: .4; }
/* Doubled modifier class (0,2,0) so these beat qMeet's .pill.pill transparent
   override above — same trick that rule documents. Source order breaks the tie. */
.home-radar-status--going.home-radar-status--going { background: var(--color-success, #2e7d32); color: #fff; border-color: var(--color-success, #2e7d32); }
.home-radar-status--maybe.home-radar-status--maybe { background: var(--color-warning, #e65100); color: #fff; border-color: var(--color-warning, #e65100); }
.home-radar-status--interested.home-radar-status--interested { background: var(--color-accent, #00B0F0); color: #fff; border-color: var(--color-accent, #00B0F0); }
/* keep the colored status pill from picking up .pill:hover's border swap inside the link */
.home-radar-card:hover .home-radar-status--going.home-radar-status--going { border-color: var(--color-success, #2e7d32); }
.home-radar-card:hover .home-radar-status--maybe.home-radar-status--maybe { border-color: var(--color-warning, #e65100); }
.home-radar-card:hover .home-radar-status--interested.home-radar-status--interested { border-color: var(--color-accent, #00B0F0); }
/* Neutral "You haven't RSVP'd" pill (Dashboard Events) — muted, no commitment colour. */
.home-radar-status--none.home-radar-status--none { background: rgba(127,127,127,0.18); color: var(--color-text, #444); border-color: rgba(127,127,127,0.35); }
.home-radar-card:hover .home-radar-status--none.home-radar-status--none { border-color: rgba(127,127,127,0.35); }
/* Dashboard Events — per-event grouped list of contacts (interested / attending). */
.dash2-event-contacts { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; font-size: 13px; color: var(--color-text, #444); opacity: .85; }
.dash2-event-contacts .dash2-cg b { font-weight: 600; }
/* Dashboard Unread Messages — channel chips + message preview line on each radar card.
   Color scheme (site-owner): blue = 1:1 (direct), pure blue (#0000ff) = groups,
   green = events, orange = interests. */
.dash2-chip-direct.dash2-chip-direct { background: #00B0F0; color: #fff; border-color: #00B0F0; }
.dash2-chip-group.dash2-chip-group { background: #0000ff; color: #fff; border-color: #0000ff; }
.dash2-chip-event.dash2-chip-event { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.dash2-chip-interest.dash2-chip-interest { background: #E67E22; color: #fff; border-color: #E67E22; }

/* Per-channel count circles in the card header — same color key as the chips. */
.dash2-counts { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.dash2-counts .dash2-count { margin-left: 0; }
.dash2-count-direct.dash2-count-direct { background: #00B0F0; color: #fff; }
.dash2-count-group.dash2-count-group { background: #0000ff; color: #fff; }
.dash2-count-event.dash2-count-event { background: #2e7d32; color: #fff; }
.dash2-count-interest.dash2-count-interest { background: #E67E22; color: #fff; }

/* Channel-tinted Chat button on each Unread Messages radar card — exact count-circle colors.
   Selectors doubled for specificity so they win over the shared `.button` rule (which loads
   after this file and would otherwise override the background). */
.dash2-chat-btn-direct.dash2-chat-btn-direct     { background: #00B0F0; color: #fff; border-color: #00B0F0; }
.dash2-chat-btn-group.dash2-chat-btn-group       { background: #0000ff; color: #fff; border-color: #0000ff; }
.dash2-chat-btn-event.dash2-chat-btn-event       { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.dash2-chat-btn-interest.dash2-chat-btn-interest { background: #E67E22; color: #fff; border-color: #E67E22; }

/* Whole-line channel tint on each Unread Messages radar card — a colored left rail plus a
   prominent wash so the entire row reads as its channel color (same key as the count circles /
   chips / Chat button). */
.dash2-chatrow { border-left: 5px solid transparent; }
.dash2-chatrow-direct   { border-left-color: #00B0F0; background: rgba(0,176,240,.20); }
.dash2-chatrow-group    { border-left-color: #0000ff; background: rgba(0,0,255,.15); }
.dash2-chatrow-event    { border-left-color: #2e7d32; background: rgba(46,125,50,.20); }
.dash2-chatrow-interest { border-left-color: #E67E22; background: rgba(230,126,34,.22); }
.dash2-chatrow-direct:hover   { background: rgba(0,176,240,.30); }
.dash2-chatrow-group:hover    { background: rgba(0,0,255,.24); }
.dash2-chatrow-event:hover    { background: rgba(46,125,50,.30); }
.dash2-chatrow-interest:hover { background: rgba(230,126,34,.32); }

/* "Got it - hide this" inline dismiss link on the "Where are you?" card help blurb. */
.dash-hide-help { margin-left: .35rem; white-space: nowrap; }
.dash2-chat-preview { font-size: 13px; opacity: .85; margin-top: 3px; }
/* Dashboard Groups / Events / Active-Contacts — inline "💬 Chat" button on each radar
   card. The card itself is the link; this is a span role="button" (nested anchors are
   invalid) that stops the click from also triggering the card's link. flex:0 0 auto so it
   keeps its size between the main content and the › chevron. */
.dash2-chat-btn { flex: 0 0 auto; align-self: center; cursor: pointer; white-space: nowrap; }
.dash2-chat-btn:focus-visible { outline: 2px solid var(--color-accent, #00B0F0); outline-offset: 2px; }
/* Dashboard Interests card — chips for Love/Like interests are links into their
   shared interest chat. Reuse the read-only .interest-tag chip look, just make the
   anchor behave (no underline, pointer, inherit color) and hint interactivity. */
.interest-tag-link { text-decoration: none; cursor: pointer; }
.interest-tag-link:hover, .interest-tag-link:focus { text-decoration: none; filter: brightness(1.05); }
.interest-tag-link:focus-visible { outline: 2px solid var(--color-accent, #00B0F0); outline-offset: 2px; }
/* "Show more…" toggle under the Interests chips. Site-owner asked for a plain,
   normal-text look (not the emphasized .link style) — regular body font/size/color,
   just underlined so it still reads as tappable. */
.dash2-interests-showmore {
    display: inline-block;
    margin-top: 8px;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.dash2-interests-showmore:hover, .dash2-interests-showmore:focus { color: inherit; }

/* ── Preferences.aspx — privacy sub-groups ──────────────────────────────────
   The Privacy card's "who can see this" dropdowns are split into a few labeled
   clusters (Your name / Personal details / Memberships & activity / Finding you
   in search). Each cluster gets a subtle dashed divider + an uppercase muted
   heading so the long list scans as themed sections. Tokens only, so it adapts
   to light/dark. Mirrors the .ms2-recency sub-section pattern above. */
.prefs-subgroup { margin-top: 1.1rem; padding-top: 0.85rem; border-top: 1px dashed var(--color-border); }
.prefs-subgroup:first-of-type { margin-top: 0.35rem; }
.prefs-subgroup-title {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.prefs-subgroup .form-group:last-child { margin-bottom: 0; }

/* ─────────────────────── Check-in History (MyCheckins.aspx) ───────────────────────
   Check-in history as native <details> rows. The <summary> is a clickable grid
   (date · place · city,state · map); the body reveals a definition-list of the
   full snapshot plus a Delete button. JS-free expand/collapse. */
.checkin-list { display: flex; flex-direction: column; gap: 8px; }

.checkin-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    overflow: hidden;
}
.checkin-card[open] { border-color: var(--color-primary); }

.checkin-summary {
    list-style: none;                 /* hide default disclosure triangle (we add our own ▸) */
    cursor: pointer;
    display: grid;
    /* ▸ · stop number · place+city · date. The stop-number column was added with the
       journey map; it is ALWAYS emitted (as an en-dash placeholder for rows with no
       plottable location), so the four columns never go ragged row to row. */
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: var(--font-size-sm);
}
.checkin-summary::-webkit-details-marker { display: none; }
.checkin-summary::before {
    content: "▸";
    color: var(--color-text-muted);
    font-size: 0.85em;
    transition: transform 0.15s ease;
}
.checkin-card[open] .checkin-summary::before { transform: rotate(90deg); }
.checkin-summary:hover { background: var(--color-primary-light); }

.checkin-summary .ci-main  { display: flex; flex-direction: column; min-width: 0; }
.checkin-summary .ci-place { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkin-summary .ci-loc   { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkin-summary .ci-date  { font-weight: 600; white-space: nowrap; text-align: right; color: var(--color-text-muted); }

.ci-approx { color: var(--color-warning, #b8860b); font-size: 0.85em; white-space: nowrap; }

/* Stop number, echoing the number on this check-in's map pin so the two views are
   navigable together. Same three-tier colour story as the pins is deliberately NOT
   repeated here — the list row already states the address; the number is only an index. */
.ci-stopnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background: var(--color-primary-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size: 0.78em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Rows with no plottable location get a placeholder, not a missing cell — an empty
   grid slot would silently shift the row and read as a rendering bug. */
.ci-stopnum-none { background: transparent; color: var(--color-text-muted); font-weight: 400; }

/* Brief highlight when the map popup's "Show In List" jumps to a card. */
.checkin-card.cj-flash { box-shadow: 0 0 0 3px var(--color-primary); transition: box-shadow .3s ease; }

/* ── Check-in History journey map ──────────────────────────────────────────────
   Numbered pins + an ordered path. The three pin colours are NOT decoration: they
   say which tier of the coordinate-rescue cascade placed the pin (see the MAP_COLS
   comment in MyCheckins.aspx.vb). Blue/red keep the site-wide meaning from
   .sm-legend-zip / .sm-legend-city; amber is the extra tier this page needs, because
   the place record's saved pin is the right PLACE but not where the user stood — and
   one prod row proves it can be a different state entirely.

   Fixed hex, not theme tokens: these sit on OpenStreetMap tiles, which are light in
   both themes, so a dark-mode token would render an invisible pin. */
.cj-pin-wrap { background: transparent; border: 0; }
.cj-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .55);
    box-sizing: border-box;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cj-pin-exact { background: #2563eb; }   /* blue  — the check-in's own recorded position */
.cj-pin-place { background: #d97706; }   /* amber — the place record's saved pin */
.cj-pin-city  { background: #dc2626; }   /* red   — city-center centroid */
/* A coordinate visited more than once gets a second ring, so "I was here repeatedly"
   is visible without opening the popup. */
.cj-pin-repeat { box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 4px currentColor, 0 0 4px rgba(0, 0, 0, .5); }

.cj-arrow-wrap { background: transparent; border: 0; }
/* The chevron sits ON the leg and is the same purple, so without the halo it reads
   as a thickening of the line rather than as an arrowhead. Tiles are always the
   light OSM raster, so a white halo is correct in dark mode too. */
.cj-arrow {
    display: block; width: 18px; height: 18px; line-height: 18px; text-align: center;
    color: #7c3aed; font-size: 15px;
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff;
}

.cj-fit-ctl a {
    display: block; width: 30px; height: 30px; line-height: 30px; text-align: center;
    font-size: 15px; text-decoration: none; background: #fff; color: #7c3aed; cursor: pointer;
}

/* Caption dots, matching the pin colours (.sm-cap-city already covers red). */
.cj-cap-exact { color: #2563eb; }
.cj-cap-place { color: #d97706; }
.cj-legend-exact { background: #2563eb; }
.cj-legend-place { background: #d97706; }

/* Popup. Content is cloned from the list card, so it reuses .ci-detail-grid wholesale;
   the height cap is what stops a place visited 20 times from opening a popup taller
   than the map itself. */
.cj-popup-shell .leaflet-popup-content { margin: 10px 12px; }
.cj-popup { font-size: var(--font-size-sm); }
.cj-popup-head { margin-bottom: 6px; }
.cj-popup-count {
    display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9px;
    background: var(--color-primary-light); font-size: .8em; font-weight: 600;
}
.cj-popup-note { color: var(--color-text-muted); font-size: .82em; margin-top: 2px; }
.cj-popup-jump { display: inline-block; margin-top: 8px; font-size: .85em; }

.cj-visit + .cj-visit, .cj-visit-fold + .cj-visit-fold { margin-top: 8px; border-top: 1px solid var(--color-border); padding-top: 8px; }
.cj-visit-head, .cj-visit-fold > summary { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cj-visit-fold > summary { cursor: pointer; }
.cj-visit-stop { font-weight: 700; color: var(--color-text-muted); font-size: .82em; }
.cj-visit-place { font-weight: 600; }
.cj-visit-date { color: var(--color-text-muted); font-size: .85em; }
/* The cloned photo strip has to stay inside the popup's width. */
.cj-popup .checkin-photos img { max-width: 72px; height: auto; }

@media (max-width: 560px) {
    /* The stop number stays; the date is what gives way first on a narrow row. */
    .checkin-summary { grid-template-columns: auto auto 1fr auto; gap: 7px; }
    .ci-stopnum { min-width: 20px; height: 20px; }
}

/* City-center caution shown next to a Map link/button when the target is only a city/state
   (no GPS pin, no street address) — CheckinPresence.CityCenterCautionHtml. Full-width so it
   drops onto its own line under the button row in the flex-wrap action containers, and wraps
   normally on narrow screens. */
.map-city-warn {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin-top: 2px;
    color: var(--color-warning, #b8860b);
    font-size: 0.82em;
    line-height: 1.3;
}

.checkin-detail {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}
.ci-detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
}
.ci-detail-grid dt { color: var(--color-text-muted); font-weight: 600; }
.ci-detail-grid dd { margin: 0; }

/* Archived visit photos below the detail grid. Reuses the shared .checkin-photos strip. */
.ci-photos-wrap { margin-top: 10px; }
.ci-photos-wrap .input-label { margin-bottom: 4px; }

/* "🔗 Share This Place" — lives INSIDE .ci-detail-body (so the journey map's pin popups get
   it when they clone the body) rather than in the row's .form-actions beside × Delete. That
   split is deliberate: Share acts on the PLACE, Delete acts on the history ROW. */
.ci-share-row { margin-top: 12px; }

/* On narrow screens keep place/loc on the left and the date on the right;
   the layout already stacks naturally, so just tighten the detail grid. */
@media (max-width: 560px) {
    .ci-detail-grid { grid-template-columns: 1fr; gap: 2px; }
    .ci-detail-grid dt { margin-top: 6px; }
}

/* Check-in History — date range, stats summary, filter box, and month group separators. */
.checkin-stats { margin: 0 0 10px; color: var(--color-text); font-size: var(--font-size-sm); }
.checkin-filter { margin-bottom: 14px; max-width: 26rem; }

/* From/To range. Drives the map, the list AND the stats line together. */
.ci-range { margin-bottom: 14px; }
.ci-range-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.ci-range-row .form-group { margin: 0; }
.ci-range-row .textbox { min-width: 9.5rem; }
.ci-range-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-range-hint { margin: 6px 0 0; }
.ci-map-panel { margin-top: 4px; }

.checkin-group {
    margin: 14px 0 4px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.checkin-list > .checkin-group:first-child,
.checkin-group:first-child { margin-top: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   ChatRoomPanel.ascx — lean group / event / interest chat (embedded card).
   Theme-aware (design tokens); message bubble colors are set inline by the JS
   (per-poster palette / the user's Sent Color) with black/white text chosen
   for contrast, so bubbles read in BOTH light and dark mode.
   ───────────────────────────────────────────────────────────────────────── */
.crp-root {
    --crp-font: 16px;
    display: flex; flex-direction: column;
    border: 1px solid var(--color-border); border-radius: 12px;
    background: var(--color-bg-card); overflow: hidden;
    max-width: 760px;
}
.crp-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card);
}
.crp-bar-title { font-weight: 600; color: var(--color-text); }
.crp-bar-spacer { flex: 1; }
.crp-bar-btn {
    background: var(--color-bg-input); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: 8px;
    padding: 5px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.crp-bar-btn:active { transform: scale(.97); }

.crp-options { display: none; padding: 10px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-card); }
.crp-options.open { display: block; }
.crp-opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--color-text); font-size: .9rem; }
.crp-opt-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; }
/* Disabled option row (e.g. "Push notifications — coming soon"): muted + not-allowed. */
.crp-opt-disabled { opacity: .55; }
.crp-opt-disabled input[type="checkbox"] { cursor: not-allowed; }
.crp-opt-disabled em { font-style: italic; opacity: .85; }
.crp-roster-name a { color: inherit; text-decoration: none; }
.crp-roster-name a:hover, .crp-roster-name a:focus { text-decoration: underline; }
.crp-opt-lbl { font-weight: 600; min-width: 130px; }
.crp-opt-sel {
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg-input); color: var(--color-text); padding: 4px 8px; font-size: .85rem;
}
.crp-opt-link {
    background: var(--color-bg-input); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: 8px;
    padding: 5px 10px; font-size: .82rem; cursor: pointer;
}
.crp-opt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.crp-compose { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-bottom: 1px solid var(--color-border); }
.crp-input {
    flex: 1; resize: none; border: 1px solid var(--color-border); border-radius: 16px;
    padding: 8px 14px; font-size: var(--crp-font); font-family: inherit; line-height: 1.35;
    min-height: 38px; background: var(--color-bg-input); color: var(--color-text); overflow-y: hidden;
}
.crp-send, .crp-read {
    border: none; border-radius: 16px; cursor: pointer; font-weight: 600; white-space: nowrap;
    height: 38px; flex: 0 0 auto; align-self: flex-end;
    box-shadow: 4px 4px 8px rgba(0,0,0,.25);
}
.crp-send { background: var(--color-accent); color: #fff; padding: 0 18px; font-size: 1.05rem; line-height: 1; }
.crp-read { background: var(--color-success); color: #fff; padding: 0 14px; font-size: 1.05rem; }
[data-theme="dark"] .crp-send, [data-theme="dark"] .crp-read { color: #000; }

.crp-status { min-height: 16px; padding: 2px 12px; font-size: .78rem; text-align: center; color: var(--color-text-muted); }
.crp-status.err { color: var(--color-danger); font-weight: 600; }
.crp-status.ok { color: var(--color-success); }

.crp-thread {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; max-height: 58vh; overflow-y: auto;
    background: var(--color-bg);
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.crp-empty { margin: 1.5rem auto; color: var(--color-text-muted); font-size: .9rem; text-align: center; }

.crp-msg { display: flex; flex-direction: column; align-items: flex-start; }
.crp-msg-head { font-size: .78rem; line-height: 1.2; margin-bottom: 2px; }
.crp-msg-name { font-weight: 700; color: var(--color-text); }
.crp-msg-meta { color: var(--color-text-muted); }
.crp-bubble {
    max-width: 92%; padding: 8px 12px; border-radius: 14px; border-top-left-radius: 4px;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
    line-height: 1.35; font-size: var(--crp-font); cursor: pointer;
    background: var(--color-bg-input); color: var(--color-text);
    box-shadow: 2px 2px 6px rgba(0,0,0,.22);
}
/* My own messages (no Sent Color chosen) default to the theme accent. */
.crp-mine .crp-bubble { background: var(--color-accent); color: #fff; }
[data-theme="dark"] .crp-mine .crp-bubble { color: #000; }
.crp-bubble a { color: inherit; text-decoration: underline; }
.crp-urgent .crp-bubble { box-shadow: 0 0 0 2px #ff00ff, 0 0 10px #ff00ff; font-weight: 700; }
.crp-unread .crp-msg-name::after { content: " ●"; color: var(--color-accent); font-size: .7em; vertical-align: middle; }
.crp-unread .crp-bubble { font-weight: 600; }
.crp-msg-when { font-size: .7rem; color: var(--color-text-muted); margin-top: 3px; }

.crp-older {
    align-self: center; margin: 4px auto 10px; padding: 6px 16px; font-size: .82rem; cursor: pointer;
    background: var(--color-bg-input); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: 999px;
}

/* Popovers (member actions / roster / color picker). */
.crp-pop {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 16px;
}
.crp-pop.open { display: flex; }
.crp-pop-box {
    position: relative; width: 100%; max-width: 420px; max-height: 80vh; overflow-y: auto; padding: 18px;
    background: var(--color-bg-card); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card-hover);
}
.crp-pop-x { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.crp-pop-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.crp-pop-name { font-weight: 700; font-size: 1.1rem; }
.crp-pop-meta { color: var(--color-text-muted); font-size: .85rem; margin: 2px 0 14px; }
.crp-pop-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Unread-count badge shown on a chat card's <summary> title while the card is collapsed. */
.crp-hdr-unread {
    display: inline-block; margin-left: .5rem; min-width: 1.4em; padding: .05rem .45rem;
    border-radius: 999px; background: var(--color-danger, #c62828); color: #fff;
    font-size: .75rem; font-weight: 700; line-height: 1.5; text-align: center; vertical-align: middle;
}
details[open] > summary .crp-hdr-unread { display: none; }

.crp-roster { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.crp-roster-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; }
.crp-roster-row:hover { background: var(--color-bg-input); }
.crp-roster-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.crp-roster-info { min-width: 0; }
.crp-roster-name { font-weight: 600; }
.crp-roster-meta { font-size: .8rem; color: var(--color-text-muted); }

.crp-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 12px; }
.crp-swatch { width: 100%; aspect-ratio: 1/1; min-height: 28px; border: 1px solid rgba(0,0,0,.25); border-radius: 8px; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.crp-swatch:hover { transform: scale(1.1); }

/* "Chat" entry points added to the interest list pages. */
.it-chat-link { margin-left: auto; white-space: nowrap; font-size: .85rem; }
.interest-tag-chat { margin: 0 2px; text-decoration: none; cursor: pointer; }

/* ============================================================================
   Per-page "lightbulb" feedback panel (page-feedback.js).
   The icon sits just after the .page-title; the panel is a centered modal that
   (by spec) does NOT close on outside click.
   ============================================================================ */
.pf-bulb {
    background: none; border: none; cursor: pointer;
    font-size: 1.05rem; line-height: 1; padding: 2px 6px; margin-left: 6px;
    vertical-align: middle; border-radius: 6px; opacity: .8;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.pf-bulb:hover { opacity: 1; transform: scale(1.12); background-color: rgba(127,127,127,.15); }
.pf-bulb:focus-visible { outline: 2px solid var(--color-primary, #4a90d9); outline-offset: 2px; }

.pf-overlay {
    position: fixed; inset: 0; background-color: rgba(0,0,0,.45);
    z-index: 9995; display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 1rem; overflow-y: auto;
}
.pf-overlay[hidden] { display: none; }
body.pf-open { overflow: hidden; }

.pf-panel {
    position: relative; width: 100%; max-width: 520px;
    background: var(--color-bg-card, #fff); color: var(--color-text, #222);
    border-radius: 12px; box-shadow: var(--shadow-xl, 0 10px 40px rgba(0,0,0,.4));
    padding: 1.25rem 1.25rem 1rem; box-sizing: border-box;
}
.pf-close {
    position: absolute; top: .5rem; right: .6rem; background: none; border: none;
    font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text, #222);
    opacity: .7; padding: 2px 6px; border-radius: 6px;
}
.pf-close:hover { opacity: 1; background-color: rgba(127,127,127,.15); }
.pf-heading { margin: 0 1.5rem .75rem 0; font-size: 1.2rem; }
.pf-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 5rem; }
.pf-screens-label { margin-top: .75rem; }
.pf-existing { margin: .25rem 0 .5rem; }
.pf-none { font-style: italic; }
.pf-shot {
    display: flex; align-items: center; gap: .5rem; padding: .25rem 0;
    border-bottom: 1px solid var(--color-border, rgba(127,127,127,.2));
}
.pf-shot .link { flex: 1 1 auto; word-break: break-all; }
.pf-shot .pf-del { flex: 0 0 auto; line-height: 1; padding: 2px 8px; }
.pf-uploadrow { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; margin-top: .25rem; }
/* Let the input grow to fit its native "Choose Files" button (the fixed 2.5rem
   shared height clipped the button's bottom edge); keep the Upload button beside
   it on the same row when there's room. */
.pf-uploadrow .file-picker { flex: 1 1 auto; min-width: 0; height: auto; }
.pf-uploadrow .pf-upload { flex: 0 0 auto; white-space: nowrap; }
.pf-filecount { min-height: 1.1em; margin: .35rem 0 0; }
.pf-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: .5rem; margin-top: 1rem;
}

/* Join4 Terms-of-Service checkbox row — checkbox + wrapping text on one line. */
.checkbox-row { display: flex; align-items: flex-start; gap: .5rem; }
.checkbox-row .checkbox { margin-top: .15rem; flex: 0 0 auto; }
.checkbox-row-text { line-height: 1.4; }

/* ── Home Weather card (.wx-*) ─────────────────────────────────────────
   The viewer's profile-location forecast: "right now" headline + an
   hour-by-hour strip through 4 AM, the current-conditions grid, and the
   multi-day forecast (each day expandable to a full hourly table).
   Ported from PacklistPRO's Weather page so the two sites stay in sync. */
/* Weather is one collapsible card; these sub-sections render inside it (not
   their own cards), separated by a top divider + spacing. */
.wx-today-card,
.wx-current,
.wx-daily {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #dee2e6);
}
.wx-picker + #wx-today .wx-today-card { /* first section after picker keeps its divider */ }
.wx-section-title {
    font-size: var(--font-size-base, 1rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

/* Location picker: "My location" / "Use current location" / search-result chips */
.wx-picker .wx-search-group { margin-bottom: 0; margin-top: 0.75rem; }
.wx-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.wx-loc-chip {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 999px;
    background: var(--color-bg-card, #fff);
    color: var(--color-text);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.3;
    cursor: pointer;
}
.wx-loc-chip:hover { border-color: var(--color-primary); }
.wx-loc-chip.active {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(0,0,0,0.04));
    font-weight: 600;
}
/* Saved (recently looked-up) location chips: a select chip + a × remove button,
   grouped so they wrap together as one unit. display:contents on the history
   wrapper keeps each saved chip a direct flex child of the row. */
.wx-saved-history { display: contents; }
.wx-chip-wrap {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
}
.wx-chip-wrap .wx-loc-chip {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.wx-chip-action {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    background: var(--color-bg-card, #fff);
    color: var(--color-text-muted, #6c757d);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.wx-chip-del:hover {
    border-color: var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
}
/* "Found: City, State" status line after a geolocation lookup */
.wx-geo-found { margin: 0.4rem 0 0; }
/* Current-conditions teaser inline after the "Weather" heading text (temp + sky).
   Inside the heading so it stays visible while the card is collapsed. */
.wx-now-summary {
    margin-left: 0.5rem;
    color: var(--color-text-muted, #6c757d);
    font-size: var(--font-size-base, 1rem);
    font-weight: 400;
}
/* Search box + 🔍 Search button on ONE row, button immediately to the RIGHT of the
   box (owner request 2026-08-09). nowrap is the point: with wrap the button dropped
   to its own line as soon as the card column got narrow. The textbox absorbs all the
   slack and is allowed to shrink (flex-basis 0 + min-width 0), so even on a phone the
   button stays beside it instead of below it. */
.wx-search-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
}
/* The search term sits inside an .input-clearable wrapper (in-field × clear button),
   so the row's flex sizing rides on the wrapper; the input fills it. */
.wx-search-row .input-clearable { flex: 1 1 0; min-width: 0; }
/* max-width:none cancels styles_shared.css's `@media (min-width:768px)
   .form-group .textbox { max-width: 480px }`. That cap deliberately skips the
   WRAPPER here (see the comment beside it) but still hits the input inside, which
   would strand the absolutely-positioned × clear button out in the open to the right
   of the field. The dashboard card column is narrower than 480px so it doesn't bite
   today — kept for parity with the PLP/PM Weather pages, where it does. */
.wx-search-row .input-clearable .textbox { width: 100%; max-width: none; min-width: 0; }
/* Button keeps its natural width and never wraps its own label. */
.wx-search-row .button { flex: 0 0 auto; white-space: nowrap; }
#wx-search-results { margin-top: 0.5rem; }

/* "Right now / next hours" card */
.wx-today-now {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-bottom: 0.85rem;
}
.wx-today-icon { font-size: 2.4rem; line-height: 1; }
.wx-today-temp { font-size: 2rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.wx-today-meta { display: flex; flex-direction: column; gap: 0.1rem; }
.wx-today-cond { font-weight: 600; }
/* .wx-today-subhead ("Hour by hour through 4 AM …") was deleted 2026-08-09 by owner
   request; its only emitter in WeatherHtml.BuildTodayCard went with it, so the rule
   is gone too. The hour strip below now sits straight under .wx-sunmoon, whose own
   0.85rem bottom margin supplies the gap the heading used to. */
.wx-today-hours {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
}
.wx-today-hour {
    flex: 0 0 auto;
    min-width: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.45rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--border-radius, 10px);
    background: var(--color-bg-subtle, var(--color-bg-card, #fff));
    text-align: center;
}
.wx-today-h { font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; }
.wx-today-cond-icon { font-size: 1.5rem; line-height: 1; }
.wx-today-t { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.wx-today-metric {
    font-size: var(--font-size-xs, 0.78rem);
    white-space: nowrap;
    color: var(--color-text);
}

/* --- UV index (current hour) --------------------------------------------- */
/* Same shape as the AQI headline: a banded pill plus plain-language advice.
   Like the AQI bands these are FIXED swatches rather than theme tokens, so each
   pairs its background with an explicit text color measured to clear 4.5:1 on
   that exact swatch in BOTH themes. */
.wx-uv-headline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0.85rem;
}
.wx-uv-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-weight: var(--font-weight-bold, 700);
    white-space: nowrap;
}
.wx-uv-num { font-size: 1.2rem; line-height: 1; }
.wx-uv-band { font-size: var(--font-size-sm, 0.875rem); }
.wx-uv-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wx-uv-advice { font-size: var(--font-size-sm, 0.875rem); }

.wx-uv-1 { background: #7ac943; color: #10240a; }   /* Low */
.wx-uv-2 { background: #fdd74b; color: #3d2f00; }   /* Moderate */
.wx-uv-3 { background: #fe9b57; color: #3d1c00; }   /* High */
.wx-uv-4 { background: #fe6a69; color: #3d0000; }   /* Very High */
.wx-uv-5 { background: #c9a3d8; color: #2a0f36; }   /* Extreme */

/* --- Sun + moon strip ----------------------------------------------------- */
/* Sunrise / sunset / daylight length, then moon phase, moonrise, moonset. Wraps
   as a chip row rather than a grid so a location missing (say) moonset simply
   yields one fewer item instead of an empty cell. */
.wx-sunmoon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0 0 0.85rem;
}
.wx-sunmoon-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 999px;
    background: var(--color-bg-subtle, var(--color-bg-card, #fff));
    font-size: var(--font-size-sm, 0.875rem);
    white-space: nowrap;
}

/* Current conditions ("More Information") */
.wx-now-headline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.wx-now-icon { font-size: 2.4rem; line-height: 1; }
.wx-now-temp { font-size: 2rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.wx-now-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.wx-now-cond { font-weight: 600; }

/* Label/value grid shared by the current card and each day's detail */
.wx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
}
.wx-cell dt {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 400;
}
.wx-cell dd { margin: 0; font-size: var(--font-size-sm); }

/* Multi-day list */
.wx-day { border-bottom: 1px solid var(--color-border, #dee2e6); }
.wx-day:last-child { border-bottom: none; }
.wx-day-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.25rem;
    cursor: pointer;
}
.wx-day-summary:hover { background: var(--color-primary-light, rgba(0,0,0,0.04)); }
.wx-day-date { min-width: 5.5rem; font-size: var(--font-size-sm); }
.wx-day-icon { font-size: 1.3rem; line-height: 1; }
.wx-day-cond { flex: 1 1 auto; font-size: var(--font-size-sm); }
.wx-day-temp { font-size: var(--font-size-sm); white-space: nowrap; }
.wx-day-precip { font-size: var(--font-size-xs); color: var(--color-info, #2b8a9b); white-space: nowrap; }
.wx-day-detail { padding: 0.5rem 0.25rem 0.85rem; }

/* Hourly table — wide, so it scrolls inside its own wrapper */
.wx-hourly-body { margin-top: 0.6rem; }
.wx-hourly-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 6px;
}
.wx-hourly-table {
    border-collapse: collapse;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
}
.wx-hourly-table th,
.wx-hourly-table td {
    padding: 0.3rem 0.55rem;
    border-bottom: 1px solid var(--color-border, #dee2e6);
    text-align: right;
}
.wx-hourly-table th[scope="row"],
.wx-hourly-table thead th:first-child { text-align: left; }
.wx-hourly-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg-card, #fff);
    z-index: 1;
}
.wx-hourly-table tbody tr:last-child td,
.wx-hourly-table tbody tr:last-child th { border-bottom: none; }
.wx-unit {
    display: block;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* --- Severe weather alerts (NWS) -----------------------------------------
   Used by BOTH the Dashboard Weather card and the EventDetails "Getting There"
   card. Each alert is a collapsed <details> with a colored left rule keyed to
   its tier, so a stack of advisories can't bury the forecast. Tier colors are
   theme-independent (a Tornado Warning must read as urgent in either theme) but
   are applied as a BORDER + text accent, not a fill, so they sit calmly next to
   the AQI pill rather than competing with it. */
.wx-alerts { margin-bottom: 1rem; }
.wx-alert {
    border: 1px solid var(--color-border, #dee2e6);
    border-left-width: 4px;
    border-radius: var(--border-radius, 6px);
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.4rem;
    background: var(--color-surface-muted, #f8f9fa);
}
.wx-alert-summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.wx-alert-name { font-weight: var(--font-weight-bold, 700); }
.wx-alert-when { font-size: var(--font-size-sm, 0.875rem); color: var(--color-text-muted); }
.wx-alert-body { margin-top: 0.5rem; }
.wx-alert-text {
    font-size: var(--font-size-sm, 0.875rem);
    margin: 0 0 0.5rem;
    /* NWS bodies are long; keep them readable rather than edge-to-edge. */
    max-width: 70ch;
}
.wx-alert-instruction { margin-bottom: 0.25rem; }

/* Tier 4 = life-safety (Immediate Evacuation, "... Emergency", or a CAP response of
   Evacuate/Shelter). The ONLY alert tier that gets a filled background — it has to
   out-shout a stack of advisories, and it is genuinely rare. */
.wx-alert-emergency {
    border-left-color: #7f1d1d;
    background: #fee2e2;
}
.wx-alert-emergency .wx-alert-name { color: #7f1d1d; }
.wx-alert-emergency .wx-alert-text,
.wx-alert-emergency .wx-alert-when,
.wx-alert-emergency .small-dim-text { color: #450a0a; }

.wx-alert-warning  { border-left-color: #dc2626; }
.wx-alert-warning  .wx-alert-name { color: #b91c1c; }
.wx-alert-watch    { border-left-color: #f59e0b; }
.wx-alert-watch    .wx-alert-name { color: #b45309; }
.wx-alert-advisory { border-left-color: #eab308; }
.wx-alert-info     { border-left-color: var(--color-border, #9ca3af); }

/* The tier text colors above are tuned for light backgrounds; lighten them in
   dark mode so they keep contrast instead of going muddy. */
@media (prefers-color-scheme: dark) {
    .wx-alert-warning .wx-alert-name { color: #f87171; }
    .wx-alert-watch   .wx-alert-name { color: #fbbf24; }
}

/* Collapsed-card flag: when an alert is active, mark the Weather card header so
   it's visible WITHOUT expanding the card. */
.wx-has-alerts > .card-title .dash2-card-name::after {
    content: " \26A0\FE0F";
}

/* --- Rain nowcast (15-minute, next ~6 hours) ------------------------------ */
.wx-nowcast {
    margin: 0.75rem 0 0;
    font-size: var(--font-size-sm, 0.875rem);
}
.wx-nowcast-wet { font-weight: var(--font-weight-bold, 700); }
.wx-nowcast-dry { color: var(--color-text-muted); }

/* --- Event-time forecast line (EventDetails) ------------------------------ */
.wx-eventtime {
    margin: 0 0 0.6rem;
    font-size: var(--font-size-sm, 0.875rem);
}
.wx-eventtime-icon { font-size: 1.1em; }

/* --- Air quality (US EPA AQI) --------------------------------------------
   Sits between the "right now" card and the radar. The band colors are fixed
   hex values on purpose: AQI colors are a published EPA scale, so they must NOT
   follow the site theme. Each band pairs its background with an explicit text
   color that clears 4.5:1 on that exact swatch, in BOTH themes. */
.wx-air {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #dee2e6);
}
.wx-air-headline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.wx-air-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-weight: var(--font-weight-bold, 700);
    white-space: nowrap;
}
.wx-air-num { font-size: 1.35rem; line-height: 1; }
.wx-air-band { font-size: var(--font-size-sm, 0.875rem); }
.wx-air-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wx-air-advice { font-size: var(--font-size-sm, 0.875rem); }

.wx-aqi-1 { background: #a8e05f; color: #1a2e05; }   /* Good */
.wx-aqi-2 { background: #fdd74b; color: #3d2f00; }   /* Moderate */
.wx-aqi-3 { background: #fe9b57; color: #3d1c00; }   /* Unhealthy for Sensitive Groups */
.wx-aqi-4 { background: #fe6a69; color: #3d0000; }   /* Unhealthy */
.wx-aqi-5 { background: #a97abc; color: #ffffff; }   /* Very Unhealthy */
.wx-aqi-6 { background: #a87383; color: #ffffff; }   /* Hazardous */

/* --- Radar (RainViewer frames on a Leaflet map) --------------------------- */
.wx-radar {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #dee2e6);
}
.wx-radar-summary {
    cursor: pointer;
    font-size: var(--font-size-base, 1rem);
    font-weight: 700;
}
.wx-radar-body { margin-top: 0.75rem; }
.wx-radar-map {
    height: 320px;
    width: 100%;
    border-radius: var(--border-radius, 6px);
    /* Leaflet paints its own tiles; a neutral base keeps the pre-load flash from
       flipping between white and the dark theme. */
    /* --color-bg-card, not --color-surface-muted: the latter is defined nowhere in either
       stylesheet, so it always served the literal fallback and the tile stayed light grey
       in dark mode until Leaflet painted over it. */
    background: var(--color-bg-card, #eef1f4);
}
.wx-radar-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.wx-radar-slider { flex: 1 1 140px; min-width: 120px; }
@media (max-width: 640px) {
    .wx-radar-map { height: 240px; }
}

/* Radar full screen. One rule set serves BOTH mechanisms - the script adds .is-fs
   whether it got native fullscreen or fell back to the fixed overlay (iOS Safari
   won't fullscreen a <div>), so the two paths can't drift apart visually.
   position/inset are redundant under native fullscreen and harmless there. */
.wx-radar-body.is-fs {
    position: fixed;
    inset: 0;
    z-index: 10050;              /* above the sticky nav; below the 20000 toast layer */
    margin: 0;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* --color-bg-card, NOT --color-surface: the latter is not defined anywhere in
       either stylesheet, so it would silently serve the literal fallback and the
       panel would stay white in dark mode. (The --color-surface-muted on
       .wx-radar-map above has the same problem - pre-existing, left alone here.) */
    background: var(--color-bg-card, #ffffff);
}
/* Height must come from the flex row, not the fixed 320px above, or the map keeps
   its small box in the middle of a full-screen panel. min-height:0 lets a flex item
   shrink below its content size - without it the map overflows the viewport. */
.wx-radar-body.is-fs .wx-radar-map {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border-radius: 0;
}
.wx-radar-body.is-fs .wx-radar-controls { margin-top: 0; flex: 0 0 auto; }
/* The attribution paragraph is the last child and would otherwise eat vertical space. */
.wx-radar-body.is-fs > p { margin: 0; flex: 0 0 auto; }
@media (max-width: 640px) {
    .wx-radar-body.is-fs .wx-radar-map { height: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   📖 TUTORIAL TRIGGER  (TutorialButton.ascx)
   Sits exactly where the retired ⓘ Tips trigger used to, in the upper-right
   of <main class="page-wrapper">, and keeps the same footprint — so it is no
   more in the way than what it replaces.

   These are qMEET-local names on purpose. The old .tips-trigger-wrap /
   .tip-icon-button rules live in Shared/styles_shared.css and PacklistPRO
   still uses them on 10+ pages, so they must stay exactly as they are; a new
   name can't collide. (main.page-wrapper{position:relative} is already set
   there and is what these absolute offsets hang off.)
   ════════════════════════════════════════════════════════════════════════ */
.tutorial-trigger-wrap {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    margin: 0;
}
@media (min-width: 768px) {
    .tutorial-trigger-wrap { top: 1.5rem; right: 1.5rem; }
}
@media (min-width: 1200px) {
    .tutorial-trigger-wrap { top: 2rem; right: 1.5rem; }
}

/* 2.75rem is the minimum comfortable tap target — the glyph itself is small,
   the hit area is not. Matches the ⓘ it replaces pixel for pixel. */
.tutorial-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #6c757d);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--border-radius-sm, 6px);
    transition: color var(--transition-fast, 0.15s ease),
                background-color var(--transition-fast, 0.15s ease);
}
.tutorial-icon-button:hover {
    color: var(--color-text, #1a1f2e);
    background-color: var(--color-primary-light, #e0f6fe);
}
.tutorial-icon-button:focus-visible {
    outline: 2px solid var(--color-border-focus, var(--color-primary, #0090C8));
    outline-offset: 2px;
}

/* Reserve right-side space so a long page title can't run under the trigger. */
.tutorial-trigger-wrap ~ .page-title,
.tutorial-trigger-wrap ~ .page-header,
.tutorial-trigger-wrap ~ * .page-title,
.tutorial-trigger-wrap ~ * .page-header {
    padding-right: 3rem;
}

/* ════════════════════════════════════════════════════════════════════════
   TUTORIAL / "NEED TO KNOW"  (modal overlay, Scripts/tutorial.js)
   A centered modal of sequential panels with Back/Next + progress dots.
   Both surfaces share this look by design: a NTK popup is a Tutorial that
   auto-opens, so the only visual difference is the accent stripe below.
   ════════════════════════════════════════════════════════════════════════ */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;                     /* above the chat/notification bars */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: tutorial-fade .18s var(--ease-out-quint, ease-out);
}
.tutorial-overlay[hidden] { display: none; }
@keyframes tutorial-fade { from { opacity: 0; } to { opacity: 1; } }

/* Lock background scroll while any tutorial/NTK panel is open. */
body.tutorial-lock { overflow: hidden; }

.tutorial-dialog {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card, #fff);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 12px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    padding: 22px 22px 18px;
    outline: none;
    animation: tutorial-pop .2s var(--ease-out-quint, ease-out);
}
@keyframes tutorial-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.tutorial-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.tutorial-close:hover { background: var(--color-bg-input); color: var(--color-text); }

/* Progress: "Step X of N" + dots */
.tutorial-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-right: 28px;               /* clear the × */
    min-height: 12px;                  /* hold the row's height when a 1-panel NTK blanks it */
}
.tutorial-stepcount {
    font-size: var(--font-size-sm, .85rem);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.tutorial-dots { display: flex; gap: 7px; flex-wrap: wrap; }
.tutorial-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background .15s ease, transform .15s ease;
}
.tutorial-dot.active {
    background: var(--color-accent, var(--color-primary));
    transform: scale(1.15);
}

/* Panels */
.tutorial-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 150px;
}
.tutorial-panel { animation: tutorial-fade .18s ease-out; }
.tutorial-panel[hidden] { display: none; }
.tutorial-h {
    font-size: var(--font-size-xl, 1.3rem);
    font-weight: var(--font-weight-bold, 700);
    margin: 0 0 10px;
}
.tutorial-panel p { margin: 0 0 10px; line-height: var(--line-height, 1.5); }

/* "Don't keep showing this" — lives IN the footer, immediately left of the ✓ Got It button.
   margin-right:auto pins it to the far left of the row; the button stays hard right. */
.tutorial-dontshow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    cursor: pointer;
    font-size: var(--font-size-sm, .9rem);
    line-height: 1.3;
}
.tutorial-dontshow[hidden] { display: none; }

/* Footer nav. flex-end + an auto right-margin on the left-hand item (rather than space-between)
   so that a single-panel NTK, which hides Back entirely, still leaves "✓ Got It" hard right
   where the button always sits — space-between would slide a lone button to the left. */
.tutorial-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.tutorial-footer .button { min-width: 96px; }
.tutorial-footer .button[disabled] { opacity: .45; cursor: default; }
.tutorial-footer .tutorial-back { margin-right: auto; }
.tutorial-footer .tutorial-back[hidden] { display: none; }
/* When Back is visible too (a multi-panel NTK), Back owns the left edge and the checkbox sits
   beside the button instead — only one element can claim the auto margin. */
.tutorial-footer .tutorial-back:not([hidden]) ~ .tutorial-dontshow { margin-right: 0; }

@media (max-width: 480px) {
    /* Stack rather than crush the checkbox label against the button on a narrow screen. */
    .tutorial-footer { flex-wrap: wrap; }
    .tutorial-dontshow { margin-right: 0; flex: 1 1 100%; order: -1; }
}

/* ── "Need to Know" accent ──────────────────────────────────────
   Same dialog, one signal that this popped up on its own and is the critical
   stuff — a warning-colored top stripe. */
.tutorial-overlay[data-tutorial-key="ntk"] .tutorial-dialog {
    border-top: 4px solid var(--color-warning, #e0a800);
}
/* The hand-off row to the full Tutorial at the end of a NTK. */
.tutorial-more {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 480px) {
    .tutorial-dialog { padding: 18px 16px 14px; }
    .tutorial-h { font-size: var(--font-size-lg, 1.15rem); }
}

/* ═════════════════════════════════════════════════════════════════════════
   AVAILABILITY CARD — "popular times" bars on GroupDetails (members) and
   EventDetails (attendees). Anonymous per-half-hour counts; the day's best
   2-hour window is the dark bar. Rendered by Scripts/availability-card.js.
   Peak accent = warm orange; bars = brand cyan (dim→bright on the dark card).
   ═════════════════════════════════════════════════════════════════════════ */
.ga-note { margin: 0 0 0.75rem; }

/* ── Popular-times bars ──────────────────────────────────────────────────── */
.ga-pb { display: grid; grid-template-columns: 132px 1fr; gap: 0.55rem 0.9rem; align-items: end; min-width: 560px; }
.ga-pb-label b { display: block; font-size: 0.88rem; font-weight: 650; }
.ga-pb-label > span { display: block; font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.3; }
.ga-pb-label em { font-style: normal; color: #b34500; font-weight: 600; }
.ga-pb-strip {
    display: flex; align-items: flex-end; gap: 1px; height: 56px;
    border-bottom: 1px solid var(--color-border);
}
.ga-pb-strip i { flex: 1 1 0; min-width: 2px; background: #35a3d9; border-radius: 2px 2px 0 0; cursor: pointer; }
.ga-pb-strip i.pk { background: #0b608f; }
.ga-pb-strip i.z { background: #eef3f7; height: 2px !important; }
.ga-pb-strip i.sel { background: #e8590c; box-shadow: 0 0 0 1px #e8590c; }
.ga-pb-strip i.sel.z { height: 6px !important; }
.ga-pb-axis { position: relative; height: 16px; font-size: 0.66rem; color: var(--color-text-light); }
.ga-pb-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ga-pb-readout {
    margin: 0 0 0.6rem; padding: 0.5rem 0.7rem; min-height: 2.4rem;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-surface-alt, rgba(0,0,0,0.03));
    font-size: 0.8rem; line-height: 1.35; color: var(--color-text);
}
.ga-pb-readout.empty { color: var(--color-text-muted); font-style: italic; }
[data-theme="dark"] .ga-pb-label em { color: #ffb74d; }
[data-theme="dark"] .ga-pb-strip i { background: #2e85b5; }
[data-theme="dark"] .ga-pb-strip i.pk { background: #8fd6fb; }
[data-theme="dark"] .ga-pb-strip i.z { background: #3b3b3b; }
[data-theme="dark"] .ga-pb-strip i.sel { background: #ff922b; box-shadow: 0 0 0 1px #ff922b; }

/* ════════════════════════════════════════════════════════════════════════
   MEMBER INSIGHTS — GroupDetails Leaderboard card.
   Anonymous presentation of members' interest & city counts. Style A reuses
   the shared .pi-* leaderboard vocabulary (above) and needs no CSS of its
   own; only the shared layout below is required.
   ════════════════════════════════════════════════════════════════════════ */

/* ── MEMBER INSIGHTS — SHARED layout ────────────────────────────────────── */
.mi-note { margin: 0 0 0.9rem; }
.mi-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.8rem; }
.mi-panel { min-width: 0; }          /* let names ellipsis instead of overflowing the column */
.mi-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.6rem;
}
.mi-title { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); }
.mi-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.mi-more { margin: 0.55rem 0 0; }
@media (max-width: 640px) { .mi-split { grid-template-columns: 1fr; } }

/* "Show more…" disclosure that reveals the overflow rows (top 26–100) of a
   leaderboard panel — pure <details>/<summary>, no JS. */
.pi-more-details { margin-top: 0.4rem; }
.pi-more-details > .pi-list { margin-top: 0.4rem; }
.pi-more-toggle {
    cursor: pointer;
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    list-style: none;
}
.pi-more-toggle::-webkit-details-marker { display: none; }

/* ===========================================================================
   Live duplicate guard (dupcheck.js) — inline panel under the name box on the
   add-Event / add-Group / add-Interest forms. Built on the shared theme tokens
   so light/dark just work. The panel is injected right after the name input.
   ======================================================================== */
.dupcheck-panel {
    margin: 0.5rem 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* Reassuring "nothing similar" state — quiet, so it doesn't compete with the form. */
.dupcheck-panel--clear .dupcheck-clear-line,
.dupcheck-panel--confirmed .dupcheck-clear-line {
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
}
.dupcheck-panel--confirmed .dupcheck-clear-line { color: var(--color-text-muted); }

/* Warning state — a bordered callout listing the look-alikes. */
.dupcheck-panel--warn {
    background: var(--color-warning-bg, #fff3e0);
    border: 1px solid var(--color-warning-border, #ffcc80);
    border-left: 4px solid var(--color-warning, #e65100);
    border-radius: var(--border-radius-sm, 6px);
    padding: 0.6rem 0.75rem;
    color: #3a2a10;
}
.dupcheck-head {
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.45rem;
}

.dupcheck-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.dupcheck-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
}
.dupcheck-item-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    min-width: 0;
}
.dupcheck-item-name { font-weight: var(--font-weight-bold); word-break: break-word; }
.dupcheck-item-sub { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.dupcheck-badge {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
    line-height: 1.5;
}
.dupcheck-badge--strong   { background: var(--color-danger, #c62828); }
.dupcheck-badge--possible { background: var(--color-warning, #e65100); }

.dupcheck-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--color-warning-border, #ffcc80);
}
.dupcheck-gate-note { color: #3a2a10; }

/* The gated Create/Add button, while a possible duplicate is unresolved. */
.button.dupcheck-blocked,
.dupcheck-blocked {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(35%);
}

/* ============================================================================
   Polls & Surveys (.svy-*) — SurveyUC form/results + EditSurvey builder.
   Uses the shared design tokens so both light and dark themes are covered.
   ============================================================================ */
.svy-card .svy-body { padding-top: .25rem; }
.svy-desc { color: var(--color-text-muted); margin-bottom: .75rem; }
.svy-draft { color: var(--color-warning); font-weight: var(--font-weight-normal); font-size: var(--font-size-sm); }

/* --- respondent form --- */
/* Each question is its own card (soft shadow), numbered by the badge survey.js
   prepends to the legend. The public "Your Name" fieldset reuses .svy-q but
   suppresses the badge (.svy-pub-name below). */
.svy-q {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: .9rem 1.05rem 1rem;
    margin-bottom: .8rem;
    box-shadow: var(--shadow-sm);
}
.svy-q-legend { font-weight: var(--font-weight-bold); padding: 0; }
/* Plain "1." number prefix on each question's legend (survey.js sets "N." as textContent) —
   a simple ordered-list look, not a circled badge. */
.svy-q-num {
    margin-right: .4rem;
    color: var(--color-accent-dark, inherit);
    font-weight: 800;
    vertical-align: baseline;
}
.svy-pub-name .svy-q-num { display: none; }
.svy-req { color: var(--color-danger); font-weight: var(--font-weight-bold, 700); }
/* Option rows get a padded hit area with hover + a clear checked state (accent wash + ring). */
.svy-opt {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .55rem; margin: .05rem 0;
    border: 1px solid transparent; border-radius: var(--border-radius-sm);
    cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.svy-opt:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.svy-opt:has(input:checked) {
    background: color-mix(in srgb, var(--color-accent) 13%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.svy-opt input, .svy-scale-radio, .svy-pic-ctrl input { accent-color: var(--color-accent); }
.svy-opt input { flex: 0 0 auto; }
.svy-opt-text { flex: 1 1 auto; }
/* Keyboard focus is shown on the whole row (its the click target), matching the rating
   scale — the native control's own ring is easy to miss on a large padded option. */
.svy-opt:has(input:focus-visible),
.svy-opt-linked:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Answer with a background link: the <a> sits OUTSIDE the label so clicking it opens the
   page (new tab) instead of toggling the option; click the control to select. */
.svy-opt-linked { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; border-radius: var(--border-radius-sm); }
.svy-opt-linked:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.svy-opt-linked:has(input:checked) {
    background: color-mix(in srgb, var(--color-accent) 13%, transparent);
}
.svy-opt-linked .svy-opt-ctrl { flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer; }
.svy-opt-linked .svy-opt-link { flex: 1 1 auto; }
/* ANSWER CAPTION (survey.js) — the author's optional one-line description, rendered in small
   grey text directly beneath the answer:

       qMEET
       events, meetups, groups, chat

   .svy-opt-body is the column wrapper survey.js inserts around the label ONLY when a caption
   exists, so answers without one keep the plain single-line row they always had.
   ⚠ Not .svy-pic-cap, which is a PICTURE answer's own label under its thumbnail. */
.svy-opt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.svy-opt-caption {
    display: block;
    font-size: var(--font-size-sm);
    line-height: 1.35;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal, 400);
}
/* A two-line answer must top-align its control, or the radio floats to the middle of the block. */
.svy-opt:has(.svy-opt-caption),
.svy-opt-linked:has(.svy-opt-caption) { align-items: flex-start; }
/* The control sits on the first line, so nudge it onto the label's optical baseline. */
.svy-opt:has(.svy-opt-caption) > input,
.svy-opt-linked:has(.svy-opt-caption) .svy-opt-ctrl { margin-top: .15rem; }
/* Results view: the caption is a row of .svy-bar-row (between the label and the bar) and a
   column item of a picture cell — both plain block flow, so it only needs its own spacing. */
.svy-bar-row .svy-opt-caption { margin: -.15rem 0 .3rem; }
.svy-pic-opt .svy-opt-caption { text-align: center; }

/* Live answer counts (survey.js) — how many people have picked each answer SO FAR, shown on the
   answer form when the author ticked "Show live counts" on the survey. A muted pill parked at
   the end of the option row. It sits inside the row's own label/link container, so it inherits
   that row's click target rather than competing with it. */
.svy-opt-count {
    flex: 0 0 auto;
    min-width: 1.6rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-muted) 16%, transparent);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.5;
}
/* A selected row is already washed with the accent, so the muted grey pill loses contrast
   against it — tint the pill with the same accent instead. */
.svy-opt:has(input:checked) .svy-opt-count,
.svy-opt-linked:has(input:checked) .svy-opt-count {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
    color: var(--color-accent-dark, inherit);
}
/* Slim progress bar above a multi-question form (survey.js; shown only for 2+ questions). */
.svy-progress { display: flex; align-items: center; gap: .6rem; margin: .15rem 0 1rem; }
.svy-progress-track {
    flex: 1 1 auto; height: .35rem; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--color-border) 45%, transparent);
}
.svy-progress-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
    transition: width .3s ease;
}
.svy-progress-txt {
    flex: 0 0 auto; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .svy-progress-fill { transition: none; } }
.svy-q-text { width: 100%; }
.svy-endnote { margin: 1.5rem 0 0; }   /* blank line before the "Closes …" note at the end */
.svy-submit { margin-top: 0; margin-bottom: 1.5rem; }
.svy-results-after-note { margin-top: 1.5rem; }   /* blank line before the "view results after" note */
.svy-status { margin-top: .5rem; min-height: 1.2em; font-size: var(--font-size-sm); }
.svy-status.error { color: var(--color-danger); }

/* --- results --- */
.svy-rc { font-weight: var(--font-weight-bold); margin-bottom: .5rem; }
/* Shown in place of the count when the survey's owner hasn't shared the results. */
.svy-rc-hidden { font-weight: var(--font-weight-normal); color: var(--color-text-muted); }
.svy-rq { margin-bottom: 1rem; }
.svy-rq-title { font-weight: var(--font-weight-bold); margin-bottom: .35rem; }
.svy-rq-empty { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.svy-rtext {
    border-left: 3px solid var(--color-border);
    padding: .25rem .6rem;
    margin: .25rem 0;
    color: var(--color-text);
}
/* Per-question comments in the aggregate results view. */
.svy-rq-comments-h { margin-top: .5rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.svy-rcomment { font-style: italic; }
/* Each answer is a full-width bar: label + "%· count" on a header line above the
   track, so long option text is no longer squeezed into a fixed 34% column. The
   leading answer (svy-bar-lead, set by survey.js) gets a bold label + "Top" chip. */
.svy-bar-row { margin: .55rem 0 .8rem; }
.svy-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .32rem; }
.svy-bar-label { flex: 1 1 auto; word-break: break-word; }
.svy-bar-stat { flex: 0 0 auto; font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svy-bar-stat b { color: var(--color-text); font-weight: var(--font-weight-bold, 700); }
.svy-bar-track {
    height: .62rem;
    background: color-mix(in srgb, var(--color-border) 42%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.svy-bar-fill {
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
    height: 100%;
    width: 0;
    min-width: 2px;
    border-radius: 999px;
    transition: width .7s cubic-bezier(.22, 1, .36, 1);
}
.svy-bar-lead .svy-bar-label { font-weight: var(--font-weight-bold, 700); color: var(--color-accent-dark); }
.svy-bar-lead .svy-bar-stat b { color: var(--color-accent-dark); }
.svy-topchip {
    display: inline-block;
    font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #fff;
    /* Start the gradient at accent-dark, not accent: white text on the light accent (#00B0F0)
       falls below WCAG AA, while accent-dark → deeper keeps the whole pill legible. */
    background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent-deeper));
    padding: .08rem .4rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { .svy-bar-fill { transition: none; } }
[data-theme="dark"] .svy-bar-lead .svy-bar-label,
[data-theme="dark"] .svy-bar-lead .svy-bar-stat b { color: var(--color-accent); }

/* --- read-only question list (locked editor / drill-down / grouped results) --- */
.svy-ro-list { margin: .5rem 0 0 1.2rem; }
.svy-ro-list li { margin: .3rem 0; }
.svy-ro-flat { margin-left: 0; list-style: none; padding-left: 0; }
/* The people who chose an answer, shown as compact chips instead of a bulleted list — scannable
   at a glance (only the "who chose this option" lists carry .svy-ro-names). */
.svy-ro-names { margin: .4rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.svy-ro-names li {
    margin: 0; font-size: var(--font-size-sm);
    padding: .12rem .55rem; border-radius: 999px; color: var(--color-text);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-card));
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
}

/* Surveys list rows (set in RowClass — every row is ".svy-row" plus a state class). Following the
   EventSearch/GroupSearch de-noise pass, state is a QUIET left-border accent only (no full-card
   colour fill) + the pill in the title (StatusPill, server-side). Every row keeps the theme card
   background, so it stays legible in both light and dark modes.
   Layout: title/meta on the left (.rc-main), actions on the right (.rc-actions); actions wrap
   under on narrow screens. Survey rows aren't whole-card links, so the base .result-card pointer
   is reset to the default cursor.
   • svy-row-open:    the viewer's live one  → green edge.
   • svy-row-others:  someone else's survey  → blue edge.
   • svy-row-closed:  a closed survey        → grey edge.
   • svy-row-draft:   the viewer's draft     → light muted edge. */
.result-card.svy-row {
    --result-bg: var(--color-bg-card);
    --result-fg: var(--color-text);
    --result-accent: var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .35rem .75rem;
    cursor: default;
}
.svy-row .rc-main    { flex: 1 1 15rem; min-width: 0; }
.svy-row .rc-title   { font-size: 1.05rem; line-height: 1.25; }
.svy-row .rc-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: .4rem; }
.result-card.svy-row-open   { border-left-color: #2e9e4f; }
.result-card.svy-row-others { border-left-color: #4a6fa5; }
.result-card.svy-row-closed { border-left-color: var(--color-text-muted); }
.result-card.svy-row-draft  { border-left-color: var(--color-border); }

/* The one card the viewer usually needs to act on ("Surveys to Take") gets the same accent
   left-border as the create launcher, so it stands out from the collapsed management cards. */
.svy-take-card.main-card { border-left: 3px solid var(--color-accent); }

/* "(n)" count badge in a card's summary title (CountBadge, server-side) — quiet, so the heading
   still leads. */
.svy-count { margin-left: .35rem; font-weight: var(--font-weight-normal); font-size: .9em; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Group sub-heading inside the merged "Surveys You Manage" card (Created by You / Created by
   Others) — rendered only when both groups are present. */
.svy-group-head { margin: .85rem 0 .4rem; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold, 700); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }

/* Closing-soon accent — an open survey within a few days of its close date (RowClass →
   svy-row-soon, StatusPill → svy-pill-soon). Amber, matching the search-page "attention" cue. */
.result-card.svy-row-soon { border-left-color: var(--color-warning, #e65100); }
.svy-pill-soon {
    background: color-mix(in srgb, var(--color-warning, #e65100) 16%, transparent);
    color: var(--color-warning, #e65100);
    border: 1px solid color-mix(in srgb, var(--color-warning, #e65100) 45%, transparent);
}

/* Thin completion bar under a scoped survey's meta (responses ÷ members). */
.svy-mini-bar { height: 4px; max-width: 16rem; margin: .3rem 0 .1rem; border-radius: 999px; background: color-mix(in srgb, var(--color-border) 60%, transparent); overflow: hidden; }
.svy-mini-bar > span { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }

/* Meta tokens in a manage row: draft "no questions yet" warning + results-visibility flag. */
.svy-warn { color: var(--color-warning, #e65100); font-weight: var(--font-weight-medium); }
.svy-vis { white-space: nowrap; }

/* Page subtitle under the "Surveys" header. */
.svy-subtitle { margin: .15rem 0 .25rem; }

/* Manage-list controls: title filter + status chips + sort. All client-side (survey-list.js);
   shown only when the list is long (pnlManageControls.Visible in BindList). */
.svy-list-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .35rem 0 .75rem; }
.svy-list-filter { flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
/* The title/responder filter inputs now sit inside an .input-clearable wrapper (standard
   in-field × clear button). The flex sizing rides on the wrapper; the input fills it 100%. */
.svy-list-controls .input-clearable { flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
.svy-resp-filter   .input-clearable { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.input-clearable > .svy-list-filter,
.input-clearable > .svy-resp-filter-input { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; }
.svy-status-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.svy-status-chip { cursor: pointer; background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.svy-status-chip:hover { border-color: var(--color-accent); color: var(--color-text); }
.svy-status-chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.svy-list-sort { flex: 0 0 auto; width: auto; }
.svy-nomatch { margin: .5rem 0; color: var(--color-text-muted); font-style: italic; }
.svy-list-cap { margin: 0 0 .5rem; }
.svy-list-count { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }

/* "+N new" pip — responses gained since the owner last viewed a survey's results (survey-list.js,
   localStorage). Sits after the status pill on the row title. */
.svy-new-pip {
    display: inline-flex; align-items: center; vertical-align: middle;
    margin-left: .35rem; padding: .1rem .45rem; border-radius: 999px;
    font-size: .7rem; font-weight: var(--font-weight-bold, 700); white-space: nowrap;
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent-dark, var(--color-accent));
    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}
[data-theme="dark"] .svy-new-pip { color: var(--color-accent); }

/* ── SurveyResults page: at-a-glance stats strip ─────────────────────────── */
.svy-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 .25rem; }
.svy-stat {
    flex: 1 1 8rem; min-width: 7rem;
    display: flex; flex-direction: column; gap: .1rem;
    padding: .6rem .75rem; border-radius: var(--border-radius);
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
}
.svy-stat-num { font-size: 1.5rem; font-weight: var(--font-weight-bold, 700); line-height: 1.1; font-variant-numeric: tabular-nums; }
.svy-stat-lbl { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.svy-stats-last { margin: .1rem 0 0; }

/* Zero-response empty state on the results page. */
.svy-empty { text-align: center; padding: 1.75rem 1rem; margin-bottom: .6rem; }
.svy-empty-emoji { font-size: 2.25rem; line-height: 1; }
.svy-empty-title { margin-top: .35rem; font-size: 1.15rem; font-weight: var(--font-weight-bold, 700); }
.svy-empty-text { margin: .4rem auto 0; max-width: 34rem; color: var(--color-text-muted); }
.svy-empty-actions { margin-top: .9rem; }

/* Responder name filter on the Individual Responses card. */
.svy-resp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; }
.svy-resp-filter-input { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.svy-resp-filter-count { color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }

/* Missing-required highlight on the answer form (survey.js markQuestionValidity). */
.svy-q.svy-q-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 22%, transparent);
}
.svy-q-required-note { margin-top: .45rem; color: var(--color-danger); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

/* Status pill in a survey row's title (StatusPill in Surveys.aspx.vb). */
.svy-pill {
    display: inline-flex; align-items: center; gap: .28rem;
    font-size: .7rem; font-weight: var(--font-weight-bold, 700);
    padding: .1rem .5rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; vertical-align: middle;
}
.svy-pill-open { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.svy-pill-closed { background: color-mix(in srgb, var(--color-border) 30%, transparent); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.svy-pill-draft { background: color-mix(in srgb, var(--color-text-muted) 16%, transparent); color: var(--color-text-muted); border: 1px solid color-mix(in srgb, var(--color-text-muted) 40%, transparent); }
[data-theme="dark"] .svy-pill-open { color: #9fe0a3; }
/* Response count in the row meta reads as a small stat. */
.svy-row .rc-count { font-weight: var(--font-weight-bold, 700); font-variant-numeric: tabular-nums; }

/* --- SurveyResults "Individual Responses" — each responder is a compact card: a name header
   (with when) over their answers, with light dividers between rows for scanability. --- */
.svy-resp {
    padding: .8rem .9rem; margin: .5rem 0 0;
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
}
.svy-resp .svy-resp-name {
    margin: 0 0 .4rem; padding: 0 0 .4rem; border-bottom: 1px solid var(--color-border);
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
}
.svy-resp .svy-ro-flat { margin-top: .5rem; }
.svy-resp .svy-ro-flat li { padding: .28rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent); }
.svy-resp .svy-ro-flat li:last-child { border-bottom: 0; }
.svy-resp .svy-ro-flat li b { color: var(--color-text-muted); font-weight: var(--font-weight-bold, 700); }

/* --- SurveyResults "Responses by Answer" — one card per question, numbered with the same
   gradient badge as the form/builder, each answer group under an accent edge. --- */
.svy-ag-wrap { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.svy-ag-card {
    padding: .85rem .9rem;
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
}
.svy-ag-qhead { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.svy-ag-qnum {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: #fff; font-size: .8rem; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 144, 200, .35);
}
.svy-ag-group { margin: .55rem 0; border-left: 3px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); padding-left: .75rem; }
.svy-ag-group:first-of-type { margin-top: .35rem; }
.svy-ag-answer { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
/* the "(N)" tally beside each answer / comments header reads as a small stat chip */
.svy-ag-answer .note {
    font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold, 700);
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    border-radius: 999px; padding: .02rem .45rem;
}
.svy-ag-comments { margin: .8rem 0 0; border-left: 3px solid var(--color-accent, var(--color-border)); padding-left: .75rem; }

/* --- EditSurvey builder --- */
.svy-editor-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; }

/* Each question is a collapsible card (<details class="main-card svy-ed-q">). #svy-qlist keeps a
   CSS counter so the header shows a live "Question N" that stays correct after reorder/remove. */
#svy-qlist { counter-reset: svyq; }
.svy-ed-q { counter-increment: svyq; margin-bottom: .85rem; }
/* margin-bottom:0 so a COLLAPSED card leaves no dangling gap under its header (the body
   owns the open spacing). */
/* Header: a numbered gradient badge (matching the respondent form's .svy-q-num) followed by a
   "Question" label, so the builder header reads "[N] Question" — the same visual language as the
   form respondents see. (summary.card-title's ▸/▾ chevron ::before still leads the row.) */
.svy-ed-q > summary.svy-ed-q-summary { cursor: pointer; display: flex; align-items: center; gap: .4rem; margin-bottom: 0; }
.svy-ed-q-num { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--font-weight-bold); }
/* Plain "Question #N" label (the live CSS counter keeps N correct after reorder/remove). */
.svy-ed-q-num::before { content: "Question #" counter(svyq); }
.svy-ed-q-body { margin-top: .75rem; }
.svy-ed-q-text { width: 100%; }
/* Beat the shared .textarea min-height floor so rows="2" governs (a compact 2-line box). */
textarea.svy-ed-q-text { min-height: 0; height: auto; }
.svy-ed-q-ctrls { display: flex; gap: .5rem .6rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
.svy-ed-q-type { flex: 0 1 22rem; min-width: 0; }
/* Required / Comment / Other toggles as pill chips that light up accent when checked
   (mirrors the respondent form's :has(input:checked) selected option state). */
.svy-ed-req {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg-card); font-size: var(--font-size-sm);
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.svy-ed-req input { accent-color: var(--color-accent); }
.svy-ed-req:hover { border-color: var(--color-accent); }
.svy-ed-req:has(input:checked) {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    color: var(--color-accent-dark); font-weight: var(--font-weight-bold, 700);
}
[data-theme="dark"] .svy-ed-req:has(input:checked) { color: var(--color-accent); }
.svy-ed-req:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Footer at the bottom of each question card: move up / down / × Question. */
.svy-ed-q-foot {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin-top: .75rem; padding-top: .6rem;
    border-top: 1px solid var(--color-border);
}

/* Answers. Each answer is its OWN card; the move/remove buttons sit in a footer at the
   bottom. The list keeps a counter so "Answer N" stays correct after reorder/remove. */
.svy-ed-opts { margin-top: .5rem; }
.svy-ed-opt-list { counter-reset: svyopt; }
.svy-ed-opt {
    counter-increment: svyopt;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: .6rem .75rem;
    margin: .4rem 0;
    background: var(--color-bg-card);
    transition: border-color .12s ease, box-shadow .12s ease;
}
/* The answer card being edited gets an accent ring so the active row stands out. */
.svy-ed-opt:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.svy-ed-opt-num { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold, 700); color: var(--color-accent-dark); margin-bottom: .3rem; }
.svy-ed-opt-num::before { content: "Answer (" counter(svyopt, lower-alpha) ")"; }
[data-theme="dark"] .svy-ed-opt-num { color: var(--color-accent); }
.svy-ed-opt-input { width: 100%; }
.svy-ed-opt-foot { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.svy-ed-add-opt { margin-top: .35rem; }
/* Friendly full-width dashed "add" affordances for the builder's add buttons. id / #svy-editor
   scoping keeps them ahead of the shared .button.small.transparent rules regardless of load order.
   (display:block only takes effect once JS clears the inline display:none on the picture button.) */
#svy-add-q,
#svy-editor .svy-ed-add-opt,
#svy-editor .svy-ed-add-pics {
    display: block; width: 100%;
    border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
    color: var(--color-accent-dark);
    border-radius: var(--border-radius-sm);
    transition: background .12s ease, border-color .12s ease;
}
#svy-add-q:hover,
#svy-editor .svy-ed-add-opt:hover,
#svy-editor .svy-ed-add-pics:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-color: var(--color-accent);
}
[data-theme="dark"] #svy-add-q,
[data-theme="dark"] #svy-editor .svy-ed-add-opt,
[data-theme="dark"] #svy-editor .svy-ed-add-pics { color: var(--color-accent); }

/* Per-answer background URL (any manager) + admin-only Affiliate URL — hidden by default,
   revealed across every question by the "Show URL" toggle (adds .svy-show-urls on #svy-editor).
   Values still round-trip on save even while hidden. */
.svy-ed-opt-url, .svy-ed-opt-aff { display: none; margin: .4rem 0 .1rem 0; }
.svy-show-urls .svy-ed-opt-url, .svy-show-urls .svy-ed-opt-aff { display: block; }
.svy-ed-opt-url-label, .svy-ed-opt-aff-label { display: block; margin-bottom: .15rem; }
.svy-ed-opt-url-input, .svy-ed-opt-aff-input { width: 100%; }
/* Per-answer "Answer Caption" — ALWAYS visible (it is ordinary authoring), unlike the URL fields
   above which are gated behind the "Show URL Fields" toggle. */
.svy-ed-opt-caption { display: block; margin: .4rem 0 .1rem 0; }
.svy-ed-opt-caption-label { display: block; margin-bottom: .15rem; }
.svy-ed-opt-caption-input { width: 100%; }
/* "Picture Caption" label, shown only on a picture answer's card above its main box (which for
   that kind of answer IS the picture caption). Text answers have no label there — their box is
   the answer itself and is self-evident from its placeholder. */
.svy-ed-opt-piccap-label { display: block; margin-bottom: .15rem; }

/* Respondent's personal recap: "Your answer(s)" line under each question. */
.svy-rq-mine { margin: .15rem 0 .35rem; }
.svy-rq-mine-label { font-weight: var(--font-weight-bold, 700); }

/* Respondent "Other" write-in box (radio/checkbox/dropdown), and the date/time answer
   controls on the survey form. */
.svy-opt-other { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* The "Other" row shares its flex line with the write-in box, so its label does NOT stretch —
   which left a live-count chip hugging the word "Other" while every other row's chip sat at
   the right edge. When (and only when) a count is present, give the label the full line so the
   chip right-aligns with the rest; the write-in box then wraps below it. The padding reset is
   the other half: .svy-opt-other ALSO carries .svy-opt, so the inner label's .55rem sits inside
   the outer's and pushed this row's chip (and checkbox) ~9px in from its siblings. Scoped with
   :has() so the layout is byte-for-byte unchanged on surveys that don't show counts. */
.svy-opt-other > .svy-opt:has(.svy-opt-count) {
    flex: 1 1 100%;
    padding-left: 0;
    padding-right: 0;
}
.svy-other-input { flex: 1 1 12rem; min-width: 0; margin-left: .25rem; }
.svy-dropdown { max-width: 100%; }
.svy-date { max-width: 100%; }
.svy-time { min-width: 8rem; }
.svy-datetime { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* Rating scale (a radio question numbered 1..N, highest = best) — a segmented control:
   each number is a tappable chip; the native radio is overlaid transparently so the chip
   stays keyboard-accessible. The selected chip fills with the accent. Wraps on narrow screens. */
.svy-scale { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; margin: .3rem 0 .35rem; }
.svy-scale-item {
    position: relative; flex: 0 0 auto; min-width: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    padding: .5rem .35rem; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.svy-scale-item:hover { border-color: var(--color-accent); }
.svy-scale-num { font-weight: var(--font-weight-bold, 700); text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.svy-scale-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.svy-scale-item:has(input:checked) {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    border-color: var(--color-accent-dark); color: #fff;
    box-shadow: 0 2px 8px rgba(0, 144, 200, .35);
}
.svy-scale-item:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Live counts on a rating scale: the strip is too tight for an inline pill, so the count drops
   UNDER its rung and the item becomes a column. The selected rung fills with the accent and
   flips its text to white, so the pill has to go translucent-white to stay legible on it. */
.svy-scale-item:has(.svy-opt-count) { flex-direction: column; gap: .25rem; }
.svy-scale-item:has(input:checked) .svy-opt-count { background: rgba(255, 255, 255, .25); color: #fff; }
/* Emoji scale: larger glyphs, a bit more room per item. */
.svy-scale-emoji { gap: .5rem; }
.svy-scale-emoji .svy-scale-num { font-size: 1.6rem; }
.svy-scale-emoji .svy-scale-item { min-width: 2.75rem; }
.svy-scale-caption { margin-top: .25rem; }
/* "Other" write-ins listed under a choice question's results bars. */
.svy-rother { font-style: italic; }

/* --- Picture answers (radio "Pick One" / checkbox "Pick Many") --- */
/* Respondent form: a responsive thumbnail grid. Each thumbnail is a lightbox link kept OUTSIDE
   the control's label, so clicking the picture opens it full size (site.js's global photo
   lightbox) while clicking the radio/checkbox or caption selects the answer. */
.svy-pic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 160px));
    gap: .75rem;
    justify-content: start;
    margin: .45rem 0;
}
.svy-pic-opt { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.svy-pic-link { display: block; width: 100%; line-height: 0; }
.svy-pic-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    background: rgba(127, 127, 127, .08);
    cursor: zoom-in;
}
.svy-pic-ctrl { display: inline-flex; align-items: flex-start; justify-content: center; gap: .35rem; width: 100%; cursor: pointer; }
.svy-pic-cap { word-break: break-word; text-align: center; font-size: var(--font-size-sm); }
/* Highlight the selected picture (progressive — browsers without :has() just skip it). */
.svy-pic-opt:has(input:checked) .svy-pic-thumb { outline: 3px solid var(--color-accent); outline-offset: 1px; }

/* Aggregate results: a small thumbnail beside each answer's bar. */
.svy-bar-label-pic { display: flex; align-items: center; gap: .4rem; }
.svy-bar-thumb {
    width: 42px; height: 42px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    cursor: zoom-in;
    flex: 0 0 auto;
}
.svy-bar-cap { word-break: break-word; }

/* Editor (EditSurvey): the uploaded-picture preview + caption in each answer card, and the
   "＋ Add Pictures" affordance shown only while a picture answer type is selected. */
.svy-ed-opt-pic { margin: .1rem 0 .3rem 0; line-height: 0; }
.svy-ed-opt-pic-link { display: inline-block; line-height: 0; }
.svy-ed-opt-pic-img {
    width: 120px; height: 120px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    background: rgba(127, 127, 127, .08);
    cursor: zoom-in;
}
.svy-ed-add-pics { margin-top: .35rem; }
.svy-ed-pic-busy { margin-left: .5rem; }
/* In picture mode, relabel each answer card's counter as "Picture (a)" instead of "Answer (a)". */
.svy-ed-q-pics .svy-ed-opt-num::before { content: "Picture (" counter(svyopt, lower-alpha) ")"; }

/* --- Share link + copy-to-clipboard --- */
.svy-share-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: .5rem;
}
/* Readonly share/invite URL — a recessed "copy field": faint accent-tinted well + monospace so it
   reads as a link to grab, paired with the adjacent .svy-copy-btn. input.* out-ranks the shared
   .textbox background/border regardless of stylesheet load order. */
input.svy-share-url {
    flex: 1 1 18rem;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-accent-deeper);
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg-card));
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}
[data-theme="dark"] input.svy-share-url { color: var(--color-accent); }

/* The three "distribution" cards (Share, Invite, and the Surveys launcher) share an accent left
   edge so they read as a group — "how you get responses" — distinct from the content cards. */
.svy-share-card > .main-card,
.svy-invite-card > .main-card,
.svy-launcher-card.main-card { border-left: 3px solid var(--color-accent); }

/* "Survey Active" master toggle (EditSurvey) — deliberately boxed with an accent edge and
   placed first in the settings card so a manager can't miss whether the survey is live or a
   hidden draft. Matches the accent treatment of the share/invite cards above. */
.svy-active-box {
    border: 1px solid color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg-card));
    padding: .6rem .8rem;
}
.svy-active-label { font-weight: 700; }
.svy-active-note { display: block; margin-top: .3rem; }

/* Share Survey modal (survey-share-panel.js) — the shell reuses .modal-box/.share-box (now
   scrollable) + the .share-* section styles; these are the only survey-specific tweaks. */
.svy-share-launch { display: flex; }
.svyshare-notify-row { margin-top: .6rem; }
.svyshare-subtitle { margin: 0 0 .75rem; font-weight: 600; }
.svyshare-result:empty { display: none; }

/* --- named-invite card (EditSurvey) + the invitee greeting on Survey.aspx --- */
.svy-greeting {
    font-weight: var(--font-weight-bold);
    margin-bottom: .5rem;
}
.svy-invite-add {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}
.svy-invite-add .textbox { flex: 1 1 14rem; min-width: 0; }
/* Each invitee is a compact card (was a hairline-separated row) so the name, status pill, private
   link, and revoke action group cleanly. */
.svy-invite-list {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex; flex-direction: column; gap: .5rem;
}
.svy-invite-item {
    padding: .7rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-card);
}
.svy-invite-name { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .4rem; }
/* Invite status tags — pills matching the survey Open/Closed/Draft palette (all three carry the
   shared `.pill small`; these set the state color, scoped to out-rank the base .pill). */
.svy-invite-card .svy-invite-done {
    background: var(--color-success-bg); color: var(--color-success);
    border: 1px solid var(--color-success-border);
}
[data-theme="dark"] .svy-invite-card .svy-invite-done { color: #9fe0a3; }
.svy-invite-card .svy-invite-pending {
    margin-left: 0;
    background: color-mix(in srgb, var(--color-text-muted) 16%, transparent);
    color: var(--color-text-muted);
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 40%, transparent);
}
.svy-invite-card .svy-invite-revoked {
    background: color-mix(in srgb, var(--color-border) 30%, transparent);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.svy-invite-revoke { display: inline-block; margin-top: .35rem; font-size: var(--font-size-sm); }
.svy-end-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}
.svy-end-date { flex: 0 1 12rem; min-width: 0; }
.svy-end-time { flex: 0 1 9rem; }

/* --- "Create a Survey" launcher (Surveys.aspx): an organizer picks ONE of their events OR
   groups, then ＋ Create Survey. The selects + button share one wrapping row; the client clears
   the other select on change (survey-share.js) so only one scope is ever chosen. --- */
.svy-launcher-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; }
.svy-launcher-select { flex: 1 1 14rem; min-width: 0; max-width: 24rem; }

.svy-copy-btn { white-space: nowrap; }
.svy-copy-btn.svy-copied {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* URLs inside a survey's description and per-question "More Information" note —
   a normal blue link that opens in a new tab and wraps if long. */
.svy-link {
    color: var(--color-link);
    font-weight: var(--font-weight-bold, 700);
    text-decoration: underline;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Per-question "More Information" — shown in its own card below the question. */
.svy-q-moreinfo { margin: .5rem 0; }
.svy-q-moreinfo-label { font-weight: var(--font-weight-bold, 700); margin-bottom: .25rem; }
.svy-ed-moreinfo { margin-top: .6rem; }
.svy-ed-mi-label { display: block; margin-bottom: .2rem; }
.svy-ed-mi-input { width: 100%; }


/* Respondent's free-text comment for the whole response. */
.svy-comment { margin-top: 1rem; }
.svy-comment-label { display: block; margin-bottom: .2rem; }
/* Beat the shared `.textarea` min-height (~6.25rem, and it loads AFTER page CSS) with an
   element+class selector, so rows="2" governs and the comment box is ~2 lines tall. */
textarea.svy-comment-input { width: 100%; min-height: 0; height: auto; }
.svy-comment-view { margin-top: .5rem; }

/* Per-question comment box on the answer form (author-enabled per question). */
.svy-q-comment { margin-top: .75rem; }
.svy-q-comment-label { display: block; margin-bottom: .25rem; }

/* ── Auto-popup survey modal (#surveyPopupModal, Site.Master) ─────────────────
   Reuses the shared .modal-overlay/.modal-box shell. A survey can be long, so cap
   it to the viewport and scroll; the embedded SurveyUC .svy-card is flattened so it
   doesn't read as a card-inside-a-card, and the footer sticks to the bottom. */
.svy-popup-box {
    max-width: 640px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.svy-popup-box .svy-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}
.svy-popup-box .svy-card > summary { padding-right: 1.5rem; }   /* keep the title clear of the X */
.svy-popup-box .modal-footer.svy-popup-foot {
    position: sticky;
    bottom: 0;
    background: var(--color-bg-card);
    padding-top: 0.75rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

/* ── SurveyResults print (🖨 Print in the Actions rail) ───────────────────────
   The site-wide @media print block already hides chrome and forces a light,
   shadow-free palette. These rules add what a printed results sheet needs on top:
   drop the interactive rail and go full-width, and keep the accent-on-white
   elements legible when the browser doesn't print backgrounds (a white number on
   an un-printed gradient badge, or a chip that's only distinguished by its tint,
   would otherwise vanish). Scoped to the survey classes so the shared ed3 detail
   pages — whose rail carries real "At a Glance" facts — are untouched. */
@media print {
    /* Single column; the rail is Actions-only here, so it prints nothing useful. */
    .svy-results-grid { display: block !important; }
    .svy-results-rail { display: none !important; }

    /* Numbered question badges + the "Top" chip are white-on-gradient — restyle to a
       bordered dark chip so the number/label survives an ink-saving printout. */
    .svy-ag-qnum,
    .svy-q-num,
    .svy-topchip {
        background: none !important;
        color: #000 !important;
        border: 1px solid #666 !important;
        box-shadow: none !important;
    }

    /* Keep the result bars meaningful on paper: force the fill to print and outline
       the track so the empty remainder still reads as a bar. */
    .svy-bar-track { border: 1px solid #999; }
    .svy-bar-fill {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Tinted chips (who-chose names, the "(N)" tally) lose their wash when backgrounds
       aren't printed — give them a hairline so they still read as discrete items. */
    .svy-ro-names li,
    .svy-ag-answer .note {
        background: none !important;
        border: 1px solid #999 !important;
        color: #000 !important;
    }
}

/* ── Invite BATCH card (Home "Invitations Waiting to Send") ──────────────────
   Sender-side queue of "Add to Batch" invites/shares, grouped by recipient —
   each group becomes ONE combined email. Uses only real design tokens so it
   tracks light/dark correctly. */
.pending-batch-group {
    padding: 10px 0;
    border-top: 1px solid var(--color-border, rgba(127, 127, 127, 0.25));
}
.pending-batch-group:first-child { border-top: 0; padding-top: 4px; }
.pending-batch-recip { margin-bottom: 6px; }
.pending-batch-items {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.pending-batch-item { display: flex; align-items: center; gap: 8px; }
.pending-batch-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pending-batch-x {
    flex: 0 0 auto;
    border: 0; background: transparent; cursor: pointer;
    font-size: 1.15rem; line-height: 1; padding: 2px 8px; border-radius: 6px;
    color: var(--color-text-muted, #6b7280);
}
.pending-batch-x:hover {
    background: var(--color-bg-hover, rgba(127, 127, 127, 0.14));
    color: var(--color-danger, #dc2626);
}
.pending-batch-x:disabled { opacity: 0.5; cursor: default; }

/* Admin pending-review count pill (Site.Master pnlAdminFloat, admin-only).
   A tiny number-only red pill parked top-right, alongside the green status/
   check-in pill (.here-badge). Mirrors the top-level Admin nav badge count and
   links to the Admin panel. When both pills show, .here-badge shifts left (via
   .here-badge-with-admin) so they sit side by side in the corner. */
.admin-review-fab {
    position: fixed;
    right: 1rem;
    top: 4.5rem;
    z-index: 1501; /* just above .here-badge (1500) */
}
.admin-review-fab-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold, 700);
    color: #fff;
    background-color: var(--color-danger, #dc2626);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    animation: navBadgePulse 2s var(--ease-in-out, ease-in-out) infinite;
}
.admin-review-fab-link:hover,
.admin-review-fab-link:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.06);
}
/* 🛑 REMOVED 2026-08-06 — do not reintroduce: `.here-badge.here-badge-with-admin { right: 3.75rem }`
   lived here, with a 3.35rem twin under (max-width: 575px). Both were PAGE-EDGE anchors, and at
   (0,2,0) they OUTRANKED the cluster rule further down (`.here-badge`, 0,1,0). The status pill only
   ever landed in the cluster because `body.has-admin-fab` (0,2,1) beat them — and that class is set
   by Scripts/tutorial.js, which is included PER PAGE (~50 of them) and NOT by Site.Master. So on
   every page without it (About, SiteMap, Admin, MonitorAbuse, Troubleshooting, …) an admin with a
   live check-in got the pill parked 3.75rem from the VIEWPORT edge, where it sits ON the ☰ toggle
   at mid widths. Measured on prod: /About at 1250px → pill x 1070-1180, toggle x 1160-1204 (and it
   covered the admin pill at 1096-1135 as well); /SiteMap at 1300px the same.
   The admin pill never had this because its rule has always been unconditional.
   ⚠ Site.Master.vb (SetAdminBadge) still stamps the `here-badge-with-admin` class. It is now
   deliberately UNSTYLED — dropping the server line would cost a DLL rebuild + ship for zero pixels.
   The `@media (max-width: 575px) { .admin-review-fab { right: 0.6rem } }` that sat here went too:
   the unconditional `.admin-review-fab` rule below is later at equal specificity, so it was dead. */
@media (prefers-reduced-motion: reduce) {
    .admin-review-fab-link { animation: none; }
}

/* Floating "❓" help pill (Site.Master #tutorialHelpPill) — the site-wide replacement for the
   retired per-page 📖 TutorialButton. It's an icon-only round pill (just the ❓) that rides the
   very top of the screen, floating on top of the nav bar in a cluster with the green
   Status/Check-in pill (.here-badge) and the red admin count pill (.admin-review-fab). The
   cluster reads left→right as [Status] [❓] [Admin]: Admin is the rightmost anchor, the ❓ sits
   to its left, and the Status/Check-in badge sits left of the ❓. Shown only on pages that have
   a Tutorial — Scripts/tutorial.js toggles [hidden], body.has-tutorial-help, body.has-admin-fab. */
.tutorial-help-pill {
    position: fixed;
    top: var(--pill-cluster-top, 0.5rem);
    right: var(--pill-cluster-right, 1rem);
    z-index: 1502; /* above .here-badge (1500) and .admin-review-fab (1501) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary, #0090C8);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}
/* The pill's glyph is a plain text "?" in a span — styled by .tutorial-help-pill-glyph in
   Shared/styles_shared.css (all 5 sites), not here. */
.tutorial-help-pill[hidden] { display: none; }
.tutorial-help-pill:hover { filter: brightness(1.08); }
.tutorial-help-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Top-of-screen cluster layout for [Status] [❓] [Admin] ──────────────────────────────
   All three float at the very top (top:0.5rem), on top of the nav bar. --pill-cluster-right is
   the right anchor of the rightmost pill. The hamburger toggle owns the top-right corner, so
   the whole cluster shifts left of it. Each pill's own offset is then the SUM of the slot
   widths of the pills to its RIGHT (~3rem each = one round-pill width + gap), carried in
   --pill-admin-slot / --pill-help-slot. That sum replaced a ladder of per-combination
   `body.has-x.has-y .here-badge` rules on 2026-08-06 — see the removal note above for why the
   ladder was load-bearing in a way it should never have been.
   ⚠ 2026-07-18: this used to be 1rem on desktop and only 3.75rem under (max-width: 991px),
   back when the ☰ was phone-only. qMEET now shows the hamburger at EVERY width (see
   Content/nav-hamburger.css), so the 1rem desktop value put the cluster ON TOP of the toggle.
   Do not reintroduce that breakpoint.

   🔑 The anchor must track the ☰, and the ☰ is NOT viewport-anchored: it's the last flex item
   of `.site-nav .nav-inner`, which is `max-width: 1200px; margin: 0 auto` (styles_shared.css).
   So past 1200px the toggle STOPS moving right while the pills — position:fixed, right:<n>rem
   from the VIEWPORT — keep sliding out with the window, and they drift apart (a plain rem
   value looked fine at 1200px and overlapped again on a wide monitor). The centering gutter
   must therefore be added back in: max() floors it at 0 below 1200px, where nav-inner is
   full-bleed and the gutter doesn't exist. 5rem is the clearance past the toggle itself.
   ⚠ 100vw counts the scrollbar, so this can over-shift by the scrollbar width — that errs
   LEFT (more gap), never into the toggle, which is why it's fine to leave uncorrected. */
:root {
    --pill-cluster-gutter: max(0px, (100vw - var(--container-max, 1200px)) / 2);
    /* env(safe-area-inset-right) added 2026-08-11 (QMR-234): with viewport-fit=cover
       100vw now spans the cutout too, so the whole cluster has to clear it. Folding it
       in HERE moves all three pills at once — the two --pill-*-slot terms below are
       measured from this anchor, so nothing else needs touching. Zero on any device
       without a cutout. */
    --pill-cluster-right: calc(var(--pill-cluster-gutter) + 5rem + env(safe-area-inset-right, 0px));
    /* The three pills float on top of the nav bar, and the bar itself now starts
       below the status bar (see the safe-area block above), so their shared top
       offset has to move down with it. One token, three consumers. */
    --pill-cluster-top: calc(0.5rem + env(safe-area-inset-top, 0px));
}

/* Slot widths — 0 when that pill is absent, ~one pill width when it is present. Each is set by
   TWO rules, written SEPARATELY on purpose: a selector LIST containing an unsupported :has()
   is thrown away whole, so pairing them with a comma would take the working half down with it.
   • the :has() rule needs NO SCRIPT — both pills are server-rendered, so the slot is correct on
     the very first paint and on the ~40 pages that never load Scripts/tutorial.js. This is the
     part that fixes the ☰ overlap.
   • the body-class rule is tutorial.js's own flag, kept as the fallback.
   The ❓ carries [hidden] until tutorial.js unhides it, so `:not([hidden])` is exactly the
   "is it actually on screen" test — a plain :has(.tutorial-help-pill) would always match. */
body { --pill-admin-slot: 0rem; --pill-help-slot: 0rem; }
body.has-admin-fab { --pill-admin-slot: 3rem; }
body:has(.admin-review-fab) { --pill-admin-slot: 3rem; }
body.has-tutorial-help { --pill-help-slot: 3rem; }
body:has(.tutorial-help-pill:not([hidden])) { --pill-help-slot: 3rem; }

/* Admin is the rightmost pill, so it IS the anchor — nothing to its right to clear. */
.admin-review-fab { top: var(--pill-cluster-top, 0.5rem); right: var(--pill-cluster-right, 1rem); }

/* The ❓ clears the admin pill. 🔑 The leading `body ` is load-bearing: Shared/styles_shared.css
   loads AFTER this file and declares `.tutorial-help-pill { right: var(--pill-cluster-right, 1rem) }`
   at equal specificity, so an unqualified `.tutorial-help-pill` here would silently lose. */
body .tutorial-help-pill { right: calc(var(--pill-cluster-right, 1rem) + var(--pill-admin-slot, 0rem)); }

/* The Status/Check-in badge is leftmost, so it clears both. It also joins the cluster at the top,
   overriding its own default top:4.5rem and the (max-width: 991px) "centered in the nav bar" block
   further up — left/transform are reset here so that block's left:50% + translateX(-50%) can't
   fight the right-anchored offset at any width. */
.here-badge {
    top: var(--pill-cluster-top, 0.5rem);
    left: auto;
    transform: none;
    right: calc(var(--pill-cluster-right, 1rem) + var(--pill-admin-slot, 0rem) + var(--pill-help-slot, 0rem));
}

/* ── QL-34 — RE-MEASURED 2026-08-07, ALREADY FIXED. Do not re-open on the old evidence. ──────
   QL-34 reported that on pages with NO tutorial (About, HelpHub) the floating moderation badge
   renders ON TOP of the "@ Home" check-in pill, and diagnosed it as "the check-in pill's
   right-offset does not include the same terms in both states". That was true of the per-
   combination `body.has-x.has-y .here-badge` ladder, which was REPLACED by the three-term slot
   sum above on 2026-08-06 — the same day QL-34's screenshots were taken. The finding describes
   the code as it was that morning, not as it is.

   VERIFIED by injecting the real .admin-review-fab and .here-badge markup into a live /About
   (a no-tutorial page: #tutorialHelpPill is absent entirely and tutorial.js never loads, so
   --pill-help-slot correctly computes to 0rem while --pill-admin-slot is 3rem) and reading the
   rects the live stylesheet produced. Clearance between the check-in pill's right edge and the
   admin pill's left edge, by badge label:
       "7"    fab 30px wide  → 18px gap   no overlap
       "549"  fab 39px wide  →  9px gap   no overlap
       "99+"  fab 41px wide  →  7px gap   no overlap

   ⚠ THE MARGIN IS THIN, AND QL-32 IS WHAT KEEPS IT SAFE. The slot is 3rem = 48px. A FOUR-digit
   count would render the admin pill ~48px wide and overlap again. Since 2026-08-07 the pill's
   text goes through AppMessages.BadgeCount (Site.Master.vb SetAdminBadge), which caps at "99+",
   so the widest it can ever be is the 41px measured above. If anyone ever removes that cap,
   this overlap comes straight back — raise --pill-admin-slot at the same time. */

/* ── Member photo gallery (PhotoGallery.ascx / Scripts/photo-gallery.js) ─────────
   Thumbnail grid on the event/group detail page. Thumbnails are <a href=full-res
   data-lb-group><img thumb></a>, so site.js's global lightbox handles enlarge +
   Back/Next. Tokens are theme-aware, so light/dark both work. */
.epg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin: 10px 0;
}
/* display:grid otherwise beats the UA [hidden] rule, so an empty grid would still
   reserve its margins and leave a blank line above the "No photos yet" state. */
.epg-grid[hidden] { display: none; }
.epg-tile {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-sm, 6px);
    overflow: hidden;
    background: var(--color-border);
}
.epg-tile > a { display: block; width: 100%; height: 100%; }
.epg-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.epg-del {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: none;
    border-radius: 12px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.epg-del:hover { background: rgba(0, 0, 0, .75); }
.epg-del-armed {
    background: var(--color-danger, #c62828);
    font-size: .72rem;
    font-weight: 600;
    padding: 0 8px;
}
.epg-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.epg-count { font-weight: normal; color: var(--color-text-muted); }
.epg-remaining { color: var(--color-text-muted); }
.epg-empty { margin: 6px 0; }
.epg-status { min-height: 1.2em; margin-top: 6px; }
.epg-status-err { color: var(--color-danger, #c62828); }

/* ── Contact Us Log (ContactUsLog.aspx) de-overwhelm refresh ─────────────────
   Master/detail two-pane on desktop; self-identifying rows (type + message
   snippet); one merged Status column with a subtle "Closed" caption + dimmed
   row; client-tracked unread-reply "NEW" pip; inline "Add More Information"
   reply box; loading spinner. qMeet-only — the cuv-*/cus-* base classes live
   in styles_shared.css; these are additive (no cascade-order dependency). */
.cus-layout { display: flex; gap: 1rem; align-items: flex-start; }
.cus-layout > .cus-list-card { flex: 1 1 60%; min-width: 0; }
.cus-layout > .cus-detail-card { flex: 1 1 40%; position: sticky; top: 1rem; align-self: flex-start; }
@media (max-width: 900px) {
    .cus-layout { flex-direction: column; }
    .cus-layout > .cus-list-card,
    .cus-layout > .cus-detail-card { flex: 1 1 auto; width: 100%; position: static; }
}

.cus-summary { margin-bottom: 0.75rem; }
.cus-unread-badge {
    display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px;
    background: var(--color-primary); color: #fff; font-weight: 700;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
    vertical-align: 1px;
}

/* Self-identifying rows: bold type + muted one-line message snippet. */
.cuv-subject { font-weight: var(--font-weight-medium, 600); }
.cuv-snippet {
    color: var(--color-text-muted); font-size: 0.8rem; margin-top: 0.1rem;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; max-width: 46ch;
}
.cuv-site {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 6px;
    background: var(--color-bg-subtle, #f1f3f5); color: var(--color-text-muted);
    font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}
/* Closed rows recede; a small caption states it (replaces the old column). */
.cuv-row-closed td { opacity: 0.6; }
.cuv-oc-closed {
    display: inline-block; margin-left: 0.4rem; font-size: 0.66rem;
    color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em;
    vertical-align: middle;
}
/* Unread admin reply: bold row + a "NEW" pip on the reply badge. */
.cuv-row.cuv-unviewed td { font-weight: var(--font-weight-medium, 600); }
.cuv-row.cuv-unviewed .cuv-reply-badge::after {
    content: "NEW"; margin-left: 0.35rem; padding: 0.02rem 0.3rem; border-radius: 999px;
    background: var(--color-primary); color: #fff; font-size: 0.58rem; font-weight: 800;
    letter-spacing: 0.04em; vertical-align: 1px;
}

/* Detail card: title bar + loading spinner + reply box. */
.cus-detail-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0; }
.cus-loading { text-align: center; padding: 2.5rem 1rem; color: var(--color-text-muted); }
.cus-spinner {
    display: inline-block; width: 1.6rem; height: 1.6rem; vertical-align: middle;
    border: 3px solid var(--color-primary-light, #e0f6fe);
    border-top-color: var(--color-primary, #0090c8);
    border-radius: 50%; animation: cus-spin 0.7s linear infinite;
}
@keyframes cus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cus-spinner { animation: none; } }
.cus-reply-box { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.cus-reply-hint { margin: 0.15rem 0 0.4rem; }
.cus-reply-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 0.5rem; }
.cus-reply-actions #cusReplyStatus { margin-right: auto; }

/* ══════════════════════════════════════════════════════════════════════
   Contact Us — intent tiles + progressive-disclosure form (qMeet-only).
   Paired with ContactUs.ascx. Five friendly tiles replace the old 16-option
   feedback-type dropdown as the first decision; the native <select> is kept
   visually hidden (.cu-type-fallback) for the server model + no-JS fallback.
   Loaded BEFORE styles_shared.css, so overrides of shared .cu-file-drop use a
   compound selector to win on specificity regardless of order.
   ══════════════════════════════════════════════════════════════════════ */

/* Light section grouping + subtle titles */
.cu-section { margin-bottom: 1.25rem; }
.cu-section-title {
    margin: 0 0 0.6rem;
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-md, 1rem);
    color: var(--color-text);
}
.cu-section-title-sub {
    margin: 0 0 0.4rem;
    font-weight: var(--font-weight-medium, 600);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
}

/* Intent tiles — responsive auto-fit grid of selectable cards */
.cu-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
}
.cu-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: left;
    padding: 0.85rem 0.9rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-card);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                background-color var(--transition-fast), transform var(--transition-fast);
}
.cu-tile:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
.cu-tile:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus-ring);
}
.cu-tile.is-selected {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    box-shadow: var(--shadow-focus);
}
.cu-tile-icon  { font-size: 1.5rem; line-height: 1; }
.cu-tile-label { font-weight: var(--font-weight-bold, 700); font-size: 0.98rem; }
.cu-tile-desc  { font-size: 0.82rem; color: var(--color-text-muted); }

/* Contextual refine dropdown sits just under the tiles */
.cu-refine { margin-top: 0.9rem; }

/* Native dropdown fallback — visually hidden while JS drives the tiles.
   The <noscript> block in ContactUs.ascx un-hides it for scripting-off. */
.cu-type-fallback {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Step-2 form, revealed once a tile is chosen (JS removes .d-none) */
.cu-rest { margin-top: 0.25rem; }
.cu-priority { margin-bottom: 0.5rem; }

/* Inviting screenshot zone — resting dashed border + soft tint + a CTA line.
   Compound selector beats shared .cu-file-drop (transparent border) on
   specificity so it wins regardless of bundle order; the shared
   .cu-file-drop.cu-file-dragover rule still takes over on dragover. */
.cu-file-drop.cu-shot-zone {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-bg-input) 45%, transparent);
}
.cu-shot-cta {
    margin: 0 0 0.5rem;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
}

/* Reply-to hint (signed-in users whose email we already know) */
.cu-reply-ask    { margin-top: 0.5rem; }
.cu-reply-detail { margin-top: 0.25rem; }
.cu-reply-hint {
    margin-bottom: 0.6rem;
    font-size: var(--font-size-sm, 0.9rem);
    color: var(--color-text);
}
.cu-reply-change {
    margin-left: 0.35rem;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* On the narrowest screens, keep tiles two-up rather than a single tall column */
@media (max-width: 480px) {
    .cu-tiles { grid-template-columns: 1fr 1fr; }
}

/* ── ContactUs round 2: previews/paste/camera, drafts, deflection, notices ──── */

/* Per-intent icon chips — a subtle colour hint per tile (calm, no full-card fill).
   Semi-transparent so they read in both light and dark. Overrides the earlier
   .cu-tile-icon (later rule, same specificity → wins). */
.cu-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    font-size: 1.25rem;
    line-height: 1;
}
.cu-tile[data-intent="problem"] .cu-tile-icon { background: rgba(255, 149, 64, 0.16); }
.cu-tile[data-intent="idea"]    .cu-tile-icon { background: rgba(46, 190, 120, 0.16); }
.cu-tile[data-intent="abuse"]   .cu-tile-icon { background: rgba(240, 82, 82, 0.15); }
.cu-tile[data-intent="help"]    .cu-tile-icon { background: rgba(0, 176, 240, 0.16); }
.cu-tile[data-intent="other"]   .cu-tile-icon { background: rgba(150, 140, 190, 0.16); }

/* Draft-restore prompt */
.cu-draft-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius-sm);
    background: color-mix(in srgb, var(--color-accent-light) 55%, transparent);
    font-size: var(--font-size-sm, 0.9rem);
}
.cu-draft-actions { display: inline-flex; gap: 0.9rem; margin-left: auto; }

/* Inline contextual notices */
.cu-abuse-note { margin-bottom: 0.9rem; }
.cu-deflect    { margin-bottom: 0.9rem; }
.cu-nudge,
.cu-frompage   { margin: 0.35rem 0 0; }
.cu-frompage-remove,
.cu-send-eta   { /* inherit sizing; declared for clarity */ }
.cu-send-eta   { margin: 0 0 0.6rem; text-align: right; }

/* Screenshot thumbnails (removable previews) */
.cu-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.cu-thumbs:empty { display: none; }
.cu-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-input);
}
.cu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.cu-thumb-remove:hover { background: rgba(0, 0, 0, 0.82); }

/* Mobile-only "Take Photo" camera button (capture opens the camera). */
.cu-camera-btn { display: none; }
@media (hover: none) and (pointer: coarse) {
    .cu-camera-btn { display: inline-flex; }
}

/* ── Segmented toggle over a 2–3 option <select> (site.js initSegSelects) ──────────
   Progressive enhancement used on EditEvent / EditGroup for the small Yes/No and
   Enable/Disable settings. The native .seg-select stays in the DOM (so it still posts
   its value) but is hidden once its .seg-control twin is built; with JS off, the
   select just renders normally. */
.seg-select.seg-enhanced { display: none; }
.seg-control {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, 10px);
    max-width: 100%;
}
.seg-option {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.4rem 0.9rem;
    min-height: 38px;
    border-radius: var(--border-radius-sm, 7px);
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.seg-option:hover { color: var(--color-text); background: var(--color-primary-light); }
.seg-option:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* aria-checked = the <button> twins above (radio semantics); aria-current = the same
   control built from LINKS, where each option is a real navigation (PublicProfile's
   audience preview). Same look, correct ARIA for each. */
.seg-option[aria-checked="true"],
.seg-option[aria-current] {
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--font-weight-medium, 600);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.15));
}
/* Anchor options need the link underline/colour cancelled and the same box model the
   <button> options get for free. */
a.seg-option, a.seg-option:hover, a.seg-option:focus { text-decoration: none; }
a.seg-option { display: inline-flex; align-items: center; }
a.seg-option[aria-current]:hover { color: #fff; background: var(--color-primary); }

/* ── PublicProfile self-view audience preview bar ─────────────────────────────────
   Shown ONLY on your own profile: three tiers (signed-out visitor / any member /
   mutual contact) that re-render the page through that audience, plus a line saying
   what the current tier can see. Sits above every state on the page — including the
   "profile is private" one, which is itself a preview answer you must be able to
   switch back out of. Same accent-edged quiet box as .publish-checklist. */
.pp-audience {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.pp-audience-eyebrow { display: block; margin-bottom: 0.4rem; font-weight: var(--font-weight-bold, 700); }
.pp-audience-tabs { max-width: 100%; }
.pp-audience-note { margin: 0.5rem 0 0; }

/* ── "Ready to publish" checklist (EditEvent Publish card; ticked live by the page
   script). Quiet accent-edged box; each item flips ○ → ✓ as its field fills in. ── */
.publish-checklist {
    margin: 0 0 0.85rem;
    padding: 0.6rem 0.8rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.publish-checklist-title { display: block; margin-bottom: 0.35rem; font-weight: var(--font-weight-bold, 700); }
.publish-checklist ul { list-style: none; margin: 0; padding: 0; }
.publish-checklist li {
    position: relative;
    margin: 0.2rem 0;
    padding-left: 1.6rem;
    color: var(--color-text-muted);
}
.publish-checklist li::before {
    content: "\25CB";               /* ○ */
    position: absolute; left: 0.2rem; top: 0;
    color: var(--color-text-muted);
}
.publish-checklist li.done { color: var(--color-text); }
.publish-checklist li.done::before {
    content: "\2713";               /* ✓ */
    color: var(--color-success, #2e7d32);
    font-weight: 700;
}
.publish-checklist li.publish-check-static::before { content: "\1F3F7\FE0F"; }  /* 🏷️ */
/* The tag item keeps its 🏷️ marker while it is UNTICKED, so it still reads as
   "the tag one"; ticking it swaps in the ✓ like every other item (the .done rule
   above wins on source order). .is-na = this audience needs no tag at all. */
.publish-checklist li.publish-check-tag::before { content: "\1F3F7\FE0F"; }
.publish-checklist li.publish-check-tag.done::before {
    content: "\2713";
    color: var(--color-success, #2e7d32);
    font-weight: 700;
}
.publish-checklist li.is-na { display: none; }

/* ── EditEvent "who can see this" status strip ────────────────────────────────
   ALWAYS VISIBLE, in every state — it replaced a collapsed <p hidden> disclosure
   and a warning-only banner, so nothing here may depend on a click to appear.

   🔴 Nothing in this block is toggled with the `hidden` ATTRIBUTE. Several of these
   elements carry an author `display` rule, and an author display rule beats the UA
   `[hidden] { display: none }` — so [hidden] on them would be silently inert. The
   strip's own classes (.has-pending / .show-gates / .is-na) do all the switching. */
.vis-strip {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-text-muted);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.vis-strip.is-live    { border-left-color: var(--color-success, #2e7d32); }
.vis-strip.is-hidden  { border-left-color: var(--color-warning, #f0ad4e); }
.vis-strip.is-new     { border-left-color: var(--color-primary); }
.vis-strip.is-removed { border-left-color: var(--color-danger, #d9534f); }

/* EditEvent's "📋 Event or 🤝 Meetup?" card — the first decision on the page, and the one
   that decides which fields the rest of it even renders. Given the same violet left edge as
   a meetup card in search results so the two are recognisably about the same axis.
   Deliberately NOT a <details> in the markup: on the initial GET of a new event every card
   on that page renders collapsed, and this one holds a REQUIRED field. */
.kind-card { border-left: 4px solid #6d28d9; }
/* The type dropdown inside the 🤝 Create Meetup popup — matches the spacing of the
   .meetup-linkbox that follows it, so the popup's two questions read as a pair. */
.meetup-kindbox { margin-bottom: .75rem; }

.vis-strip-head { margin: 0; }
.vis-strip .vis-strip-head b { font-weight: var(--font-weight-bold, 700); }

/* The gate checklist. Hidden once every gate is cleared and nothing is pending —
   a finished checklist is noise — and re-shown by .show-gates when an unsaved
   change on the form would take the event back off. */
.vis-strip-gates,
.vis-strip-aud { display: none; }
.vis-strip.is-hidden .vis-strip-gates,
.vis-strip.is-new .vis-strip-gates,
.vis-strip.show-gates .vis-strip-gates,
.vis-strip.is-hidden .vis-strip-aud,
.vis-strip.is-new .vis-strip-aud,
.vis-strip.show-gates .vis-strip-aud { display: block; }

.vis-strip-gates { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.vis-strip-gates li {
    position: relative;
    margin: 0.3rem 0;
    padding-left: 1.7rem;
    color: var(--color-text-muted);
}
.vis-strip-gates li::before {
    content: "\25CB";                                   /* ○ */
    position: absolute; left: 0.2rem; top: 0;
    color: var(--color-text-muted);
}
.vis-strip-gates li.done { color: var(--color-text); }
.vis-strip-gates li.done::before {
    content: "\2713";                                   /* ✓ */
    color: var(--color-success, #2e7d32);
    font-weight: 700;
}
/* This gate doesn't apply to the audience currently selected (only a public event
   needs a tag), so it is removed rather than shown permanently unticked. */
.vis-strip-gates li.is-na { display: none; }

.vis-strip-aud,
.vis-strip-note { margin: 0.5rem 0 0; color: var(--color-text-muted); font-size: 0.92rem; }

/* Unsaved-change line — filled and switched on by the page script only. */
.vis-strip-pending { display: none; margin: 0.55rem 0 0; font-size: 0.92rem; }
.vis-strip.has-pending .vis-strip-pending { display: block; }
.vis-strip-pending.is-warn { color: var(--color-danger, #d9534f); font-weight: var(--font-weight-medium, 600); }

/* ── EditEvent inline 🏷️ Tags picker ──────────────────────────────────────────
   Reuses the .met-tag / .met-add chip vocabulary from EditEventTags so the two
   surfaces look like the same picker. Only the two STAGED states are new, and they
   exist because this page saves on ✓ Save rather than on the tap. */
.et-tag.is-staged {
    border-style: dashed;
    border-color: var(--color-save-btn, #32cd32);
    background: var(--color-success-bg, #e8f5e9);
}
.et-tag.is-removing {
    opacity: 0.55;
    border-style: dashed;
    border-color: var(--color-text-muted);
    background: transparent;
}
.et-tag.is-removing .met-tag-name { text-decoration: line-through; }

/* The empty-state line and the results row are switched by .is-empty on their own
   container's parent card, never by [hidden] — see the note at the top of this block. */
#etTagEmpty { display: none; margin: 0.3rem 0 0; }
#cardTags.et-no-tags #etTagEmpty { display: block; }
/* .met-tags is display:flex, so an empty chip row would still take its margin. */
#etTagCurrent:empty { display: none; }
#etTagStatus { margin: 0.5rem 0 0; }
#etTagStatus:empty { display: none; }
#etTagResults:empty { display: none; }
#etTagResults { margin-top: 0.5rem; }

/* ── Contact Us Log — round 2 (filters, timeline, attachments, self-close) ───
   Builds on the v352 .cus-*/.cuv-* block above. qMeet-only. */

/* Filter / search / sort bar */
.cus-filterbar {
    display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; align-items: flex-end;
    margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-border);
}
.cus-filter-field { display: flex; flex-direction: column; gap: 0.2rem; }
.cus-filter-label {
    font-size: 0.68rem; font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.cus-filterbar .cus-filter-ctl { min-width: 8.5rem; margin: 0; }
.cus-filter-search { flex: 1 1 12rem; }
.cus-filter-search .cus-filter-ctl { width: 100%; min-width: 0; }
.cus-filter-actions { display: flex; gap: 0.4rem; }
@media (max-width: 640px) {
    .cus-filter-field, .cus-filter-search, .cus-filter-actions { flex: 1 1 100%; }
    .cus-filterbar .cus-filter-ctl { width: 100%; }
    .cus-filter-actions .button { flex: 1 1 auto; }
}

/* "Your turn" chip on a list row + whose-turn banner in the detail */
.cuv-turn {
    display: inline-block; margin-left: 0.4rem; padding: 0.02rem 0.4rem; border-radius: 999px;
    background: var(--color-primary-light, #e0f6fe); color: var(--color-primary, #0090c8);
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: 1px;
}
.cus-turn { padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; }
.cus-turn-you {
    background: var(--color-primary-light, #e0f6fe); color: var(--color-primary-dark, var(--color-primary, #0090c8));
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.cus-turn-us { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* "Regarding <entity>" chip */
.cus-regarding {
    display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px;
    background: var(--color-bg-subtle, #f1f3f5); color: var(--color-text);
    font-size: 0.75rem; font-weight: 600; text-decoration: none; border: 1px solid var(--color-border);
}
a.cus-regarding:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Conversation timeline */
.cus-thread { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.cus-msg { border-radius: 10px; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); }
.cus-msg-you { background: var(--color-bg); }
.cus-msg-us {
    background: var(--color-info-bg); border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}
.cus-msg-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; margin-bottom: 0.2rem; }
.cus-msg-who { font-weight: 700; font-size: 0.8rem; }
.cus-msg-when { color: var(--color-text-muted); font-size: 0.72rem; white-space: nowrap; }
.cus-msg-body { white-space: pre-wrap; }

/* Attachments */
.cus-attach-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.cus-attach-img { display: block; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); }
.cus-attach-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cus-attach-file {
    display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.6rem;
    border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg);
    font-size: 0.8rem; text-decoration: none; color: var(--color-text); max-width: 14rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cus-attach-img:hover, .cus-attach-file:hover { border-color: var(--color-primary); }

/* Reply tools + close/reopen actions */
.cus-reply-tools { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.cus-detail-actions { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; }

/* Nav unread-reply count on the "Contact Us Log" item */
.nav-reply-badge {
    display: inline-block; min-width: 1.15rem; padding: 0 0.35rem; margin-left: 0.35rem;
    border-radius: 999px; background: var(--color-primary, #0090c8); color: #fff;
    font-size: 0.68rem; font-weight: 800; line-height: 1.25rem; text-align: center; vertical-align: 1px;
}

/* ── Contact Us Log — round 3 (attachment lightbox) ────────────────────────── */
.cus-attach-img { cursor: zoom-in; }
.cus-lightbox {
    position: fixed; inset: 0; z-index: 4000; display: none;
    align-items: center; justify-content: center; gap: 0.5rem;
    background: rgba(0, 0, 0, 0.82); padding: 2rem 1rem;
}
.cus-lightbox.cus-lb-on { display: flex; }
.cus-lb-fig { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.cus-lb-img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); background: #fff; }
.cus-lb-cap { color: #fff; font-size: 0.8rem; opacity: 0.85; max-width: 92vw; text-align: center; word-break: break-word; }
.cus-lb-close {
    position: absolute; top: 0.75rem; right: 1rem; width: 2.4rem; height: 2.4rem;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff;
    font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.cus-lb-close:hover { background: rgba(255, 255, 255, 0.28); }
.cus-lb-nav {
    flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.cus-lb-nav:hover { background: rgba(255, 255, 255, 0.28); }
@media (max-width: 640px) {
    .cus-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
    .cus-lb-prev { left: 0.5rem; }
    .cus-lb-next { right: 0.5rem; }
}

/* ── EditEvent/EditGroup "how members will see it" live preview (page scripts fill it) ── */
.edit-preview { margin-top: 0.85rem; }
.edit-preview-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-muted);
}
.edit-preview-card {
    padding: 0.7rem 0.85rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent, var(--color-primary));
    border-radius: var(--border-radius-sm);
}
.edit-preview-title { font-size: 1.05rem; line-height: 1.25; font-weight: var(--font-weight-bold, 700); overflow-wrap: anywhere; }
.edit-preview-title.is-placeholder { color: var(--color-text-muted); font-weight: var(--font-weight-medium, 600); }
.edit-preview-meta { margin-top: 0.25rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.edit-preview-desc { margin: 0.4rem 0 0; color: var(--color-text); overflow-wrap: anywhere; }

/* ── Non-blocking inline warning (EditEvent date/time sanity hints) ── */
.edit-warn {
    margin: 0.15rem 0 0.4rem;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-warning, #e65100);
}
[data-theme="dark"] .edit-warn { color: #ff8a3d; }

/* ── Field quick-chips (Cost presets, Recurring quick-picks) — small pill buttons that fill a field ── */
.field-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.4rem; }
.field-chip {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 0.28rem 0.7rem;
    line-height: 1.2;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.field-chip:hover { color: var(--color-text); border-color: var(--color-primary); background: var(--color-primary-light); }
.field-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── Send-priority long-press menu ─────────────────────────────────────────
   Popup opened by QMeetSendMenu (Scripts/site.js) when a send button is long-
   pressed / right-clicked. Appended to <body> and position:fixed so it escapes
   the chat panes' overflow clipping and stays put while they scroll. z-index
   sits above the chat FAB (1000) and the notification bars. ── */
.send-menu {
    position: fixed;
    z-index: 1400;
    min-width: 14rem;
    padding: 0.3rem;
    border-radius: 0.6rem;
    /* --color-bg-card, NOT --color-surface: the latter is not defined in either
       stylesheet, so this served the literal #fff fallback and the menu stayed WHITE in
       dark mode — while `color: var(--color-text)` below correctly went light. That is
       why "Normal" and "Low Priority" (the only two items with no colour of their own)
       came out light-on-white. Same defect as the .wx-radar-body note further down. */
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #d0d7de);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    /* Was 0.1rem — 1.6px, which read as one continuous strip and gave a mis-tap no
       dead zone to land in. Together with the taller .send-menu-item padding below
       this is the "50% roomier" pass: measured row pitch 58.5px → 88px (+50%), with
       the dead zone between adjacent targets going 1.6px → 10.4px. */
    gap: 0.65rem;
    /* The roomier rows can outgrow a short viewport (phone in landscape). open() in
       site.js clamps `top` off menu.offsetHeight, which honours max-height, so the
       menu stays fully on-screen and scrolls internally instead of clipping its top. */
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.send-menu-item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    align-items: baseline;
    column-gap: 0.5rem;
    width: 100%;
    /* Vertical padding 0.5rem → 1.15rem. The two text rows (label + hint) are a fixed
       ~38px, so the padding is the only lever big enough to move the pitch by ~50%. */
    padding: 1.15rem 0.6rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text, #1f2328);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
}
.send-menu-item:hover,
.send-menu-item:focus-visible { background: rgba(127, 127, 127, 0.16); outline: none; }
/* Drag-select feedback: the entry the finger is currently over while the long press is still
   held. Touch has no :hover, so without this the "hold, slide onto Notify, let go" gesture
   gives no sign of which entry is armed until it has already fired. Stronger than :hover on
   purpose — it means "release now and THIS is what sends". */
.send-menu-item.is-armed {
    background: rgba(127, 127, 127, 0.30);
    box-shadow: inset 0 0 0 2px var(--color-primary, #0d6efd);
}
.send-menu-icon  { grid-row: 1 / span 2; font-size: 1rem; text-align: center; }
.send-menu-label { font-weight: 600; }
/* Second row of the text column — why you'd pick this level. */
.send-menu-hint  { grid-column: 2; font-size: 0.72rem; opacity: 0.7; }
/* Tint each level to match the badge colours the sent message will carry — but per
   THEME. The old single values were picked against the (accidentally) always-white menu:
   pure #ff00ff on white is only ~3.1:1 and #c96a00 ~4.4:1, both under the 4.5:1 minimum
   for this bold-but-small label, and once the menu correctly goes dark they were the
   wrong direction entirely. Light mode darkens each hue, dark mode lightens it. */
.send-menu-urgent      .send-menu-label { color: #b300b3; }
.send-menu-urgentquiet .send-menu-label { color: #b81fb8; }
.send-menu-notify      .send-menu-label { color: #a85400; }
[data-theme="dark"] .send-menu-urgent      .send-menu-label { color: #ff6bff; }
[data-theme="dark"] .send-menu-urgentquiet .send-menu-label { color: #e79ee7; }
[data-theme="dark"] .send-menu-notify      .send-menu-label { color: #ffa14a; }
/* "Muted" for Urgent (Don't Notify) is carried by its lighter hue + its own hint text
   ("no push or text"), NOT by an opacity that would push it back under contrast. */
.send-menu-low    .send-menu-label { opacity: 0.75; }

/* ── EditEvent "Use a park as the venue" picker (Place card) ──────────────────
   Opt-in <details> that searches the shared parks catalog and prefills the venue
   fields. Minimal on purpose — a convenience shortcut, not a redesign. */
.park-venue-picker { margin: 0 0 0.75rem; }
.park-venue-picker > summary { cursor: pointer; display: inline-block; margin-bottom: 0.5rem; }
.park-venue-search { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.park-venue-search .textbox { flex: 1 1 12rem; min-width: 0; }
.park-venue-results { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.park-venue-results li { margin: 0; }
.park-venue-empty { padding: 0.4rem 0.1rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.park-venue-result {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 0.45rem 0.6rem; margin-bottom: 0.35rem;
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
    background: transparent; color: var(--color-text);
}
.park-venue-result:hover,
.park-venue-result:focus { background: var(--color-primary-light, rgba(0,0,0,0.04)); border-color: var(--color-primary, #0090C8); }
.park-venue-name { display: block; font-weight: var(--font-weight-bold, 600); }
.park-venue-meta { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* The 50-mile pin map under the same picker. Shorter than .search-map (460px) because it
   sits INSIDE two nested <details> in a form — tall enough to read a metro, short enough
   that the venue fields it fills stay within a scroll of it.
   z-index:0 (as on .search-map) keeps Leaflet's panes under the site's sticky chrome.
   The two [hidden] rules are NOT redundant: `hidden` is a UA-stylesheet rule, so ANY
   author `display:` on these elements (the one below, .note's inherited block) would
   out-rank it and render them while the script still believes they're hidden. */
.park-venue-map-wrap { margin-top: 0.75rem; }
.park-venue-map {
    display: block; height: 320px; width: 100%;
    border-radius: 10px; border: 1px solid rgba(128, 128, 128, .35);
    margin: 0.4rem 0; z-index: 0;
}
.park-venue-map[hidden] { display: none; }
#parkVenueMapHelp[hidden] { display: none; }
/* Leaflet's own cursor is a grab hand; over a pin the click COMMITS a venue, so say so. */
.park-venue-map .leaflet-interactive { cursor: pointer; }

/* ── Join wizard: "saved when you finish step 4" line + the resume offer ──────────
   qMEET-only for now, so it lives here rather than in Shared/styles_shared.css with
   the rest of the .join-* family (section 38a there) — no sister site emits either
   class. If PacklistPRO / qFIT / NobodyHasTHIS ever adopt the draft, promote these
   into the shared sheet instead of copying them, the way .checkbox-row was.

   Everything below is built from design tokens, so both blocks follow the light/dark
   theme without a second rule set. */

/* The assurance line, between the step dots and the card. Deliberately quieter than
   .join-question and calmer than an .alert-panel: it is standing reassurance on every
   one of steps 1-3, not an alert, and an alert-coloured strip on all three steps would
   read as "something is wrong" three times on the way to signing up. */
.join-assurance {
    max-width: 540px;
    margin: 0 auto 1rem;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.45;
}
/* The draft clause starts hidden and is revealed by Scripts/join-draft.js only once a
   real localStorage write has succeeded. `hidden` is a UA-stylesheet rule, so ANY author
   `display:` reaching this span would out-rank it and leak an unearned promise onto the
   page; this states it at author level so it cannot lose. */
.join-assurance [hidden] { display: none; }

/* The offer itself — injected as the first child of .join-card by join-draft.js, and
   only for a visitor who actually has a draft. */
.join-resume {
    margin: 0 0 1.1rem;
    padding: 0.85rem 1rem;
    background: var(--color-primary-light);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius);
}
.join-resume-title {
    margin: 0 0 0.3rem;
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-text);
    font-size: 1.02rem;
}
.join-resume-text {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.45;
    overflow-wrap: break-word;
}
/* Own flex row rather than .form-actions: this sits INSIDE the card above the real form
   controls, and .form-actions' top margin is tuned for the bottom of a form. Wraps so the
   two full-word labels stack instead of squeezing on a narrow phone. */
.join-resume-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ── All qMEET Pages (AllPages.aspx) — the trusted/admin site map ─────────────
   Colour IS the content on this page, so each row class sets one custom property
   (--ap-c) and the dot plus the left rule both read it. Dark mode is handled by
   [data-theme="dark"] — the site's own switch, set on <html> — and NOT by
   prefers-color-scheme, which would ignore a member who picked a theme in
   Preferences. The four light values go muddy on a dark card (orange and red
   converge), so dark gets its own lightened set rather than reusing them.

   Colour is never the ONLY signal: every dot carries a title= naming the
   audience, and the legend spells the four out in words. */
.ap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin: 0.75rem 0 0.25rem;
}

.ap-key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.ap-key b { font-weight: var(--font-weight-bold, 600); }

.ap-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--ap-c, var(--color-text-muted));
    flex: 0 0 auto;
    display: inline-block;
}

.ap-anon    { --ap-c: #1f9d4d; }   /* anyone, including signed out */
.ap-login   { --ap-c: #c9a227; }   /* signed-in members */
.ap-trusted { --ap-c: #d97706; }   /* trusted users */
.ap-admin   { --ap-c: #c0392b; }   /* admins */

.ap-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ap-filter-row .textbox {
    flex: 1 1 16rem;
    max-width: 26rem;
}

.ap-group-title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold, 600);
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
}

.ap-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0 0.4rem 0.6rem;
    border-left: 3px solid var(--ap-c, var(--color-text-muted));
    margin-bottom: 0.15rem;
}

/* .ap-dot survives in the LEGEND only - the owner removed it from the rows
   (2026-08-02), where the left rule already carries the colour. */
.ap-file {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* min-width:0 lets a long descriptor wrap inside the flex child instead of
   forcing the row wider than the card. */
.ap-body { min-width: 0; }

.ap-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}

.ap-name {
    font-weight: var(--font-weight-bold, 600);
    text-decoration: none;
    color: var(--color-link);
}

.ap-name:hover,
.ap-name:focus-visible { text-decoration: underline; color: var(--color-link-hover); }

.ap-tag {
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 0 0.4rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.ap-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

.ap-warn {
    font-size: 0.85rem;
    color: #b3541e;
    margin-top: 0.15rem;
}

.ap-flaglist { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.ap-flaglist li { margin-bottom: 0.35rem; }

[data-theme="dark"] .ap-anon    { --ap-c: #46c46f; }
[data-theme="dark"] .ap-login   { --ap-c: #e3c04a; }
[data-theme="dark"] .ap-trusted { --ap-c: #f59e42; }
[data-theme="dark"] .ap-admin   { --ap-c: #ef6b5c; }
[data-theme="dark"] .ap-warn    { color: #f0a071; }

/* ── Site Map (SiteMap.aspx) — the member-facing directory ────────────────────
   Sibling of the .ap-* block above, and deliberately NOT a reuse of it. AllPages
   is an audit map where colour IS the content (each row's left rule states who
   may open that page); this page only ever lists pages the viewer can already
   open, so there is nothing for a colour to say and the rows are plain. Keeping
   two small rule sets is what stops a future "make the site map prettier" edit
   from silently repainting the trusted page's access legend. */
.sm-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.sm-search-row .textbox {
    flex: 1 1 16rem;
    max-width: 26rem;
}

.sm-group-title {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
}

/* Two-plus columns once there is room. Sections run from 2 rows (Start here) to
   9 (Chat), so a fixed column count would leave the short ones stranded; auto-fill
   lets each section pick its own. 19rem is the narrowest a title plus a wrapped
   one-line description stays readable at. */
.sm-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0.1rem 1.2rem;
    margin-top: 0.6rem;
}

/* The whole cell is the hit area, not just the text of the link — a directory is
   read by pointing at rows. padding-left + the transparent border mean the hover
   rule appears without anything shifting sideways. */
.sm-row {
    position: relative;
    padding: 0.45rem 0.5rem 0.45rem 0.6rem;
    border-left: 3px solid transparent;
    border-radius: var(--border-radius-sm);
}

/* --color-hover-wash is the shared token for exactly this, and it is already
   defined twice (a dark wash for light mode, a light one for dark) — which is
   why this block needs no [data-theme] counterpart. */
.sm-row:hover,
.sm-row:focus-within {
    border-left-color: var(--color-link);
    background: var(--color-hover-wash);
}

.sm-name {
    font-weight: var(--font-weight-bold, 600);
    text-decoration: none;
    color: var(--color-link);
}

.sm-name:hover,
.sm-name:focus-visible { text-decoration: underline; color: var(--color-link-hover); }

/* Stretches the anchor over the whole cell so the row is clickable, while the
   anchor itself stays a normal inline link for a screen reader and for the
   focus ring. ::after rather than a wrapping <a> keeps the description outside
   the link text, which would otherwise be read out as part of the link name. */
.sm-name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sm-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

/* 🔴 REQUIRED, not tidiness. The search hides rows and sections with the [hidden]
   attribute, whose default display:none is a UA rule — any display: on .sm-row or
   .sm-group beats it on specificity and the "hidden" rows stay on screen. This is
   the line that makes the filter work. */
.sm-row[hidden],
.sm-group[hidden],
.sm-empty[hidden] { display: none; }

/* No dark-mode block: every colour above is a design token that already flips
   with the theme. The .ap-* set needs one only because it hardcodes four hex
   audience colours, which is exactly what this page has none of. */

/* ═══════════════════════════════════════════════════════════════════════════
   "N things are waiting for you" popup — the summary list (Site.Master's
   #todoPopupModal, built by BuildTodoPopupList).

   One row per CATEGORY, each a link to the Home card that owns it. Deliberately
   plainer than Home's own .home-todo-alerts: those are yellow standout boxes
   competing with a whole page around them, whereas this list already has a
   modal's full attention and nine yellow boxes in a dialog reads as an alarm.
   Rows are separated by hairlines instead, and the whole list scrolls rather
   than pushing the Close/Home Page buttons off a short screen.
   ═══════════════════════════════════════════════════════════════════════════ */
.todo-popup-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0.9rem;
    max-height: 45vh;
    overflow-y: auto;
}

.todo-popup-list li {
    padding: 0.5rem 0.1rem;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    line-height: 1.35;
}

.todo-popup-list li:last-child { border-bottom: none; }

/* The whole row is the target, not just the words — a one-line row in a modal
   is a small hit area otherwise, especially on a phone. */
.todo-popup-list .link {
    display: block;
    text-decoration: none;
    font-weight: var(--font-weight-medium, 600);
}

.todo-popup-list .link:hover,
.todo-popup-list .link:focus { text-decoration: underline; }

/* PAGE TAB STRIP (.page-tabs / .page-tab) MOVED 2026-08-04.
   It now lives in Shared/styles_shared.css, because the Help hub (X3) gave
   qFIT and PacklistPRO a second consumer alongside qMEET's Interests strip.
   Do NOT re-add a copy here: styles_shared.css loads AFTER this file, so a
   local copy would win the cascade on qMEET only and then drift from the
   other two sites. Emitted by InterestsTabs.ascx.vb and HelpTabs.ascx.vb. */

/* ============================================================================
   MY PLACES (MyPlaces.aspx + Scripts/map-overlays.js + Scripts/myplaces-page.js)

   Ported from PacklistPRO 2026-08-08 alongside the page. The class prefix is
   qm-mp-* here where PLP uses plp-mp-*; the .mp-* page classes kept their names
   (they are neutral and there is nothing to collide with on this site).
   ⚠ There are NO trip-overlay styles in this copy — qMEET has no "This Trip"
   layer, so the teal star / grey diamond pins and the layers control never render.
   ============================================================================ */

/* ── Pin markers (teardrop SVG + emoji/glyph) ── */
.qm-mp-pinwrap, .qm-mp-youdot { background: none; border: none; }
.qm-mp-pin { position: relative; width: 30px; height: 42px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.qm-mp-glyph {
  position: absolute; top: 6px; left: 0; width: 30px;
  text-align: center; font-size: 13px; line-height: 1; pointer-events: none;
}
/* The temporary placement pin (while adding/editing) — Leaflet tags draggable
   markers with this class; show a move cursor so it is clearly grabbable. */
.leaflet-marker-draggable, .leaflet-marker-draggable .qm-mp-pin { cursor: move; }

/* ── "That one" — the pulse that answers a click in the My Places list ──
   QMMap.focusPin adds .qm-mp-pulse to the MARKER WRAPPER for ~2s. The animation is on
   the inner .qm-mp-pin so it scales the artwork only: Leaflet positions the wrapper with
   its own transform, and animating that would tear the pin off its coordinates and walk
   it across the map. transform-origin sits at the tip (50% 100%) because the pin's anchor
   is its point — scaling from the centre would lift it off the spot it is marking.
   The colour flash is a drop-shadow rather than a background, since the marker is an SVG
   teardrop on a transparent wrapper and has no box to fill. */
.qm-mp-pulse .qm-mp-pin {
  animation: qm-mp-pulse 0.55s ease-in-out 0s 4;
  transform-origin: 50% 100%;
  z-index: 1;
}
@keyframes qm-mp-pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  50%  { transform: scale(1.35); filter: drop-shadow(0 0 8px var(--color-accent, #2aa0c4)); }
  100% { transform: scale(1);    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
}
/* Respect a system "reduce motion" setting: keep the highlight, drop the movement. A pin
   that grows and shrinks four times is exactly the kind of thing that setting is for. */
@media (prefers-reduced-motion: reduce) {
  .qm-mp-pulse .qm-mp-pin {
    animation: none;
    filter: drop-shadow(0 0 8px var(--color-accent, #2aa0c4));
  }
}

/* ── Add-a-pin toggle control on the map ── */
.qm-mp-addctl a {
  font-size: 17px; text-align: center; line-height: 30px;
  text-decoration: none; cursor: pointer;
}
.qm-mp-addctl a.active { background: #ffe9a8; }
[data-theme="dark"] .qm-mp-addctl a.active { background: #6b5a1e; }

/* ── Pin-detail popup ── */
.qm-mp-pop-title { font-weight: 600; font-size: .95rem; }
.qm-mp-pop-sub { color: var(--color-text-muted); font-size: .8rem; margin-top: 1px; }
/* The pin's street address. Wraps rather than clipping — in a popup the whole point is
   to be able to read the address, and a truncated one is worse than a two-line one. */
.qm-mp-pop-addr { margin-top: 4px; font-size: .8rem; line-height: 1.35; }
.qm-mp-pop-notes { margin-top: 4px; font-size: .85rem; }
/* Three actions (Edit / Hide / Remove) — wrap rather than overflow the popup, which is
   narrow on a phone. */
.qm-mp-pop-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; }
.qm-mp-pop-actions .link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }

/* ── Add/Edit a Place — a PAGE-LEVEL modal, not a Leaflet popup ──
   It uses the site's standard .modal-overlay/.modal-box shell (appended to <body> by
   map-overlays.js), so it sits on top of the page instead of being trapped inside — and
   clipped by — the map container, and its labels pick up the normal themed card colours
   in dark mode instead of Leaflet's hard-coded white popup chrome. */
.qm-mp-modal .modal-box { max-width: 420px; }

/* The × in the top-right corner is LOAD-BEARING, not decorative: a backdrop click and Esc
   deliberately do not close this dialog, and closing it throws away the pin and everything
   typed. Sized/positioned to match .tutorial-close so the two read as the same control.
   .modal-box is already position:relative, so this anchors to the dialog; the title
   reserves room for it rather than sliding under it. */
.qm-mp-editor .qm-mp-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.qm-mp-editor .qm-mp-close:hover { background: var(--color-bg-input); color: var(--color-text); }
.qm-mp-editor .modal-title { padding-right: 34px; }

.qm-mp-editor .qm-mp-field { margin-bottom: 10px; }
.qm-mp-editor .input-label { display: block; margin-bottom: 2px; color: var(--color-text); }
.qm-mp-editor .textbox { width: 100%; box-sizing: border-box; }
/* Notes is a two-line box. Its rows="2" attribute alone cannot deliver that: shared CSS
   gives every textarea.textbox a min-height of 2.5x the input height (~5 lines), and
   shared loads AFTER this file, so only a more specific selector wins. min-height:0
   hands the sizing back to rows="2"; the user can still drag it taller. */
.qm-mp-editor textarea.qm-mp-f-notes { min-height: 0; }
.qm-mp-editor .qm-mp-pop-actions { margin-top: 6px; }

/* Coordinate readout + the "Move Pin on the Map" escape hatch (the backdrop covers the
   map, so repositioning the pin is an explicit mode). */
.qm-mp-loc { margin: 2px 0 0; font-size: .82rem; color: var(--color-text-muted); }
.qm-mp-coords { font-variant-numeric: tabular-nums; }
/* The Address field under the coordinate readout. It is a real <input>, so it needs the
   field spacing every other row has; the note below it carries the "yours vs worked out
   from the pin" state and the reset link that switches back. */
.qm-mp-editor .qm-mp-addrfield { margin-top: 8px; }
.qm-mp-addrnote { margin: 3px 0 0; font-size: .78rem; line-height: 1.35; color: var(--color-text-muted); }
.qm-mp-addr-reset { background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; white-space: nowrap; color: var(--color-link, #2563eb); }
.qm-mp-loc .qm-mp-move { background: none; border: none; padding: 0; margin-left: 6px; cursor: pointer; font: inherit; text-decoration: underline; color: var(--color-link, #2563eb); }

/* Floating bar shown while the modal is tucked away for "Move Pin on the Map". Above the
   modal layer so it stays reachable, and clear of the bottom edge on a phone. */
.qm-mp-movebar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 2100;
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.9rem;
  background: var(--color-bg-card); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-lg, 10px);
  box-shadow: var(--shadow-xl, 0 8px 24px rgba(0,0,0,.3));
}
.qm-mp-movebar-text { font-size: .85rem; }

/* ── MyPlaces.aspx page ── */
.mp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-toolbar .mp-search { flex: 1 1 220px; min-width: 180px; }
.mp-map { height: 460px; border-radius: 8px; overflow: hidden; margin-top: 8px; }

/* Text-search results. These were pills (.mp-result-row, removed 2026-08-09) back when
   picking one only ever dropped a pin. They now carry a full address, a distance and TWO
   actions (＋ Save / 🧭 Route), none of which survives inside a pill — same reasoning that
   put the nearby-places picker on full-width rows above. */
.mp-result-list { list-style: none; margin: 6px 0 0; padding: 0; }
.mp-result {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-bottom: 1px solid var(--color-border);
}
.mp-result:last-child { border-bottom: none; }
/* Matches .mp-list-row.is-selected, because it means the same thing on both lists:
   "this is the one the map is showing you". */
.mp-result.active { background: var(--color-bg-input); box-shadow: inset 3px 0 0 0 var(--color-accent); border-radius: 4px; }
.mp-result-main {
  flex: 1 1 auto; min-width: 0;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: block;
}
.mp-result-main:hover .mp-result-name { text-decoration: underline; }
.mp-result-main:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.mp-result-name { display: block; font-weight: 600; }
.mp-result-sub {
  display: block; color: var(--color-text-muted); font-size: .8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-result-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.mp-result-actions .link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; white-space: nowrap; }

/* "Which of these are you at?" — the Search Nearby Places picker. Full-width two-line
   rows rather than the pills used for a text search: these carry a street address and a
   distance, which a pill would truncate into uselessness. Capped and scrolled so a dense
   city block (up to 15 hits) cannot push the map off the screen. */
.mp-detect-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 44vh; overflow-y: auto; }
.mp-detect-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 8px 10px; font: inherit; color: inherit; cursor: pointer;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm, 6px);
}
.mp-detect-item:hover, .mp-detect-item:focus-visible {
  background: var(--color-bg-input); border-color: var(--color-accent); outline: none;
}
.mp-detect-name { font-weight: 600; }
.mp-detect-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* The escape hatch sits in the same list but must not read as one of the candidates. */
.mp-detect-none { border-style: dashed; }

/* Card heading + the Sort picker on one line, wrapping to two on a narrow screen.
   The picker is hidden by the page until there are at least two places to sort. */
.mp-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mp-list-head .card-title { margin-bottom: 0; }
.mp-sort { display: flex; align-items: center; gap: 6px; }
/* Belt and braces (2026-08-10). `display: flex` is an author rule and the UA sheet's
   `[hidden] { display: none }` is not, so `hidden` would do nothing here — it works today
   only because qMEET's bootstrap.min.css happens to ship
   `[hidden]{display:none!important}`. PacklistPRO's bootstrap does NOT, and its Sort
   picker was showing unconditionally because of exactly that. Stated locally so this stops
   depending on a third-party file. */
.mp-sort[hidden] { display: none; }
/* The label sits INLINE beside the select here, so it must drop the block display and
   bottom margin .input-label gives it everywhere else. */
.mp-sort .input-label { margin: 0; display: inline; white-space: nowrap; }
.mp-sort .dropdown { width: auto; min-width: 9rem; }

.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--color-border); }
.mp-list-row:last-child { border-bottom: none; }
.mp-list-glyph { font-size: 20px; width: 26px; text-align: center; flex: 0 0 auto; }
.mp-list-main { flex: 1 1 auto; min-width: 0; }
/* .mp-list-main is a real <button> (clicking it points the map at that pin), so it has to
   give back everything a button brings: chrome, centring, the browser's font, and the
   inherited text colour. Alignment is restated because a button is not a block by default
   and would otherwise centre its three lines. */
.mp-list-focus {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: block; width: 100%;
}
.mp-list-focus:hover .mp-list-label { text-decoration: underline; }
.mp-list-focus:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.mp-list-label { display: block; font-weight: 600; }
.mp-list-addr { display: block; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-list-sub { display: block; color: var(--color-text-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-list-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
/* The three row actions are .button.transparent.small since 2026-08-10 (they were bare
   .link). Only two things are restated here: they must never wrap mid-label, and an <a>
   in the set has to sit on the same baseline as the two <button>s beside it. */
.mp-list-actions .button { white-space: nowrap; }
.mp-list-actions .link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; white-space: nowrap; }
.mp-list-actions .link.danger { color: var(--color-danger, #c0392b); }
.mp-list-row.mp-hidden { opacity: .55; }
/* The row whose pin the map is currently showing. A left bar + a tint rather than a border,
   which would shift every other row by a pixel as the selection moves down the list. */
.mp-list-row.is-selected {
  background: var(--color-bg-input);
  box-shadow: inset 3px 0 0 0 var(--color-accent);
  border-radius: 4px;
}
/* 🗺️ Maps is an <a>, not a <button>, so it needs the underline suppressed to sit level
   with 🧭 Route and ⋯ beside it. ⋯ gets a wider hit area — it is one glyph and is the
   only way to reach four of the six actions. */
.mp-list-actions .mp-gmaps, .mp-result-actions .mp-gmaps { text-decoration: none; }
.mp-list-actions .mp-gmaps:hover, .mp-result-actions .mp-gmaps:hover { text-decoration: none; }
/* ⋯ is one glyph and is the only way to reach four of the six actions, so it keeps a
   wider hit area than its label would give it. */
.mp-list-actions .mp-more { padding-left: 10px; padding-right: 10px; font-size: 1.05rem; line-height: 1.1; }

/* ── Phone layout ─────────────────────────────────────────────────────────────
   Owner, 2026-08-10: the name, the address and the category get the FULL width of
   the card, and the actions drop to a line of their own underneath.
   🔴 The breakpoint used to be 560px, which is narrower than the phones this is
   read on in landscape and than a small tablet — the actions stayed beside the
   text and squeezed the address into an ellipsis after a few characters. 767.98px
   is the site's own phone/tablet boundary.
   🛑 Do NOT try to force the full width with `flex: 1 1 100%` on .mp-list-body. A
   100% BASIS cannot share a line with the 26px .mp-list-glyph, so the glyph ends up
   stranded alone on the first row. The width comes from .mp-list-actions taking
   100% below: that drops them off the line, and the body's existing flex-grow then
   fills what is left beside the glyph. */
@media (max-width: 767.98px) {
  .mp-list-row { flex-wrap: wrap; align-items: flex-start; }
  /* The address can now use the whole width, so there is no reason to clip it to one
     line — wrap it instead of hiding the half that says WHICH Main St. */
  .mp-list-addr, .mp-list-sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .mp-list-actions { width: 100%; padding-left: 36px; flex-wrap: wrap; gap: 8px; }
  .mp-sort { width: 100%; }
  .mp-sort .dropdown { flex: 1 1 auto; }
  .mp-result { flex-wrap: wrap; }
  .mp-result-actions { width: 100%; }
}

/* ══ MyPlaces: where you are ══════════════════════════════════════════════════
   Sits directly under the map because that is what it acts on. Wraps to as many
   lines as it needs — on a phone the button, the checkbox and the interval each
   take their own row rather than being squeezed onto one. */
/* ⚠ ABOVE the map since 2026-08-10, not below it — so the spacing is margin-BOTTOM.
   A leftover margin-top here would push the whole group away from the toolbar above
   and leave the button floating in the middle of the gap. */
.qm-loc-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 10px 0 8px;
}
/* 🛑 THE BUTTON'S OWN ROW, AND THE MAP'S IMMEDIATE PREVIOUS SIBLING. It is a separate
   block rather than the first child of .qm-loc-bar precisely because that bar wraps:
   on a phone the checkbox / interval / status would wrap BELOW the button and end up
   between it and the map. Owner, 2026-08-10: "never with anything between the button
   and the map." Keep the bottom margin small so the pairing reads as deliberate. */
.qm-loc-actions { margin: 0 0 6px; }
/* 🛑 .qm-loc-opt and .qm-loc-every were deleted 2026-08-10 with the markup they styled —
   the "Keep Refreshing My Location" checkbox and its "Every ▾" interval picker. Those drove
   a second, polled location stream that ran alongside an always-on watch, so the controls
   could not be observed to do anything. See the 🛑 block in MyPlaces.aspx. */
.qm-loc-status { font-size: .8rem; color: var(--color-text-muted); }
.qm-loc-status:empty { display: none; }

/* ══ MyPlaces: the route panel ════════════════════════════════════════════════
   BELOW the map, never on it — see the markup comment in MyPlaces.aspx for why the
   on-map version was removed on PacklistPRO and must not come back. The colour
   SWATCH on each row is what ties a row to its line, since nothing on the map is
   labelled. */
.qm-rt { margin-top: 12px; }
.qm-rt[hidden] { display: none; }
.qm-rt-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.qm-rt-title { font-size: 1rem; font-weight: 600; margin: 0; flex: 1 1 auto; min-width: 0; }
.qm-rt-head .link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; white-space: nowrap; }
.qm-rt-gmaps { text-decoration: none; }
.qm-rt-gmaps:hover { text-decoration: underline; }

.qm-rt-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qm-rt-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; font: inherit; color: inherit; cursor: pointer;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm, 6px);
}
.qm-rt-opt:hover { border-color: var(--color-accent); }
.qm-rt-opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.qm-rt-opt.active { border-color: var(--color-accent); background: var(--color-bg-input); }
.qm-rt-opt.active .qm-rt-name { font-weight: 700; }
/* The swatch is load-bearing, not decoration: it is the ONLY thing connecting this row
   to one of the coloured lines on the map. Fixed size and never allowed to shrink. */
.qm-rt-swatch {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px;
  border-radius: 3px; border: 1px solid rgba(255, 255, 255, .6);
}
.qm-rt-text { display: flex; flex-direction: column; min-width: 0; }
/* 🛑 WRAPS, never truncates. RouteService returns a road name WHOLE on purpose — see the
   note on RouteLabel: a name cut mid-word ("via West 10 Mile Road, Walter P Reu…") can be
   genuinely ambiguous between two routes, which defeats the point of labelling them. */
.qm-rt-name { font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.qm-rt-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.qm-rt-status { margin-top: 8px; font-size: .85rem; color: var(--color-text-muted); }
.qm-rt-status:empty { display: none; }

/* The two engine settings. Absent from the DOM entirely when GoogleRoutes_Enabled is
   false, so these rules simply never match then. */
.qm-rt-settings { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.qm-rt-setting { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.qm-rt-setting > .checkbox { margin-top: .15rem; flex: 0 0 auto; }
.qm-rt-setting-note { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.qm-rt-setting[hidden] { display: none; }
/* ⚠ The CONTAINER needs its own [hidden] rule too, for the same reason the line
   above exists: `display: flex` here is an AUTHOR rule, and an author rule beats the
   UA stylesheet's `[hidden] { display: none }` no matter how specific. Without this,
   marking #mpAvoidBadWrap hidden does nothing and the checkbox shows permanently —
   including for members who have no marked roads for it to act on. */
.qm-rt-settings[hidden] { display: none; }

/* ══ The ⋯ action sheet ═══════════════════════════════════════════════════════
   Built by QMMap.openActionSheet, which since 2026-08-11 lives in the CROSS-SITE
   Shared\map-overlays.js rather than in a qMEET-only copy.

   🔴 THE ROWS ARE REAL <button> ELEMENTS NOW. This block used to borrow chat's
   .msg-actions-box / .msg-actions-list / .msg-action-item, and the qMEET fork built each
   row as <div role="button" tabindex="0"> with a hand-written Enter/Space handler to make
   it operable. PacklistPRO's fork of the same sheet used a plain <button>, which is
   keyboard-operable, focusable and announced correctly with no extra code at all. The
   merge kept the <button>, so the rules below replace the borrowed ones.

   ⚠ Borrowing chat's component was a REASONABLE call when this was a qMEET-only sheet —
   the note that used to sit here argued a second look-alike is what drifts, and it was
   right. It just stopped applying once the sheet became one shared implementation: the
   thing it must not drift from is now PacklistPRO's copy of the SAME FILE, not chat's. */
.qm-mp-sheet { max-width: 380px; }
.qm-mp-sheet .modal-title { margin-bottom: 10px; overflow-wrap: anywhere; }
.qm-mp-sheet-list { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm, 6px); overflow: hidden; }
.qm-mp-sheet-item {
  padding: 14px 16px; text-align: left; font: inherit; cursor: pointer;
  background: var(--color-bg-card); color: var(--color-text);
  border: none; border-bottom: 1px solid var(--color-border);
}
.qm-mp-sheet-item:last-child { border-bottom: none; }
.qm-mp-sheet-item:hover, .qm-mp-sheet-item:focus-visible { background: var(--color-bg-input); font-weight: 600; outline: none; }
.qm-mp-sheet-item.danger { color: var(--color-danger, #c0392b); }

/* ⚠ DEAD as of 2026-08-11 — kept for one release in case the sheet has to be reverted.
   .qm-mp-sheet-foot styled a .form-actions footer and .qm-mp-sheet-danger coloured a
   .msg-action-item row; the shared sheet emits .modal-footer and .qm-mp-sheet-item.danger
   instead, so nothing renders either class today. Delete both in the next cleanup pass. */
.qm-mp-sheet-foot { margin-top: 12px; justify-content: flex-end; }
.msg-action-item.qm-mp-sheet-danger { color: var(--color-danger, #c0392b) !important; }

/* ── MyPlaces: venue details (hours / phone / website / rating) ───────────────
   Rendered by QMMap.venueHtml() into BOTH the map popup (full) and each list row
   (compact). One renderer, one stylesheet block — see the note on venueHtml for
   why the two must not diverge.

   The three status colours are load-bearing, not decoration: `is-unknown` is what
   "we don't know the hours" and "closed for good" look like, and it must NOT read
   as the plain `is-shut` (closed right now, open tomorrow). Colour alone never
   carries it — the pill always has words in it too. */
.qm-vn { margin-top: 6px; }
.qm-vn-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qm-vn-status { font-size: .78rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.qm-vn-status.is-open { background: var(--color-success-bg, #e6f5ea); color: var(--color-success, #1e7e34); }
.qm-vn-status.is-shut { background: var(--color-surface-alt, #f1f1f1); color: var(--color-text-muted, #666); }
.qm-vn-status.is-unknown { background: var(--color-warning-bg, #fdf3e2); color: var(--color-warning-text, #8a6100); }
.qm-vn-rating, .qm-vn-price, .qm-vn-type { font-size: .78rem; color: var(--color-text-muted); white-space: nowrap; }
.qm-vn-dim { opacity: .75; }
.qm-vn-summary { margin-top: 4px; font-size: .82rem; color: var(--color-text-muted); }
.qm-vn-links { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 10px; }
.qm-vn-links .link { font-size: .82rem; }
.qm-vn-hours { margin-top: 5px; font-size: .82rem; }
.qm-vn-hours > summary { cursor: pointer; color: var(--color-text-muted); }
.qm-vn-hours ul { margin: 4px 0 0; padding-left: 18px; }
.qm-vn-hours li { line-height: 1.45; }
.qm-vn-nohours { margin-top: 5px; font-size: .8rem; color: var(--color-text-muted); font-style: italic; }

/* In a list row the block is one inline strip, not a stacked panel: the row has to
   stay a single scannable line beside the label and address. */
.qm-vn-compact { margin-top: 3px; display: block; }
.qm-vn-compact .qm-vn-row { gap: 5px; }

/* Phone / website / hours in a LIST ROW. These cannot go inside .mp-list-main: an
   <a> or <details> nested in a <button> is invalid HTML, and the button eats the
   click, so a "linked" phone number would render and then do nothing.
   .mp-list-body wraps the button and this block into ONE flex child, which keeps
   the row's original three-column shape (glyph | body | actions) exactly as it was.
   🔴 The obvious alternative — making the block a fourth flex child at
   `flex: 1 0 100%` — needs `flex-wrap: wrap` on the row, and that ALSO drops
   .mp-list-actions onto its own line at every width above the 560px breakpoint,
   on rows that have no venue at all. Measured at 890px: it did. */
.mp-list-body { flex: 1 1 auto; min-width: 0; }
/* A venue row is tall (links + up to seven lines of hours), and the row's default
   align-items:center then parks the glyph and the actions halfway down beside
   "Wednesday". Top-align only those rows. :has() is a progressive enhancement
   here on purpose: where it isn't supported the row simply keeps today's
   centred look, which is not a defect. */
.mp-list-row:has(.qm-vn-links-only) { align-items: flex-start; }
.mp-list-body .qm-vn-links-only { margin-top: 3px; }
.mp-list-body .qm-vn-links-only .qm-vn-links,
.mp-list-body .qm-vn-links-only .qm-vn-hours,
.mp-list-body .qm-vn-links-only .qm-vn-nohours { margin-top: 3px; }
/* The week is a disclosure inside a scannable list — keep it from turning one row
   into half a screen. It scrolls; the popup's copy does not need to. */
.mp-list-body .qm-vn-links-only .qm-vn-hours ul { max-height: 168px; overflow-y: auto; }

/* Place chooser rows ("Is this one of these places?"). Three stacked lines inside the
   shared .msg-action-item, so a candidate reads name / where / why-we-think-so rather
   than one run-on string. */
.qm-mp-choice-name { display: block; font-weight: 600; }
.qm-mp-choice-sub { display: block; font-size: .82rem; color: var(--color-text-muted); }
.qm-mp-choice-why { display: block; font-size: .76rem; color: var(--color-text-muted); opacity: .85; }

/* 🔴 Cap the expanded hours list. Measured 2026-08-09: seven lines take the pin popup to
   326px, and a Leaflet popup grows UPWARD from its marker — so on a pin near the middle of
   the map it opens straight past the top edge and the hours are clipped out of view. That
   is the one interaction the block exists for, so it must not depend on where the pin sits.
   Capping here beats fighting Leaflet's autoPan: popup.update() re-measures but will not
   pan far enough when the overflow exceeds the space above the marker. */
.qm-vn-hours ul { max-height: 8.5em; overflow-y: auto; }

/* ============================================================
   Shared styles - canonical rules for qFIT, PacklistPRO, qMEET.
   ONE rule per element type. SINGLE SOURCE OF TRUTH for every
   design token (colors, spacing, typography, shadows, etc.).
   Per-site Content/styles.css should NOT redefine these variables.
   Sizes use rem so the html.font-* preference scales everything.
   ============================================================ */

/* ── CSS Variables - Light Mode (canonical values, used by all 3 sites) ── */
:root {
    /* Native form controls (checkbox / radio / scrollbar / date picker) follow
       the SITE theme, not the OS. Each master ships
       `<meta name="color-scheme" content="light dark">`, which on its own makes
       the browser render native checkboxes DARK whenever the OS is in dark mode
       — even while the user has the site in Light Mode (the reported "dark
       checkbox in light mode" bug). Pinning color-scheme to the theme here
       (light) and under [data-theme="dark"] (dark) overrides that meta default
       so a Light-Mode checkbox gets a white background and a Dark-Mode checkbox
       a dark one. */
    color-scheme: light;

    /* Brand / accent */
    --color-accent:        #00B0F0;
    --color-accent-dark:   #0090C8;
    --color-accent-deeper: #005a80;
    --color-accent-light:  #e0f6fe;
    --color-primary:       var(--color-accent);
    --color-primary-dark:  var(--color-accent-dark);
    --color-primary-light: #e0f6fe;

    /* Surface-relative hover wash. Composites against whatever is underneath,
       so it stays correct on the page, on a card, and inside an input alike.
       Used ONLY by .input-clear-btn:hover — see the note there for why that
       control cannot use --color-primary-light. */
    --color-hover-wash: rgba(0, 0, 0, 0.10);

    /* Semantic */
    --color-success:          #2e7d32;
    --color-success-bg:       #e8f5e9;
    --color-success-border:   #a5d6a7;
    --color-save-btn:         #32cd32;
    --color-save-btn-hover:   #28a828;
    --color-danger:           #c62828;
    --color-danger-bg:        #ffebee;
    --color-danger-border:    #ef9a9a;
    --color-delete-btn:       #d32f2f;
    --color-delete-btn-hover: #b71c1c;
    --color-warning:          #e65100;
    --color-warning-bg:       #fff3e0;
    --color-warning-border:   #ffcc80;
    --color-info:             #0277bd;
    --color-info-bg:          #e1f5fe;
    --color-info-border:      #81d4fa;

    /* Text */
    --color-text:       #1a1f2e;
    --color-text-muted: #6c757d;
    --color-text-light: #9aa0a8;
    --color-link:       var(--color-accent);
    --color-link-hover: var(--color-accent-dark);

    /* Backgrounds */
    --color-bg:       #dbe4ed;   /* page: cool blue-grey so white cards lift off it (high contrast) */
    --color-bg-card:  #ffffff;
    --color-bg-input: #e2f1fb;   /* inputs: faint brand-cyan tint → recessed wells, on-brand with accent */
    --color-bg-nav:   #1a1a2e;

    /* Borders */
    --color-border:       #b6cede;   /* soft blue-grey so card/input outlines are clearly visible */
    --color-border-focus: var(--color-accent);

    /* Radii */
    --border-radius:    10px;
    --border-radius-sm: 6px;
    --border-radius-lg: 14px;

    /* Shadows (layered for modern depth) */
    --shadow-sm:          0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.10);
    --shadow-md:          0 4px 6px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.10);
    --shadow-lg:          0 12px 24px -8px rgba(15, 23, 42, 0.15), 0 4px 10px -4px rgba(15, 23, 42, 0.12);
    --shadow-xl:          0 20px 40px -12px rgba(15, 23, 42, 0.25);
    --shadow-focus:       0 0 0 3px rgba(0, 176, 240, 0.22);
    --shadow-focus-ring:  0 0 0 3px rgba(0, 176, 240, 0.35);
    --shadow-btn:         0 1px 2px rgba(15, 23, 42, 0.15), 0 1px 3px rgba(15, 23, 42, 0.10);
    --shadow-btn-hover:   0 4px 8px -2px rgba(15, 23, 42, 0.18), 0 2px 4px -2px rgba(15, 23, 42, 0.12);
    --shadow-btn-active:  inset 0 2px 4px rgba(0, 0, 0, 0.10);
    --shadow-card-hover:  0 8px 16px -6px rgba(15, 23, 42, 0.14), 0 4px 8px -4px rgba(15, 23, 42, 0.10);
    --shadow-card:        0 2px 4px rgba(15, 23, 42, 0.10), 0 6px 14px -3px rgba(15, 23, 42, 0.16);  /* card resting shadow — stronger depth so cards lift off the page */
    --text-shadow-heading: 0 1px 1px rgba(0,0,0,0.10);

    /* Spacing */
    --card-padding:    1rem;
    --card-padding-lg: 1.5rem;
    --section-gap:     1.5rem;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1.125rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.375rem;
    --font-size-xxl:  1.75rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold:   600;
    --line-height: 1.5;

    /* Input sizing */
    --input-height:  2.5rem;
    --input-padding: 0.5rem 0.75rem;

    /* Buttons */
    --btn-padding:     0.5rem 1.25rem;
    --btn-padding-sm:  0.375rem 0.875rem;
    --btn-font-size:   0.9375rem;
    --btn-font-weight: 500;
    --btn-radius:      6px;
    --btn-transition:  background-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;

    /* Nav structural */
    --nav-height: 56px;
    --nav-z:      1000;
    --color-bg-nav-dropdown: color-mix(in srgb, var(--color-bg-nav) 85%, #ffffff 15%);

    /* Transitions / easing */
    --ease-out-quint:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s var(--ease-out-quint);
    --transition-mid:  0.25s var(--ease-out-quint);
    --transition-slow: 0.4s  var(--ease-out-quint);

    /* Text selection (brand-tinted) */
    --selection-bg:    rgba(0, 176, 240, 0.22);
    --selection-color: var(--color-text);
}

/* ── CSS Variables - Dark Mode Overrides ──────────────────── */
[data-theme="dark"] {
    color-scheme: dark;          /* native checkbox/scrollbar/picker → dark */
    --color-text:       #e8eaed;
    --color-text-muted: #b1b5bb;
    --color-text-light: #7c8088;

    --color-bg:       #000000;   /* page pure black → cards/inputs float (high contrast: dark #8) */
    --color-bg-card:  #333333;
    --color-bg-input: #555555;   /* inputs lighter than card → clearly recessed wells */
    --color-bg-nav:   #0d0d0f;

    --color-border:        #555555;
    --color-primary-light: #082a3d;
    --color-hover-wash: rgba(255, 255, 255, 0.14);   /* lightens in dark mode */

    --color-success-bg:     #1b3a1e;
    --color-success-border: #2e7d32;
    --color-danger-bg:      #3b1212;
    --color-danger-border:  #c62828;
    --color-warning-bg:     #3a2a10;
    --color-warning-border: #e65100;
    --color-info-bg:        #082a3d;
    --color-info-border:    #0277bd;

    --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md:         0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
    --shadow-lg:         0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 4px 10px -4px rgba(0, 0, 0, 0.40);
    --shadow-xl:         0 20px 40px -12px rgba(0, 0, 0, 0.65);
    --shadow-focus:      0 0 0 3px rgba(0, 176, 240, 0.35);
    --shadow-focus-ring: 0 0 0 3px rgba(0, 176, 240, 0.45);
    --shadow-btn:        0 1px 2px rgba(0, 0, 0, 0.50);
    --shadow-btn-hover:  0 4px 8px -2px rgba(0, 0, 0, 0.55);
    --shadow-card-hover: 0 8px 16px -6px rgba(0, 0, 0, 0.55);
    --shadow-card:       0 2px 6px rgba(0, 0, 0, 0.45), 0 6px 16px -4px rgba(0, 0, 0, 0.40);  /* card resting shadow — stronger depth so cards lift off the page */

    --selection-bg: rgba(0, 176, 240, 0.45);

    --color-bg-nav-dropdown: color-mix(in srgb, var(--color-bg-nav) 85%, #ffffff 15%);
}

/* ── Site background palette (Preferences → Site Background) ────────────────────
   Per-user PAGE-background tint, applied via data-bg on <html> by the early head
   script (no flash) + site.js applyPreferences. Only --color-bg (the body
   background) changes — cards/nav/inputs keep their own --color-bg-* vars, so
   content contrast is untouched. Each token is theme-aware: a soft tint in light
   mode, a deep tint in dark mode (the [data-theme="dark"] rules below win by
   specificity). The token is a server-whitelisted value (Preferences.aspx.vb),
   never raw user input. Lives in the SHARED sheet so all sites get the palette. */
/* Light-mode shades — dark text sits on these, so they stay light; the "darker"
   choices (graphite especially) are medium grays that still read fine under the
   large page-title text. */
[data-bg="gray"]     { --color-bg: #e7e9ec; }
[data-bg="slate"]    { --color-bg: #d6dce5; }
[data-bg="stone"]    { --color-bg: #e3ddd4; }
[data-bg="graphite"] { --color-bg: #c4c9d1; }
[data-bg="ocean"]    { --color-bg: #d6e4f5; }
[data-bg="sky"]      { --color-bg: #d8e9fb; }
[data-bg="teal"]     { --color-bg: #d3ebeb; }
[data-bg="sage"]     { --color-bg: #daeadd; }
[data-bg="forest"]   { --color-bg: #cfe2d3; }
[data-bg="sand"]     { --color-bg: #efe6d2; }
[data-bg="rose"]     { --color-bg: #f3e0e6; }
[data-bg="plum"]     { --color-bg: #e7dbec; }
[data-bg="lavender"] { --color-bg: #e4ddf3; }

/* Dark-mode shades — light text sits on these, so they stay dark, but are now
   CLEARLY hued/varied (the previous values were within a few RGB points of the
   default #121418, so the tint was invisible). Includes lifted + darker neutral
   grays so "Gray / Slate / Warm Gray / Graphite" are distinguishable in dark mode. */
[data-theme="dark"][data-bg="gray"]     { --color-bg: #1e2024; }
[data-theme="dark"][data-bg="slate"]    { --color-bg: #141a23; }
[data-theme="dark"][data-bg="stone"]    { --color-bg: #1c1813; }
[data-theme="dark"][data-bg="graphite"] { --color-bg: #0a0b0d; }
[data-theme="dark"][data-bg="ocean"]    { --color-bg: #0b1726; }
[data-theme="dark"][data-bg="sky"]      { --color-bg: #0d1f34; }
[data-theme="dark"][data-bg="teal"]     { --color-bg: #08201f; }
[data-theme="dark"][data-bg="sage"]     { --color-bg: #0e1a13; }
[data-theme="dark"][data-bg="forest"]   { --color-bg: #0a1710; }
[data-theme="dark"][data-bg="sand"]     { --color-bg: #1d180f; }
[data-theme="dark"][data-bg="rose"]     { --color-bg: #20141a; }
[data-theme="dark"][data-bg="plum"]     { --color-bg: #190f20; }
[data-theme="dark"][data-bg="lavender"] { --color-bg: #15101f; }

/* ── Expanded spectrum palette (PacklistPRO) — LIGHT-mode shades ────────────────
   60 options = 12 hues × 5 levels (50/40/30/20/10%). Token = "{hue}-{level}";
   whitelisted in PacklistPRO BasePage.BackgroundThemeTokens + exposed in its
   Preferences → Site Background dropdown. PLP-only: the other sites keep the
   neutral-tint palette above (their tokens are untouched). Only --color-bg (the
   page background) changes; cards/nav/inputs keep their own vars. LIGHT shades are
   each pure hue blended toward white (50% = halfway, 10% = near-white pastel). The
   100% (pure) level was removed. The 10% level is LIGHT-only — in dark mode the
   *-10 tokens fall back to the default dark bg (pinned in the dark block below). The
   DARK shades below win in dark mode by specificity (0,2,0 vs 0,1,0). Owner's spec. */
[data-bg="red-50"]          { --color-bg: #ff8080; }
[data-bg="red-40"]          { --color-bg: #ff9999; }
[data-bg="red-30"]          { --color-bg: #ffb3b3; }
[data-bg="red-20"]          { --color-bg: #ffcccc; }
[data-bg="red-10"]          { --color-bg: #ffe6e6; }

[data-bg="red-magenta-50"]  { --color-bg: #ff80bf; }
[data-bg="red-magenta-40"]  { --color-bg: #ff99cc; }
[data-bg="red-magenta-30"]  { --color-bg: #ffb3d9; }
[data-bg="red-magenta-20"]  { --color-bg: #ffcce5; }
[data-bg="red-magenta-10"]  { --color-bg: #ffe6f2; }

[data-bg="magenta-50"]      { --color-bg: #ff80ff; }
[data-bg="magenta-40"]      { --color-bg: #ff99ff; }
[data-bg="magenta-30"]      { --color-bg: #ffb3ff; }
[data-bg="magenta-20"]      { --color-bg: #ffccff; }
[data-bg="magenta-10"]      { --color-bg: #ffe6ff; }

[data-bg="purple-50"]       { --color-bg: #bf80ff; }
[data-bg="purple-40"]       { --color-bg: #cc99ff; }
[data-bg="purple-30"]       { --color-bg: #d9b3ff; }
[data-bg="purple-20"]       { --color-bg: #e5ccff; }
[data-bg="purple-10"]       { --color-bg: #f2e6ff; }

[data-bg="blue-50"]         { --color-bg: #8080ff; }
[data-bg="blue-40"]         { --color-bg: #9999ff; }
[data-bg="blue-30"]         { --color-bg: #b3b3ff; }
[data-bg="blue-20"]         { --color-bg: #ccccff; }
[data-bg="blue-10"]         { --color-bg: #e6e6ff; }

[data-bg="blue-cyan-50"]    { --color-bg: #80bfff; }
[data-bg="blue-cyan-40"]    { --color-bg: #99ccff; }
[data-bg="blue-cyan-30"]    { --color-bg: #b3d9ff; }
[data-bg="blue-cyan-20"]    { --color-bg: #cce5ff; }
[data-bg="blue-cyan-10"]    { --color-bg: #e6f2ff; }

[data-bg="cyan-50"]         { --color-bg: #80ffff; }
[data-bg="cyan-40"]         { --color-bg: #99ffff; }
[data-bg="cyan-30"]         { --color-bg: #b3ffff; }
[data-bg="cyan-20"]         { --color-bg: #ccffff; }
[data-bg="cyan-10"]         { --color-bg: #e6ffff; }

[data-bg="cyan-lime-50"]    { --color-bg: #80ffbf; }
[data-bg="cyan-lime-40"]    { --color-bg: #99ffcc; }
[data-bg="cyan-lime-30"]    { --color-bg: #b3ffd9; }
[data-bg="cyan-lime-20"]    { --color-bg: #ccffe5; }
[data-bg="cyan-lime-10"]    { --color-bg: #e6fff2; }

[data-bg="lime-50"]         { --color-bg: #80ff80; }
[data-bg="lime-40"]         { --color-bg: #99ff99; }
[data-bg="lime-30"]         { --color-bg: #b3ffb3; }
[data-bg="lime-20"]         { --color-bg: #ccffcc; }
[data-bg="lime-10"]         { --color-bg: #e6ffe6; }

[data-bg="lime-yellow-50"]  { --color-bg: #bfff80; }
[data-bg="lime-yellow-40"]  { --color-bg: #ccff99; }
[data-bg="lime-yellow-30"]  { --color-bg: #d9ffb3; }
[data-bg="lime-yellow-20"]  { --color-bg: #e5ffcc; }
[data-bg="lime-yellow-10"]  { --color-bg: #f2ffe6; }

[data-bg="yellow-50"]       { --color-bg: #ffff80; }
[data-bg="yellow-40"]       { --color-bg: #ffff99; }
[data-bg="yellow-30"]       { --color-bg: #ffffb3; }
[data-bg="yellow-20"]       { --color-bg: #ffffcc; }
[data-bg="yellow-10"]       { --color-bg: #ffffe6; }

[data-bg="orange-50"]       { --color-bg: #ffbf80; }
[data-bg="orange-40"]       { --color-bg: #ffcc99; }
[data-bg="orange-30"]       { --color-bg: #ffd9b3; }
[data-bg="orange-20"]       { --color-bg: #ffe5cc; }
[data-bg="orange-10"]       { --color-bg: #fff2e6; }

/* ── Expanded spectrum palette (PacklistPRO) — DARK-mode shades ─────────────────
   48 tinted levels (50/40/30/20% × 12 hues); each pure hue darkened toward black.
   Wins over the light [data-bg] rules above by specificity in dark mode. The 100%
   (pure) level was removed. The 10% level is LIGHT-only — the *-10 tokens are pinned
   to the default dark bg below so the near-white light pastel can't bleed into dark
   mode. Hex values are the owner's exact spec. */
[data-theme="dark"][data-bg="red-50"]          { --color-bg: #800000; }
[data-theme="dark"][data-bg="red-40"]          { --color-bg: #660000; }
[data-theme="dark"][data-bg="red-30"]          { --color-bg: #4d0000; }
[data-theme="dark"][data-bg="red-20"]          { --color-bg: #330000; }

[data-theme="dark"][data-bg="red-magenta-50"]  { --color-bg: #800040; }
[data-theme="dark"][data-bg="red-magenta-40"]  { --color-bg: #660033; }
[data-theme="dark"][data-bg="red-magenta-30"]  { --color-bg: #4d0026; }
[data-theme="dark"][data-bg="red-magenta-20"]  { --color-bg: #330019; }

[data-theme="dark"][data-bg="magenta-50"]      { --color-bg: #800080; }
[data-theme="dark"][data-bg="magenta-40"]      { --color-bg: #660066; }
[data-theme="dark"][data-bg="magenta-30"]      { --color-bg: #4d004d; }
[data-theme="dark"][data-bg="magenta-20"]      { --color-bg: #330033; }

[data-theme="dark"][data-bg="purple-50"]       { --color-bg: #400080; }
[data-theme="dark"][data-bg="purple-40"]       { --color-bg: #330066; }
[data-theme="dark"][data-bg="purple-30"]       { --color-bg: #26004d; }
[data-theme="dark"][data-bg="purple-20"]       { --color-bg: #1a0033; }

[data-theme="dark"][data-bg="blue-50"]         { --color-bg: #000080; }
[data-theme="dark"][data-bg="blue-40"]         { --color-bg: #000066; }
[data-theme="dark"][data-bg="blue-30"]         { --color-bg: #00004d; }
[data-theme="dark"][data-bg="blue-20"]         { --color-bg: #000033; }

[data-theme="dark"][data-bg="blue-cyan-50"]    { --color-bg: #004080; }
[data-theme="dark"][data-bg="blue-cyan-40"]    { --color-bg: #003366; }
[data-theme="dark"][data-bg="blue-cyan-30"]    { --color-bg: #00264d; }
[data-theme="dark"][data-bg="blue-cyan-20"]    { --color-bg: #001a33; }

[data-theme="dark"][data-bg="cyan-50"]         { --color-bg: #008080; }
[data-theme="dark"][data-bg="cyan-40"]         { --color-bg: #006666; }
[data-theme="dark"][data-bg="cyan-30"]         { --color-bg: #004d4d; }
[data-theme="dark"][data-bg="cyan-20"]         { --color-bg: #003333; }

[data-theme="dark"][data-bg="cyan-lime-50"]    { --color-bg: #008040; }
[data-theme="dark"][data-bg="cyan-lime-40"]    { --color-bg: #006633; }
[data-theme="dark"][data-bg="cyan-lime-30"]    { --color-bg: #004d26; }
[data-theme="dark"][data-bg="cyan-lime-20"]    { --color-bg: #00331a; }

[data-theme="dark"][data-bg="lime-50"]         { --color-bg: #008000; }
[data-theme="dark"][data-bg="lime-40"]         { --color-bg: #006600; }
[data-theme="dark"][data-bg="lime-30"]         { --color-bg: #004d00; }
[data-theme="dark"][data-bg="lime-20"]         { --color-bg: #003300; }

[data-theme="dark"][data-bg="lime-yellow-50"]  { --color-bg: #408000; }
[data-theme="dark"][data-bg="lime-yellow-40"]  { --color-bg: #336600; }
[data-theme="dark"][data-bg="lime-yellow-30"]  { --color-bg: #264d00; }
[data-theme="dark"][data-bg="lime-yellow-20"]  { --color-bg: #1a3300; }

[data-theme="dark"][data-bg="yellow-50"]       { --color-bg: #808000; }
[data-theme="dark"][data-bg="yellow-40"]       { --color-bg: #666600; }
[data-theme="dark"][data-bg="yellow-30"]       { --color-bg: #4d4d00; }
[data-theme="dark"][data-bg="yellow-20"]       { --color-bg: #333300; }

[data-theme="dark"][data-bg="orange-50"]       { --color-bg: #804000; }
[data-theme="dark"][data-bg="orange-40"]       { --color-bg: #663300; }
[data-theme="dark"][data-bg="orange-30"]       { --color-bg: #4d2600; }
[data-theme="dark"][data-bg="orange-20"]       { --color-bg: #331900; }

/* 10% is LIGHT-only: pin the *-10 tokens to the default dark bg (#121418, same as
   the [data-theme="dark"] base) so the near-white light pastel above doesn't bleed
   into dark mode — equal specificity would otherwise let the light rule win on
   source order. Keep this color in sync with [data-theme="dark"] { --color-bg }. */
[data-theme="dark"][data-bg="red-10"],
[data-theme="dark"][data-bg="red-magenta-10"],
[data-theme="dark"][data-bg="magenta-10"],
[data-theme="dark"][data-bg="purple-10"],
[data-theme="dark"][data-bg="blue-10"],
[data-theme="dark"][data-bg="blue-cyan-10"],
[data-theme="dark"][data-bg="cyan-10"],
[data-theme="dark"][data-bg="cyan-lime-10"],
[data-theme="dark"][data-bg="lime-10"],
[data-theme="dark"][data-bg="lime-yellow-10"],
[data-theme="dark"][data-bg="yellow-10"],
[data-theme="dark"][data-bg="orange-10"] { --color-bg: #121418; }

/* ── Grayscale ramp ─────────────────────────────────────────────
   Neutral page-background ramp, theme-split (Preferences shows only the half
   that fits the active theme): White→Gray 50% are the LIGHT-mode options,
   Gray 50%→Black the DARK-mode options; gray-50 (#808080) is the shared
   midpoint shown in both. Token number = lightness % (100 = white, 0 = black).
   Like the spectrum above, only --color-bg changes — cards/nav/inputs keep
   their own vars. */
[data-bg="gray-100"] { --color-bg: #ffffff; }
[data-bg="gray-90"]  { --color-bg: #e5e5e5; }
[data-bg="gray-80"]  { --color-bg: #cccccc; }
[data-bg="gray-70"]  { --color-bg: #b3b3b3; }
[data-bg="gray-60"]  { --color-bg: #999999; }
[data-bg="gray-50"]  { --color-bg: #808080; }

[data-theme="dark"][data-bg="gray-50"] { --color-bg: #808080; }
[data-theme="dark"][data-bg="gray-40"] { --color-bg: #666666; }
[data-theme="dark"][data-bg="gray-30"] { --color-bg: #4d4d4d; }
[data-theme="dark"][data-bg="gray-20"] { --color-bg: #333333; }
[data-theme="dark"][data-bg="gray-10"] { --color-bg: #1a1a1a; }
[data-theme="dark"][data-bg="gray-0"]  { --color-bg: #000000; }

/* The light-half tokens (gray-100…gray-60) carry a light --color-bg that would
   bleed into dark mode (equal specificity, source order) if a user picked one
   and later switched to Dark. Pin them to the default dark bg so a stale
   "White" never paints a dark page white. Keep in sync with
   [data-theme="dark"] { --color-bg }. gray-50 is deliberately NOT pinned —
   #808080 is its value in both themes. */
[data-theme="dark"][data-bg="gray-100"],
[data-theme="dark"][data-bg="gray-90"],
[data-theme="dark"][data-bg="gray-80"],
[data-theme="dark"][data-bg="gray-70"],
[data-theme="dark"][data-bg="gray-60"] { --color-bg: #121418; }

/* ── Dark-mode semantic TEXT contrast ──────────────────────────
   The saturated light-mode semantic colors (danger/info/warning/success)
   stay as-is so badge/button FILLS keep enough contrast for their white text.
   But used as FOREGROUND text on the dark card / banner / *-bg surfaces they
   fall below WCAG AA (e.g. #c62828 danger text on the #3b1212 danger-bg is
   ~1.9:1; the required-star and inline-tip measured 2.9 / 3.1 on dark cards).
   Lighten the text-only uses to AA-passing tints. Benefits all 3 sites. */
[data-theme="dark"] .required-star,
[data-theme="dark"] .error-message,
[data-theme="dark"] .field-validation-error,
[data-theme="dark"] .banner-offline,
[data-theme="dark"] .exp-badge-unsettled { color: #ef5350; }

[data-theme="dark"] .inline-tip { color: #4fc3f7; }

[data-theme="dark"] .banner-demo,
[data-theme="dark"] .caps-lock-warning,
[data-theme="dark"] .note-date-badge,
[data-theme="dark"] .drf-warn-icon,
[data-theme="dark"] .exp-badge-est { color: #ffa726; }

[data-theme="dark"] .exp-badge-settled { color: #66bb6a; }

[data-theme="dark"] .exp-badge-shared { color: #4fc3f7; }

/* Dark-mode TEXT lightening for the semantic text utilities + itinerary status
   pills (they still sit on dark surfaces). Toasts (.site-toast.*) and inline
   message panels (.alert-panel.*) are now SOLID, theme-independent colors with
   fixed near-black text (see the cross-site message palette below), so they are
   deliberately no longer listed here — a success/error/etc. message looks
   identical in light and dark mode. */
[data-theme="dark"] .itin-status-confirmed,
[data-theme="dark"] .itin-status-completed,
[data-theme="dark"] .text-success { color: #66bb6a; }

[data-theme="dark"] .text-danger { color: #ef5350; }

::selection      { background: var(--selection-bg); color: var(--selection-color); }
::-moz-selection { background: var(--selection-bg); color: var(--selection-color); }

/* ── 1. User font-size preference (scales all rem-based sizes) ── */
html              { font-size: 16px; }   /* default: 1rem = 16px */
html.font-small   { font-size: 14px; }
html.font-medium  { font-size: 16px; }
html.font-large   { font-size: 18px; }

/* ── 2. Document base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor-link offset so the sticky nav (56px tall) doesn't obscure jump-targets */
    scroll-padding-top: calc(var(--nav-height, 56px) + 0.5rem);
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text, #1a1f2e);
    background-color: var(--color-bg, #f5f7fa);
    line-height: var(--line-height, 1.5);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

/* ── 2a. Scrollbar tinting ────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-text-muted) 40%, transparent) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text-muted) 35%, transparent);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-text-muted) 55%, transparent);
    background-clip: padding-box;
}

/* ── 2b. Inline code / kbd / pre ─────────────────────────── */
code, kbd, samp, tt {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
}
:not(pre) > code {
    padding: 0.12em 0.4em;
    background: color-mix(in srgb, var(--color-primary-light) 70%, transparent);
    color: var(--color-text);
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    white-space: nowrap;
}
[data-theme="dark"] :not(pre) > code {
    background: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-input));
}
pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85em;
    line-height: 1.5;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.75rem 0.9rem;
    overflow-x: auto;
}

/* Responsive media defaults */
img, svg { max-width: 100%; height: auto; }

/* ── 3. Page title ─────────────────────────────────────────── */
.page-title {
    font-size: var(--font-size-xxl, 1.75rem);
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-text, #1a1f2e);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: left;   /* left-justify titles on all 3 sites; .text-center (a utility defined later) still overrides where a page opts in */
}
.page-title-flush { margin-bottom: 0; }

/* ── 4. Typography ─────────────────────────────────────────── */
.normal-text-bold { font-weight: var(--font-weight-bold, 600); }

.small-dim-text {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #6c757d);
}

/* Same color as normal body text, just smaller. Use for fine-print, captions,
   metadata, etc. where the content is still primary, not a side-note. */
.small-text {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text, #1a1f2e);
}

.inline-tip {
    display: inline-block;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-info, #0277bd);
    background-color: var(--color-info-bg, #e1f5fe);
    border-left: 3px solid var(--color-info-border, #81d4fa);
    padding: 0.25rem 0.6rem;
    border-radius: var(--border-radius-sm, 4px);
    margin: 0.3rem 0;
    /* Tips are side-notes, so they are deliberately shorter than body copy: the
       block's height is padding + line-height + the floated ×, and all three were
       tuned down together. Do NOT raise .tip-dismiss's min-height back to 32px —
       .inline-tip is an inline-block, so it establishes a BFC and the float DOES
       count toward its height; a 32px button alone sets a taller floor than the
       text needs. The button keeps a 32px min-WIDTH plus this padding, so the tap
       target still clears the 24px floor. */
    line-height: 1.35;
}

/* ── Dismissible tips: the × ────────────────────────────────────
   site-core.js (SiteCore.tips) puts this button on every standing .inline-tip and
   remembers what was hidden. Nothing here is per-tip — do NOT fork these rules into a
   site's Content/styles.css; all five sites read this file.

   FLOATED, NOT FLEXED. A tip's content is a SENTENCE. Making the container a flex row
   turns every inline fragment between its <b>/<a> tags into a separate flex item and
   shreds the sentence into narrow columns — the same trap .alert-panel documents further
   down this file, and the reason qMEET's chat retention notice floats its own ×. A float
   leaves normal text flow intact and simply lets the sentence wrap around the button.

   The button is injected as the FIRST child: a right float only pushes aside content that
   follows it in source order, so appended last it would drop below the text instead of
   sitting beside it.

   Colour is `inherit` + opacity, not a fixed grey, so it rides .inline-tip's own colour in
   both themes (light #0277bd, and the [data-theme="dark"] override to #4fc3f7 above)
   without needing a second dark-mode rule. */
.tip-dismiss {
    float: right;
    margin: -0.1rem -0.35rem 0 0.4rem;
    min-width: 32px;                    /* 32px wide + 24px tall clears the tap-target     */
    min-height: 24px;                   /* floor; see .inline-tip above before raising it. */
    padding: 0 0.25rem;
    background: none;
    border: none;
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    opacity: 0.55;
    transition: opacity var(--transition-fast, 0.15s ease);
}
.tip-dismiss:hover { opacity: 1; }
.tip-dismiss:focus-visible {
    opacity: 1;
    outline: 2px solid var(--color-link, #06f);
    outline-offset: 1px;
}

/* !important because a tip may carry Bootstrap's .d-block (display:block !important) —
   measured on qMEET's retention notice, where a plain rule lost the specificity fight and
   the panel just sat there after the tap. */
.inline-tip.tip-hidden { display: none !important; }

/* Anti-flash gate. Site.Master's synchronous head script adds .tips-gate to <html> ONLY
   when this browser has at least one dismissal on record, so a first-time visitor never
   pays for it. site-core.js drops the class the instant its first pass finishes, and the
   master drops it on a timer too, so a JS failure can never leave someone tip-less.
   `visibility`, not `display`: it holds the tip's box, so revealing the ones that are NOT
   hidden costs no layout shift — only the genuinely dismissed ones reflow.
   The :not() chain keeps CONTROLS visible throughout — "(fix capitalization)", "hmm?",
   "(refresh list)". They are never dismissible, so they have nothing to hide for, and
   blanking a control mid-load looks broken. Both tests are needed and neither is
   redundant: measured on EditEvent, `(refresh list)` is an <asp:LinkButton> whose CssClass
   is a bare "inline-tip" with NO .link — so only :not(a) catches it — while other pages
   put .link on a <span>. The gate cannot key on .tip-dismissible instead, because it has
   to be right BEFORE the script that adds that class has run. */
.tips-gate .inline-tip:not(.link):not(a):not(button) { visibility: hidden; }

@media print {
    .tip-dismiss { display: none; }
}

.note {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #6c757d);
    font-style: italic;
    margin: 0.25rem 0;
}

.input-label {
    display: inline-block;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text, #1a1f2e);
    margin-bottom: 0.25rem;
}

.link,
a.link {
    color: var(--color-link, var(--color-primary, #0090C8));
    text-decoration: none;
    font-weight: var(--font-weight-bold, 600);
    cursor: pointer;
    transition: color var(--transition-fast, 0.15s ease);
}
.link:hover,
a.link:hover {
    color: var(--color-link-hover, var(--color-primary-dark, #005a80));
    text-decoration: underline;
}
/* When .link is applied to a <button> (e.g. a "Hide Overview" toggle that must
   POST/run JS rather than navigate), strip the native button chrome so it reads
   as an inline text link. Without this the button keeps the UA ButtonFace
   background (#f0f0f0) — which never themes to dark, so the bold cyan link text
   sat on a light-gray pill in dark mode (~2.2:1). */
button.link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: var(--font-weight-bold, 600);
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* ── 5. Lists - accent-colored bullets/numbers by default ──
   Applies to every <ul> and <ol> on the site. The named classes
   .bullet-list and .numbered-list are optional explicit aliases. */
ul li::marker { color: var(--color-primary, #0090C8); }
ol li::marker { color: var(--color-primary, #0090C8); font-weight: var(--font-weight-bold, 600); }
.bullet-list   { list-style-type: disc; }
.numbered-list { list-style-type: decimal; }

/* Home-page "what you get" benefit list — accent check (✓) bullets.
   Used by the marketing/welcome cards on all four sites' Home.aspx. The
   ::before check replaces the native marker, so list-style is removed. */
.home-checklist { list-style: none; margin: 0 0 .25rem; padding: 0; }
.home-checklist li {
    position: relative;
    padding-left: 1.7em;
    margin: 0 0 .45em;
    line-height: 1.45;
}
.home-checklist li::before {
    content: "\2713"; /* ✓ */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent, #00B0F0);
    font-weight: 700;
}

/* ── 6. Cards ──────────────────────────────────────────────── */
.main-card {
    background-color: var(--color-bg-card, #ffffff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 8px);
    padding: var(--card-padding, 1rem);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
}

/* Corner-× close for "Options & Filters" controls cards. A top-right × that
   collapses the card and (where the card has one) triggers its existing
   Save/Apply/Close action — a more reachable alternative to a footer button.
   The host card carries .card-options-host so it becomes the positioning anchor
   (a plain class, not :has(), so the bundler's CSS minifier can't drop it).
   Promoted from PLP ShoppingList's original .sl-options-topbar so all four
   sites share one look. The .card-options-topbar div is placed as a child of
   the (open) options panel. */
.card-options-host { position: relative; }
.card-options-topbar {
    position: absolute;
    top: var(--card-padding, 1rem);
    right: var(--card-padding, 1rem);
    margin: 0;
    z-index: 1;
}
/* Make the × read as a real button (filled primary, white glyph) rather than a
   faint icon. Scoped to the topbar so other .tip-icon-button uses (tips close,
   file-remove) stay transparent. */
.card-options-topbar .tip-icon-button {
    min-width: 2.5rem;
    min-height: 2.5rem;
    color: #111;
    background-color: var(--color-primary, #0090C8);
    border-radius: var(--btn-radius, 6px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.15));
    font-weight: 700;
}
.card-options-topbar .tip-icon-button:hover {
    color: #111;
    background-color: var(--color-primary-dark, #005a80);
}
.card-options-topbar .tip-icon-button:active {
    box-shadow: var(--shadow-btn-active, inset 0 2px 4px rgba(0, 0, 0, 0.10));
}

.tip-card {
    background-color: var(--color-info-bg, #e1f5fe);
    border: 1px solid var(--color-info-border, #81d4fa);
    border-radius: var(--border-radius, 8px);
    padding: var(--card-padding, 1rem);
    margin-bottom: 1rem;
    position: relative;
    /* Hidden by default so the card doesn't flash on pages where the user
       previously closed it. initTips() adds .tip-visible to show it. */
    display: none;
}
.tip-card.tip-visible { display: block; }

/* The "Turn On Notifications" nudge (qFIT Checklist + PLP/NHT/PM Home) wears .tip-card for
   its LOOK only — its visibility is driven by the [hidden] attribute (page JS clears it when
   Notification.permission isn't granted), never by initTips()/.tip-visible. Without this
   override the base display:none above made the nudge unrevealable — it shipped dead on all
   four sites (found 2026-07-20 during the help-system redesign). */
.tip-card.home-notif-nudge { display: block; }
.tip-card.home-notif-nudge[hidden] { display: none; }

/* Always-visible tip card — used on Tips.aspx to display read-only copies of
   each page's own tips (no ⓘ trigger, no × close, never collapsed). initTips()
   leaves these alone because they don't carry the .tip-card class, so the page
   header's single ⓘ trigger can't toggle them. */
.tip-card-static {
    background-color: var(--color-info-bg, #e1f5fe);
    border: 1px solid var(--color-info-border, #81d4fa);
    border-radius: var(--border-radius, 8px);
    padding: var(--card-padding, 1rem);
    margin: 0 0 0.85rem 0;
    position: relative;
}
.tip-card-static:last-child { margin-bottom: 0; }
.tip-card-static .tip-card-heading { margin-right: 0; }

/* ── Collapsible tip card — <details class="tip-card-static"> ──────────────
   Added 2026-08-06, replacing qMeet's legacy "(tips)" / "(how does this work?)"
   LinkButtons. Those were a postback that swapped the link's own .Text for a
   paragraph of help, so the trigger DISAPPEARED on expand (the only way back was
   to click the paragraph), the copy could not contain markup, and revealing one
   sentence re-rendered the page. All 16 are gone; this is what a tip reaches for
   when it is genuinely too long to sit open.

   🔑 Reach for this ONLY when the copy is long. The house default is still an
   always-visible <p class="inline-tip"> under the control for a sentence or two,
   and a plain (non-<details>) .tip-card-static for a consequence warning — never
   hide a warning behind a click. See Shared\docs\DeadTipCopy.md.

   Consumers: qMEET EditEventMembers.aspx + EditGroupMembers.aspx, the ~200-word
   "creates a real account for them" bulk-add disclosure. Both ship <details OPEN>
   — collapsing exists so the organizer can fold the wall away AFTER reading it,
   not so the page can arrive with the warning hidden. If you add a consumer that
   starts closed, make sure what stays visible in the <summary> is the whole point
   of the tip, because that is all most people will ever read.

   🛑 <details>/<summary>, not a button + JS. <summary> is already a button to the
   accessibility tree and exposes aria-expanded natively, and it needs no script —
   which matters here because .tip-card (the ⓘ-triggered panel) is display:none
   until site.js initTips() runs, and a tip that ships invisible is the exact bug
   the .tip-card-static family exists to avoid. Mirrors .form-more-summary. */
details.tip-card-static > summary.tip-card-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.4rem;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-text, #1a1f2e);
    line-height: 1.3;
    border-radius: 4px;
}
details.tip-card-static > summary.tip-card-summary::-webkit-details-marker { display: none; }
details.tip-card-static > summary.tip-card-summary::before {
    content: "\25B8";                  /* the caret; becomes the open form below */
    font-size: 0.8em;
    color: var(--color-text-muted);
    flex: 0 0 auto;
}
details.tip-card-static[open] > summary.tip-card-summary::before { content: "\25BE"; }
/* Names the action as well as showing state — same reasoning as .form-more-summary.
   Visual reinforcement only; <summary> already supplies the accessible name, so do
   NOT promote this to an aria-label. */
details.tip-card-static > summary.tip-card-summary::after {
    content: "Show";
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.7em;
    font-weight: var(--font-weight-bold, 600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
details.tip-card-static[open] > summary.tip-card-summary::after { content: "Hide"; }
details.tip-card-static > summary.tip-card-summary:focus-visible {
    outline: 2px solid var(--color-accent, #0277bd);
    outline-offset: 2px;
}
/* Only once open does the body need separating from the summary — collapsed, this
   margin would leave the card looking bottom-padded for no reason. */
details.tip-card-static[open] > summary.tip-card-summary { margin-bottom: 0.5rem; }

/* ── 6a. Generic card ─────────────────────────────────────── */
.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
    padding: var(--card-padding);
    margin-bottom: var(--section-gap);
    transition: box-shadow var(--transition-mid), border-color var(--transition-mid);
}
.card-lg { padding: var(--card-padding-lg); }
.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.75rem 0;
    color: var(--color-text);
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Read-only "Account activity" card list (MyProfile across all 4 sites).
   A simple key/value list — label in normal weight, value bold via <strong>.
   The host .main-card supplies the box; this just spaces the rows. */
.account-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.account-activity-list li {
    padding: 0.2rem 0;
    color: var(--color-text);
}
.account-activity-list li + li {
    border-top: 1px solid var(--color-border);
}

summary { cursor: pointer; }
/* Disclosure chevron for <details> cards whose <summary> is the card title.
   .card-title is display:flex, which suppresses the native ::marker triangle —
   without this the heading gives no visual hint it can expand (e.g. the
   Trip Dashboard retrospectives card). Mirrors the .itin-details-summary ▸/▾. */
summary.card-title { list-style: none; }
summary.card-title::-webkit-details-marker { display: none; }
summary.card-title::before {
    content: "▸";
    color: var(--color-text-muted);
    flex: 0 0 auto;
}
details[open] > summary.card-title::before { content: "▾"; }

/* ── Progressive-disclosure block inside a form card (.form-more) ──────────
   The "required fields + Save up front, everything else behind one summary"
   pattern. Introduced on PacklistPRO EditItem 2026-08-04; qFIT EditMethod and
   qMeet EditEvent followed, then on 2026-08-09 PLP EditTask, qFIT EditTarget,
   qFIT EditCategory and qMeet EditGroup. SEVEN pages now share this block —
   change it here rather than forking a per-site copy.
   PLP EditPark folded its page-local .park-form-more onto this on 2026-08-09
   (those rules are deleted, not orphaned); it is the one page that keeps TWO
   disclosures, because its optional fields are two genuinely separate groups on
   a short public submission form rather than one "everything else".
   ⚠ qFIT EditGoals is deliberately NOT on this pattern — it is a bulk
   goal-setting wizard with no required fields, so there is nothing to leave
   visible and its four sections ARE the page. Don't "finish the set".

   🔴 WHY <details> AND NOT A SERVER-SIDE Visible TOGGLE. A collapsed <details>
   sets its children display:none but leaves them in the DOM with their loaded
   values, so they still post and still round-trip. A control given
   Visible="False" stops rendering, reads back as "", and an unconditional
   UPDATE then writes NULL over a column the user never touched. Never
   "optimise" a .form-more into server-side visibility. */
.form-more {
    border-top: 1px solid var(--color-border);
    margin: 1rem 0 0.5rem;
    padding-top: 0.5rem;
}
/* THE SUMMARY IS A BAR, NOT A LINE OF LINK TEXT (2026-08-05). Two owner
   reports, one rule: "More options" was breaking across two lines, and nothing
   said the thing could be opened. Three changes, each answering one of those:

     • display:flex + border + fill → it reads as a control you can press.
       inline-flex shrink-wrapped to the text, which is exactly what made it
       look like a sentence in the middle of a form.
     • .form-more-label { white-space: nowrap } → the label is now its OWN
       element and can never break. It used to be a bare text node, i.e. an
       anonymous flex item, so there was no selector to hang the rule on:
       when the count text squeezed it, "More options" wrapped to "More" /
       "options". qMeet's count is a six-item list, so it always did.
     • ::after Show/Hide alongside the ▸/▾ caret → names the action as well as
       showing the state. <summary> already exposes role=button and
       aria-expanded natively, so this is visual reinforcement and NOT the
       accessible name — do not "improve" it into an aria-label.

   🔑 The count sits on its OWN flex line (flex-basis:100%) and ::after is
   pulled AHEAD of it with order, giving "title row + subtitle" at every width.
   Without the order swap ::after follows the wrapped count and Show/Hide
   drifts to the bottom-right corner of the block.

   🛑 NOT a button element and not a JS toggle. <summary> is already a button
   to the accessibility tree and the keyboard, and <details> is what keeps the
   collapsed fields in the DOM (see the 🔴 note above) — swapping it out would
   re-open that whole hazard for a look that CSS gives us for free. */
.form-more-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.4rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-bg-input);
    font-weight: 600;
    color: var(--color-link);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.form-more-summary::-webkit-details-marker { display: none; }
.form-more-summary::before {
    content: "\25B8";              /* ▸ — becomes ▾ when open */
    font-size: 0.8em;
    color: var(--color-text-muted);
    flex: 0 0 auto;
}
.form-more[open] > .form-more-summary::before { content: "\25BE"; }
.form-more-summary::after {
    content: "Show";
    order: 2;                      /* ahead of the count — see 🔑 above */
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.form-more[open] > .form-more-summary::after { content: "Hide"; }
.form-more-summary:hover {
    color: var(--color-link-hover);
    border-color: var(--color-border-focus);
    /* A translucent wash composited OVER the base fill, not an opaque token.
       --color-primary-light is the obvious pick and is wrong in BOTH themes on
       top of --color-bg-input: identical to it in light (#e0f6fe vs #e2f1fb, no
       visible hover at all) and DARKER than it in dark (#082a3d vs #555555).
       Same trap, same fix as .input-clear-btn:hover — see the note there. */
    background-image: linear-gradient(var(--color-hover-wash), var(--color-hover-wash));
}
.form-more-summary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
/* The label never breaks. It exists purely so that rule has something to
   target; keep the markup wrapping "More options" on all three pages. */
.form-more-label { white-space: nowrap; }
/* "(all optional)" — states the rule the disclosure implies, so nobody has to
   open it to find out whether something in there is required. Own line, indented
   under the label, so however long the list gets it can never squeeze the label. */
.form-more-count {
    order: 3;
    flex-basis: 100%;
    padding-left: 1.1em;
    font-weight: 400;
    font-size: 0.9em;
    color: var(--color-text-muted);
}
.form-more[open] > .form-group:first-of-type,
.form-more[open] > .form-row:first-of-type { margin-top: 0.75rem; }

/* A titled sub-group inside .form-more — a second record edited by the same
   Save (EditItem's "My Settings"). Not another disclosure: one level only. */
.form-more-group {
    border-top: 1px solid var(--color-border);
    margin-top: 1.5rem;
    padding-top: 0.75rem;
}
.form-more-group-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--color-text);
}
.card-interactive { cursor: pointer; }
.card-interactive:hover,
.card:hover.card-interactive {
    box-shadow: var(--shadow-card-hover);
    border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
}
.card-accent {
    border-top: 3px solid var(--color-accent);
    border-radius: var(--border-radius);
}

/* Card list styling — branded bullets for unclassed <ul>/<ol> inside cards */
.card > ul:not([class]),
.card > ul.small,
.card > ol:not([class]),
.card > ol.small {
    padding-left: 1.15rem;
    margin: 0.5rem 0;
}
.card > ul:not([class]) > li,
.card > ul.small > li,
.card > ol:not([class]) > li,
.card > ol.small > li {
    margin-bottom: 0.55rem;
    line-height: 1.55;
}
.card > ul:not([class]) > li:last-child,
.card > ul.small > li:last-child,
.card > ol:not([class]) > li:last-child,
.card > ol.small > li:last-child { margin-bottom: 0; }
.card > ul:not([class]),
.card > ul.small {
    list-style: none;
    padding-left: 1.25rem;
}
.card > ul:not([class]) > li,
.card > ul.small > li {
    position: relative;
    padding-left: 0.6rem;
}
.card > ul:not([class]) > li::before,
.card > ul.small > li::before {
    content: "";
    position: absolute;
    left: -0.55rem;
    top: 0.7em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-accent);
    transform: translateY(-50%);
}
.card > ol:not([class]) > li::marker,
.card > ol.small > li::marker { color: var(--color-accent); font-weight: 700; }

.tip-card-heading {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-text, #1a1f2e);
    margin: 0 1.5rem 0.5rem 0;
    line-height: 1.3;
}

.tip-card-text {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text, #1a1f2e);
    margin: 0;
    line-height: 1.5;
}

/* ── Tip card "show more" (progressive disclosure) ─────────────
   Long tip cards (many <li>) collapse to the first few items with a
   "Show N more" toggle so the card stays compact. Activated entirely by
   site.js initTips(): it adds .tips-collapsible to the card, .tip-extra to
   the overflow items, and toggles .tips-expanded. This block is inert until
   that JS runs, so it is safe to ship to every site ahead of the per-site
   JS rollout (short cards never get .tips-collapsible). */
.tip-card.tips-collapsible:not(.tips-expanded) .tip-extra { display: none; }
.tips-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    color: var(--color-accent, #0277bd);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 600);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tips-more:hover { text-decoration: none; }
.tips-more:focus-visible {
    outline: 2px solid var(--color-accent, #0277bd);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── 7. Form inputs ────────────────────────────────────────── */
.textbox,
input.textbox,
textarea.textbox,
select.textbox,
.textarea,
.dropdown,
.date-picker,
.file-picker {
    display: block;
    width: 100%;
    max-width: 100%;
    height: var(--input-height, 2.5rem);
    padding: var(--input-padding, 0.5rem 0.75rem);
    font-family: inherit;
    font-size: max(16px, var(--font-size-base, 1rem));  /* 16px floor prevents iOS auto-zoom */
    color: var(--color-text, #1a1f2e);
    background-color: var(--color-bg-input, #ffffff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius-sm, 6px);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease),
                background-color var(--transition-fast, 0.15s ease);
}
.textarea,
textarea.textbox {
    height: auto;
    min-height: calc(var(--input-height, 2.5rem) * 2.5);
    resize: vertical;
    line-height: 1.5;
}
.dropdown,
select.textbox {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' stroke='%23808080' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
}
[data-theme="dark"] .dropdown,
[data-theme="dark"] select.textbox {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' stroke='%239aa0a6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.textbox:hover:not(:focus):not(:disabled),
input.textbox:hover:not(:focus):not(:disabled),
textarea.textbox:hover:not(:focus):not(:disabled),
select.textbox:hover:not(:focus):not(:disabled),
.textarea:hover:not(:focus):not(:disabled),
.dropdown:hover:not(:focus):not(:disabled),
.date-picker:hover:not(:focus):not(:disabled),
.file-picker:hover:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--color-text-muted, #6c757d) 35%, var(--color-border, #e0e0e0));
}
.textbox:focus,
input.textbox:focus,
textarea.textbox:focus,
select.textbox:focus,
.textarea:focus,
.dropdown:focus,
.date-picker:focus,
.file-picker:focus {
    outline: none;
    border-color: var(--color-border-focus, var(--color-primary, #0090C8));
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(0, 176, 240, 0.22));
}

.textbox:disabled,
input.textbox:disabled,
textarea.textbox:disabled,
select.textbox:disabled,
.textarea:disabled,
.dropdown:disabled,
.date-picker:disabled,
.file-picker:disabled {
    opacity: 0.6;
    background-color: var(--color-bg, #f5f7fa);
    cursor: not-allowed;
}

/* Invalid-state input styling (aria-invalid from ASP.NET validators, or .input-invalid
   from client-side JS). Mirrors the focus ring in danger color. */
.textbox[aria-invalid="true"],
.textbox.input-invalid {
    border-color: var(--color-danger);
}
.textbox[aria-invalid="true"]:focus,
.textbox.input-invalid:focus {
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.18);
}
.textbox.input-error,
input.input-error,
select.input-error,
textarea.input-error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 18%, transparent);
}

/* Native placeholder text inside textbox/textarea.
   Sized to the design system's normal UI text (--font-size-sm), deliberately SMALLER
   than the host input's reading size (--font-size-base, ~18px) so the placeholder hint
   doesn't dominate the field. (Was `inherit` = same size as typed text, which read too
   large.) Color is mid-gray #808080 per design req. One rule for all 4 sites — the shared
   sheet loads last. One deliberate override exists: qMEET LiveChat's .lc-input::placeholder
   scales with the page's --lc-font chat font-size setting, at the same 0.875 ratio. */
input::placeholder,
textarea::placeholder,
.textbox::placeholder,
.textarea::placeholder {
    color: #808080;
    font-size: var(--font-size-sm, 0.875rem);
    opacity: 1;  /* Firefox lowers it by default */
}

.checkbox,
input[type="checkbox"].checkbox,
.checkbox > input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    cursor: pointer;
    accent-color: var(--color-primary, #0090C8);
    vertical-align: middle;
    margin-right: 0.375rem;
}
.checkbox:disabled,
.checkbox > input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
span.checkbox {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    min-width: 0;
    margin-right: 0;
}
.checkbox-nowrap { white-space: nowrap; }
/* Large checkbox variant — add `checkbox-lg` alongside `checkbox` for big, tap-
   friendly boxes (e.g. the per-day completion tally on TargetDetails/MethodDetails).
   An ASP.NET CheckBox renders <span class="checkbox checkbox-lg"><input type=checkbox></span>,
   so the actual control is the INPUT *child* of the span — size that (plus a bare
   input.checkbox-lg for non-server markup). 1.6875rem = 150% of the 1.125rem default;
   matches the base rule's specificity and wins by load order. */
.checkbox-lg > input[type="checkbox"],
input[type="checkbox"].checkbox-lg {
    width: 1.6875rem;
    height: 1.6875rem;
    min-width: 1.6875rem;
}
/* Stacked reminder/notification channel checkboxes — a flex column so every checkbox's left
   edge lines up perfectly (replaces per-item .form-group wrappers, which didn't align cleanly). */
.reminder-channels { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.check-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    cursor: pointer;
}
.radio-button,
input[type="radio"].radio-button,
.radio-button > input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    vertical-align: middle;
    accent-color: var(--color-primary, #0090C8);
    cursor: pointer;
    margin: 0 0.375rem 0 0;
}
span.radio-button {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    min-width: 0;
    margin-right: 0;
}
/* asp:RadioButtonList renders bare <input type="radio"> with NO .radio-button class, so
   the rule above never applies and the dot sits flush against its <label> (e.g. qFIT
   Join3 gender). Give un-classed radios the same gap + alignment so every plain
   RadioButtonList across the four sites reads consistently. :not(.radio-button) avoids
   double-spacing the design-system radios that already set this margin. */
input[type="radio"]:not(.radio-button) {
    vertical-align: middle;
    margin: 0 0.375rem 0 0;
}

/* ── 8. Buttons ────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    gap: 0.375rem;
    padding: var(--btn-padding, 0.5rem 1.25rem);
    font-family: inherit;
    font-size: var(--btn-font-size, 0.9375rem);
    font-weight: var(--btn-font-weight, 500);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    /* CONTRAST (WCAG 1.4.3 AA). Near-black, NOT white, on the brand cyan.
       White on --color-primary (#00B0F0) measures 2.48:1 — below the 4.5:1
       normal-text minimum and below even the 3:1 large-text floor. #111 on the
       same cyan measures 7.61:1. The brand cyan is unchanged; only the text on
       top of it moved. Matches .alert-panel.info / .site-toast.toast-info,
       which already use #111 on this exact fill.
       ⚠ The coloured variants (.save / .danger / .warning / .saved /
       .save-error) each re-declare color: #ffffff on their own darker fills and
       are all LATER in this file, so they keep white and are unaffected. */
    color: #111;
    background-color: var(--color-primary, #0090C8);
    border: none;
    border-radius: var(--btn-radius, 6px);
    cursor: pointer;
    transition: background-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease),
                opacity var(--transition-fast, 0.15s ease);
    white-space: nowrap;
    box-shadow: var(--shadow-btn, 0 1px 2px rgba(0,0,0,0.15));
    min-height: 44px;             /* iOS touch-target accessibility */
    min-width: 44px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.button:hover {
    background-color: var(--color-primary-dark, #005a80);
    /* #111 on --color-primary-dark (#0090C8) = 5.24:1. White here was 3.61:1,
       so the hover state failed AA too even before the rest state was fixed. */
    color: #111;
    text-decoration: none;
}
.button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-btn, 0 1px 2px rgba(0,0,0,0.15)),
                var(--shadow-focus-ring, 0 0 0 3px rgba(0, 176, 240, 0.35));
}
.button:active {
    opacity: 0.92;
    box-shadow: var(--shadow-btn-active, inset 0 2px 4px rgba(0, 0, 0, 0.10));
}
.button:disabled,
.button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Save (lime green) - .button.save */
.button.save {
    background-color: var(--color-save-btn, #32cd32);
    border-color: var(--color-save-btn, #32cd32);
    color: #ffffff;
}
.button.save:hover {
    background-color: var(--color-save-btn-hover, #28a828);
    border-color: var(--color-save-btn-hover, #28a828);
}

/* Danger (red) - .button.danger - Delete, Clear, Cancel */
.button.danger {
    background-color: var(--color-delete-btn, #d32f2f);
    border-color: var(--color-delete-btn, #d32f2f);
    color: #ffffff;
}
.button.danger:hover {
    background-color: var(--color-delete-btn-hover, #b71c1c);
    border-color: var(--color-delete-btn-hover, #b71c1c);
}

/* Transparent (outline only) - .button.transparent */
.button.transparent {
    background-color: transparent;
    color: var(--color-primary, #0090C8);
    border: 1px solid var(--color-primary, #0090C8);
    box-shadow: none;
}
.button.transparent:hover {
    background-color: var(--color-primary-light, #e0f6fe);
    color: var(--color-primary-dark, #005a80);
    border-color: var(--color-primary-dark, #005a80);
}

/* Warning (orange) - .button.warning - Caution/alert action */
.button.warning {
    background-color: var(--color-warning, #e65100);
    border-color: var(--color-warning, #e65100);
    color: #ffffff;
}
.button.warning:hover {
    background-color: #d97706;
    border-color: #d97706;
}

/* Focus rings for colored button variants */
.button.save:focus-visible {
    box-shadow: var(--shadow-btn), 0 0 0 3px rgba(50, 205, 50, 0.35);
}
.button.danger:focus-visible {
    box-shadow: var(--shadow-btn), 0 0 0 3px rgba(211, 47, 47, 0.35);
}

/* Small modifier - .button.small */
.button.small {
    padding: var(--btn-padding-sm, 0.375rem 0.875rem);
    font-size: 0.875rem;
}

/* Save-state feedback (set by site.js setSaving / setSaved / setSaveError). */
.button.saving { opacity: 0.75; cursor: wait; }
.button.saved { background-color: var(--color-success, #2e7d32); color: #fff; }
.button.save-error {
    background-color: var(--color-delete-btn, #d32f2f);
    color: #fff;
    animation: flashError 0.6s ease forwards;
}
@keyframes flashError {
    0%   { background-color: var(--color-delete-btn, #d32f2f); }
    100% { background-color: var(--color-primary, #0090C8); }
}

/* Icon-only button (e.g. the ⓘ Tips trigger, × close). */
.tip-icon-button,
.tips-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #6c757d);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--border-radius-sm, 6px);
    transition: color var(--transition-fast, 0.15s ease),
                background-color var(--transition-fast, 0.15s ease);
}
.tip-icon-button:hover,
.tips-close:hover {
    color: var(--color-text, #1a1f2e);
    background-color: var(--color-primary-light, #e0f6fe);
}
.tip-icon-button:focus-visible,
.tips-close:focus-visible {
    outline: 2px solid var(--color-border-focus, var(--color-primary, #0090C8));
    outline-offset: 2px;
}
/* Make the (i) glyph itself bold — the U+24D8 ⓘ default weight reads as a
   thin outline at this font-size and gets visually lost in the header row.
   Scoped to [aria-expanded] so only the tip-opener triggers go bold; other
   uses of .tip-icon-button (× close, × file-remove) never set aria-expanded
   and keep their original weight. */
.tip-icon-button[aria-expanded] {
    font-weight: bold;
}

/* The trigger is the way to OPEN the Tips card. Once the card is open the
   trigger is redundant (and the card has its own × close button), so hide
   it; it reappears when the user closes the card and aria-expanded flips
   back to "false". Tips-toggle JS is the only thing that sets aria-expanded
   on .tip-icon-button, so other tip-icon-button uses (file-remove buttons,
   inline closers) which never get aria-expanded are unaffected. */
.tip-icon-button[aria-expanded="true"] {
    display: none;
}

/* ── 9. Pills ──────────────────────────────────────────────── */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text, #1a1f2e);
    background-color: var(--color-bg-card, #ffffff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color var(--transition-fast, 0.15s ease),
                border-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease);
}
.pill:hover, .pill:focus { text-decoration: none; }
/* Visible focus ring on a pill that is actually interactive (ToDo QFR-122, 2026-08-09).
   Pills are used two ways: as a static label, and as a <span role="button" tabindex="0">
   filter chip (qFIT's Muscles and RecommendedActivities pages). The second kind is in the
   tab order, and the `.pill:focus` rule above was stripping its underline without putting
   anything back — so a keyboard user tabbing across a row of filters had no idea which one
   they were on. Same treatment as .button:focus-visible so the whole design system agrees.
   :focus-visible, not :focus — a mouse click on a pill should not leave a ring behind. */
.pill:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring, 0 0 0 3px rgba(0, 176, 240, 0.35));
}
.pill:hover { border-color: var(--color-primary, #0090C8); }
.pill.active,
.pill[aria-pressed="true"] {
    background-color: var(--color-primary, #0090C8);
    color: #111;                     /* 7.61:1 on the cyan; white was 2.48:1 */
    border-color: var(--color-primary, #0090C8);
}
.pill.small {
    padding: 0.15rem 0.55rem;
    font-size: var(--font-size-xs, 0.75rem);
}

/* ── 10. Alert / inline message panels ─────────────────────────
   BLOCK, deliberately — NOT flex. A message panel's content is a SENTENCE
   ("Choose <a>Tags for your Trip</a> so the <strong>Recommended Items</strong>
   filter can be used"), and under display:flex every inline fragment between
   the elements becomes its own anonymous flex item. With the default
   flex-wrap:nowrap those items shrink into narrow side-by-side COLUMNS, each
   wrapping internally — the sentence renders as a jumbled grid. Normal block
   flow is the only layout that lets text, links and <strong> flow as one
   paragraph, so every panel on every site reads correctly with no per-call-site
   wrapper span. The leading data-icon marker is absolutely positioned (below)
   to keep the hanging indent flex used to provide. Fixed 2026-07-21. */
.alert-panel {
    display: block;
    padding: 0.75rem 1rem 0.75rem 0.85rem;
    margin: 0.5rem 0 1rem;
    border: 1px solid transparent;
    border-left-width: 4px;          /* solid accent stripe on the left */
    border-radius: var(--border-radius, 10px);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    overflow-wrap: break-word;       /* long URLs/tokens can't force a scrollbar */
}
/* Block children (<p>, <ul>, headings) keep their inner rhythm but must not add
   their own margin on top of the panel's padding — flex used to suppress this. */
.alert-panel > :first-child { margin-top: 0; }
.alert-panel > :last-child  { margin-bottom: 0; }
.alert-panel a {
    color: inherit;
    font-weight: var(--font-weight-medium, 500);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.alert-panel a:hover { text-decoration-thickness: 2px; }
/* Optional leading icon (data-icon="⚠️"). Absolutely positioned in the extra
   left padding so the text block keeps a clean hanging indent — the panel is
   block flow now, so a plain ::before would sit INSIDE the text and only the
   first line would be indented. */
.alert-panel[data-icon] {
    position: relative;
    padding-left: 2.4rem;
}
.alert-panel[data-icon]::before {
    content: attr(data-icon);
    position: absolute;
    left: 0.85rem;
    top: 0.75rem;
    font-size: 1.05em;
    line-height: 1.45;
}
/* Solid, saturated message colors — the SINGLE cross-site standard for BOTH
   inline message panels (.alert-panel) and floating toasts (.site-toast, far
   below, which reuse the exact same values). Fixed hex (NOT theme tokens) so a
   success / error / warning / info message looks IDENTICAL on every site and in
   light AND dark mode. Text is near-black (#111) on lime/orange/cyan (white is
   unreadable there) and WHITE on the red error variant (conventional error
   styling, per request). Set 2026-06-10 per the cross-site message unification. */
.alert-panel.success {
    color: #111;
    background-color: #00ff00;   /* pure lime */
    border-color: rgba(0,0,0,0.22);
    border-left-color: rgba(0,0,0,0.45);
}
.alert-panel.error {
    color: #fff;
    background-color: #ff0000;   /* pure red */
    border-color: rgba(0,0,0,0.22);
    border-left-color: rgba(0,0,0,0.45);
}
.alert-panel.warning {
    color: #111;
    background-color: #ff9600;   /* pure orange */
    border-color: rgba(0,0,0,0.22);
    border-left-color: rgba(0,0,0,0.45);
}
.alert-panel.info {
    color: #111;
    background-color: #00B0F0;   /* accent blue */
    border-color: rgba(0,0,0,0.22);
    border-left-color: rgba(0,0,0,0.45);
}
/* An outline button sitting INSIDE a solid panel must borrow the panel's fixed
   text colour. .button.transparent is primary-blue by default, which is the SAME
   #00B0F0 as the .info background — the label rendered blue-on-blue and was
   invisible (qFIT Error.aspx's "Copy Reference ID"); it is also poor on the lime,
   orange and red variants. currentColor tracks whichever colour the variant set,
   so the button stays readable on all four. */
.alert-panel .button.transparent {
    color: inherit;
    border-color: currentColor;
}
.alert-panel .button.transparent:hover {
    color: inherit;
    background-color: rgba(255,255,255,0.35);
    border-color: currentColor;
}

/* Welcome banner — a PERSISTENT, dismissible variant of .alert-panel used for the
   one-time post-signup message (see BasePage.ShowWelcomeBanner on each site). It
   carries onboarding tips, so unlike a normal success panel it does NOT auto-dismiss;
   the × button (.welcome-banner-close) hides it client-side. Colour comes from the
   success class the host site applies (.success or .alert-success). */
.welcome-banner {
    position: relative;
    padding-right: 2.5rem;
}
.welcome-banner-close {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}
.welcome-banner-close:hover { opacity: 1; }

/* Dismissible inline message panel — the × that BasePage.PopulateAlertPanel appends
   to the PERSISTENT variants (.error / .warning) on all five sites. success/info fade
   themselves out via data-auto-dismiss, so those never get one and never need the
   right-hand gutter. Before this, a server-rendered red error banner had NO close
   control at all: it sat there until the user navigated away or posted back.
   Geometry deliberately matches .welcome-banner-close above — same component, same ×.
   NOTE: clicking the panel BODY does not dismiss it; only the × does, matching the
   floating .site-toast rule. */
.alert-panel.is-dismissible {
    position: relative;
    padding-right: 2.5rem;
}
.alert-panel-close {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}
.alert-panel-close:hover { opacity: 1; }
.alert-panel-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* ── 11. Section headings ─────────────────────────────────── */
.largeheading {
    font-size: var(--font-size-xl, 1.375rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.heading {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-bold, 600);
    color: var(--color-text);
    margin: 0 0 0.4rem 0;
    line-height: 1.3;
}

/* ── 12. Horizontal rule ──────────────────────────────────── */
.hr,
hr.hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--section-gap, 1.5rem) 0;
}

/* ── 13. Required-field indicator ─────────────────────────── */
.required-star {
    color: var(--color-danger);
    margin-left: 0.1em;
}

/* ── 14. Loading spinner ──────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
    vertical-align: middle;
    will-change: transform;
}
.spinner-dark {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: var(--color-primary);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 14a. Inline "updating…" indicator for UpdateProgress ──────
   The standard body of an <asp:UpdateProgress> ProgressTemplate on every site:
   a muted, inline line that appears (after DisplayAfter ms) while an UpdatePanel
   is re-rendering, so a filter change that takes a beat still looks alive.

   Deliberately inline-flex and unobtrusive rather than an overlay: the whole
   point of the UpdatePanel is that the page does NOT flash or move, so a modal
   scrim would undo the win. Reuses the shared .spinner above; the dark variant
   is applied by the caller (`spinner spinner-dark`) on light backgrounds.

   Generalized 2026-08-04 from qMeet's page-local .mm2-updating, which was the
   first instance of this pattern and stays as-is (it is referenced by name in
   MemberMatch's markup and comments). */
.ajax-updating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ── 14b. Full-page navigation loading overlay ─────────────────
   Shown by site.js (initPageNavSpinner) when a real page switch / postback has
   been in flight for a short beat — reassures the user their click registered
   while a slow server or cold app-pool renders the next page. The reveal is
   delayed, so fast loads finish first and the spinner never flashes on them.
   The overlay is created once per page and torn down for free when the next
   page loads. Reuses the `spin` keyframes above. */
#pageNavOverlay {
    position: fixed;
    inset: 0;
    z-index: 20000;                 /* above every modal / drawer / toast */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
    pointer-events: none;
}
#pageNavOverlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;           /* block stray clicks while the next page loads */
}
.page-nav-spinner-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem 1.9rem;
    border-radius: 14px;
    background: var(--color-bg-card, #ffffff);
    color: var(--color-text, #222222);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    min-width: 150px;
}
.page-nav-spinner {
    width: 2.4rem;
    height: 2.4rem;
    border: 3px solid rgba(128, 128, 128, 0.28);
    border-top-color: var(--color-primary, #0a84ff);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
    will-change: transform;
}
.page-nav-spinner-text {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
    .page-nav-spinner { animation-duration: 1.3s; }
    #pageNavOverlay { transition: none; }
}

/* ── 14a. Character counter (below textareas with max length) ── */
.char-counter {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: right;
    margin-top: 0.2rem;
    transition: color 0.2s, font-weight 0.2s;
    font-variant-numeric: tabular-nums;
}
.char-counter.near-limit { color: var(--color-warning); font-weight: var(--font-weight-medium); }
.char-counter.at-limit   { color: var(--color-danger);  font-weight: var(--font-weight-bold);   }

/* ── 15. Back button ──────────────────────────────────────── */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.375rem 0.55rem;
    margin-left: -0.55rem;
    min-height: 44px;
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}
.back-btn:hover {
    color: var(--color-text);
    text-decoration: none;
    background-color: var(--color-primary-light);
}
.back-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    color: var(--color-text);
}

/* Labeled variant: "← Back to Events" instead of a bare ←. Applied by each site's
   site.js applyBackLabel(). A lone arrow immediately left of the <h1> reads as a
   label FOR that <h1> (the iOS "← Settings" convention), which next to the CURRENT
   page's title says the opposite of what it does; naming the real destination is
   the fix. See initBackButton() in Scripts/site.js.

   Deliberately stays on the title's row at every width — the words are what make
   the control legible, and a second line costs more on a phone than a truncated
   destination name does, so the back label elides before the title reflows. */
.back-btn.back-btn-labeled {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%;
    white-space: nowrap;
}
.back-btn.back-btn-labeled .back-btn-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
@media (max-width: 480px) {
    .back-btn.back-btn-labeled {
        max-width: 44%;
        font-size: var(--font-size-xs, 0.8rem);
    }
}

/* ── 16. Utility classes ──────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.text-muted   { color: var(--color-text-muted); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-left    { text-align: left; }
.d-none       { display: none !important; }
.d-flex       { display: flex; }
.d-block      { display: block; }
.flex-wrap    { flex-wrap: wrap; }
.gap-1        { gap: 0.25rem; }
.gap-2        { gap: 0.5rem; }
.gap-3        { gap: 0.75rem; }
.gap-4        { gap: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.w-100 { width: 100%; }
.cursor-pointer { cursor: pointer; }
.nowrap { white-space: nowrap; }
.select-auto { width: auto; }
.col-w-date { width: 8rem; white-space: nowrap; }
.col-w-chk  { width: 2.5rem; }
.detail-card-hidden { display: none; }

/* ── 16a. Toolbar row helpers ────────────────────────────── */
.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
.toolbar-row-spaced {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-top: 0.75rem;
}
.toolbar-actions {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
}
.toolbar-search-grow {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

/* ── 16b. Responsive hide/show ───────────────────────────── */
@media (max-width: 575px) { .hide-xs { display: none !important; } }
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (min-width: 768px) { .show-xs-only { display: none !important; } }

/* ── 17. Focus visible (accessibility) ────────────────────── */
:focus-visible {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ── 18. Modals ───────────────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    backdrop-filter:         blur(4px) saturate(140%);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalFade 0.18s var(--ease-out-quint);
}
.modal-overlay.open { display: flex; }

.modal-box {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: 100%;
    padding: 1.5rem;
    position: relative;
    animation: modalPop 0.22s var(--ease-out-back);
}
@keyframes modalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modalPop {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.75rem 0;
}

.modal-footer {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ── 19. Breadcrumbs ──────────────────────────────────────── */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    margin-right: 0.3rem;
    color: var(--color-text-light);
    font-size: 1.05em;
    line-height: 1;
}
.breadcrumb-item a { color: var(--color-link); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb-item.active { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* ── 20. Tip-card structural helpers ──────────────────────── */
/* Used alongside .tip-card to position the × close button, hold the ⓘ trigger,
   and clear the float. The .tip-card itself is position:relative so .tips-close
   can be absolutely positioned inside. */
.tips-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
}

/* TipsPanel.ascx renders the Ⓘ trigger BEFORE the page header on most pages.
   A plain float:right left the icon on its own line above the title. Anchor
   the trigger absolutely to the upper-right of <main class="page-wrapper">
   so it always sits in the upper-right corner of the title row. */
main.page-wrapper { position: relative; }
.tips-trigger-wrap {
    float: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    margin: 0;
}
@media (min-width: 768px) {
    .tips-trigger-wrap { top: 1.5rem; right: 1.5rem; }
}
@media (min-width: 1200px) {
    .tips-trigger-wrap { top: 2rem; right: 1.5rem; }
}
.tips-clear { display: none; }

/* Reserve right-side space so a long page title can't visually overlap the
   absolutely-positioned Ⓘ trigger. Applies to .page-title (single-element
   title) as well as the .page-header pattern used elsewhere. */
.tips-trigger-wrap ~ .page-title,
.tips-trigger-wrap ~ .page-header,
.tips-trigger-wrap ~ * .page-title,
.tips-trigger-wrap ~ * .page-header {
    padding-right: 3rem;
}

/* ── 21. Form layout helpers ──────────────────────────────── */
.form-group {
    margin-bottom: 1rem;
}
.form-group-flush { margin-bottom: 0; }
.form-group .input-label,
.form-group .label { margin-bottom: 0.25rem; }
.form-group .textbox { width: 100%; }
@media (min-width: 768px) {
    .form-group .textbox { max-width: 480px; }
    /* A .form-group .textbox is capped at 480px on desktop, but a wrapping
       .input-clearable stretches to the full form-group width — leaving its
       absolutely-positioned × clear button floating to the RIGHT of the (narrower)
       textbox instead of inside it. Cap the wrapper to match so the × sits in the
       field. Child combinator on purpose: custom search bars that nest
       .input-clearable deeper (e.g. .wx-search-row > .input-clearable) manage
       their own width and must NOT be capped here. */
    .form-group > .input-clearable { max-width: 480px; }
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin-bottom: 1rem;
}
.form-row .form-group {
    flex: 1 1 100%;
    margin-bottom: 0;
}
@media (min-width: 640px) {
    .form-row .form-group { flex: 1 1 calc(50% - 0.5rem); }
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
    align-items: center;
}
.form-actions-centered { justify-content: center; }

/* ── Quiet Hours window (DoNotDisturb.ascx) ────────────────────
   Keep the From + Until label/dropdown pairs together on one line — two short
   half-hour dropdowns always fit. Wraps the second pair below only on a very
   narrow viewport. Shared across PacklistPRO / qMeet / qFIT. */
.dnd-window-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    margin-bottom: 1rem;
}
.dnd-window-row .dnd-window-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.dnd-window-row .input-label {
    margin-bottom: 0;       /* override the stacked-label bottom margin for inline use */
    white-space: nowrap;
}
.dnd-window-row .dropdown {
    width: 9rem;            /* fits "12:00 AM" + chevron; stable width as the value changes */
}

/* ── Donate page ───────────────────────────────────────────────
   Payment-method row: a round method icon on the left, a wrappable
   name + URL in the middle, and the action buttons (Donate + Copy
   link) on the right. Stacks vertically on narrow screens so the
   buttons stay full-width and tappable. Shared across PacklistPRO /
   qMeet / qFIT Donate pages. The icon / name / url / actions /
   support-list sub-parts were promoted here from PacklistPRO so every
   site renders the same donate layout from the shared design system. */
.donate-method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}
.donate-method + .donate-method {
    border-top: 1px solid var(--color-border);
    margin-top: 0.75rem;
    padding-top: 1rem;
}
.donate-method-icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent-bg, var(--color-info-bg));
    color: var(--color-accent);
    font-size: 1.25rem;
    line-height: 1;
    font-weight: var(--font-weight-medium, 500);
}
.donate-method-body { flex: 1 1 14rem; min-width: 0; word-break: break-word; }
.donate-method-name { margin: 0; font-weight: var(--font-weight-medium, 500); }
.donate-method-url {
    display: block;
    margin-top: 0.15rem;
    word-break: break-all;
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.donate-method-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.donate-method-actions .button { white-space: nowrap; }
.donate-method .button { flex: 0 0 auto; }
.donate-support-list { margin: 0.5rem 0 0 1.25rem; padding: 0; }
.donate-support-list li { margin: 0.15rem 0; }
@media (max-width: 575px) {
    .donate-method-actions { width: 100%; margin-left: 0; }
    .donate-method-actions .button { flex: 1 1 auto; }
}
@media (max-width: 480px) {
    .donate-method { gap: 0.5rem; }
    .donate-method-body { flex: 1 1 100%; }
}

/* Suggested-amount picker (Donate pages) — shared so all sites match.
   THEME-AWARE: pills read --color-bg / --color-text / --color-border so they
   stay readable in dark mode. (An earlier qFIT-local version used a token that
   doesn't exist — var(--color-surface-2,…) — and fell back to a hard-coded
   near-white #f3f4f6, giving light text on a white pill in dark mode.)
   Selected pill = accent fill + white text. */
.donate-amounts-card .donate-amount-fieldset { border: 0; padding: 0; margin: 0; }
.donate-amount-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
    margin-top: 0.4rem;
}
.donate-amount-pill {
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 1rem;
    font-weight: var(--font-weight-bold, 600);
    cursor: pointer;
    min-width: 64px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.donate-amount-pill:hover { border-color: var(--color-accent); }
.donate-amount-pill:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.donate-amount-pill:active { transform: translateY(1px); }
.donate-amount-pill.selected,
.donate-amount-pill[aria-checked="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #111;                     /* 7.61:1 on the cyan; white was 2.48:1 */
}
.donate-amount-custom-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.1rem 0.6rem 0.1rem 0.85rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: var(--font-weight-bold, 600);
}
.donate-amount-custom {
    width: 5.5rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    padding: 0.35rem 0.25rem;
    font-size: 1rem;
    font-weight: var(--font-weight-bold, 600);
    text-align: right;
    -moz-appearance: textfield;       /* hide spinner arrows on a donation field */
}
.donate-amount-custom::-webkit-outer-spin-button,
.donate-amount-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.donate-amount-custom::placeholder { color: var(--color-text-muted); font-weight: var(--font-weight-normal, 400); }
.donate-amount-custom:focus { outline: none; }
.donate-amount-custom-label:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Amount-aware "Donate via" CTA sits in .donate-method-actions next to Copy link. */
.donate-cta { min-width: 12.5rem; }
@media (max-width: 575px) {
    .donate-amount-pill { flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
    .donate-amount-custom-label { flex: 1 1 100%; justify-content: center; }
    .donate-cta { min-width: 0; }
}

/* Compact horizontal pager row: [‹ Prev]  page X of Y  [Next ›].
   Stays a single line at every breakpoint and ships tighter button
   padding than .button.small so the pager doesn't dominate the page. */
.pager-inline {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.pager-inline > .button {
    padding: 0.15rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* ── 22. Responsive table wrapper ─────────────────────────── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 23. Banners (full-width strip below the nav) ─────────── */
.banner-demo {
    background-color: var(--color-warning-bg);
    border-bottom: 1px solid var(--color-warning-border);
    color: var(--color-warning);
    padding: 0.55rem 1rem;
    font-size: var(--font-size-sm);
    text-align: center;
    font-weight: var(--font-weight-medium);
}
.banner-demo a {
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Optional leading icon kept smaller than text so it acts as a quiet marker. */
.banner-demo-icon {
    font-size: 1.05em;
    margin-right: 0.15rem;
    vertical-align: -1px;
}

/* ── 23a. Simple-mode notice (CROSS-SITE) ──────────────────────
   "You are in Simple mode - some features are hidden." Rendered site-wide from each
   master page's ConfigureSimpleModeBar when SiteMode = 1, for a signed-in member who
   has not dismissed it. Without it, every feature Simple hides just looks absent.

   LIVES HERE, NOT IN A SITE'S styles.css, ON PURPOSE (2026-08-04): the owner asked for
   ONE bar that is identical on qMEET, qFIT and PacklistPRO. It is deliberately
   self-contained - it does NOT reuse qMEET's .banner-events-* inner classes, which is
   what the original qMEET-only version did, because those classes exist ONLY in
   qMEET/Content/styles.css and would have rendered an unstyled bar on the other two.
   All three sites load this file after their own styles.css, so these rules win.

   Teal, so that on qMEET - the only one of the three that stacks several bars - it stays
   distinct from the grey chat bar, the blue events bar and the purple invites bar.
   White-on-teal reads correctly in both light and dark themes, so it needs no
   prefers-color-scheme variant. No "restore" chip: dismissal is for good (1-year cookie),
   and switching Site Mode always brings it back. ── */
.banner-simplemode {
    background-color: #0f766e;
    color: #fff;
    padding: 0.4rem 0.5rem 0.4rem 0.35rem;
    font-size: var(--font-size-sm);
}
.banner-simplemode-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    /* 🔴 Reserve the top-right corner for the floating "?" help pill.
       .tutorial-help-pill is position:fixed at top:0.5rem with z-index 1502, and this bar sits
       at the very top of the document - so at scroll-top the pill lands exactly on top of this
       bar's x. MEASURED in Chrome on PacklistPRO 2026-08-04 before this rule existed:
       elementFromPoint() at the centre of the x returned #tutorialHelpPill, i.e. the dismiss
       button was completely unclickable. MSBuild, aspnet_compiler and a served-HTML grep all
       passed - only looking at the rendered page caught it.
       Reserved via the SAME custom property the pill anchors itself with, so the gap tracks the
       pill per site instead of being a guess: qMEET sets --pill-cluster-right in its own :root
       for its three-pill cluster, while qFIT and PacklistPRO fall back to 1rem. The 2.4rem is
       the pill's own min-width (1.9rem) plus breathing room. */
    padding-right: calc(var(--pill-cluster-right, 1rem) + 2.4rem);
}
/* Pin the body colour: some sites style bare text inside banners, and this bar has to
   stay legible on teal regardless of which site it renders on. */
.banner-simplemode-body { color: #fff; }
.banner-simplemode-icon {
    font-size: 1.05em;
    margin-right: 0.25rem;
    vertical-align: -1px;
}
/* "Show everything" - the one-click switch to Standard. An inverted pill so it reads as
   the action in a bar that is otherwise plain text. Every state pinned, or a site's own
   :visited / :hover link rules would repaint it mid-bar. */
.banner-simplemode-cta,
.banner-simplemode-cta:link,
.banner-simplemode-cta:visited,
.banner-simplemode-cta:hover,
.banner-simplemode-cta:focus,
.banner-simplemode-cta:active {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: #fff;
    color: #0f766e;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}
.banner-simplemode-cta:hover,
.banner-simplemode-cta:focus { background-color: #e6fffa; }
/* Secondary link through to the setting itself, for the same reason the CTA pins its
   colours. */
.banner-simplemode-link,
.banner-simplemode-link:link,
.banner-simplemode-link:visited,
.banner-simplemode-link:hover,
.banner-simplemode-link:focus,
.banner-simplemode-link:active {
    margin-left: 0.55rem;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
/* Dismiss. Sized to the 24px minimum tap target rather than to the glyph. */
.banner-simplemode-x {
    flex: 0 0 auto;
    min-width: 24px;
    min-height: 24px;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.banner-simplemode-x:hover,
.banner-simplemode-x:focus { color: #e6fffa; }

/* Deep-link highlight for Preferences > Site Mode. The notice links to
   /Preferences#sitemode; the fragment does the scrolling, and this ring is what tells the
   member WHICH of the ~12 form groups they were just sent to. Without it the page scrolls
   and leaves them hunting. Every site's Preferences.aspx carries id="sitemode" on that
   form-group; keep the three in step. */
#sitemode:target {
    border-radius: 4px;
    box-shadow: 0 0 0 2px var(--color-accent);
    padding: 0.35rem;
}

/* ── 23b. Persistent demo state ────────────────────────────────
   .banner-demo above renders ABOVE the sticky .site-nav in both masters, so it
   scrolls out of view after the first screenful. That is fine on a page whose
   only controls are chrome (a tutorial overlay, a client-side filter) but wrong
   on a page that offers a Save an anonymous visitor cannot complete: by the time
   they reach the button, the only warning they were given is off-screen.

   .demo-strip is the persistent form — pinned to the bottom edge, always in view,
   and deliberately NOT dismissible (the constraint it describes does not go away
   when the notice is closed). Pinned to the BOTTOM rather than the top because
   .site-nav already owns `position:sticky; top:0` and two stickies at top:0 in one
   scroll container overlap.

   Paired with .demo-action-badge, which site-core.js stamps next to each primary
   action so the warning also exists at the point of decision. Both are driven by
   `<body data-demo-state="persistent">`, rendered by each site's master. */
.demo-strip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9996;              /* the established bottom-furniture band; below the
                                   toast stack (9999) so a toast is never obscured */
    background-color: var(--color-warning-bg);
    border-top: 2px solid var(--color-warning-border);
    color: var(--color-warning);
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}
.demo-strip a {
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 2px;
    color: inherit;
}

/* Lift the two bottom-right fixed buttons clear of the strip.
   ⚠ The install pill's offset MUST reach .pwa-install-wrap where that wrapper exists:
   inside it the button is position:static, so a `bottom` on the button alone is inert
   and the pill would sit under the strip. It is delivered as an INHERITED CUSTOM
   PROPERTY on <body> rather than as a `body.has-demo-strip .pwa-install-wrap` rule,
   because that would be a second place where the pill's resting offset is written and
   the two would have to keep winning a specificity argument against each other every
   time either moved. A variable set on the ancestor simply inherits: whoever sets
   --pwa-install-bottom last in the cascade wins, and there is only one rule that ever
   reads it. The bare-button selector stays for the sister sites, which append a lone
   .pwa-install-btn and have no wrapper. */
body.has-demo-strip .back-to-top     { bottom: 4rem; }
body.has-demo-strip .pwa-install-btn { bottom: 7.25rem; }
body.has-demo-strip                  { --pwa-install-bottom: 7.25rem; }

/* Reserve the strip's height so it never covers the end of the page (footer, last
   form action).
   ⚠ This is a real in-flow SPACER ELEMENT, not `body { padding-bottom }`, because
   padding on <body> is inert on these pages: body carries `overflow: hidden auto`
   and is not the scroll container, so a measured `padding-bottom: 52px` — set from
   the stylesheet OR inline with !important — changed neither the computed value nor
   body.scrollHeight. A spacer in normal flow inside the content wrapper reserves the
   space regardless of which ancestor scrolls. site-core.js appends it. */
.demo-strip-spacer {
    height: 3.25rem;
    flex: 0 0 auto;     /* survives a flex-column wrapper, where height alone can collapse */
}

/* The at-the-point-of-action marker. Inline-flex so it sits on the button's line;
   `.button + &` spacing is handled by the gap in .form-actions where present. */
.demo-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--color-warning-border);
    border-radius: 999px;
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* Dark mode: --color-warning-bg / -border ARE redeclared for dark, but
   --color-warning itself is NOT (it stays #e65100, ~3:1 on the dark surface),
   which is why .banner-demo carries an explicit dark color above. Same here. */
[data-theme="dark"] .demo-strip,
[data-theme="dark"] .demo-action-badge { color: #ffa726; }

.banner-offline {
    background-color: var(--color-danger-bg);
    border-bottom: 1px solid var(--color-danger-border);
    color: var(--color-danger);
    padding: 0.55rem 1rem;
    font-size: var(--font-size-sm);
    text-align: center;
    font-weight: var(--font-weight-medium);
    display: none;
    animation: bannerSlideIn 0.22s var(--ease-out-quint);
}
body.offline .banner-offline { display: block; }
@keyframes bannerSlideIn {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ── 24. ASP.NET validator / inline field error ───────────── */
/* A small red "!" bullet precedes the message so it reads as an error even on
   calm pages. inline-flex keeps the bullet aligned with the wrapped message. */
.field-validation-error,
.error-message {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
}
.field-validation-error::before,
.error-message::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    background: var(--color-danger);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
}

/* ── Clearable search input ────────────────────────────────────────
   Wrapper + clear button for search/filter fields. */
.input-clearable {
    position: relative;
    display: flex;
    align-items: center;
}
/* Scoped to `input`, not `.textbox`: several pages put a bespoke class on the
   field (NHT Gallery's .tile-filter, etc.). When these rules were .textbox-only
   those fields reserved no room for the × (so it sat on top of the text) and
   kept the native WebKit cancel button, giving two ×'s side by side. */
.input-clearable input { padding-right: 2rem; }
.input-clearable input::-webkit-search-cancel-button,
.input-clearable input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.input-clear-btn {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-light, #9aa0a8);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem;
    border-radius: var(--border-radius-sm, 6px);
    transition: color var(--transition-fast, 0.15s ease),
                background-color var(--transition-fast, 0.15s ease);
    /* ALWAYS visible — the × is a permanent affordance, not a state indicator.
       It used to be display:none until the box had a value, which (a) made the
       control appear/disappear as you typed and (b) failed outright on inputs
       with no placeholder attribute, since the reveal rule keyed off
       :not(:placeholder-shown). Clicking it on an empty box is a harmless no-op. */
    display: block;
}
/* The hover fill is a surface-relative wash, NOT --color-primary-light. That
   token is picked elsewhere precisely because it flips per theme, but it is an
   OPAQUE value chosen against the page background, and this × is the one place
   that sits INSIDE a .textbox — the lightest surface in either theme. Measured:
   dark-mode input #555555 has luminance 0.091 against the token's dark #082a3d
   at 0.020, so the fill landed DARKER than the field and painted a near-black
   chip; light-mode input #e2f1fb is visually indistinguishable from the token's
   light #e0f6fe, so the hover disappeared entirely. A translucent wash
   composites against whatever is actually underneath and is correct on both.
   Same reasoning would apply to .password-toggle:hover (also in-field). */
.input-clear-btn:hover {
    color: var(--color-text, #1a1f2e);
    background-color: var(--color-hover-wash, rgba(0, 0, 0, 0.10));
}
.input-clear-btn:focus {
    outline: 2px solid var(--color-border-focus, var(--color-primary, #0090C8));
    outline-offset: 2px;
}
/* .is-visible is now a no-op (the button is always shown); the rule is kept so
   any page still adding that class doesn't break. The old companion rule
   `.textbox:not(:placeholder-shown) ~ .input-clear-btn` was removed with the
   always-visible change above. */
.input-clear-btn.is-visible {
    display: block;
}

/* ── Skip-to-content link (WCAG 2.4.1) ────────────────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    background-color: var(--color-accent, #00B0F0);
    color: #111;                     /* 7.61:1 on the cyan; white was 2.48:1 */
    padding: 0.5rem 0.875rem;
    border-radius: var(--border-radius-sm, 6px);
    text-decoration: none;
    font-weight: var(--font-weight-bold, 600);
    z-index: calc(var(--nav-z) + 100);
    transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0.5rem;
    /* The ring sits OUTSIDE the pill (outline-offset), against the page
       background, so it stays white; only the text on the cyan changed. */
    outline: 3px solid #fff;
    outline-offset: 2px;
    color: #111;
}

/* ── Card enter animation ─────────────────────────────────── */
html[data-page-enter] .card {
    animation: cardEnter 280ms var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
html[data-page-enter] .card:nth-child(2) { animation-delay: 40ms; }
html[data-page-enter] .card:nth-child(3) { animation-delay: 80ms; }
html[data-page-enter] .card:nth-child(4) { animation-delay: 120ms; }
html[data-page-enter] .card:nth-child(n+5) { animation-delay: 160ms; }
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-page-enter] .card { animation: none; }
}

/* ── Data table ───────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
}
.data-table th {
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 2px solid var(--color-border, #e0e0e0);
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.data-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    vertical-align: middle;
    transition: background-color var(--transition-fast);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) td { background-color: color-mix(in srgb, var(--color-bg) 50%, transparent); }
.data-table tr:hover td { background-color: var(--color-primary-light, #e0f6fe); }
.data-table-sticky thead th {
    position: sticky;
    top: var(--nav-height, 56px);
    z-index: 2;
    background: var(--color-bg-card);
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-bg-nav, #1a1a2e);
    color: rgba(255,255,255,0.6);
    font-size: var(--font-size-sm, 0.875rem);
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: 3rem;
}
.site-footer a { color: rgba(255,255,255,0.8); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer p { margin: 0.25rem 0; }
.site-footer-links {
    text-align: center;
    line-height: 1.8;
    margin: 0 auto 0.4rem;
}
.site-footer-sep { color: rgba(255,255,255,0.35); }
.site-footer-copy { color: rgba(255,255,255,0.5); font-size: var(--font-size-xs, 0.75rem); }
.site-footer-copy a { color: rgba(255,255,255,0.65); }

/* .linklike-btn: a <button> that should visually present as an inline link
   (footer "Press ? for shortcuts" / "Back to top" on all 3 sites). Keeps
   semantic HTML (button = action, link = navigation) while preserving the
   inline-text appearance the surrounding paragraph expects. Single-class
   selector (0,1,0) so a co-applied .link class still controls color +
   text-decoration for buttons authored as class="link linklike-btn".
   (Migrated here from PacklistPRO Content/styles.css 2026-06-07.) */
.linklike-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    text-align: inherit;
    display: inline;
    line-height: inherit;
}

/* ── Page layout ──────────────────────────────────────────── */
.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}
@media (min-width: 768px)  { .page-wrapper { padding: 1.5rem; } }
@media (min-width: 1200px) { .page-wrapper { padding: 2rem 1.5rem; } }
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.page-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.page-header-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted, #6c757d);
}
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 50%;
    font-size: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.empty-state-title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.4rem;
}
.empty-state-text { margin-top: 0.5rem; }
.empty-state-sub {
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.empty-state-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.empty-state .button { margin-top: 0.75rem; }

/* ── Session expired modal ────────────────────────────────── */
#session-expired-modal .modal-box {
    text-align: center;
    padding-top: 2rem;
}
#session-expired-modal .modal-box::before {
    content: "\23F1";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.75rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 50%;
    font-size: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}
#session-expired-modal .modal-footer {
    justify-content: center;
}

/* ── Bootstrap dark-mode fix ─────────────────────────────── */
[data-theme="dark"] .modal-content {
    background-color: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--color-border);
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Password wrapper ────────────────────────────────────── */
.password-wrapper              { position: relative; display: flex; align-items: center; }
.password-wrapper .textbox     { flex: 1; padding-right: 2.5rem; }
.password-toggle {
    position: absolute;
    right: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    padding: 0.3rem 0.45rem;
    line-height: 1;
    min-height: 0;
    min-width: 0;
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.password-toggle:hover  { color: var(--color-text); background: var(--color-primary-light); }
.password-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); color: var(--color-text); }

/* ── Caps-lock warning (shown by site.js initCapsLockWarning on password fields) ── */
.caps-lock-warning {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-warning);
    font-weight: var(--font-weight-medium);
}
.caps-lock-warning[hidden] { display: none; }

/* ── Textarea sizing variants ────────────────────────────── */
.textbox-ml-xs   { min-height: 60px; }
.textbox-ml-sm   { min-height: 75px; }
.textbox-ml      { min-height: 100px; }
.textbox-ml-md   { min-height: 150px; }
.textbox-ml-lg   { min-height: 200px; }
.textbox-ml-xl   { min-height: 300px; }

/* ── Print ────────────────────────────────────────────────── */
@media print {
    .site-nav, .site-footer, .skip-link, .banner-offline, .banner-demo,
    .demo-strip, .demo-action-badge,
    .tips-trigger-wrap, .tips-panel, .tips-trigger,
    .tip-card, .tip-icon-button,
    .back-to-top, .pwa-install-btn, .pwa-install-wrap, .shortcuts-overlay, .scroll-progress-bar,
    .site-toast, .toc-btn, .toc-overlay,
    .modal-overlay, .form-actions, .toolbar-actions,
    .page-header-actions { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    body.has-demo-strip { padding-bottom: 0 !important; }   /* the strip is hidden above */
    .card, .main-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
    .page-wrapper { max-width: none; padding: 0; }
    a[href]:not([href^="#"])::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
    .progress-track { border: 1px solid #999; }
    .progress-fill  { background: #555 !important; }
    .exp-typebar-seg { filter: grayscale(0.25) !important; }
}

/* ── Print: page numbering ─────────────────────────────────────────
   Adds "Page X of Y" to the bottom-right of every printed page so a
   multi-page packlist / event detail / fitness report can be reassembled
   if pages get separated. counter(page) and counter(pages) are CSS
   built-ins kept by the print engine. Browsers that don't yet support
   @page margin boxes (older Safari, older Firefox) will silently ignore
   this; the rest of the print layout is unaffected. Users on those
   browsers can still enable the built-in "Headers and footers" option
   in the browser's print dialog as a fallback.

   @top-* boxes are intentionally left empty so the layout doesn't
   conflict with whatever the user has set as the browser's print header.
   Margins are also left untouched here — each site's @media print block
   handles per-page chrome (hiding nav, footer, etc.). */
@page {
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 9pt;
        color: #666;
        font-family: var(--font-family, sans-serif);
    }
}

/* ── 25. Dirty-form save indicator ────────────────────────────── */
[data-dirty-watch].is-dirty .button.save:not(.saving):not(.saved) {
    position: relative;
    box-shadow: var(--shadow-btn), 0 0 0 2px color-mix(in srgb, var(--color-save-btn) 40%, transparent);
}
[data-dirty-watch].is-dirty .button.save:not(.saving):not(.saved)::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-save-btn);
    animation: saveDotPulse 1.5s var(--ease-in-out) infinite;
}
@keyframes saveDotPulse {
    0%, 100% { transform: scale(1);   opacity: 0.95; }
    50%      { transform: scale(1.2); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
    [data-dirty-watch].is-dirty .button.save::before { animation: none; }
}

/* ── Contact Us form layout helpers ──────────────────────────── */
.cu-site-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.cu-site-group { margin-bottom: 0; }
.cu-site-select { width: auto; }
.cu-page-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 160px;
}
/* form-group with extra top margin when stacked below another form-group */
.cu-group-spaced { margin-top: 0.5rem; }
/* Char counter under multiline text — left-aligned override */
.cu-char-counter { text-align: left; }
/* Attachments file picker row */
.cu-file-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}
.cu-file-picker-label {
    cursor: pointer;
    margin: 0;
}
/* Drop-zone wrapper around the file picker — gets the dashed border and overlay
   on dragover. Picker continues to work for click-to-upload too. */
.cu-file-drop {
    position: relative;
    border: 1px dashed transparent;
    border-radius: var(--border-radius-sm);
    padding: 0.35rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.cu-file-drop-hint {
    color: var(--color-text-muted);
    font-style: italic;
}
@media (hover: none) and (pointer: coarse) {
    /* Hide the drag hint on touch devices — drag-and-drop isn't a natural mobile gesture. */
    .cu-file-drop-hint { display: none; }
}
.cu-file-drop.cu-file-dragover {
    border-color: var(--color-accent);
    background: var(--color-primary-light);
}
.cu-file-drop-overlay {
    position: absolute;
    inset: 0.35rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-primary-light) 90%, transparent);
    color: var(--color-primary-dark);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    pointer-events: none;
    text-align: center;
}
.cu-file-drop.cu-file-dragover .cu-file-drop-overlay { display: flex; }
/* File-error alert — hidden when there are no messages to show.
   Uses :empty so the panel auto-hides whenever JS clears innerHTML to '' and
   reappears as soon as JS writes any text. :empty has higher specificity than
   the shared .alert-panel { display: block } so we win the cascade without
   needing !important. The .has-error class is kept as a styling hook (e.g.
   for any future "shake" animation) but no longer drives display. */
.cu-file-error {
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
}
.cu-file-error:empty { display: none; }
/* Narrow auto-width selects (Urgency/Importance/Expecting a Reply) */
.cu-select-auto { width: auto; }

/* Submit row spacing */
.cu-submit-row {
    margin-top: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* File upload list (Contact Us attachments) */
.cu-file-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
}
.cu-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}
.cu-file-item:last-child { border-bottom: none; }
.cu-file-name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-file-size  { color: var(--color-text-muted); flex-shrink: 0; }
.cu-file-remove { color: var(--color-danger); flex-shrink: 0; }

/* About-page hero — slightly tinted background + a soft "spotlight" radial gradient. */
.about-hero {
    background-image:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
            transparent 55%),
        linear-gradient(180deg, var(--color-bg-card), var(--color-bg-card));
}
[data-theme="dark"] .about-hero {
    background-image:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
            transparent 55%),
        linear-gradient(180deg, var(--color-bg-card), var(--color-bg-card));
}

/* ── 13. Navigation ──────────────────────────────────────────── */

.site-nav {
    position: sticky;
    top: 0;
    z-index: var(--nav-z);
    background-color: var(--color-bg-nav);
    /* Subtle gradient sheen instead of flat color — adds depth without distraction.
       Falls back to flat bg if linear-gradient unsupported (none modern). */
    background-image: linear-gradient(to bottom,
                       color-mix(in srgb, var(--color-bg-nav) 88%, #ffffff 12%) 0%,
                       var(--color-bg-nav) 100%);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-md);
    /* Hairline accent under the bar, separating nav from page content */
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.site-nav .nav-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-brand {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.005em;
    transition: opacity var(--transition-fast);
}
.nav-brand:hover { color: #fff; text-decoration: none; opacity: 0.92; }
.nav-brand-accent { color: var(--color-accent); }
/* Hamburger toggle */
.nav-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
}
@media (min-width: 992px) { .nav-toggle { display: none; } }

/* Nav menu */
.nav-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-nav);
    overflow-y: auto;
    z-index: calc(var(--nav-z) - 1);
    padding: 0.5rem 0 2rem;
    /* Strip the default UL bullet — without this, <li class="nav-item"> rows
       (Home, My Trips, Quicklist, etc.) render with a disc, while role-gated
       <asp:Panel> items (Setup, Admin, My Account, Login — rendered as <div>)
       don't, so the menu looks inconsistent. The dot has no semantic purpose. */
    list-style: none;
    margin: 0;
}
.nav-menu.open { display: flex; }

@media (min-width: 992px) {
    .nav-menu {
        display: flex;
        flex-direction: row;
        position: static;
        background: none;
        overflow: visible;
        padding: 0;
        align-items: center;
        gap: 0.25rem;
    }
}

/* Nav items */
.nav-item { position: relative; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
    position: relative;
}
.nav-link:visited { color: rgba(255,255,255,0.85); }
/* Hover/active fill the link with the brand cyan, so the label must go
   near-black: white on #00B0F0 is 2.48:1, #111 is 7.61:1. The nav's resting
   links stay white — they sit on the dark --color-bg-nav bar, not on cyan. */
.nav-link:hover {
    color: #111;
    background-color: var(--color-accent);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
}
.nav-link.active {
    color: #111;
    background-color: var(--color-accent);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
}

/* Logout link — red text so the destructive sign-out action is unmistakable.
   The ancestor selector (.nav-menu) raises specificity above .nav-dropdown
   .nav-link's mobile override so the red color sticks on every viewport. */
.nav-menu .nav-link.nav-link-logout,
.nav-menu .nav-link.nav-link-logout:visited {
    color: #ef5350;
}
.nav-menu .nav-link.nav-link-logout:hover {
    color: #ff8a80;
    background-color: rgba(239, 83, 80, 0.12);
}
/* Underline accent on hover for root-level desktop links — appears beneath the link
   bar without shifting layout. Hidden by default; expands from center on hover/active. */
@media (min-width: 992px) {
    .nav-menu > .nav-item > .nav-link::after {
        content: "";
        position: absolute;
        bottom: 4px;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--color-accent);
        transition: width var(--transition-fast), left var(--transition-fast);
        border-radius: 1px;
    }
    .nav-menu > .nav-item > .nav-link.active::after,
    .nav-menu > .nav-item:hover > .nav-link::after {
        width: calc(100% - 2.5rem);
        left: 1.25rem;
    }
    /* Don't double-decorate when the active state already applies a full background. */
    .nav-menu > .nav-item > .nav-link.active::after { display: none; }
}

/* Root-level nav links: slightly larger than dropdown links */
.nav-menu > .nav-item > .nav-link {
    font-size: var(--font-size-base); /* 1rem vs --font-size-sm (0.875rem) for dropdowns */
}

/* Dropdown arrow */
.nav-link-has-dropdown::after {
    content: "▾";
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

/* Dropdown menu */
.nav-dropdown {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Dropdown links slightly larger than the old sm default */
.nav-dropdown .nav-link { font-size: 1.0625rem; }

/* "(soon)" suffix on nav links that go to "Coming Soon" stub pages. Smaller
   and dimmer than the main label so users understand the link works but the
   feature isn't built yet. Subtle dotted underline reinforces "in progress". */
.nav-soon {
    font-size: 0.7em;
    color: rgba(255,255,255,0.5);
    font-style: italic;
    margin-left: 0.3rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    letter-spacing: 0.02em;
}
/* Same treatment when the (soon) label appears on light content surfaces
   (Admin page bullets reference stub pages with `<span class="nav-soon">`). */
.card .nav-soon {
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
}
/* "New since last visit" badge — small accent-colored dot next to a nav link
   (currently used on Changes / New Features). The dot pulses gently to draw
   the eye without being obnoxious. Visit the destination page → server-side
   clears the cookie → badge disappears on next render. */
.nav-badge-new {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.7em;
    color: var(--color-accent);
    line-height: 1;
    vertical-align: middle;
    animation: navBadgePulse 2s var(--ease-in-out) infinite;
}
@keyframes navBadgePulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-badge-new { animation: none; }
}

/* Red count pill for the admin "Admin" nav item — shows how many items are
   waiting in the moderation queue (Site.Master.SetAdminBadge, admin-only).
   Shares the navBadgePulse animation so it reads as "needs attention". */
.nav-badge-count {
    display: inline-block;
    min-width: 1.25em;
    margin-left: 0.35rem;
    padding: 0.05em 0.4em;
    font-size: 0.7em;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    text-align: center;
    color: #fff;
    background-color: var(--color-danger);
    border-radius: 999px;
    vertical-align: middle;
    animation: navBadgePulse 2s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .nav-badge-count { animation: none; }
}

@media (max-width: 991px) {
    .nav-dropdown { padding-left: 1rem; background-color: var(--color-bg-nav-dropdown); }
    .nav-dropdown.open { display: block; }
    .nav-dropdown .nav-link {
        padding: 0.5rem 1.25rem;
        color: rgba(255,255,255,0.7);
    }
    .nav-dropdown .nav-link.active {
        background-color: var(--color-accent);
        color: #111;                 /* 7.61:1 on the cyan; white was 2.48:1 */
        font-weight: var(--font-weight-bold);
    }
}
@media (min-width: 992px) {
    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background-color: var(--color-bg-nav-dropdown);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        z-index: 999;
        padding: 0.35rem 0;
        margin-top: 0.25rem;
        /* Subtle slide-down + fade for dropdown reveal */
        animation: navDropFade 0.18s var(--ease-out-quint);
        transform-origin: top center;

        /* ── Long-menu overflow (added 2026-07-28) ───────────────────────
           .site-nav is position:sticky/top:0, and this panel is absolutely
           positioned inside it, so it does NOT move when the page scrolls.
           Without a cap, a tall menu (qFIT's and qMEET's "More" are the worst)
           simply ran past the bottom of the viewport and those entries were
           permanently unreachable on desktop — no amount of page scrolling
           brought them back. Cap to the space actually below the bar and let
           the panel scroll itself.
           overscroll-behavior: contain stops the scroll chaining to the page
           once the menu hits its end. */
        max-height: calc(100vh - var(--nav-height, 56px) - 1rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Thin, theme-appropriate scrollbar on the dark nav panel. */
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.35) transparent;
    }
    .nav-dropdown::-webkit-scrollbar { width: 8px; }
    .nav-dropdown::-webkit-scrollbar-track { background: transparent; }
    .nav-dropdown::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,0.3);
        border-radius: 999px;
    }
    .nav-dropdown::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.45); }

    /* Invisible bridge so the cursor stays in hover when crossing from
       the trigger to the dropdown — the dropdown has margin-top: 0.25rem
       which creates a dead zone where neither the nav-item nor the
       dropdown is hovered, so it vanishes mid-traversal.
       ⚠ This USED TO be .nav-dropdown::before at top:-10px. That breaks the
       moment the panel becomes a scroll container (above): overflow in the
       block-START direction is clipped and never scrollable, so the bridge
       was clipped away and the menu vanished mid-traversal again. It now
       hangs off the TRIGGER LINK instead, which is not a scroll container.
       ::before, not ::after — .nav-link-has-dropdown::after is the ▾ caret. */
    .nav-item:hover > .nav-link-has-dropdown::before,
    .nav-item:focus-within > .nav-link-has-dropdown::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 10px;
        background: transparent;
    }

    /* Right-aligned dropdown for trailing nav items (e.g. the My Account
       menu on the far right of the navbar). Without this, left:0 anchors
       the panel to the trigger's left edge and the panel overflows the
       viewport on the right. Opt in by adding .nav-item-end on the parent
       .nav-item. */
    .nav-item.nav-item-end:hover .nav-dropdown,
    .nav-item.nav-item-end:focus-within .nav-dropdown {
        left: auto;
        right: 0;
    }
    .nav-dropdown .nav-link {
        padding: 0.5rem 1rem;
        border-radius: 0;
    }
    .nav-dropdown .nav-link:hover {
        background-color: var(--color-accent);
        color: #111;                 /* 7.61:1 on the cyan; white was 2.48:1 */
    }
    .nav-dropdown .nav-link.active {
        background-color: var(--color-accent);
        color: #111;                 /* 7.61:1 on the cyan; white was 2.48:1 */
        font-weight: var(--font-weight-bold);
    }
}
@keyframes navDropFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section label + divider inside long dropdowns. */
.nav-section-label {
    list-style: none;
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #808080;
    font-weight: var(--font-weight-bold);
    pointer-events: none;
}
.nav-divider {
    list-style: none;
    margin: 0.25rem 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    height: 0;
}
@media (max-width: 991px) {
    .nav-section-label {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* Nav right section (auth links) */
.nav-right {
    display: flex;
    flex-direction: column;
}
@media (min-width: 992px) {
    .nav-right {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        margin-left: auto;
    }
}

.footer-kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 0.35em;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85em;
    line-height: 1.4;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-bottom-width: 2px;
    border-radius: 3px;
    text-align: center;
}
/* Hide the inline shortcut hint on touch devices — there's no keyboard. */
@media (hover: none) and (pointer: coarse) {
    #site-footer-shortcuts,
    #site-footer-shortcuts + .site-footer-sep { display: none; }
}

/* ── 22. Checklist items (Packlist / Tasklist) ───────────────── */

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item.checked > .item-label { text-decoration: line-through; color: var(--color-text-muted); }

.item-label {
    flex: 1;
    font-size: var(--font-size-base);
    cursor: pointer;
}

/* Options panel Save & Close row — sits below the Email / Print row so the
   close affordance is unambiguous. Top border separates it visually from the
   secondary actions above; centered so it reads as a primary "I'm done" action. */
.options-close-row {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

/* ── Post-login Install + Push modal (site.js initPostLoginPrompts) ───────
   Shown on the first authenticated page load after a successful login.
   Two stacked cards (Install PWA, Enable push) inside one modal — each
   independently hideable; modal auto-closes when both are dismissed. The
   markup lives in each site's Site.Master (server-rendered, gated on the
   one-shot post-login cookie). Styling is shared across all 3 sister
   sites; per-site copy/strings live in the markup, not here. */
.post-login-box {
    max-width: 540px;
    width: 100%;
    position: relative;
}
.post-login-intro {
    margin: 0 0 1rem;
}
.post-login-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-muted);
    padding: 0;
}
.post-login-close:hover { color: var(--color-text); }
.post-login-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}
.post-login-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--color-info-bg, rgba(0, 176, 240, 0.06));
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
}
.post-login-card:last-of-type { margin-bottom: 0; }
.post-login-card[hidden] { display: none; }
.post-login-card-icon {
    flex: 0 0 auto;
    font-size: 1.75rem;
    line-height: 1;
}
.post-login-card-body { flex: 1 1 auto; min-width: 0; }
.post-login-card-title {
    margin: 0 0 0.25rem;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}
.post-login-card-desc {
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}
.post-login-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.post-login-never {
    background: transparent;
    border: 0;
    padding: 0.25rem 0.5rem;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    text-decoration: underline;
}
.post-login-never:hover { color: var(--color-text); }
.post-login-never:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}
.post-login-instructions {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-bg-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.post-login-instructions[hidden] { display: none; }
.post-login-instructions-list {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.55;
}
.post-login-instructions-list li { margin: 0.15rem 0; }
.post-login-footer-note {
    margin: 0.75rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-align: center;
}
@media (max-width: 560px) {
    .post-login-card { flex-wrap: wrap; gap: 0.6rem; }
    .post-login-card-icon { font-size: 1.4rem; }
}
/* ── Changes (changelog) page ─────────────────────────────────────────── */
.changes-pager-row     { margin-bottom: 0.75rem; }
.changes-app-divider   { margin: 1.5rem 0; }
.changes-app-heading {
    margin: 0 0 0.25rem;
    font-size: var(--font-size-xl);
}
.changes-type-heading  { margin: 1rem 0 0.5rem; }

/* Hamburger ⇄ close-X icon swap (cross-site). Two glyph spans share the nav
   toggle button; CSS picks the visible one from the button's aria-expanded
   state so the icon always matches what tapping will do next — no JS DOM write
   per toggle. (site.js only flips aria-expanded.) */
.nav-toggle .nav-toggle-icon { display: inline-block; line-height: 1; }
.nav-toggle[aria-expanded="false"] .nav-toggle-icon-close,
.nav-toggle[aria-expanded="true"]  .nav-toggle-icon-open { display: none; }

/* Client-side filter row above the changelog rows (WhatsNew / Changes). */
.changes-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
}
/* #changesFilter now sits inside an .input-clearable wrapper (standard in-field ×
   clear button), so the row's flex sizing rides on the wrapper; the input fills it. */
.changes-filter-row .input-clearable {
    flex: 1 1 18rem;
    min-width: 0;
}
.changes-filter-row .input-clearable #changesFilter { width: 100%; min-width: 0; }

/* ── ContactUs Viewer / Duplicate Record Finder shared row spacing ───── */
.cuv-summary-line   { margin-bottom: 0.5rem; }
.drf-note-spacing   { margin-top: 0.75rem; }

/* ── MessageSent thank-you detail paragraph ─────────────────────────── */
.ms-detail-text {
    color: var(--color-text-muted);
    margin: 0;
}

/* MessageSent confirmation hero — celebratory success-check badge + a readable
   centered measure for the follow-up paragraph. Pairs with .ms-detail-text
   (above) and .ms-message-banner / .ms-action-row so every site's MessageSent
   confirmation looks identical. Additive and page-agnostic — safe for any site. */
.ms-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
    font-size: 2.1rem;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    animation: msCheckPop 0.28s var(--ease-out-back, ease-out) both;
}
/* Keep the centered follow-up paragraph to a comfortable reading measure. */
.ms-hero .ms-detail-text {
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
}
@keyframes msCheckPop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ms-check { animation: none; }
}

/* ── Subscribe1 (push notification preferences) ───────────────────────────
   Replaces ~30 inline style attributes that previously lived in markup. */
.subscribe-page {
    max-width: 480px;
    margin: 2.5rem auto;
    padding: 0 1rem;
    text-align: center;
    font-family: var(--font-family);
}
/* The page-level text-align:center above is for the subscribe states
   (icon + headline + button stack). Tips cards inside live by the same
   left-aligned convention used everywhere else, so opt them back out. */
.subscribe-page .tip-card,
.subscribe-page .tip-card-text,
.subscribe-page .tip-card-heading { text-align: left; }
.subscribe-intro   { color: var(--color-text-muted); margin-bottom: 1.75rem; }

.subscribe-state-loading { color: var(--color-text-light); }

.subscribe-state-icon {
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
}
.subscribe-state-icon-ok  { color: var(--color-success); }
.subscribe-state-icon-bad { color: var(--color-danger); }

.subscribe-state-headline {
    font-weight: var(--font-weight-bold);
    margin: 0.75rem 0 0.375rem;
}
.subscribe-state-headline-ok  { color: var(--color-success); }
.subscribe-state-headline-bad { color: var(--color-danger); }

.subscribe-state-sub {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.subscribe-state-sub-spaced { margin-bottom: 1rem; }

.subscribe-state-prompt    { color: var(--color-text); margin: 0.75rem 0 1.25rem; }
.subscribe-prompt-btn      { min-width: 180px; }
.subscribe-prompt-msg      { margin-top: 0.875rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.subscribe-details-card {
    margin: 1.25rem 0 1.125rem;
    text-align: left;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.875rem 1rem;
    font-size: var(--font-size-sm);
}
.subscribe-details-title {
    display: block;
    margin-bottom: 0.625rem;
    color: var(--color-text);
}
.subscribe-details-table {
    border-collapse: collapse;
    width: 100%;
}
.subscribe-details-label {
    color: var(--color-text-muted);
    padding: 0.25rem 0;
    width: 7.5rem;
    vertical-align: top;
}
.subscribe-details-value {
    color: var(--color-text);
    padding: 0.25rem 0;
}
.subscribe-details-value-id {
    color: var(--color-text-light);
    word-break: break-all;
    font-size: var(--font-size-xs);
}
.subscribe-details-value-ok  { color: var(--color-success); }
.subscribe-details-value-bad { color: var(--color-danger); }

.subscribe-action-btn   { min-width: 200px; }
.subscribe-result-line  {
    display: block;
    margin-top: 0.75rem;
    font-size: var(--font-size-sm);
    min-height: 1.125rem;
}

.subscribe-help-list {
    text-align: left;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    margin: 0 auto 1.25rem;
    max-width: 360px;
    line-height: 1.8;
}

.progress-track {
    height: 10px;
    background: color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: 999px;
    margin-top: 0.375rem;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Progress fill starts at 0% and is animated to data-width by JS on load.
   Default width here means we can drop the inline style="width:0%" attribute
   from the markup — last remaining inline style on user-facing pages. */
.progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background-color: var(--color-save-btn);
    /* Subtle diagonal stripe pattern that gently animates — communicates "still active"
       even when the percentage isn't changing. */
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 16px 16px;
    transition: width 0.5s var(--ease-out-quint), background-color 0.3s;
    animation: progressStripes 1.4s linear infinite;
}
@keyframes progressStripes {
    from { background-position: 0 0; }
    to   { background-position: 16px 0; }
}
/* When the progress bar reaches 100%, dial up the saturation slightly and stop
   the stripes — communicates "done!" without needing a separate badge. The
   data-width attribute is the source of truth; site.js applies the
   .progress-complete class after animating to width if the value is 100%. */
.progress-fill.progress-complete {
    animation: none;
    background-image: linear-gradient(
        90deg,
        var(--color-save-btn),
        color-mix(in srgb, var(--color-save-btn) 80%, #fff)
    );
    background-size: auto;
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-save-btn) 50%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .progress-fill { animation: none; background-image: none; }
}

/* ── 30. Notes page ──────────────────────────────────────────── */

.notes-layout {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}
@media (min-width: 768px) {
    .notes-layout     { flex-direction: row; align-items: flex-start; }
    .notes-list-col   { flex: 0 0 38%; min-width: 0; }
    .notes-edit-col   { flex: 1; min-width: 0; }
}

.note-item {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-fast), padding-left var(--transition-fast);
    border-radius: var(--border-radius-sm);
    position: relative;
}
.note-item:last-child  { border-bottom: none; }
.note-item:hover       { background-color: var(--color-primary-light); padding-left: .9rem; }
.note-item:focus       { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.note-item.selected {
    background-color: var(--color-primary-light);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(.75rem - 3px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.note-item-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.note-item-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: .2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}

.note-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: .15rem .55rem;
    border-radius: 999px;
    line-height: 1.5;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.note-badge-private {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.note-badge-shared {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

/* Notes list header row: title + action buttons on one line */
.notes-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.notes-list-title { margin: 0; }
.notes-list-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Filter row above the notes list — JS-revealed on EITHER of two conditions
   (see notes-page.js): 3+ notes on this trip, which makes the local filter worth
   the vertical space, OR notes on 2+ trips, which makes the all-trips search
   worth offering. The second is deliberately not a note count: the user with one
   note here and twenty behind them is the one who needs the search most. */
.notes-search-row {
    margin: 0.5rem 0 0.65rem;
}
.notes-search-input { width: 100%; }
.notes-search-results {
    margin: 0.35rem 0 0;
    min-height: 1.2em;
}

/* All-trips search: the opt-in toggle, and the results region under the list.
   [hidden] needs restating on the toggle because .checkbox sets a display. */
.notes-search-all-toggle { margin: 0.35rem 0 0; }
.notes-search-all-toggle[hidden] { display: none; }

.notes-search-all {
    margin: 0.25rem 0 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-2, transparent);
}
.notes-search-all[hidden] { display: none; }
.notes-search-all-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
}
.notes-search-all-item + .notes-search-all-item {
    border-top: 1px solid var(--border-color);
}
/* A full-width button, not a link: it switches the active trip through an AJAX
   call before navigating, so there is no meaningful href to give it. */
.notes-search-all-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.5rem;
    width: 100%;
    padding: 0.5rem 0.25rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.notes-search-all-link:hover,
.notes-search-all-link:focus-visible {
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}
.notes-search-all-link[disabled] { opacity: 0.6; cursor: default; }
.notes-search-all-title { font-weight: 600; }
.notes-search-all-snippet {
    flex-basis: 100%;
    margin: 0;
}

/* Badge marking a filtered row that survived on a note-BODY match rather than its
   title. Both [hidden] rules below are mandatory, not defensive: the [hidden]
   attribute comes from the UA stylesheet and loses to any author `display:` rule —
   .note-item-meta sets display:flex and .field-validation-error sets
   display:inline-flex, so without these the "hidden" elements render. */
.note-item-match[hidden] { display: none; }

/* Live duplicate-title warning under the Note Title field. Inherits the red "!"
   treatment from .field-validation-error; this class only adds the hidden state and
   room for the inline "Open that note instead" button. */
.note-title-dup[hidden] { display: none; }
.note-title-dup {
    /* display:flex, not the inherited inline-flex, so the message always occupies its
       own block regardless of what sits above it in the form group. The [hidden] rule
       above still wins (higher specificity), so this can't un-hide it. */
    display: flex;
    align-items: flex-start;   /* bullet beside the FIRST line of a message that wraps */
    gap: 0.35rem;
}
/* One flex item for the whole message so the "!" can't wrap onto its own line. The
   "Open that note instead" button flows inline after the sentence. */
.note-title-dup-msg { min-width: 0; }

/* Note Title row: input + "Proper-Case" link side-by-side */
.notes-title-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.notes-title-input {
    flex: 1;
    min-width: 0;
}

/* Date input is narrow — don't stretch full-width */
.notes-date-input { max-width: 200px; }

/* "Shared (view/edit)" label sits beside the checkbox without inheriting label margin */
.notes-shared-label {
    margin: 0;
    cursor: pointer;
}

.note-date-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--border-radius-sm);
    padding: .1rem .4rem;
    white-space: nowrap;
}

/* ── 31. Login page & Logo ───────────────────────────────── */

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 3rem;
}
.login-container {
    width: 100%;
    max-width: 420px;
    /* A bit more elevation than a standard card so the login form feels like the page focus */
    box-shadow: var(--shadow-lg) !important;
    padding: 1.75rem !important;
    border-radius: var(--border-radius-lg) !important;
}

/* Tips area sits ABOVE the login card; matches its width so the right-aligned
   ⓘ trigger lines up with the card's right edge. */
.login-tips-area {
    width: 100%;
    max-width: 420px;
}
.login-tips-trigger-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}
.login-tips-trigger-row .tips-trigger {
    font-size: 1.25rem;
}

/* CSS text logo (Logo.ascx) */
.site-logo        { text-align: center; margin-bottom: 1.5rem; }
.logo-link        {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    color: var(--color-text);
    letter-spacing: 0.02em;
}
.logo-link:hover                { color: var(--color-text); text-decoration: none; }
.logo-accent                    { color: var(--color-primary); font-weight: 700; }
.logo-link:hover .logo-accent   { color: var(--color-primary-dark); }

/* ── 32. Home page ───────────────────────────────────────────── */

/* Flex-wrap grid for the shortcut action buttons */
.home-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.home-actions .button,
.home-actions a.button,
.home-actions span.button {
    width: 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    /* Slightly taller than default — gives the home tiles a more tap-friendly target
       and matches the feel of an app launcher. */
    min-height: 3rem;
    font-weight: var(--font-weight-medium);
    /* Override the global .button { white-space: nowrap } so longer labels like
       "✓ Getting Started Checklist" wrap to 2 lines instead of overflowing the 140px
       (or 110px on mobile) grid cell. line-height bumps so wrapped text doesn't
       collide; word-break/overflow-wrap protect against unhyphenable long words. */
    white-space: normal;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* .home-btn-walkthrough: no special sizing — same grid cell as every other button. */

/* Spacing above the shortcut button grid */
.home-trip-context {
    margin-bottom: 0.75rem;
}

/* Disabled shortcut buttons — no trip selected */
.action-btn-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

/* Recent-trips compact list on Home (authenticated only). Each row is a single
   tappable link with name + countdown badge + dates on one line, wrapping on
   narrow viewports. */
.home-recent-trips {
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-recent-trip + .home-recent-trip {
    border-top: 1px solid var(--color-border);
}
.home-recent-trip-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.25rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-fast), padding-left var(--transition-fast);
    border-radius: var(--border-radius-sm);
    min-height: 44px;
}
.home-recent-trip-link:hover,
.home-recent-trip-link:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-text);
    text-decoration: none;
    padding-left: 0.6rem;
}
.home-recent-trip-link:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}
.home-recent-trip-name {
    font-weight: var(--font-weight-medium);
    flex: 1 1 auto;
    min-width: 0;
}
.home-recent-trip-dates {
    flex: 0 0 auto;
}

/* ── 33. Quicklist page ──────────────────────────────────── */

.ql-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}
.ql-filter-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.ql-filter-divider {
    display: inline-block;
    width: 1px;
    height: 1.25rem;
    background: var(--color-border);
    margin: 0 0.25rem;
    align-self: center;
}
.ql-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

/* Detail-level dropdown sits in the filter row without bottom margin */
.ql-detail-group  { margin-bottom: 0; }
.ql-detail-select { width: auto; }

/* "Show Quicklist" button row spacing; flex so the selected-tag count sits beside the button */
.ql-show-row      { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Trip Tags heading above the tag accordion */
.ql-tag-heading   { margin-bottom: 0.5rem; }

/* Two-column layout */
.ql-layout        { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 0; }
/* Fixed-width sidebar (NOT max-content — that let the column grow to fit all tag
   pills on one line, so .tag-group-body never wrapped on desktop and ran off the
   screen). A constrained basis forces the pills to wrap within the column. */
.ql-filter-col    { flex: 0 0 340px; min-width: 0; }
.ql-results-col   { flex: 1; min-width: 0; }
/* Before any results are shown, the tag card spans the full page width (and the
   empty results column is hidden); it shrinks to the sidebar once items/tasks render. */
.ql-layout-full .ql-filter-col  { flex: 1 1 auto; }
.ql-layout-full .ql-results-col { display: none; }
@media (max-width: 768px) {
    .ql-layout     { flex-direction: column; }
    .ql-filter-col { width: 100%; flex: none; }
}

/* Results */
.ql-section-header      { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
                           padding: 0.75rem 0 0.4rem; margin: 0.5rem 0 0.25rem;
                           border-bottom: 3px solid var(--color-accent); color: var(--color-accent); }
.ql-section-header:first-child { margin-top: 0; }
.ql-tag-header          { font-weight: var(--font-weight-bold); padding: 0.6rem 0 0.3rem;
                           border-bottom: 2px solid var(--color-border); margin-bottom: 0.25rem; }
.ql-item-list           { margin-bottom: 1rem; }
.ql-item                { padding: 0.35rem 0 0.35rem 0.5rem; border-bottom: 1px solid var(--color-border); }
.ql-item:last-child     { border-bottom: none; }
/* Item/task name at normal reading size; Uses/Notes drop to the small size below. */
.ql-item-row            { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: var(--font-size-base); }
.ql-field-label         { font-weight: var(--font-weight-medium); }
.ql-item-uses,
.ql-item-notes          { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 0.1rem; }

/* "Send these to a trip" — the only persisting action on an otherwise throw-away
   page, so it sits at the TOP of the results card where it can't be missed, and is
   set off from the list by a tinted well rather than yet another card. */
/* Page background, NOT --color-bg-input: the well has a <select> and a <textbox>
   sitting in it, and those already carry --color-bg-input — same fill would erase
   their affordance (in light mode #e2f1fb vs #e0f6fe is invisible). --color-bg
   differs from both the card and the inputs in light AND dark. */
.ql-send-bar {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
}
/* The muted token is retired INSIDE the bar. --color-text-muted (#6c757d) is tuned
   for --color-bg-card (#ffffff → 4.69:1); on this well's --color-bg (#dbe4ed) it
   computes to 3.65:1, under AA for the 14px it is used at. --color-text is 12.67:1
   on the same fill (and 17.4:1 in dark, measured). Size and weight still carry the
   hierarchy, so nothing is lost but the failing colour. */
.ql-send-bar .note,
.ql-send-bar .small-dim-text { color: var(--color-text); }
.ql-send-lead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.ql-send-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
/* Auto-width so the picker and the button share one line on desktop; both go
   full-width on narrow screens (below) rather than crushing to unreadable.
   The max-width is load-bearing, not tidiness: a <select> sizes to its LONGEST
   option, and trip names run to 200 chars ("2026-07-16 Camper Van, Canada Fires,
   OH/..."), which ate the whole row and wrapped the Send button onto its own line.
   ⚠ The element qualifiers are REQUIRED, not style. Both controls also carry
   .textbox, and that rule is written `select.textbox` / `input.textbox`
   (specificity 0,1,1) with `width:100%; max-width:100%`. A bare `.ql-send-select`
   (0,1,0) LOSES to it — measured: computed max-width came back 100% and the select
   rendered 729px wide. Qualifying by element ties the specificity, and this block
   sits later in the file, so it wins. */
.ql-send-controls select.ql-send-select  { width: auto; max-width: min(100%, 24rem); margin-bottom: 0; }
.ql-send-controls input.ql-send-newname  { width: auto; flex: 1 1 12rem; min-width: 0; max-width: 100%; margin-bottom: 0; }
/* Deliberately --color-text, not --color-success: #2e7d32 lands at 4.45:1 on the
   light well and 1.45:1 on the dark one (dark mode retunes --color-success-bg but
   leaves --color-success alone). The ✓ in the copy carries the "it worked" signal;
   the colour doesn't have to. */
.ql-send-result  {
    margin: 0.5rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}
/* Row badge for "this is now on your trip". SOLID --color-success with white text,
   NOT --color-success on --color-success-bg: dark mode redefines only the -bg
   token (to #1b3a1e) and leaves --color-success at #2e7d32, which would land at
   2.45:1 there. White on #2e7d32 is 5.1:1 and identical in both themes. */
.ql-sent-pill {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #ffffff;
    cursor: default;
}
.ql-sent-pill:hover { border-color: var(--color-success); }
/* Stack on narrow screens. Element-qualified for the same reason as the desktop
   rule above — an unqualified selector here would lose to the one it must override. */
@media (max-width: 768px) {
    .ql-send-controls > * { width: 100%; }
    .ql-send-controls select.ql-send-select,
    .ql-send-controls input.ql-send-newname { width: 100%; max-width: 100%; }
}

/* ── 35. Contact Us Viewer ───────────────────────────────────── */

/* Results table */
.cuv-table tbody tr.cuv-row { cursor: pointer; }
.cuv-table tbody tr.cuv-row:hover td { background: var(--color-primary-light); }
.cuv-table tbody tr.cuv-row.cuv-selected td { background: var(--color-primary-light); font-weight: var(--font-weight-medium); }
.cuv-table tbody tr.cuv-unviewed td:first-child { font-weight: var(--font-weight-bold); }

/* Status badges */
.cuv-badge { display:inline-block; padding:0.18rem 0.55rem; border-radius:999px;
             font-size:0.7rem; font-weight:700; white-space:nowrap;
             text-transform:uppercase; letter-spacing:0.04em; line-height:1.5; }
.cuv-badge-new        { background:#f5f5f5; color:#616161; border:1px solid #e0e0e0; }
.cuv-badge-queued     { background:var(--color-info-bg); color:var(--color-info); }
.cuv-badge-future     { background:#f3e5f5; color:#7b1fa2; }
.cuv-badge-resolved   { background:var(--color-success-bg); color:var(--color-success); }
.cuv-badge-partial    { background:var(--color-warning-bg); color:var(--color-warning); }
.cuv-badge-unresolved { background:#fafafa; color:#9e9e9e; border:1px solid #e0e0e0; }
.cuv-badge-rejected   { background:var(--color-danger-bg); color:var(--color-danger); }

/* Dark-mode overrides for badges that aren't keyed to a CSS variable.
   The neutral (new/unresolved) and purple (future) swatches don't have
   palette tokens, so they get explicit dark equivalents here. */
[data-theme="dark"] .cuv-badge-new        { background:#2a2a2a; color:#bdbdbd; border-color:#444; }
[data-theme="dark"] .cuv-badge-future     { background:#2d1f3a; color:#ce93d8; }
[data-theme="dark"] .cuv-badge-unresolved { background:#1e1e1e; color:#9e9e9e; border-color:#444; }

/* Importance/urgency number chips */
.cuv-num { font-weight:var(--font-weight-medium); }
.cuv-imp-1, .cuv-urg-1 { color:var(--color-text-muted); }
.cuv-imp-2, .cuv-urg-2 { color:var(--color-text); }
.cuv-imp-3, .cuv-urg-3 { color:var(--color-warning); font-weight:var(--font-weight-bold); }
.cuv-imp-4, .cuv-urg-4 { color:var(--color-danger);  font-weight:var(--font-weight-bold); }

/* ContactUsViewer edit/files card layout */
.cuv-page-edit { /* see toolbar-search-grow; this is the marker for the "Page" field */ }
.cuv-group-top { margin-top: 0.75rem; }
.cuv-group-spaced { margin-top: 0.5rem; }
/* The edit-feedback message slot stays hidden until JS adds .is-visible */
.cuv-edit-msg {
    display: none;
    margin-top: 0.5rem;
}
.cuv-edit-msg.is-visible { display: flex; }

/* Edit card read-only info bar */
.cuv-readonly-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    margin-bottom: 0.25rem;
}
.cuv-info-item { white-space: nowrap; }

/* Attachments grid */
.cuv-files-grid { display:flex; flex-wrap:wrap; gap:1rem; }
.cuv-file-card  { width:140px; display:flex; flex-direction:column; gap:0.25rem;
                  padding:0.5rem; border:1px solid var(--color-border);
                  border-radius:var(--border-radius-sm); }
.cuv-file-thumb { width:100%; height:100px; object-fit:cover;
                  border-radius:var(--border-radius-sm); display:block; }
.cuv-file-icon  { font-size:2.5rem; text-align:center; line-height:100px; }

/* ── 36. Log Viewer ──────────────────────────────────────────── */

/* Row severity tints, all five now derived from palette tokens (2026-08-11, PLR-299).
   critical and security used to hardcode hex and therefore needed their own
   [data-theme="dark"] overrides; those two rules are gone, because the tokens
   already carry dark values and now flip on their own.

   security WAS #fff3e0, byte-identical to --color-warning-bg, so in LIGHT mode this
   is a pure rename with no visual change whatsoever. In DARK it shifts very slightly
   (#3b2400 -> #3a2a10) and now matches .log-row-warn exactly. That is stated rather
   than hidden: the two tints were already identical in light, so the dark difference
   was a hand-picked value rather than a design decision, and severity is carried by
   the row's badge, not by a brown you cannot tell from another brown. If security
   ever needs its own tint, give it a real token rather than a literal.

   critical is NOT simply --color-danger-bg, and that is deliberate. Using the bare
   token would make it identical to .log-row-error and lose the severity step. The
   mix keeps critical a deeper red than error in BOTH themes — which also fixes a
   real gap, since the old dark override (#3b1212) was exactly the dark
   --color-danger-bg, so in dark mode critical and error were indistinguishable. */
.log-row-error    { background-color: var(--color-danger-bg); }
.log-row-critical { background-color: color-mix(in srgb, var(--color-danger-bg) 85%, var(--color-danger) 15%); }
.log-row-warn     { background-color: var(--color-warning-bg); }
.log-row-security { background-color: var(--color-warning-bg); }
.log-row-audit    { background-color: var(--color-info-bg); }

/* Hover darkens the tint slightly */
.log-row { cursor: pointer; }
.log-row:hover td { filter: brightness(0.96); }

/* AI response header: heading + cache status badge on one line */
.ai-response-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.ai-response-header .heading { margin: 0; }
.ai-response-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* AI metadata two-column grid */
.ai-meta-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.25rem;
    font-size: var(--font-size-sm);
    align-items: baseline;
}
.ai-meta-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.ai-meta-sep {
    grid-column: span 2;
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.25rem 0;
}
.ai-meta-code {
    font-family: monospace;
    font-size: var(--font-size-xs);
    word-break: break-all;
    background: var(--color-bg-card);
    padding: 0.1rem 0.3rem;
    border-radius: var(--border-radius-sm);
}
.ai-meta-prompt {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Level badge pill — uppercase, tracking, tabular numerics for legibility in dense tables */
.log-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
/* INFO badge uses the success palette by design — INFO is a "good" signal here.
   critical / security stay hardcoded because their high-contrast appearance is
   intentional and works in both light and dark modes (strong red / strong orange). */
.log-badge-info     { background: var(--color-success-bg); color: var(--color-success); }
.log-badge-warn     { background: var(--color-warning-bg); color: var(--color-warning); }
.log-badge-error    { background: var(--color-danger-bg);  color: var(--color-danger); }
.log-badge-critical { background: #f44336; color: #fff; }
.log-badge-security { background: #e65100; color: #fff; }
.log-badge-audit    { background: var(--color-info-bg);    color: var(--color-info); }

/* Message cell truncates on long lines */
.log-msg {
    max-width: 40vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Detail row — hidden by default, toggled by JS */
.log-detail-row { background-color: var(--color-bg); }
.log-detail-row td { padding: 1rem 1.25rem; }
.log-detail-row--hidden { display: none; }

/* Key/value fields inside the detail row */
.log-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: var(--font-size-sm);
}
.log-detail-item {
    line-height: 1.4;
}
.log-detail-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
.log-detail-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
    margin-right: 0.25rem;
}
.log-detail-grid pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace;
    font-size: var(--font-size-xs);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 0.625rem;
    max-height: 12rem;
    overflow-y: auto;
}

/* LogViewer purge-days select sits inline next to the Delete button */
.lv-purge-select {
    width: auto;
    display: inline-block;
}

/* Pager controls (used by LogViewer + ContactUsViewer — both display
   screen-width tables with no other content beside the pager row). */
.log-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: var(--font-size-sm);
}

.log-table { min-width: 640px; }

.login-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.3rem;
    font-size: var(--font-size-sm);
}

/* IP address display under password — small muted note */
.login-ip-display {
    font-size: 0.7rem;
    text-align: center;
    margin: 0.25rem 0 0;
    color: var(--color-text-light);
}

/* ── Sign in with Google row (Login.aspx) ──────────────────────────
   The Login button sits full-width on its own line; the GIS button sits
   on the next line, centered. Google's button renders inside a sandboxed
   iframe at its own intrinsic width (we can't restyle its surface), so we
   just centre the iframe under the full-width Login button. Shared by all
   4 sites. */
.login-google-row {
    display: flex;
    justify-content: center;
}

/* ── Sign in with Google "shell" (Login.aspx) ──────────────────────
   We can't make the sandboxed GIS iframe stretch full-width or take the
   Login button's 6px corners. Instead we wrap it in a shell that DOES
   take those — a full-width, white, rounded, bordered box matching the
   Login button's height — and centre the Google widget inside it. The
   shell border uses Google's own outline grey (#dadce0) so the widget's
   inner border blends, and the whole thing reads as one full-width
   "Sign in with Google" button aligned with the Login button above. */
.login-google-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;                 /* match .button touch-target height */
    padding: 0.25rem 0.5rem;
    background-color: #ffffff;
    border: 1px solid #dadce0;        /* Google GIS outline grey */
    border-radius: var(--btn-radius, 6px);
    box-shadow: var(--shadow-btn, 0 1px 2px rgba(0,0,0,0.15));
    box-sizing: border-box;
}
/* The GIS widget keeps a faint white inner surface; against the white
   shell it disappears, leaving the shell as the visible button frame. */
.login-google-shell > div { max-width: 100%; }
/* In dark mode keep the shell white so the Google widget (which always
   renders on white) sits on a matching surface rather than a dark seam. */
[data-theme="dark"] .login-google-shell {
    background-color: #ffffff;
    border-color: #dadce0;
}

/* ── 34. Trips page ──────────────────────────────────────────── */

/* Trip selection list */
.trip-list {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}
/* Belt-and-suspenders: suppress UA list styling on li directly */
.trip-list li {
    list-style: none;
    padding-left: 0;
}

.trip-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition-fast), padding-left var(--transition-fast);
    user-select: none;
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.trip-list-item:last-child { border-bottom: none; }
.trip-list-item:hover       { background-color: var(--color-primary-light); padding-left: 1.15rem; }
.trip-list-item:active      { background-color: var(--color-primary-light); }
.trip-list-item:focus       { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }

/* Text content stacks vertically inside the flex row */
.trip-item-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
}

/* Radio indicator — the row's PRIMARY affordance. A trip row selects; it does not
   open. It used to carry a CSS chevron here instead, which is the universal "this
   navigates" signal and was the single loudest thing telling users the wrong story
   about what a tap does. The radio says "one of these is chosen" before the tap, and
   the .trip-item-open button beside it carries the navigation the chevron promised. */
.trip-item-radio {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid var(--color-text-light);
    background: var(--color-bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.trip-list-item:hover .trip-item-radio { border-color: var(--color-primary); }
.trip-list-item.trip-selected .trip-item-radio {
    border-color: var(--color-primary);
    /* Inset ring draws the filled dot without a second element. */
    box-shadow: inset 0 0 0 3px var(--color-primary);
}

/* "Selected" badge. Rendered on EVERY row and revealed by the selected class, so the
   selection is styling-only and the JS that moves .trip-selected needs to know nothing
   about it. display:none also keeps the 9 unselected copies out of the a11y tree. */
.trip-item-selected-badge {
    display: none;
    align-self: flex-start;
    background: var(--color-primary);
    color: #111;                     /* 7.61:1 on the cyan; white was 2.48:1 */
    border-color: var(--color-primary);
}
.trip-list-item.trip-selected .trip-item-selected-badge { display: inline-flex; }

/* .trip-item-text is a COLUMN flex container, so every pill inside it — the
   JS-inserted .trip-badge ("In 11 days"), the 🔗 Shared pill, and the Selected badge
   above — is a flex ITEM and inherits align-items:stretch. All three were written to
   sit INLINE after the trip name (hence .trip-badge's margin-left), so each was being
   blown out to the full width of the row: a 900px-wide "In 11 days" lozenge. Pin them
   to the start and drop the indent that only made sense inline. Scoped to the trip list
   so nothing else that uses .pill / .trip-badge is affected. */
.trip-item-text > .trip-badge,
.trip-item-text > .trip-item-nodates,
.trip-item-text > .trip-item-shared {
    align-self: flex-start;
    margin-left: 0;
}

/* Open — the separate, explicit navigation action. Kept out of .trip-item-text so a
   long trip name wraps against it instead of pushing it off the row. */
.trip-item-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.trip-item-open { white-space: nowrap; }

/* Selected trip highlight */
.trip-list-item.trip-selected {
    background-color: var(--color-primary-light);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1rem - 3px);
}

/* The row-level hint above the list ("Tap a trip to select it…"). Explains the
   select-don't-open model in words, next to where it applies. */
.trip-list-hint {
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.trip-item-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-size: var(--font-size-base);
}
.trip-item-dates {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Occupies the .trip-item-dates slot on a trip that has no Leaving/Return date, so the
   row never renders with a silently missing date line — which read as "this trip didn't
   save". Emitted server-side (Trips.aspx.vb BuildListItemHtmlFromEval), NOT by the
   countdown-badge JS, and deliberately NOT classed .trip-badge: renderTripBadges guards
   with `!nameEl.parentElement.querySelector('.trip-badge')`, so borrowing that class
   would suppress a real countdown on any row that ever had both.
   Lives HERE rather than in a site's own styles.css because .pill (above, same file)
   would otherwise win on source order at equal specificity and restore the pointer
   cursor + card background — the trap .trip-item-shared already falls into. */
.trip-item-nodates {
    margin-top: 0.15rem;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    /* Static marker, not a control — .pill's cursor:pointer/hover would promise a click. */
    cursor: default;
}
.trip-item-nodates:hover { border-color: var(--color-border); }
.trip-item-counts {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Tag group accordion */
.tag-group {
    border-bottom: 1px solid var(--color-border);
}
.tag-group:last-child { border-bottom: none; }

.tag-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    user-select: none;
}
.tag-group-header:hover { color: var(--color-primary); }
.tag-group-header:focus { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.tag-group-label { flex: 1; }

/* Subdued suffix of a tag-group label (the " - subtype" portion after " - "). */
.tag-group-label-subdued {
    font-weight: 300;
    opacity: 0.55;
}

.tag-group-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: normal;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.tag-group-arrow {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.tag-group-body {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem 0.75rem;
}
.tag-group-body.open { display: flex; }

/* Tag pill — replaces checkbox+label; gray unselected, lime green selected */
.tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    min-height: 36px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast),
                border-color    var(--transition-fast),
                color           var(--transition-fast),
                transform       var(--transition-fast),
                box-shadow      var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.tag-pill:hover {
    border-color: var(--color-save-btn);
    color: var(--color-text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.tag-pill:active { transform: translateY(0); }
.tag-pill.selected {
    background-color: var(--color-save-btn);
    border-color:     var(--color-save-btn);
    color: #fff;
    font-weight: var(--font-weight-medium);
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--color-save-btn) 60%, transparent);
}
.tag-pill.selected:hover {
    background-color: var(--color-save-btn-hover);
    border-color:     var(--color-save-btn-hover);
}
.tag-pill:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* Inline message near save buttons */
.trip-section-msg {
    display: none;
    font-size: var(--font-size-sm);
    margin-top: 0.5rem;
}

/* Trip Link Code share row: read-only code field + Copy button.
   Read-only state gets a "code-y" treatment (monospace, slightly tinted bg) so the
   value reads as a token to copy rather than an editable field. */
.share-link-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    max-width: 480px;
}
.share-link-input {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    background: var(--color-primary-light);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    cursor: text;
    /* Disable the muted/grey "disabled" look — read-only is intentional, not disabled */
    opacity: 1 !important;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
}
.share-link-input:read-only {
    background: var(--color-primary-light);
    color: var(--color-text);
}
[data-theme="dark"] .share-link-input {
    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-input));
}
.share-link-copy {
    flex-shrink: 0;
    align-self: stretch;
    /* Match the input height precisely so they align */
    min-height: var(--input-height);
}

/* Circled-i info toggle button — uses CSS to avoid Unicode font issues */
.btn-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-muted);
    background: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
    padding: 0;
    flex-shrink: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    vertical-align: middle;
}
.btn-info-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
.btn-info-toggle:focus { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* Trip list pager */
.trip-pager-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
/* Row of action + quick-jump buttons under the Trips card */
.trip-quick-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.75rem;
}

/* Trips card fills available viewport height so the list isn't sitting in
   a tiny card with empty space below. Offset is approximate — leaves room
   for the site nav, page header, tips toggle, and the bottom button row. */
.trips-card-fill {
    min-height: calc(100vh - 18rem);
}

/* Trips search row: textbox + emoji button on the same line */
.trips-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.trips-search-input {
    flex: 1;
    min-width: 180px;
}
.trips-search-results {
    display: none;
    margin: 0 0 0.5rem;
}
.trips-search-results.has-results { display: block; }

/* Page title with no bottom margin (when sitting next to a right-aligned
   action button — collapses the gap below for a tighter header). */

/* Inside collapsible card-section toggles, the heading span should be
   flush with the toggle arrow — clear its default margin. */
.card-section-toggle .heading { margin: 0; }
.trip-pager-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}
@media (max-width: 575px) {
    .trip-pager-nav { flex-basis: 100%; }
}


/* ── 37. Duplicate Record Finder ─────────────────────────────── */

.drf-section { margin-bottom: 1.5rem; }

.drf-section-title {
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--color-border);
    margin: 0 0 0.75rem 0;
}

.drf-group {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 0.875rem;
}

/* Results table */
.drf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.drf-table th {
    padding: 0.4rem 0.75rem;
    background: var(--color-bg);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
}
.drf-table td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.drf-table tbody tr:last-child td { border-bottom: none; }
.drf-table tbody tr:hover td { background: var(--color-bg); }

.drf-th-check    { width: 2rem; }
.drf-th-children { width: 5.5rem; text-align: center; }
.drf-td-children { text-align: center; }

/* Duplicate Record Finder results header row */
.drf-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.drf-results-heading { margin: 0; }
.drf-delete-actions {
    margin-top: 1rem;
    flex-wrap: wrap;
}
.drf-confirm-msg {
    margin-top: 0.5rem;
    line-height: 1.6;
}

/* Warning icon for rows with children */
.drf-warn-icon {
    color: var(--color-warning);
    font-size: 0.9rem;
}

/* Dark mode adjustments */
[data-theme="dark"] .drf-group    { border-color: #444; }
[data-theme="dark"] .drf-table th { background: #1e1e1e; }

/* ── Collapsible card sections (Trips page) ──────────────────────────────── */

/* Heading wrapper around .card-section-toggle — gives screen readers a proper
   heading landmark for each accordion section (WAI-ARIA accordion pattern) while
   keeping the button itself as the interactive control. Resets the browser's
   default h2 margins/font so the visible layout is identical to the bare button. */
.card-section-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.card-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0.15rem 0;
    cursor: pointer;
    text-align: left;
    margin: -0.15rem 0;
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast);
}
.card-section-toggle:hover .heading,
.card-section-toggle:hover .card-section-arrow { color: var(--color-accent); }
.card-section-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Selected-count summary beside a card-section heading (e.g. Trip Tags "3 selected").
   margin-right:auto hugs the count to the heading and pushes the arrow to the far
   right, overriding the toggle's space-between for this three-child case. */
.card-section-count {
    margin-left: 0.5rem;
    margin-right: auto;
    font-size: var(--font-size-xs);
    font-weight: normal;
    color: var(--color-text-muted);
}

.card-section-body {
    display: none;
    padding-top: 0.85rem;
    /* Smooth reveal — opacity transitions from 0 to 1 as the body opens. The display
       toggle still snaps (CSS can't animate display:none), but the fade softens the
       transition for the user. */
    animation: cardSectionFade 0.22s var(--ease-out-quint);
}
.card-section-body.open { display: block; }
@keyframes cardSectionFade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card-section-arrow {
    /* Unicode chevron replaced with a CSS-drawn arrow so it tints with currentColor
       (matches heading hover color) without a font fallback gamble. */
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    margin-left: 0.6rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-135deg); /* collapsed: pointing up */
    transition: transform var(--transition-mid), border-color var(--transition-fast);
}
.card-section-arrow::before { content: ""; }
.card-section-toggle[aria-expanded="true"] .card-section-arrow {
    transform: rotate(45deg);  /* expanded: pointing down */
}
.card-section-toggle:hover .card-section-arrow { border-color: var(--color-accent); }

[data-theme="dark"] .card-section-toggle:hover .heading { color: var(--color-accent); }

/* ── Trip Dashboard page ─────────────────────────────────────────────────── */

/* Card heading link — inherits size/weight, subtle dashed underline */
.card-title-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--color-accent);
}
.card-title-link:hover {
    color: var(--color-accent);
    border-bottom-color: transparent;
}

/* Disabled card heading (e.g. Expenses placeholder) */
.card-title-disabled {
    color: var(--color-text-muted);
    cursor: default;
}

/* Notes summary list */
.tripdashboard-notes-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.tripdashboard-note-item {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}
.tripdashboard-note-item:last-child {
    border-bottom: none;
}
.tripdashboard-note-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
}
.tripdashboard-note-date {
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

/* TripDashboard trip name header — heading line is flush, dates sit immediately below */
.tripdashboard-trip-heading { margin: 0; }
.tripdashboard-trip-subline { margin: 0.1rem 0 0; }

/* Previous trip sub-cards */
.prev-trip-item {
    border-left: 3px solid var(--color-accent);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #f8f9fa;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.prev-trip-item:last-child {
    margin-bottom: 0;
}

[data-theme="dark"] .prev-trip-item {
    background: #1e1e1e;
}

/* Help page step list — extra breathing room between steps + brand-tinted numbers */
.help-steps { padding-left: 1.5rem; }
.help-steps li { margin-bottom: 0.95rem; line-height: 1.55; }
.help-steps li:last-child { margin-bottom: 0; }
.help-steps li::marker { color: var(--color-accent); font-weight: 700; }

/* ── MessageSent confirmation hero (cross-site) ──────────────────────────────
   Shared so every site's post-ContactUs "Message Sent" page renders the same
   celebratory hero. Reuses shared tokens so it's theme-aware; the only bespoke
   piece is the success-tinted check badge. .ms-detail-text carries the muted
   follow-up paragraph (constrained for readable line length when centered). */
.ms2-hero { padding-top: var(--card-padding-lg); padding-bottom: var(--card-padding-lg); }
.ms2-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
    font-size: 2.1rem;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    animation: ms2CheckPop 0.28s var(--ease-out-back, ease-out) both;
}
.ms2-headline { margin: 0 0 0.5rem; }
.ms2-hero .ms-detail-text { max-width: 46ch; margin-left: auto; margin-right: auto; }
@keyframes ms2CheckPop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ms2-check { animation: none; }
}

/* Error.aspx layout */
.error-card {
    max-width: 640px;
    margin: 2rem auto;
}
.error-detail-pre {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}
[data-theme="dark"] .error-detail-pre { background: #1e1e1e; }
.error-cid {
    font-size: 1rem;
    user-select: all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--color-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
}

/* Message Sent confirmation page */
.ms-message-banner { margin-bottom: 1.25rem; }
.ms-action-row { margin-top: 1.5rem; }

/* ContactUsStatus detail panel */
.cus-detail-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}
.cus-section { margin-top: 0.75rem; }
.cus-section-thin { margin-top: 0.25rem; }
.cus-block {
    margin-top: 0.25rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
}
.cus-pre { white-space: pre-wrap; }
.cus-pre-inline { white-space: pre-wrap; }
.cus-reply { margin-top: 0.25rem; }

/* ── Toast (PLP.showToast) ─────────────────────────────────────
   Slides down + fades in on appearance, then fades out before removal (handled
   in site.js by setting opacity=0). The toast shares the SAME solid color palette
   as .alert-panel.* (success/error/warning/info) but gets a brighter shadow
   because it floats above all chrome. */
/* Toast stack container — fixed-position column that holds 1..N toasts.
   Each toast inside is normal flow, so simultaneous toasts stack vertically
   instead of stacking visually at the same coordinates. pointer-events: none
   on the container lets clicks pass through the empty space; toasts themselves
   re-enable interactivity. */
.site-toast-stack {
    position: fixed;
    top: calc(var(--nav-height, 56px) + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(92vw, 560px);
    width: max-content;
    pointer-events: none;
}
.site-toast {
    position: relative;
    min-width: 280px;
    max-width: min(92vw, 560px);
    padding: 0.75rem 2.25rem 0.75rem 1.25rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
    transition: opacity 0.4s, transform 0.4s;
    animation: toastIn 0.28s var(--ease-out-quint);
    pointer-events: auto;
    /* A click ANYWHERE on the toast dismisses it — exactly what the × does — so the
       whole body is a pointer target. The RED error/danger toasts opt out just below:
       they are the one message the user has to finish reading, so a stray click must
       not wipe them off screen and only their × closes them. Identical rule on all
       five sister sites; the click handler itself is in each Scripts/site.js. */
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: center;
}
/* Solid toast palette — the SAME fixed colors as .alert-panel.* above, so an
   inline message and its floating-toast twin are identical. Theme-independent
   (light = dark); #111 text on lime/orange/cyan, WHITE on the red error/danger. */
.site-toast.toast-success { background: #00ff00; color: #111; border: 1px solid rgba(0,0,0,0.28); }
.site-toast.toast-error,
.site-toast.toast-danger  { background: #ff0000; color: #fff; border: 1px solid rgba(0,0,0,0.28); }
.site-toast.toast-warning { background: #ff9600; color: #111; border: 1px solid rgba(0,0,0,0.28); }
.site-toast.toast-info    { background: #00B0F0; color: #111; border: 1px solid rgba(0,0,0,0.28); }
/* Red = the user MUST read it, so the body is not a dismiss target (site.js attaches no
   body handler for type 'error'/'danger'). The arrow cursor advertises that; the ×
   keeps its own `cursor: pointer` from .site-toast-close below, so the one control that
   DOES close a red toast still looks clickable. Compound selector = higher specificity
   than the bare .site-toast rule above, so it wins wherever it sits in the file. */
.site-toast.toast-error,
.site-toast.toast-danger  { cursor: default; }
/* Canonical dismiss animation — shared by all 3 sites' showToast() so the exit
   motion is identical. JS adds .site-toast-dismissing; the .site-toast transition
   above animates the fade + slide-up. */
.site-toast.site-toast-dismissing { opacity: 0; transform: translateY(-8px); }
.site-toast-msg  { flex: 1; min-width: 0; }
/* "↶ Undo" inside a toast, emitted by SiteShared.UndoOffer.UndoLinkHtml. Kept on the
   LEFT, away from .site-toast-close, so dismissing the toast can never misfire the undo.
   Canonicalised here 2026-07-31 from two byte-identical per-site copies that had drifted
   only in NAME: qMEET's .qm-undo-link (preset toast) and PacklistPRO's .sl-undo-link
   (ShoppingList delete toast, still live and still using its own name). */
.undo-link { font-weight: var(--font-weight-bold, 700); margin-right: 0.6rem; }
/* Toast ACTION BUTTON — the scripted sibling of .undo-link above, added 2026-08-07 so
   PacklistPRO's showToast can carry an "Undo" for the destructive Tasklist un-tick (PL-05).
   .undo-link is server-emitted markup inside the message; this is a real <button> the toast
   builds when a caller passes {actionText, onAction}. Same placement rule and same reason:
   FIRST child, hard left, away from .site-toast-close.
   Additive only — no existing selector changed, and a toast without opts.actionText never
   gets one of these, so every other toast on all five sites renders exactly as before. */
.site-toast-action {
    flex: 0 0 auto;
    order: -1;
    margin-right: 0.6rem;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
}
.site-toast-action:hover { opacity: 0.8; }
.site-toast-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-toast-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: currentColor;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    border-radius: 50%;
    padding: 0;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.site-toast-close:hover  { opacity: 1; background: rgba(0,0,0,0.08); }
.site-toast-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Phones only (portrait, below the tablet breakpoint): toasts span the
   available width instead of being content-sized. The stack stays centred
   (left:50% + translateX(-50%)), so widening it to 92vw yields a symmetric
   4vw gutter on each side by construction; the toasts stretch to fill it. */
@media (max-width: 575px) {
    .site-toast-stack { width: 92vw; max-width: 92vw; }
    .site-toast       { max-width: none; min-width: 0; }
}

/* ── Back-to-top floating button ─────────────────────────────── */
.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    border: none;
    background: var(--color-accent);
    /* 7.61:1 on the cyan (white was 2.48:1). :hover swaps the fill to
       --color-accent-dark and inherits this colour: #111 there = 5.24:1. */
    color: #111;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.9);
    transition:
        opacity 0.25s var(--ease-out-quint),
        transform 0.25s var(--ease-out-quint),
        background-color 0.15s,
        box-shadow 0.15s;
    z-index: 9998;
}
.back-to-top.visible {
    opacity: 0.92;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.back-to-top:hover {
    opacity: 1;
    background: var(--color-accent-dark);
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px) scale(1);
}
.back-to-top:focus-visible {
    opacity: 1;
    outline: none;
    box-shadow: var(--shadow-lg), var(--shadow-focus-ring);
}

/* ── Scroll progress indicator ────────────────────────────────
   Thin accent-colored bar pinned to the top of the viewport that fills
   left-to-right as the user scrolls. Driven by site.js initScrollProgress();
   CSS only handles the visual. Auto-hidden on very short pages where it
   would always sit at 100% (handled in JS by removing .visible). */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
    z-index: 10001;          /* above nav so it's never overlapped */
    pointer-events: none;
    transition: width 0.06s linear, opacity 0.2s ease;
    opacity: 0;
    border-bottom-right-radius: 2px;
}
.scroll-progress-bar.visible { opacity: 1; }

/* ── DataEditor admin grid (extracted from DataEditor.aspx) ──── */
.de-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; }
.de-toolbar .form-group { margin-bottom:0; }
.de-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; min-height:1.5rem; }
.de-chip { display:inline-flex; align-items:center; gap:.3rem; background:var(--color-primary-light); color:var(--color-text); border:1px solid var(--color-border); border-radius:1rem; padding:.15rem .6rem; font-size:.85rem; }
.de-chip-remove { background:none; border:none; cursor:pointer; color:var(--color-text-muted); font-size:1rem; line-height:1; padding:0 .1rem; }
.de-chip-remove:hover { color:var(--color-delete-btn); }
/* Move-earlier / move-later on a column chip (PLR-368). Deliberately the same bare
   glyph-button affordance as the remove control, and placed beside it rather than in
   the per-site sheet, so all three controls in a chip read as one set. Slightly
   smaller than the remove glyph because two arrows plus a cross on one chip is a
   crowded row, and the destructive control should stay the most prominent. */
.de-chip-move { background:none; border:none; cursor:pointer; color:var(--color-text-muted); font-size:.8rem; line-height:1; padding:0 .1rem; }
.de-chip-move:hover { color:var(--color-accent); }
.de-paging { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.de-table-wrap { overflow-x:auto; margin-top:.75rem; }
.de-table { border-collapse:collapse; width:100%; line-height:1; }
.de-table th { background:var(--color-bg-card); padding:1px 3px; border:1px solid var(--color-border); white-space:nowrap; text-align:left; font-weight:600; line-height:1.3; }
.de-table td { padding:0; margin:0; border:1px solid var(--color-border); vertical-align:middle; height:1.35rem; }
.de-table tr:hover td { background:var(--color-bg); }
.de-table .pk-cell { color:var(--color-text-muted); white-space:nowrap; padding:0 2px; }
.de-table .de-cell { width:100%; min-width:60px; box-sizing:border-box; padding:0 2px; margin:0; font-size:inherit; height:1.35rem; border:none; background:transparent; color:inherit; }
.de-table td:first-child { width:2rem; text-align:center; padding:0; }
.de-table thead th:first-child { border:none; background:transparent; }
.de-table input[type=checkbox] { margin:0; display:block; }
/* Spacious mode — toggled by the "Compact Rows" checkbox unchecking. Adds
   breathing room to every cell so the grid is easier to read and interact with. */
.de-spacious .de-table th  { padding: 0.45rem 0.6rem; }
.de-spacious .de-table td  { padding: 0.3rem 0.1rem; height: auto; }
.de-spacious .de-table .de-cell { padding: 0.3rem 0.5rem; height: auto; min-height: 2rem; font-size: var(--font-size-sm); }
.de-spacious .de-table .pk-cell { padding: 0.3rem 0.5rem; }
.de-spacious .de-table td:first-child { padding: 0.3rem; }
.de-save-bar { position:sticky; bottom:0; background:var(--color-bg-card); border-top:2px solid var(--color-border); padding:.6rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; z-index:100; box-shadow:0 -2px 6px rgba(0,0,0,.08); }
.de-preview-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; overflow-y:auto; }
.de-preview-overlay.is-open { display: block; }
.de-button-row { padding-top: 1.4rem; }
.de-toolbar-spaced { margin-top: 0.75rem; }
.de-filter-input { width: 200px; }
.de-paging-spaced { margin-top: 0.5rem; }
.de-preview-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
}
.de-preview-label { margin: 0; }
.de-preview-scroll { overflow-x: auto; }
.de-modal-actions { margin-top: 1rem; }
.de-preview-old { color: var(--color-danger); }
.de-preview-new { color: var(--color-success); }
.de-preview-box { background:var(--color-bg-card); margin:2rem auto; max-width:800px; border-radius:6px; padding:1.5rem; }
.de-preview-table { border-collapse:collapse; width:100%; font-size:.875rem; }
.de-preview-table th, .de-preview-table td { border:1px solid var(--color-border); padding:.3rem .5rem; }
.de-preview-table th { background:var(--color-bg-card); }
.de-changed { background:var(--color-warning-bg) !important; }
[data-theme="dark"] .de-chip { background:#2a3a5e; }

/* ── 38. Expenses page ─────────────────────────────────────────────────────
   List rows mirror .note-item, but each row also carries a chip-style "type"
   badge plus 1-2 status badges (Estimate / Split — Settled / Split — Owed).
   The form reuses .notes-edit-col and shared .form-row / .check-row layout. */

.exp-summary-card {
    margin-bottom: 1rem;
    /* Subtle gradient surface so the totals card visually anchors the page */
    background-image:
        radial-gradient(circle at top left,
            color-mix(in srgb, var(--color-accent) 6%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--color-bg-card), var(--color-bg-card));
}
[data-theme="dark"] .exp-summary-card {
    background-image:
        radial-gradient(circle at top left,
            color-mix(in srgb, var(--color-accent) 16%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--color-bg-card), var(--color-bg-card));
}
.exp-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.75rem 1.5rem;
    align-items: stretch;
}
.exp-summary-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.9rem;
    background: color-mix(in srgb, var(--color-bg) 60%, transparent);
    border-radius: var(--border-radius-sm);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.exp-summary-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-medium);
}
.exp-summary-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* ── Multi-currency summary (Expenses) ───────────────────────────────────
   Nothing on this page converts between currencies, so a trip holding more
   than one gets a figure PER currency in each money cell instead of a single
   total. The list is the total: there is deliberately no grand sum to show. */
.exp-money-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
/* Several stacked figures in a cell that was sized for one — step the type down
   so three currencies don't push the summary card to twice its height. */
.exp-money-list .exp-summary-value { font-size: 1.05rem; }

/* The ISO code riding alongside an amount ("$40.00 USD"). Only rendered when the
   figure would otherwise be ambiguous — several currencies in play, or a code we
   have no symbol for — so it must read as an annotation, not as part of the number. */
.exp-money-code {
    margin-left: 0.3em;
    font-size: 0.7em;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* "Of which estimated" / "Split — unsettled" when no currency contributes to it.
   A dash, not "$0.00": with several currencies on the trip there is no single
   currency a zero could honestly be expressed in. */
.exp-summary-none { color: var(--color-text-muted); }

/* The "not converted" sentence. Sits under the figures it explains. */
.exp-currency-note { margin: 0.85rem 0 0; }

/* Names the currency a category bar belongs to. Only present when there is more
   than one bar — on a single-currency trip the whole card is already in it. */
.exp-typebar-caption {
    margin: 0 0 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Spend-by-type breakdown bar (Expenses summary) ──────────────────────
   Stacked horizontal bar above an inline legend. Each segment is one expense
   type; widths come from server-rendered inline `width:%` styles. The 6 colors
   cycle to support up to 6 distinct types in the bar (the legend below shows
   all types regardless). */
.exp-typebar {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.exp-typebar-track {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-border) 30%, transparent);
}
.exp-typebar-seg {
    display: block;
    height: 100%;
    transition: filter var(--transition-fast);
}
.exp-typebar-seg:hover { filter: brightness(1.08); }
/* 6-color palette tuned to be distinct without clashing — keeps the accent hue
   for the top spender and steps through cool→warm. */
.exp-typebar-seg-1 { background: var(--color-accent); }
.exp-typebar-seg-2 { background: #7c3aed; }   /* violet */
.exp-typebar-seg-3 { background: #f59e0b; }   /* amber */
.exp-typebar-seg-4 { background: #10b981; }   /* emerald */
.exp-typebar-seg-5 { background: #ef4444; }   /* red */
.exp-typebar-seg-6 { background: #64748b; }   /* slate */

.exp-typebar-legend {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.35rem 1rem;
}
.exp-typebar-legend li {
    display: grid;
    grid-template-columns: 0.75rem 1fr auto;
    grid-template-areas: "swatch name pct" "swatch amt pct";
    column-gap: 0.45rem;
    align-items: center;
    font-size: var(--font-size-sm);
}
.exp-typebar-swatch {
    grid-area: swatch;
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    align-self: center;
}
.exp-typebar-name { grid-area: name; color: var(--color-text); font-weight: var(--font-weight-medium); }
.exp-typebar-amt  { grid-area: amt;  color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.exp-typebar-pct  { grid-area: pct;  color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }

.exp-item {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-radius: var(--border-radius-sm);
}
.exp-item:last-child { border-bottom: none; }
.exp-item:hover     { background-color: var(--color-primary-light); }
.exp-item:focus     { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.exp-item.selected {
    background-color: var(--color-primary-light);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(0.75rem - 3px);
}
.exp-item-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.exp-item-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    min-width: 6.5rem;
}
.exp-item-summary {
    flex: 1;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    word-break: break-word;
}
.exp-item-amount-value {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.exp-item-amount-value.exp-item-est {
    color: var(--color-text-muted);
    font-style: italic;
}
.exp-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-top: 0.2rem;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.exp-type-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.exp-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.exp-badge-est {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}
.exp-badge-unsettled {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
}
.exp-badge-settled {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}
/* Group-shared expense (lives on the board, editable by every active member). */
.exp-badge-shared {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: 1px solid var(--color-info-border);
    text-transform: none;
    letter-spacing: 0;
}
/* Per-row "Share" / "Make private" action + the add-form "Add to group" toggle. */
.exp-share-btn { padding: 0.1rem 0.55rem; font-size: 0.72rem; line-height: 1.4; }
.exp-share-toggle { margin: 0.25rem 0 0.75rem; }
.exp-item-loc { color: var(--color-text-muted); white-space: nowrap; }

/* Form helpers — narrower inputs for date / amount / ratings so they don't
   stretch full-width inside a .form-row when they only need a few characters. */
.exp-date-input    { max-width: 200px; }
.exp-amount-input  { max-width: 200px; }
.exp-rating-input  { max-width: 110px; }

.exp-ratings-details {
    margin: 0.25rem 0 1rem;
}
.exp-ratings-summary {
    cursor: pointer;
    color: var(--color-link);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    padding: 0.25rem 0;
}
.exp-ratings-summary:hover { color: var(--color-link-hover); }
.exp-ratings-row { margin-top: 0.5rem; }

/* ── 38a. Join wizard (Join.aspx through Join7.aspx) ────────────
   The wizard reuses .card + .form-group but needs its own narrower card width and
   per-step typography. The "Step X of 7" pill, the big question prompt, the
   collapsible "Why?" disclosure, and the multi-column rows all live here. */

.join-card {
    max-width: 540px;
    margin: 0 auto 1.5rem;
    padding: 1.75rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}
@media (max-width: 575px) {
    .join-card { padding: 1.25rem; border-radius: var(--border-radius); }
}

/* "Step X of 7" pill above the page title. The :where wrapper isolates from .label
   margin defaults so it sits flush above the H1. */
.join-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.35rem;
    padding: 0.2rem 0.7rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.join-progress::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-primary);
    /* Soft pulse so users see the wizard is "live", not a static page */
    animation: joinDotPulse 1.8s var(--ease-in-out) infinite;
}
@keyframes joinDotPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .join-progress::before { animation: none; }
}

/* Step prompt — slightly larger than .heading, slightly tighter than .page-title */
.join-question {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.4rem;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

/* "Why?" disclosure row — small link sitting just under the prompt, with the
   info text expanding inline when clicked. ASP.NET toggles Visible on lblInfo. */
.join-why {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: var(--font-size-sm);
}
.join-why .link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
/* NOTE: this used to carry a ::before round badge holding a literal "?", so the
   link rendered as "? Why?". Removed 2026-08-06 at the owner's request — the
   doubled question mark read as a formatting glitch, not as an icon. Do not
   reinstate it here or on .field-why; the word alone is the affordance. */
.join-why-info {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
    padding: 0.4rem 0.65rem;
    background: var(--color-bg);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    width: 100%;
    /* gentle slide-in when revealed */
    animation: joinInfoIn 0.22s var(--ease-out-quint);
}
@keyframes joinInfoIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Per-field "Why?" help toggle ─────────────────────────────────────
   A quieter, multi-field cousin of .join-why for forms like MyProfile,
   where many fields each want an optional "why is this useful?" hint. The
   label and a small "Why?" link share one baseline row; clicking the link
   reveals an italic explanation just below the field. Pure client-side
   (site.js initFieldWhy toggles the [hidden] attribute) — no postback. */
.input-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.input-label-row .input-label { margin-bottom: 0; }
.field-why {
    /* a real <button> styled as a quiet link (keyboard- & screen-reader-friendly) */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-link, var(--color-primary, #0090C8));
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color var(--transition-fast, 0.15s ease);
}
.field-why:hover,
.field-why:focus-visible { color: var(--color-link-hover, var(--color-primary-dark, #005a80)); }
.field-why:hover .field-why-label,
.field-why:focus-visible .field-why-label { text-decoration: underline; }
/* NOTE: a ::before round badge holding a literal "?" used to sit here, so every
   toggle rendered as "? Why?" — and "? Tips" once the edit forms were relabelled.
   Removed 2026-08-06 at the owner's request. See the matching note on .join-why. */
.field-why-info {
    margin: 0.4rem 0 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
    padding: 0.4rem 0.65rem;
    background: var(--color-bg);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    animation: joinInfoIn 0.22s var(--ease-out-quint);
}

/* Two-column row (first/last name). Stacks on mobile, splits at 540px+. */
.join-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
}
@media (min-width: 540px) {
    .join-row             { grid-template-columns: 1fr 1fr; }
    .join-row.three       { grid-template-columns: 1fr 1fr 1fr; }
}
.join-row .form-group { margin-bottom: 0; }
.join-row .textbox    { max-width: none; }

/* Trailing "Already have an account?" link below the wizard card */
.join-already {
    text-align: center;
    margin: 1rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.join-already .link { font-weight: var(--font-weight-medium); }

/* The "All steps take about a minute..." reassurance line sits between page header
   and join card; .text-center already covers alignment, but it can look orphaned
   without breathing room. */
.note.text-center { margin: 0.5rem auto 1.25rem; max-width: 540px; }

/* Step-progress dot strip (decorative; visualizes the 7 steps).
   Pages don't render it yet — add `<ol class="join-stepper" data-step="2">...</ol>`
   to surface it once the markup is updated. Defined here so the styling is ready. */
.join-stepper {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 0;
    margin: 0 auto 1.25rem;
    max-width: 540px;
}
.join-stepper li {
    flex: 1;
    height: 4px;
    background: var(--color-border);
    border-radius: 999px;
    transition: background-color var(--transition-mid);
}
.join-stepper li.done    { background: var(--color-primary); }
.join-stepper li.current { background: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); }

/* Checkbox + wrapping label on one baseline — the "I agree to the Terms of
   Service" row on the final Join step, and any other checkbox whose label runs
   to more than one line (a bare .checkbox would top-align the box against the
   first line and let line 2 wrap underneath it).

   PROMOTED FROM qMEET 2026-07-18: these three rules lived only in
   qMEET/Content/styles.css, yet PacklistPRO, qFIT, NobodyHasTHIS and
   paulmendelson.com ALL emit .checkbox-row / .checkbox-row-text on their final
   Join step — so the class was dead on four of five sites and that ToS row
   rendered unstyled. qMEET's local copy is now redundant (shared loads last, so
   these win at equal specificity); it can be deleted from
   qMEET/Content/styles.css whenever that file is next touched. */
.checkbox-row { display: flex; align-items: flex-start; gap: .5rem; }
.checkbox-row .checkbox { margin-top: .15rem; flex: 0 0 auto; }
.checkbox-row-text { line-height: 1.4; }


/* ── 38a. Increased-contrast accessibility ────────────────────────
   Honor the OS-level "increase contrast" or "high contrast" setting (Windows
   High Contrast on supporting builds, macOS Increased Contrast, Android Color
   Correction → high-contrast text). Strengthens borders, removes subtle muted
   colors, and ensures focus rings remain visible. Override only the design
   tokens — components inherit because they're built on the variables. */
@media (prefers-contrast: more) {

    /* Pure-white-on-pale interactive surfaces (info/success/warning pills)
       can wash out under increased contrast — strengthen their borders. */
    .alert-panel,
    .trip-badge,
    .trip-countdown,
    .trip-filter-chip,
    .td-quicknav-chip { border-width: 2px; }
    /* Subtle muted text becomes too quiet — bump up. */
    .note, .small.text-muted { color: var(--color-text); opacity: 0.85; }
}

/* ── 39. Reduced motion (accessibility) ──────────────────────────
   Users with vestibular disorders, motion sensitivity, or a low-end device may
   prefer minimal animation. Honor the OS-level setting by collapsing transitions
   and animations to a tick. Targeted selectors below preserve essential motion
   (toast fade, spinner) — without an explicit override the spinner would freeze. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* The progress bar still needs to animate to its target width, but the
       0.01ms above effectively turns it into a snap which is fine. */
    .back-to-top { transition: opacity 0.01ms; }
    /* Spinner: keep spinning so users know work is happening. */
    .spinner { animation: spin 0.6s linear infinite !important; }
}

/* ── 40. PWA install button (capture beforeinstallprompt) ──────── */
.pwa-install-btn {
    position: fixed;
    right: 1rem;
    bottom: 4.25rem; /* sits just above .back-to-top */
    z-index: 9998;
    display: none; /* shown by JS when beforeinstallprompt fires */
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: var(--color-accent);
    color: #111;                     /* 7.61:1 on the cyan; white was 2.48:1 */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
}
.pwa-install-btn.visible { display: inline-flex; }
.pwa-install-btn:hover, .pwa-install-btn:focus { background: var(--color-accent-dark); outline: none; }
.pwa-install-btn::before { content: "⤓"; font-size: 1rem; line-height: 1; }

/* ── Install pill wrapper + visible dismiss (ToDo PR-10) ───────
   The pill used to be a lone fixed <button> whose ONLY dismiss path was a
   right-click / long-press that nothing on the page mentioned. It now sits in a
   wrapper alongside a real "x" button.
   ⚠ The x MUST be a SIBLING, not a child of the pill: a <button> inside a <button>
   is invalid HTML and the inner one is unclickable, so the obvious markup silently
   produces a dismiss control that does nothing.
   Only PacklistPRO's site.js builds this wrapper today; on the sister sites these
   rules match nothing and the bare-button rules above still apply unchanged. */
.pwa-install-wrap {
    position: fixed;
    right: 1rem;
    /* Default = the slot the lone button used to occupy, just above .back-to-top.
       Pages that need it lifted (the demo strip, the shopping list's Add FAB) set
       --pwa-install-bottom on <body>; see the note by body.has-demo-strip above for
       why that is an inherited variable and not a more specific rule. */
    bottom: var(--pwa-install-bottom, 4.25rem);
    z-index: 9998;
    display: none;      /* shown by JS when beforeinstallprompt fires */
    align-items: stretch;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.pwa-install-wrap.visible { display: inline-flex; }

/* Hand positioning to the wrapper. Specificity 0,2,0 beats the bare .pwa-install-btn
   block above, and the shadow moves to the wrapper so the two halves cast one. */
.pwa-install-wrap .pwa-install-btn {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    box-shadow: none;
    border-radius: 999px 0 0 999px;
    padding-right: 0.5rem;
}
.pwa-install-wrap .pwa-install-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem 0 0.4rem;
    background: var(--color-accent);
    color: #111;                     /* matches the pill: 7.61:1 on the cyan */
    font-size: 1.05rem;
    line-height: 1;
    border: none;
    border-left: 1px solid rgba(0,0,0,0.18);   /* the only seam between the two halves */
    border-radius: 0 999px 999px 0;
    cursor: pointer;
}
.pwa-install-wrap .pwa-install-close:hover,
.pwa-install-wrap .pwa-install-close:focus { background: var(--color-accent-dark); outline: none; }
.pwa-install-wrap .pwa-install-close:focus-visible { box-shadow: var(--shadow-focus-ring); }

/* ── 41. Keyboard-shortcuts help overlay ──────────────────────── */
.shortcuts-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.shortcuts-overlay.open { display: flex; }
.shortcuts-box {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 460px;
    width: 100%;
    padding: 1.25rem 1.5rem;
}
.shortcuts-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0 0 0.75rem; }
.shortcuts-list { list-style: none; margin: 0; padding: 0; }
.shortcuts-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-border);
}
.shortcuts-list li:last-child { border-bottom: none; }
.shortcuts-list .shortcut-keys { display: inline-flex; gap: 0.25rem; }
.kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.1em 0.4em;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    text-align: center;
}
.shortcuts-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* ── 41a. Shared visibility utility ─────────────────────────────────────────
   Applied by Shared/site-core.js (e.g. to auto-hide a "↺ Reset Filters" button
   while every filter/sort control is still at its default). !important so it
   wins over a component's own display rule on the element it hides. */
.sc-hidden { display: none !important; }

/* ── 41b. Styled confirm / alert modal (SiteCore.confirm / SiteCore.alert) ──
   Cross-site replacement for the native window.confirm()/window.alert() dialog.
   The .sc-modal-* markup is built by Shared/site-core.js; the backdrop + card
   mirror the shortcuts overlay, and the buttons reuse the .button design-system
   classes (so they inherit each site's theme) — the rules here only add layout,
   the enter/leave transition, and a focus ring. */
.sc-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10050;               /* above toasts (10000) so a confirm is never buried */
    opacity: 0;
    transition: opacity 0.15s ease;
}
.sc-modal-overlay.open { opacity: 1; }
.sc-modal {
    background: var(--color-bg-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    width: 100%;
    padding: 1.25rem 1.5rem 1.15rem;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.15s ease;
}
.sc-modal-overlay.open .sc-modal { transform: none; }
.sc-modal-danger { border-top: 3px solid var(--color-danger); }
.sc-modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.5rem;
}
.sc-modal-body {
    line-height: 1.5;
    margin: 0;
    overflow-wrap: break-word;
}
.sc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
/* .button provides the look; these only guarantee a sensible tap target and that
   the modal buttons never stretch full-width the way some form-context rules do. */
.sc-modal-btn {
    min-width: 5.5rem;
    width: auto;
    margin: 0;
}
@media (prefers-reduced-motion: reduce) {
    .sc-modal-overlay, .sc-modal { transition: none; }
}

/* ── 42. Auto-resize textarea — disable vertical resize handle when JS-managed ── */
textarea.textbox[data-autoresize] {
    overflow: hidden;
    resize: none;
}

/* ── 43. Copy-to-clipboard helper ────────────────────────────────
   Small inline button that pairs with [data-clipboard-target]. After a copy
   the button briefly flips to .copied (green check) before reverting. */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.copy-btn:hover  { background: var(--color-primary-light); }
.copy-btn:focus  { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.copy-btn.copied { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.copy-btn.copied::before { content: "✓"; }

/* ── 43b. "Coming Soon" stub-page treatment ───────────────────────
   Walkthroughs, Debug, ManageItems/Tags etc. all use a "Coming soon" card.
   Give those stubs a more deliberate visual so users immediately understand
   the page is intentionally unbuilt — not broken. */
.stub-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.stub-card::before {
    content: "🚧";
    display: block;
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: 0.85rem;
    /* very subtle bob to communicate "in progress" */
    animation: stubBob 4s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .stub-card::before { animation: none; }
}
@keyframes stubBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ── 43a0. Trip Dashboard 2-up card grid ─────────────────────────
   On wide screens, pair Packlist + Tasklist and Notes + Expenses side-by-side.
   Cards keep their own margin-bottom, so we zero the bottom margin inside the
   grid and let `gap` provide consistent spacing. Stacks to one column under
   768px so phones don't squish two narrow cards next to each other. */
.td-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--section-gap);
    margin-bottom: var(--section-gap);
}
.td-card-grid > .card { margin-bottom: 0; }
@media (min-width: 768px) {
    .td-card-grid { grid-template-columns: 1fr 1fr; }
}
/* The trip-name heading inside this grid would otherwise inherit the grid's
   centering. Leave it alone — already controlled by .tripdashboard-trip-heading. */

/* ── 43a0. Trip Dashboard prep-timeline card ─────────────────────
   The trip's Timing buckets as a dated countdown. A vertical rail with one
   node per stage; the rail is drawn on the <ol> so it cannot outlive the
   last stage the way a per-item border would. Stage rows wrap on narrow
   screens (label, then date, then count) rather than truncating the count,
   which is the part being looked for. */
.td-prep-list {
    list-style: none;
    margin: 0.25rem 0 0.5rem;
    padding: 0 0 0 1.1rem;
    position: relative;
    border-left: 2px solid var(--border-color);
}
.td-prep-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.6rem;
    padding: 0.4rem 0;
    position: relative;
}
/* Node on the rail. Sits on the border drawn above, so its offset is half its
   own width plus the border, not a guessed value. */
.td-prep-stage::before {
    content: "";
    position: absolute;
    left: calc(-1.1rem - 5px);
    top: 0.75rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
}
.td-prep-stage.is-complete::before { background: var(--color-success, #2e7d32); }
.td-prep-stage.is-overdue::before  { background: var(--color-danger, #c62828); }
.td-prep-when { font-weight: 600; }
.td-prep-date { color: var(--color-text-muted); font-size: 0.9em; }
/* Completed stages recede but stay legible — this is a plan, and a stage you
   finished is still part of it. Not display:none, and not a strikethrough on
   the whole row. */
.td-prep-stage.is-complete .td-prep-when { font-weight: 500; opacity: 0.75; }
.td-prep-stage.is-overdue .td-prep-count {
    background: color-mix(in srgb, var(--color-danger, #c62828) 15%, transparent);
}
.td-prep-summary { margin: 0.35rem 0 0; }

/* ── 43a1. Trip Dashboard readiness card ─────────────────────────
   Big percentage on the left, headline + per-list breakdown on the right.
   Progress bar underneath fills with the same percentage. Visually anchors
   the page — gives users a "how prepared am I overall?" snapshot. */
.td-readiness {
    background-image:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--color-accent) 7%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--color-bg-card), var(--color-bg-card));
}
[data-theme="dark"] .td-readiness {
    background-image:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--color-bg-card), var(--color-bg-card));
}
.td-readiness-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.td-readiness-pct {
    flex: 0 0 auto;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.td-readiness-pct-sym {
    font-size: 0.5em;
    color: var(--color-text-muted);
    margin-left: 0.1em;
    font-weight: 500;
}
.td-readiness-body {
    flex: 1 1 16rem;
    min-width: 0;
}
.td-readiness-headline {
    margin: 0;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text);
}
.td-readiness-flavor { margin: 0.1rem 0 0.45rem; color: var(--color-text-muted); }
.td-readiness-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.td-readiness-breakdown strong { font-variant-numeric: tabular-nums; }
.td-readiness-track {
    margin-top: 0.75rem;
}

/* ── 43b0. Trip Dashboard quick-nav chips ──────────────────────────
   One-tap jump targets for Packlist / Tasklist / Notes / Expenses, sitting
   immediately under the trip-name heading. Wraps on narrow screens; tappable
   targets are at least 44px tall to honor mobile touch guidelines. */
.td-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
}
.td-quicknav-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: var(--color-bg-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    min-height: 38px;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.td-quicknav-chip:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    text-decoration: none;
    transform: translateY(-1px);
}
.td-quicknav-chip:active { transform: translateY(0); }
.td-quicknav-chip:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.td-quicknav-icon { font-size: 1em; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
    .td-quicknav-chip:hover { transform: none; }
}

/* ── 43a2. Stat strip ──────────────────────────────────────────────
   A responsive row of metric tiles (big value + small label) for
   surfacing a record's key numbers near the top of a detail/dashboard
   page (e.g. totals, streaks, "this week", last-done). Generic and
   cross-site; theme tokens make it dark-mode-correct automatically.
   Tiles flex-grow to share the row and wrap on narrow screens. */
.stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
}
.stat-tile {
    flex: 1 1 7rem;
    min-width: 6rem;
    text-align: center;
    padding: 0.7rem 0.85rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}
.stat-tile-value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    color: var(--color-text);
}
.stat-tile-label {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Accent variant — highlight the one tile that matters most (e.g. progress). */
.stat-tile.accent { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.stat-tile.accent .stat-tile-value { color: var(--color-accent); }

/* ── 43b1. Trip filter chips (Trips.aspx) ──────────────────────────
   Compact pill row above the trip list. Active chip uses accent fill.
   Hidden by JS when the user has fewer than 2 trips. */
.trip-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.4rem 0 0.6rem;
}
.trip-filter-chips[hidden] { display: none; }
.trip-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    font-family: var(--font-family);
}
.trip-filter-chip:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}
.trip-filter-chip:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.trip-filter-chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #111;                     /* 7.61:1 on the cyan; white was 2.48:1 */
}
.trip-filter-chip-count {
    margin-left: 0.35rem;
    font-size: var(--font-size-xs);
    opacity: 0.85;
}
/* When a chip filter is hiding a list item, the search-results <p> still
   shows the count for the visible subset. */
.trip-hidden-by-filter { display: none !important; }

/* ── 43c0. On-this-page TOC ─────────────────────────────────────────
   Floating "☰" launcher button bottom-right (left of back-to-top) that opens
   a centered overlay listing all section headings on the page. Driven by
   site.js initPageTOC when a parent element has data-page-toc. */
.toc-btn {
    position: fixed;
    right: 4.2rem;            /* tucks left of .back-to-top (1rem + 2.85rem + 0.35rem) */
    bottom: 1rem;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    border: none;
    background: var(--color-bg-card);
    color: var(--color-text);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.9);
    transition:
        opacity 0.25s var(--ease-out-quint),
        transform 0.25s var(--ease-out-quint),
        background-color 0.15s;
    z-index: 9997;
}
.toc-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.toc-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.toc-btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.toc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.toc-overlay.open { display: flex; }
.toc-panel {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 460px;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    padding: 1.25rem 1.5rem;
}
.toc-title {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}
.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.toc-list li + li { margin-top: 0.1rem; }
.toc-link {
    display: block;
    padding: 0.5rem 0.65rem;
    border-radius: var(--border-radius-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.toc-link:hover,
.toc-link:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    text-decoration: none;
}
/* ── Two-level outline (added 2026-07-30) ───────────────────────────────────
   A long reference page is a document, not a flat list: qFIT's Security & Privacy
   has 13 sections over 97 subsections, which rendered as 110 undifferentiated rows.
   An <h3> row now sits indented and lighter beneath its <h2>.

   ⚠ BOTH rules are deliberately scoped so no other site's TOC can shift:
   .toc-sub is emitted only by a TOC that tracks heading depth (qFIT's initPageTOC
   today), and the top-level weight rule is gated behind :has(li.toc-sub) so a flat
   list — every PacklistPRO / qMEET / NobodyHasTHIS page, and every qFIT page with no
   h3 — keeps its current appearance exactly. Do not un-scope either one. */
.toc-list li.toc-sub .toc-link {
    padding-left: 1.6rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.toc-list li.toc-sub .toc-link:hover,
.toc-list li.toc-sub .toc-link:focus-visible { color: var(--color-primary-dark); }
.toc-list:has(li.toc-sub) li:not(.toc-sub) .toc-link {
    font-weight: var(--font-weight-medium);
}
.toc-list:has(li.toc-sub) li.toc-sub + li:not(.toc-sub) .toc-link { margin-top: 0.35rem; }
.toc-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}
@media print { .toc-btn, .toc-overlay { display: none !important; } }

/* ── 43d. Trip countdown badge (Trips.aspx list) ───────────────────
   Small inline pill rendered next to the trip name on the Trips list when
   a trip is within ~30 days. Three flavors: upcoming, today, in-progress.
   Populated by JS in Trips.aspx using the trip's data-start/data-end attrs. */
.trip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.5rem;
    margin-left: 0.5rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: 1px;
}
.trip-badge-upcoming   { background: var(--color-info-bg);    color: var(--color-info);    border: 1px solid var(--color-info-border); }
.trip-badge-today      { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.trip-badge-active     { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.trip-badge-past       { background: var(--color-bg);         color: var(--color-text-muted); border: 1px solid var(--color-border); }
.trip-badge::before    { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── 43e. Trip Dashboard countdown banner ──────────────────────────
   Prominent card shown at the top of TripDashboard when a trip leaves in
   the near future or is currently in progress. Renders inline in the trip
   subline so it appears immediately under the trip name. */
.trip-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    margin-left: 0.5rem;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    border: 1px solid;
}
.trip-countdown-upcoming { color: var(--color-info);    background: var(--color-info-bg);    border-color: var(--color-info-border); }
.trip-countdown-today    { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); animation: countdownPulse 2s var(--ease-in-out) infinite; }
.trip-countdown-active   { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.trip-countdown-past     { color: var(--color-text-muted); background: var(--color-bg); border-color: var(--color-border); }
.trip-countdown-icon     { font-size: 0.95em; line-height: 1; }
@keyframes countdownPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-warning) 35%, transparent); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .trip-countdown-today { animation: none; }
}

/* ── 43f. Mobile responsiveness ──────────────────────────────────────
   Targeted overrides for narrow screens. The desktop layout is the
   default in the shared stylesheet; these rules stack, simplify, and
   enlarge touch targets so every page works on a phone.
   Breakpoints: 767px (tablet portrait & below), 575px (phone). */

@media (max-width: 767px) {

    /* ── Forms: stack .form-row children vertically ─────────────
       The shared .form-row is display:flex with wrap. On narrow
       screens we force column direction so 5-8 dropdowns don't
       squeeze into a tiny row. */
    .form-row {
        flex-direction: column;
    }
    .form-row > .form-group {
        width: 100%;
        min-width: 0;
        flex: none;
    }

    /* ── Buttons: stack in .form-actions ────────────────────── */
    .form-actions {
        flex-direction: column;
    }
    .form-actions > .button,
    .form-actions > [class*="button"] {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ── Tables: tighter cells for horizontal space ────────── */
    .data-table th,
    .data-table td {
        padding: 0.4rem 0.5rem;
        font-size: var(--font-size-xs);
    }
    .data-table th {
        font-size: 0.65rem;
    }

    /* Log message column: relax the max-width on mobile so it
       doesn't truncate to a few words. The table is inside a
       table-responsive wrapper so horizontal scroll handles
       overflow. */
    .log-msg {
        max-width: 60vw;
    }
    .log-table {
        min-width: 520px;
    }

    /* ── Toolbar rows: children already wrap, but ensure
       the search field doesn't demand too much space ───────── */
    .toolbar-search-grow {
        min-width: 140px;
        flex-basis: 100%;
    }

    /* ── DataEditor: stack toolbar fields ───────────────────── */
    .de-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .de-filter-input {
        width: 100%;
    }
    .de-button-row {
        padding-top: 0;
    }
    .de-save-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 0.65rem;
    }
    .de-save-bar .button {
        flex: 1 1 auto;
        min-height: 44px;
        text-align: center;
        justify-content: center;
    }
    .de-preview-box {
        margin: 1rem 0.5rem;
        max-width: none;
        padding: 1rem;
    }
    .de-paging {
        gap: 0.4rem;
    }
    .de-table .de-cell {
        min-width: 80px;
        min-height: 44px;
        height: auto;
        padding: 0.25rem 4px;
    }
    .de-table td {
        height: auto;
    }
    .de-table td:first-child {
        min-width: 44px;
        min-height: 44px;
    }

    /* ── Expenses: summary grid adapts to narrow screens ───── */
    .exp-summary-row {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }
    .exp-summary-value {
        font-size: 1.15rem;
    }

    /* ── Share link row (EditTrip): stack code + button ─────── */
    .share-link-row {
        flex-direction: column;
        max-width: none;
    }

    /* ── Quicklist filters: tighter gap ─────────────────────── */
    .ql-filters {
        gap: 0.5rem;
    }
    .ql-filter-divider {
        display: none;
    }

    /* ── Subscribe page: details table labels ──────────────── */
    .subscribe-details-label {
        width: auto;
        white-space: normal;
    }

    /* ── ContactUsViewer / DuplicateRecordFinder tables ─────── */
    .drf-table th,
    .drf-table td {
        padding: 0.35rem 0.5rem;
    }
    .drf-th-children {
        width: auto;
    }

    /* ── AI metadata grid: single column on mobile ─────────── */
    .ai-meta-grid {
        grid-template-columns: 1fr;
    }
    .ai-meta-label {
        white-space: normal;
    }

    /* ── Page header: tighter gap ──────────────────────────── */
    .page-header {
        gap: 0.5rem;
    }

    /* ── Contact Us form: stack site/page row ───────────────── */
    .cu-site-row {
        flex-direction: column;
    }
    .cu-site-select {
        width: 100%;
    }
}

@media (max-width: 575px) {

    /* ── Page wrapper: reduce padding on phones ────────────── */
    .page-wrapper {
        padding: 0.65rem;
    }

    /* ── Cards: slightly less padding ──────────────────────── */
    .card {
        padding: 0.75rem;
    }
    .card-lg {
        padding: 1rem;
    }

    /* ── Expenses form: let narrow inputs stretch full-width ── */
    .exp-date-input,
    .exp-amount-input,
    .exp-rating-input {
        max-width: none;
    }

    /* ── Notes date input: also stretch ─────────────────────── */
    .notes-date-input {
        max-width: none;
    }

    /* ── Home page: force exactly 2 columns on phones ──────── */
    .home-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    /* ── Trip readiness: scale down percentage ─────────────── */
    .td-readiness-pct {
        font-size: 2.25rem;
    }

    /* ── Modals / overlays: tighter padding on phones ──────── */
    .shortcuts-box,
    .toc-panel {
        padding: 0.85rem 1rem;
    }
    #session-expired-modal .modal-box {
        padding: 1.25rem;
    }

    /* ── Footer: tighter on phones ─────────────────────────── */
    .site-footer {
        padding: 1rem 0.75rem;
    }
    .site-footer-links {
        line-height: 2;
    }

    /* ── Expenses type-bar legend: narrower min ─────────────── */
    .exp-typebar-legend {
        grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    }

    /* ── Buttons in .form-actions: ensure tappable height ──── */
    .form-actions > .button {
        min-height: 44px;
    }

    /* ── Toolbar actions: stack and stretch ─────────────────── */
    .toolbar-actions {
        flex-direction: column;
        width: 100%;
    }
    .toolbar-actions > .button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ── LogViewer / ContactUsViewer: pager wraps tighter ──── */
    .log-pager {
        gap: 0.4rem;
        flex-wrap: wrap;
    }

    /* ── Quicklist: section/tag headers smaller ─────────────── */
    .ql-section-header {
        font-size: var(--font-size-base);
    }

    /* ── Duplicate Record Finder: results groups tighter ───── */
    .drf-group {
        margin-bottom: 0.5rem;
    }
    .drf-results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── ContactUs viewer: read-only info bar stacks ───────── */
    .cuv-readonly-info {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* ── DataEditor: phone-specific tightening ─────────────── */
    .de-save-bar .button {
        font-size: var(--font-size-sm);
        padding: 0.4rem 0.5rem;
    }
    .de-chips {
        gap: 0.3rem;
    }
    .de-chip {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
    }
    .de-preview-box {
        margin: 0.5rem;
        padding: 0.75rem;
    }
    .de-preview-table {
        font-size: 0.8rem;
    }
    .de-preview-table th,
    .de-preview-table td {
        padding: 0.2rem 0.35rem;
    }
}

/* Card title with top separator — marks a second logical section within
   a single card (e.g. "Site behavior" below "Display" on Preferences). */
.card-title-spaced {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TAB STRIP — sibling pages presented as tabs (.page-tabs / .page-tab)

   Emitted by InterestsTabs.ascx.vb (qMEET's four Interests pages) and by
   HelpTabs.ascx.vb (the Help hub plus the five help pages, on all three sites).
   Sits directly under .page-header.

   PROMOTED FROM qMEET/Content/styles.css TO THIS FILE 2026-08-04, when the Help
   hub (X3) gave qFIT and PacklistPRO a second consumer. It was qMEET-only until
   then, and there is deliberately NO copy left in any site sheet: this file loads
   LAST on every site, so a leftover local copy would win the cascade on that one
   site and then silently drift from the other two.

   These are ANCHORS to separate pages, not in-page panels — see the header
   comment in InterestsTabs.ascx / HelpTabs.ascx for why the markup is a <nav>
   with aria-current rather than an ARIA tablist. The styling is the only part
   that pretends they are tabs, which is exactly the right place for the pretence.

   Colour comes entirely from tokens, so the strip follows dark mode with no
   second ruleset: the inactive tab is muted text on the page background, the
   active one is accent text sitting on --color-bg-card with an accent underline,
   so it reads as the sheet the content below belongs to.
   ═══════════════════════════════════════════════════════════════════════════ */
.page-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    margin: -0.5rem 0 1.25rem;
    border-bottom: 2px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    /* A long strip must scroll sideways on a phone rather than wrapping into a
       second row of half-width tabs, which stops reading as a tab bar. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.page-tab {
    flex: 0 0 auto;
    padding: 0.5rem 1.1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--border-radius-sm, 6px) var(--border-radius-sm, 6px) 0 0;
    /* The 2px pulls each tab down onto the strip's own border so the active
       tab's underline replaces that border instead of stacking under it. */
    margin-bottom: -2px;
    color: var(--color-text-muted, #6c757d);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast, 0.15s ease),
                background-color var(--transition-fast, 0.15s ease);
}

.page-tab:hover,
.page-tab:focus-visible {
    color: var(--color-primary, #00B0F0);
    background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
    text-decoration: none;
}

.page-tab:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring, 0 0 0 3px rgba(0, 176, 240, 0.35));
}

.page-tab.is-active {
    color: var(--color-primary, #00B0F0);
    background-color: var(--color-bg-card, #ffffff);
    border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
    border-bottom: 2px solid var(--color-primary, #00B0F0);
    font-weight: var(--font-weight-bold, 600);
    cursor: default;
}

/* The active tab is the page you are already on, so hovering it must not
   suggest it will take you somewhere. */
.page-tab.is-active:hover,
.page-tab.is-active:focus-visible {
    background-color: var(--color-bg-card, #ffffff);
}

/* About page: responsive feature grids. Stacks on mobile, splits at md. */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .about-grid { grid-template-columns: repeat(2, 1fr); }
}
.about-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .about-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── 43b. Invite page (all five sites) ────────────────────────────
   Promoted here 2026-07-28 when Invite.aspx was unified across qFIT /
   PacklistPRO / qMEET / NobodyHasTHIS / paulmendelson.com. Before that,
   `.invite-qr` and `.invite-link-row` were defined ONLY in qMEET's and qFIT's
   local sheets — PLP, NHT and PM shipped markup using both classes with NO
   rule anywhere, so their QR sat unsized (falling back to the width/height
   attributes) and the copy row never became a flex row. Keep these here, not
   in a site sheet: styles_shared.css loads LAST on every site, so a local
   copy would be out-ranked by this one anyway and only drift. */

/* QR image — centered, capped, never wider than its card. */
.invite-qr {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0.5rem auto 0;
    border-radius: 8px;
}

/* "Or Share Your Link" — read-only URL grows, 📋 Copy sits beside it and
   wraps underneath on narrow screens. */
.invite-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.invite-link-row .textbox { flex: 1 1 220px; min-width: 0; }
.invite-link-row .button { flex: 0 0 auto; }
@media (max-width: 480px) {
    .invite-link-row .textbox { flex: 1 1 100%; }
}

/* Field caption on the left, the "(add @gmail.com)" link flush RIGHT with the
   right edge of the textbox below it. The 480px cap MUST mirror §21's
   `.form-group .textbox { max-width: 480px }` at >=768px — change one and the
   link stops lining up. Below 768px the box is full-width and so is this row. */
.invite-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}
@media (min-width: 768px) {
    .invite-label-row { max-width: 480px; }
}

/* ── 44. Itinerary page ──────────────────────────────────────────── */

/* Day navigation header */
.itin-day-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.itin-day-title {
    flex: 1;
    text-align: center;
    margin: 0;
}

/* Item rows */
.itin-item {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.itin-item:last-child { border-bottom: none; }
.itin-item:hover { background-color: var(--color-primary-light); }
.itin-item:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.itin-item.selected {
    background-color: var(--color-primary-light);
    border-left: 3px solid var(--color-accent);
}

.itin-item-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.itin-item-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    min-width: 5.5rem;
    flex-shrink: 0;
}
.itin-item-title {
    font-weight: var(--font-weight-medium);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.itin-item-meta {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.125rem;
}

/* Day headers in full itinerary */
.itin-day-header {
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    position: sticky;
    top: 0;
    z-index: 1;
}
[data-theme="dark"] .itin-day-header { background: var(--color-bg-card); }

/* Status badge variants */
.itin-status-confirmed { background: var(--color-success-bg); color: var(--color-success); }
.itin-status-cancelled { text-decoration: line-through; opacity: 0.65; }
.itin-status-completed { background: var(--color-success-bg); color: var(--color-success); opacity: 0.7; }

/* Collapsible details sections */
.itin-details { border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); }
.itin-details-summary {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    list-style: none;
}
.itin-details-summary::before { content: "▸ "; }
.itin-details[open] > .itin-details-summary::before { content: "▾ "; }
.itin-details-summary::-webkit-details-marker { display: none; }
.itin-details-body { padding: 0 0.75rem 0.75rem; }

/* Date + Time pairs (Start Date/Time, End Date/Time): keep the two fields on
   one line at every width. The general .form-row stacks to a column below
   768px so a dense row of dropdowns doesn't squeeze, but a date input plus a
   short time dropdown comfortably fit two-up — so this row opts out of that
   stacking. Declared after the max-width:767px .form-row override above, so it
   wins on equal specificity. */
.itin-datetime-row {
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 0.5rem;
}
.itin-datetime-row > .form-group {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* Responsive: time column narrower on phones */
@media (max-width: 575px) {
    .itin-item-time { min-width: auto; }
}

/* ── Suggested activities panel (Itinerary.aspx) ─────────────────────
   Additive only — reuses .main-card / .checkbox / .pill / .link. Each
   suggestion is a <label> row so the whole row toggles its checkbox,
   mirroring the Setup Checklist rows below. */
.itin-suggest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.itin-suggest-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 0.25rem;
}
.itin-suggest-toolbar .small-dim-text { margin-right: auto; }
/* "Email Suggestions to Me" row sits at the top, directly under the Select-all
   toolbar (left-aligned, tight spacing) so it's reachable without scrolling. */
.itin-suggest-emailrow { justify-content: flex-start; margin: 0 0 0.75rem; }
.itin-suggest-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}
.itin-suggest-item:last-child { border-bottom: none; }
.itin-suggest-item:hover { background-color: var(--color-primary-light); }
.itin-suggest-cb { margin-top: 0.2rem; flex: 0 0 auto; }
.itin-suggest-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.itin-suggest-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}
.itin-suggest-when {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.itin-suggest-title { font-weight: 600; }
.itin-suggest-metarow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.itin-suggest-desc { display: block; }
.itin-suggest-links { display: block; font-size: 0.9rem; }
.itin-suggest-loc { white-space: nowrap; }

/* ── 45. Home "Suggested ToDo's" list ────────────────────────────────
   Onboarding to-dos surfaced on Home. Every INCOMPLETE checklist item is
   one aligned row: [checkbox] [what to do] [button → its page]. The three
   columns line up vertically across every row because all rows share ONE
   grid — each .home-todo-row is display:contents, so its three cells become
   grid items of the parent .home-todo-list and inherit its columns. Ticking
   the checkbox marks that item done (persisted via the setupChecklist pref)
   and removes the row. Time-sensitive alerts (approvals waiting, drafts not
   live, RSVPs due) render above in a standout yellow so they don't blend in
   with the ordinary to-dos — they aren't checklist items and self-resolve. */

/* Yellow attention alerts — NOT checklist items; no checkbox, they clear
   themselves once you act on them (approve a member, publish a draft, …). */
.home-todo-alerts { list-style: none; padding: 0; margin: 0 0 1rem; }
.home-todo-alerts li {
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.4rem;
    border-radius: var(--radius-md, 8px);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning);
    line-height: 1.4;
}
.home-todo-alerts li:last-child { margin-bottom: 0; }
.home-todo-alerts .link {
    color: var(--color-warning);
    text-decoration: underline;
    font-weight: var(--font-weight-medium, 600);
}
/* The 1rem below the list is spacing between the alerts and the checklist rows that
   USED to follow them. Since the alerts were split into their own "Reminders" card
   (qMEET/PacklistPRO/qFIT, 2026-08-06) nothing follows them there, so that margin is
   dead space inside the card. Only zeroed when the list really is the last thing in the
   collapsible body, so any layout that still puts rows underneath keeps its gap. */
.home-card-body > .home-todo-alerts:last-child { margin-bottom: 0; }

/* RED variant — for alerts about data that is actually WRONG rather than merely
   waiting on you (PacklistPRO's trip date warnings: a placeholder or missing
   start/end date makes a trip's dates and status read incorrectly everywhere).
   Same box, danger palette. The dark-mode text override is required: unlike the
   warning pair, --color-danger is NOT re-declared for dark, so the light #c62828
   would land on the dark #3b1212 panel at under 2:1. */
.home-todo-alerts-danger li {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}
.home-todo-alerts-danger .link { color: var(--color-danger); }
[data-theme="dark"] .home-todo-alerts-danger li,
[data-theme="dark"] .home-todo-alerts-danger .link { color: #ff8a80; }

/* Aligned checklist to-do rows. Each row is its own 3-column grid; because the
   checkbox column is a fixed width and the middle 1fr eats the slack, the checkbox
   left edges, the text left edges, and the button RIGHT edges all line up vertically
   across every row. The divider is a continuous border on the row itself.
   .home-todo-list is just a plain container — the rows carry all the layout. */
.home-todo-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;   /* checkbox | text | button */
    align-items: start;                        /* top-align — descriptions can wrap to 2+ lines */
    column-gap: 0.85rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--color-border, #e0e0e0);
}
.home-todo-row:first-child { border-top: none; }
.home-todo-row:hover { background: var(--color-hover-bg, rgba(0, 0, 0, 0.03)); }

/* Fully custom-drawn checkbox. We can't lean on accent-color here: a DISABLED checked
   box (our "auto-completed" server-detected items are rendered disabled so they can't be
   un-ticked) is greyed out by the browser's native rendering no matter what accent-color
   or opacity we set — which is exactly why auto-checked boxes looked different from the
   ones the user ticks. appearance:none removes the native control entirely so WE paint
   every state, making auto-checked and manually-checked boxes pixel-identical blue. */
.home-todo-check {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    margin: 0.05rem 0 0 0 !important;   /* nudge to sit level with the title line */
    border: 2px solid var(--color-primary, #0090C8);
    border-radius: 4px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 74% 74%;
    cursor: pointer;
    opacity: 1;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
/* Checked — solid blue fill + white check. The :checked rule (0,2,0) beats the base
   .checkbox rules, and because there is no native control left, the DISABLED variant
   below inherits this exact look instead of the browser's grey. */
.home-todo-check:checked {
    background-color: var(--color-primary, #0090C8);
    border-color: var(--color-primary, #0090C8);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3.5%208.5l3%203%206-7'/%3E%3C/svg%3E");
}
/* Auto-checked (server-detected) items are disabled so they can't be un-accomplished —
   force the identical blue + full opacity, overriding the base .checkbox:disabled
   {opacity:.5} that otherwise faded them. */
.home-todo-check:disabled { cursor: default; opacity: 1 !important; }
.home-todo-check:disabled:checked {
    background-color: var(--color-primary, #0090C8) !important;
    border-color: var(--color-primary, #0090C8) !important;
}
.home-todo-text { min-width: 0; }
.home-todo-title { font-weight: var(--font-weight-medium, 600); line-height: 1.35; }
.home-todo-desc {
    color: var(--color-text-muted, #555);
    font-size: var(--font-size-sm, 0.9375rem);
    line-height: 1.4;
    margin-top: 0.1rem;
}
.home-todo-action { justify-self: end; }
.home-todo-action .button { margin: 0; white-space: nowrap; }

/* Progressive reveal: the list shows only the first few OPEN to-dos; JS tags the rest
   with .home-todo-more-hidden and the "Show More" link reveals the whole rest at once.
   (The yellow alerts above are never capped — every warning always shows.) */
.home-todo-row.home-todo-more-hidden { display: none; }

/* Completed items: hidden by default (the card shows only what's left to do); the
   "Show all" toggle adds .show-all to the list to reveal them, struck-through. */
.home-todo-row.home-todo-done { display: none; }
.home-todo-list.show-all .home-todo-row.home-todo-done { display: grid; }
.home-todo-done .home-todo-title {
    text-decoration: line-through;
    text-decoration-color: var(--color-text-muted, #999);
    opacity: 0.7;
}
.home-todo-done .home-todo-desc { opacity: 0.85; }

/* "You're all done" note — shown in the default (incomplete-only) view when nothing
   is left; JS toggles the hidden attribute. */
.home-todo-alldone { margin: 0.35rem 0 0; }
/* Footer row: "Show More" (reveal the rest of the open to-dos) on the LEFT, the
   "Show / Hide Completed" toggle pushed to the RIGHT (margin-left:auto). Both sit on one
   line; margin-left:auto keeps the toggle right-aligned even when "Show More" is hidden. */
.home-todo-foot {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.75rem;
}
/* Author display:flex above would otherwise defeat the `hidden` attribute — re-assert it. */
.home-todo-foot[hidden] { display: none; }
.home-todo-more-wrap { margin: 0; }
.home-todo-toggle-wrap { margin: 0; margin-left: auto; }
/* "Reset Checkboxes" — trails the Show Completed toggle on the right. Only ever shown
   when at least one user-ticked box exists, which also means a completed row exists,
   so in practice it sits beside the toggle rather than alone. No `display` here: that
   would defeat the `hidden` attribute the script uses to show/hide it (same trap the
   .home-todo-foot[hidden] rule above exists to undo). */
.home-todo-reset-wrap { margin: 0; }

@media (max-width: 575px) {
    /* Tighten so all three columns still fit on a phone; the text wraps if needed. */
    .home-todo-row { grid-template-columns: 1.375rem 1fr auto; column-gap: 0.6rem; padding: 0.6rem 0; }
    .home-todo-check {
        width: 1.375rem !important;
        height: 1.375rem !important;
        min-width: 1.375rem !important;
    }
    .home-todo-action .button { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ── Page header: ← Back button + left-justified titles (cross-site) ────────
   Shared by PacklistPRO, qMeet, and qFIT. The title left-justify lives on the
   base .page-title rule above (so the .text-center utility can still override
   it on the few pages that opt in — e.g. Login / Message-Sent). These rules
   pin the header's right-hand cluster (tip ⓘ / .page-header-actions) to the
   far right so the title group stays flush-left even on 3-item headers, and
   keep the ← glued to the title.

   The ← itself is injected / normalized by each site's site.js initBackButton()
   and rendered statically on each Error.aspx. */
.page-header > .tip-icon-button,
.page-header > .page-header-actions { margin-left: auto; }

/* Keep the ← on the same line as the title and let a long title wrap within
   its own column instead of orphaning the icon on a line above it.
   flex-basis 0% (not auto): the row's base size must never exceed the flex
   line, or a long title pushes the ⓘ trigger / actions cluster onto the next
   line on phones — instead the title shrinks and wraps inside its column. */
.page-header > .page-header-title-row {
    flex: 1 1 0%;
    min-width: 0;
    flex-wrap: nowrap;
}
.page-header-title-row > :not(.back-btn) {
    flex: 1 1 auto;
    min-width: 0;
}

/* A subtitle / description line sitting beside the title row — qMeet Surveys'
   "Take surveys shared with you…", CitiesNearMe's blurb, PacklistPRO's Park
   and EditPark intros. It is a SIBLING of the title row on the same flex line,
   and because the rule directly above gives the title row flex-basis 0% the
   title column absorbs 100% of the shrink: the description keeps its full
   max-content width and the title collapses toward nothing. Measured on prod
   2026-08-01 — qMeet Surveys at a 427px viewport left a 13px title column
   rendering "Surveys" ONE LETTER PER LINE (0px wide x 269px tall, .page-title
   has overflow-wrap:break-word), and PacklistPRO EditPark a 54px one. The band
   is wherever the description's max-content ALMOST fills the header, so it also
   bites on tablets: CitiesNearMe broke at 636-697px, not on phones.
   flex-basis 100% drops the description onto its own row under the title at
   every width, which is what all four call sites already mean by "subtitle".
   Bare <p> is covered so a page that simply drops a paragraph in the header is
   right by default; add .page-header-desc when the line is not a <p>.
   qMeet reached this same fix first, scoped to one class (Content/styles.css,
   `.page-header > .event-group-line`) — that rule still stands on its own.
   min-width, NOT just flex-basis: a max-width on the description CLAMPS its
   flex base size, so basis alone is not enough. qMeet's .cnm-subtitle caps at
   60ch, and with `flex: 1 0 100%` alone CitiesNearMe still broke at 637-697px
   (title 0-42px wide) because the clamped 582px base fit beside the title.
   min-width beats max-width, so the full-row break is unconditional. Corollary:
   a max-width on a description in here is now inert — don't add one expecting a
   reading measure (qMeet's .cnm-subtitle had one and it was removed, not
   overridden, so the dead declaration wouldn't mislead the next reader). */
.page-header > p,
.page-header > .page-header-desc {
    flex: 1 0 100%;
    min-width: 100%;
}

/* ← Back button icon. Two-class selector (.back-btn.back-btn-icon) so it wins
   over the base single-class .back-btn rules above. */
.back-btn.back-btn-icon {
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.1rem 0 0.1rem 0.35rem;  /* no right padding — sit flush against the title */
    margin: 0 -0.5rem 0 -0.35rem;      /* R: cancel the title-row's 0.5rem flex gap; L: flush-left */
    min-height: 0;
    color: inherit;
    text-decoration: none;
    flex: 0 0 auto;
    align-self: center;                /* vertically center against the title */
}
.back-btn.back-btn-icon:hover,
.back-btn.back-btn-icon:focus-visible {
    background-color: transparent;
    opacity: 0.65;
    box-shadow: none;
}
@media print {
    .back-btn.back-btn-icon { display: none !important; }
}

/* ── 46. Color-picker grid (§4.3) ─────────────────────────────────────
   A client-side grid of color swatches for choosing a record color
   (categories, tags, etc.). Markup:
     <div class="color-picker-preview" …></div>
     <div class="color-picker-grid" role="group" aria-label="…">
        <button type="button" class="cp-swatch" data-color="#xxxxxx"
                aria-label="Color #xxxxxx" style="background-color:#xxxxxx"></button>
        …
     </div>
   Page JS wires clicks to a hidden field + the preview; no postbacks. */
.color-picker-preview {
    width: 100%;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin: 0.25rem 0 0.5rem;
}
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(28px, 1fr));
    gap: 4px;
    max-width: 380px;
    margin-bottom: 0.75rem;
}
.cp-swatch {
    height: 28px;
    min-height: 28px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    font-size: 0.7rem;
    line-height: 1;
    transition: transform var(--transition-fast, 0.15s);
}
@media (pointer: coarse) {
    .cp-swatch { height: 32px; min-height: 32px; }
}
.cp-swatch:hover { transform: scale(1.08); }
.cp-swatch:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.cp-swatch.selected {
    box-shadow: 0 0 0 2px var(--color-bg-card), 0 0 0 3px var(--color-accent);
}
[data-theme="dark"] .cp-swatch { border-color: rgba(255, 255, 255, 0.25); }

/* ============================================================
   47. Cross-site visual-system extensions (additive, June 2026)
   Purely additive design tokens + utility classes that round out
   the existing system. Touches no existing rule. Safe for all
   three sites because every rule introduces NEW class names or
   NEW custom-property names that did not previously resolve. The
   token block also adds bigger-ring focus shadows for the danger
   and warning button variants so red/orange buttons no longer
   pick up the cyan default. Section header pattern matches the
   sections above so future audits can find the boundary.
   ============================================================ */

/* ── 47.1 Additional design tokens ────────────────────────────
   Light-mode values live in :root, dark overrides in [data-theme="dark"].
   The spacing / z-index scales formalize values that were repeated as
   magic numbers throughout the file; existing rules keep their literal
   values until they are migrated piecemeal. */
:root {
    /* Spacing scale — matches the existing utility ladder
       (gap-1=0.25, gap-2=0.5, gap-3=0.75, gap-4=1, plus 1.5, 2). */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Touch target floor (iOS HIG 44px). Pre-existing min-height: 44px
       literals scattered through .button / .nav-toggle / .back-btn / etc. */
    --touch-target: 44px;

    /* Page container max-width — matches .page-wrapper / .site-nav .nav-inner. */
    --container-max: 1200px;

    /* Z-index scale — standardizes layer naming so future stacking-context
       additions don't fight existing numbers (nav 1000, modal 2000, toast 9999). */
    --z-base:     1;
    --z-sticky:   10;
    --z-dropdown: 100;
    --z-nav:      var(--nav-z, 1000);
    --z-overlay:  1500;
    --z-modal:    2000;
    --z-popover:  3000;
    --z-toast:    9999;

    /* Variant-tinted focus rings — pair with the matching button colors so
       the focus indicator is hue-consistent with the action it surrounds.
       Existing --shadow-focus-ring (cyan) remains the default. */
    --shadow-focus-danger:  0 0 0 3px rgba(211,  47,  47, 0.32);
    --shadow-focus-success: 0 0 0 3px rgba( 50, 205,  50, 0.32);
    --shadow-focus-warning: 0 0 0 3px rgba(230,  81,   0, 0.32);
    --shadow-focus-info:    0 0 0 3px rgba(  2, 119, 189, 0.32);
}
[data-theme="dark"] {
    --shadow-focus-danger:  0 0 0 3px rgba(239,  83,  80, 0.45);
    --shadow-focus-success: 0 0 0 3px rgba(102, 187, 106, 0.45);
    --shadow-focus-warning: 0 0 0 3px rgba(255, 167,  38, 0.45);
    --shadow-focus-info:    0 0 0 3px rgba( 79, 195, 247, 0.45);
}

/* ── 47.2 Missing focus rings for colored button variants ─────
   The base .button:focus-visible always paints the cyan accent ring,
   which clashes with red/orange/transparent buttons. Variant-matched
   rings keep the indicator hue-consistent without changing layout. */
.button.warning:focus-visible {
    box-shadow: var(--shadow-btn, 0 1px 2px rgba(0,0,0,0.15)),
                var(--shadow-focus-warning, 0 0 0 3px rgba(230, 81, 0, 0.32));
}
.button.transparent:focus-visible {
    box-shadow: 0 0 0 3px var(--color-primary-light),
                0 0 0 5px var(--color-primary);
}

/* ── 47.3 Layout / display utilities ─────────────────────────
   Round out the .d-* + .flex-* set. All additive — none of these
   class names appeared anywhere in the shared file as of audit. */
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-inline-flex  { display: inline-flex; }
.d-grid         { display: grid; }

.flex-column    { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-row-reverse    { flex-direction: row-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-nowrap    { flex-wrap: nowrap; }
.flex-1         { flex: 1 1 0%; }
.flex-auto      { flex: 0 0 auto; }
.flex-grow-1    { flex-grow: 1; }
.flex-shrink-0  { flex-shrink: 0; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }

.align-start    { align-items: flex-start; }
.align-center   { align-items: center; }
.align-end      { align-items: flex-end; }
.align-baseline { align-items: baseline; }
.align-stretch  { align-items: stretch; }

/* ── 47.4 Spacing utilities — round out the existing mt- / mb- set ── ──────────
   ⚠ NEVER let an asterisk be followed by a slash inside a comment here — that is
   the comment terminator, and it CLOSES THE COMMENT EARLY. Writing the class
   family as "mt-" star "/mb-" star does exactly that. This heading did until
   2026-08-11: the tail of the line then merged with the next selector, and the
   `.m-0` rule below was silently swallowed — it was absent from the CSSOM while
   its siblings .mt-0 / .mb-0 / .mt-5 were all present, which is how it was found.
   The damage was invisible on sites that also load Bootstrap, because Bootstrap
   defines .m-0 with !important; anywhere without Bootstrap it was simply gone. */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mt-5 { margin-top: 1.5rem; }
.mb-5 { margin-bottom: 1.5rem; }
.mt-6 { margin-top: 2rem; }
.mb-6 { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.p-0  { padding: 0; }
.p-1  { padding: 0.25rem; }
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-5  { padding: 1.5rem; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem;    padding-bottom: 1rem; }

.gap-0 { gap: 0; }
.gap-5 { gap: 1.5rem; }

.w-auto { width: auto; }
.h-100  { height: 100%; }
.h-auto { height: auto; }
.mw-100 { max-width: 100%; }

/* ── 47.5 Typography utilities ──────────────────────────────── */
.fw-normal { font-weight: var(--font-weight-normal); }
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-bold   { font-weight: var(--font-weight-bold); }

.fs-xs   { font-size: var(--font-size-xs); }
.fs-sm   { font-size: var(--font-size-sm); }
.fs-base { font-size: var(--font-size-base); }
.fs-lg   { font-size: var(--font-size-lg); }
.fs-xl   { font-size: var(--font-size-xl); }
.fs-xxl  { font-size: var(--font-size-xxl); }

/* Tabular numerals — keeps columns of numbers (counters, prices, time
   remaining) from jittering across digit changes. Already used inline in
   .char-counter and .pager; standardize the helper class. */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Text color tokens to complete the .text-muted/.text-danger/.text-success
   triad with the remaining semantic colors. */
.text-info    { color: var(--color-info); }
.text-warning { color: var(--color-warning); }

/* Long-text overflow helpers. */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-break  { overflow-wrap: anywhere; word-break: break-word; }
.text-nowrap { white-space: nowrap; }
.text-wrap   { white-space: normal; }

/* ── 47.6 Border / shape helpers ────────────────────────────── */
.rounded     { border-radius: var(--border-radius); }
.rounded-sm  { border-radius: var(--border-radius-sm); }
.rounded-lg  { border-radius: var(--border-radius-lg); }
.rounded-pill { border-radius: 999px; }
.rounded-circle { border-radius: 50%; }
.border       { border: 1px solid var(--color-border); }
.border-top   { border-top: 1px solid var(--color-border); }
.border-bottom{ border-bottom: 1px solid var(--color-border); }
.border-0     { border: 0 !important; }
.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }
.shadow-lg    { box-shadow: var(--shadow-lg); }

/* ── 47.7 Responsive show/hide — extend the existing helpers ──
   Existing helpers:
     .hide-xs        (max-width: 575px)
     .hide-sm        (max-width: 767px)
     .show-xs-only   (hidden at min-width: 768px)
   Filling in the gap so the same idiom works at md and lg breakpoints. */
@media (max-width: 991px)  { .hide-md      { display: none !important; } }
@media (max-width: 1199px) { .hide-lg      { display: none !important; } }
@media (max-width: 575px)  { .show-sm-up   { display: none !important; } }
@media (max-width: 767px)  { .show-md-up   { display: none !important; } }
@media (max-width: 991px)  { .show-lg-up   { display: none !important; } }
@media (max-width: 1199px) { .show-xl-up   { display: none !important; } }

/* ── 47.8 Skip-link target marker ─────────────────────────────
   Pair with the existing .skip-link. Pages that wrap their main content in
   <main id="main"> already work; this gives a fallback target marker for
   pages that label the wrapper with .main-content instead. */
[id="main"]:focus,
.main-content:focus { outline: none; }

/* ── 47.9 prefers-reduced-transparency (a11y) ─────────────────
   Honor the OS setting (macOS Reduce Transparency, Windows Transparency
   effects off). Solidify backdrop-filtered surfaces so motion-sensitive or
   low-contrast users don't get hard-to-read blurred chrome. */
@media (prefers-reduced-transparency: reduce) {
    .modal-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(15, 23, 42, 0.85);
    }
    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--color-bg-nav);
    }
}

/* ── 47.10 Forced-colors mode (Windows High Contrast) ─────────
   Tabs/buttons/forms must continue to read in WHCM. Outlines replace
   color cues, and the explicit `forced-color-adjust: auto` keeps the
   system theme in charge of decoration on interactive elements. */
@media (forced-colors: active) {
    .button,
    .pill,
    .nav-link,
    .alert-panel,
    .card,
    .main-card,
    .data-table th,
    .data-table td { forced-color-adjust: auto; }
    .button { border: 1px solid ButtonText; }
    :focus-visible { outline-color: Highlight; }
}

/* ── 47.11 Data-table density variant ─────────────────────────
   .data-table-compact tightens row padding for log viewers / admin
   grids that prioritize density over breathing room. Stripe / hover /
   sticky behaviors continue to come from the base .data-table rules. */
.data-table-compact th,
.data-table-compact td {
    padding: 0.35rem 0.5rem;
}
.data-table-compact th { font-size: 0.68rem; }

/* ── 47.12 Image-rendering helpers ─────────────────────────────
   Some sites embed pixel-art icons (8-bit progress badges) that look
   blurred under the default smooth scaling. */
.img-crisp { image-rendering: pixelated; }
.img-cover { object-fit: cover; }

/* ── 47.13 Cursor + interaction helpers ──────────────────────── */
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab        { cursor: grab; }
.user-select-none   { user-select: none; }
.user-select-all    { user-select: all; }

/* ── 47.14 Aspect-ratio helpers ─────────────────────────────── */
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

/* ── 48. Profile hero, avatar & detail-list (cross-site) ───────────────────
   Reusable building blocks for member/public-profile pages: a hero band with a
   circular avatar (photo or colored monogram fallback) + name + an at-a-glance
   status/location line, plus a two-column key/value "detail list" for use inside
   cards. Introduced for qMeet's PublicProfile2 (card-based redesign) but named
   generically so any site's profile page can adopt them. Theme-aware via tokens. */

.profile-hero {
    display: flex;
    flex-direction: row;      /* avatar on the left, presence + location to its right */
    align-items: center;
    text-align: left;
    gap: 1rem;
}
.profile-hero-body { min-width: 0; }

/* Online/recent/idle status dot beside the "Active …" line. */
.profile-hero-status {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* left-aligned beside the avatar */
    gap: 0.45rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.profile-hero-loc {
    margin-top: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.profile-online-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-text-light);   /* idle / unknown */
}
.profile-online-dot.is-online {
    background: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent);
}
.profile-online-dot.is-recent { background: var(--color-warning); }

/* Circular avatar — fixed square, image cover-cropped; monogram modifier paints
   an accent disc with a centered initial when the member has no photo. */
.profile-avatar {
    display: block;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-avatar-mono {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #111;                     /* 7.61:1 on the cyan; white was 2.48:1 */
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-transform: uppercase;
    border-color: transparent;
}
@media (max-width: 480px) {
    .profile-avatar { width: 64px; height: 64px; }
    .profile-avatar-mono { font-size: 1.5rem; }
}

/* Title text inside a collapsible card's toggle (icon + label on one baseline). */
.profile-card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Two-column key/value list (label | value), e.g. profile "Details" card. */
.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}
.detail-list dt,
.detail-label {
    margin: 0;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}
.detail-list dd,
.detail-value {
    margin: 0;
    color: var(--color-text);
    min-width: 0;
}

/* ── Site-wide announcement banner ─────────────────────────────────────────
   Rendered after the nav on every page by Site.Master when an active
   announcement exists for the site (see Shared\SiteAnnouncements.vb). Mirrors
   the qMeet ChatUC ".reply-quote" panel: bordered card + absolute close button.
   Dark-mode colors come automatically from the host site's [data-theme] vars. */
.site-announce {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem auto;
    max-width: 1100px;
    padding: 0.7rem 2.4rem 0.7rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-left: 4px solid rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    background: #0000ff;          /* info: blue */
    color: #ffffff;
    font-size: var(--font-size-sm, 0.95rem);
    line-height: 1.4;
}
.site-announce--warn {
    background: #ff8000;          /* warning: orange */
    color: #1a1a1a;               /* dark text — white is unreadable on bright orange */
}
/* Warn variant flips the white text/links/close (set above for the blue info banner) to
   dark so they stay legible on the orange background. More specific than the base rules,
   so it wins regardless of source order. */
.site-announce--warn .site-announce-text a { color: #1a1a1a; }
.site-announce--warn .site-announce-close { color: rgba(0, 0, 0, 0.6); }
.site-announce--warn .site-announce-close:hover { color: #000000; }
.site-announce-body { flex: 1 1 auto; min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.site-announce-title { font-weight: var(--font-weight-bold, 700); text-transform: uppercase; }
.site-announce-text a { color: #ffffff; text-decoration: underline; }
.site-announce-close {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
    padding: 0 0.25rem;
}
.site-announce-close:hover { color: #ffffff; }

/* ── Collapsible Home cards ─────────────────────────────────────────────────
   The per-site Home page enhances each .main-card: everything after the card's
   first .heading is wrapped in .home-card-body and the heading becomes a toggle
   (adds .home-collapsible; clicking toggles .home-collapsed to hide the body).
   A chevron on the heading shows the state. */
.home-collapsible > .heading {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.home-collapsible > .heading::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);            /* chevron points down = expanded */
    transition: transform 0.15s ease;
    opacity: 0.55;
}
.home-collapsible.home-collapsed > .heading::after {
    transform: rotate(225deg);           /* chevron points up = collapsed */
}
.home-collapsible.home-collapsed > .home-card-body {
    display: none;
}

/* ── Card headline: count pill + short summary ───────────────────────────────
   Stamped by SiteCore.cardCounts onto a card's title from its data-count-sel /
   data-summary-sel attributes, so a SHUT card still says how much is inside.
   Both live inside the title element, which is why they survive the collapse:
   the enhancers only ever hide what comes AFTER the title.

   Moved here from qMEET's Content/styles.css on 2026-08-06 — it was the only site
   with the badge and all five needed it. Do not re-add a local copy.

   ⚠ The Home chevron below carries its OWN margin-left:auto, and flexbox splits
   free space EQUALLY between competing auto margins — with both set, the badge
   lands halfway across the title instead of at the right edge. So when a badge is
   present (cardCounts stamps .home-head-hascount on the title) the badge keeps the
   auto margin and the chevron gives its up, leaving them as one right-hand pair.
   Titles with no badge are untouched. */
.home-collapsible > .heading.home-head-hascount::after,
.home-head-toggle.home-head-hascount::after,
.home-head-toggle.home-head-hassummary::after { margin-left: 0; }
.home-head-count {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.35rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #111;                     /* 7.61:1 on the cyan; white was 2.48:1 */
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}
/* The written-out alternative, for cards whose body is a sentence rather than a
   list ("Daily pace: 12% vs last week"). Quiet, never bold, and clipped rather
   than allowed to push the title into a second and third line. */
.home-head-summary {
    margin-left: auto;
    align-self: center;
    min-width: 0;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}
/* A summary AND a badge: the summary takes the free space, the badge sits last. */
.home-head-hascount .home-head-summary { margin-right: 0.15rem; }
.home-head-hascount .home-head-summary + .home-head-count,
.home-head-summary + .home-head-count { margin-left: 0; }
@media (max-width: 575.98px) {
    /* On a phone the title itself needs the width more than the sentence does. */
    .home-head-summary { max-width: 45%; }
}

/* ── Collapsible `.card-title` cards (the dashboards) ────────────────────────
   SiteCore.collapsibleCards stamps .home-head-toggle on the title it made
   clickable. Keyed on that class rather than on `.card-title` so the many
   non-collapsible cards using the same class are untouched, and so it works
   whether the title is the card's first child (PacklistPRO's Trip Dashboard) or
   nested in a header row beside its buttons (qFIT's Exercise Randomizer). */
.home-head-toggle { cursor: pointer; user-select: none; }
.home-head-toggle::after {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);            /* chevron points down = expanded */
    transition: transform 0.15s ease;
    opacity: 0.55;
}
.home-collapsed .home-head-toggle::after {
    transform: rotate(225deg);           /* chevron points up = collapsed */
}
/* The title keeps its underline while open; a shut card has no body under it, so
   the rule would draw a line across the bottom of an otherwise empty box. */
.home-collapsible.home-collapsed > .card-title,
.home-collapsible.home-collapsed > * > .card-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}


/* ── Share panel (EventSearch / GroupSearch "🔗 Share" float panel) ──────────────
   Reuses the .modal-overlay/.modal-box centered-dialog shell; these rules style the
   inner sections. Injected once into <body> by Scripts/share-panel.js. */
.share-box {
    max-width: 30rem;
    text-align: left;
    /* Cap the panel to the viewport and scroll inside it. A Share / Invite panel with the
       contacts + invite sections open was overflowing the screen on desktop (>640px) with no
       way to reach the bottom actions — only the inner contact list scrolled. (On phones the
       .modal-box already caps + scrolls via the ≤640px rule.) */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.share-subtitle { margin: 0.15rem 0 0.75rem; font-weight: 600; }
.share-batch-hint { margin: 0.5rem 0 0; }
.share-section { margin-bottom: 0.9rem; }
.share-section .input-label { display: block; margin-bottom: 0.3rem; }
.share-link-row,
.share-email-row { display: flex; gap: 0.4rem; align-items: stretch; }
.share-link-row .textbox,
.share-email-row .textbox { flex: 1 1 auto; min-width: 0; }
.share-link-row .button,
.share-email-row .button { flex: 0 0 auto; white-space: nowrap; }

.share-contact-list {
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--color-border, rgba(127, 127, 127, 0.3));
    border-radius: 8px;
    padding: 0.25rem;
    margin-top: 0.35rem;
}
.share-contact-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}
.share-contact-row:hover { background: var(--color-bg-hover, rgba(127, 127, 127, 0.12)); }
.share-contact-row .checkbox { flex: 0 0 auto; margin: 0; }
.share-contact-name { flex: 1 1 auto; }

/* Contacts already invited / already on the event or group: dimmed, not selectable,
   with a small status badge so the picker indicates who's already been invited. */
.share-contact-row.is-done { cursor: default; opacity: 0.72; }
.share-contact-row.is-done:hover { background: transparent; }
.share-contact-row.is-done .share-contact-name { color: var(--color-text-muted, #6b7280); }
.share-contact-badge {
    flex: 0 0 auto;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}
.share-contact-badge.invited {
    color: #166534;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.4);
}
.share-contact-badge.member {
    color: var(--color-text-muted, #6b7280);
    background: rgba(127, 127, 127, 0.14);
    border: 1px solid rgba(127, 127, 127, 0.32);
}

.share-domain-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.share-domain { cursor: pointer; }

/* Optional personal note sent with the share/invite. min-height:0 beats the `.textarea`
   floor above (~2.5 input-heights) so rows="2" governs — this box is an OPTIONAL extra at
   the bottom of an already-tall panel, and a six-line well reads as required.
   ⚠ The box must carry class "textarea", not "textbox": the floor matches the former at
   0,1,0 (so this 0,1,1 selector wins on specificity anywhere) but the latter at 0,1,1,
   where a site-local override would tie and then LOSE on load order. */
textarea.share-comment { min-height: 0; height: auto; }
.share-comment-hint { margin: 0.3rem 0 0; }
/* Remaining-character readout, only rendered near the cap (see renderCommentCount). */
.share-comment-count { display: inline-block; margin-left: 0.25rem; font-variant-numeric: tabular-nums; }

.share-email-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.share-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-bg-hover, rgba(127, 127, 127, 0.16));
    font-size: 0.9em;
}
.share-tag-x {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    padding: 0 0.2rem;
    opacity: 0.7;
}
.share-tag-x:hover { opacity: 1; }

.share-actions { justify-content: space-between; margin-top: 0.5rem; }
.share-login-nudge { margin: 0.25rem 0 0.5rem; }
.share-result { margin-top: 0.5rem; min-height: 1.2em; font-weight: 600; }

/* ── PWA info popup ──────────────────────────────────────────────────────
   Any element with class "pwa-info-link" opens the #pwa-info-overlay panel
   (markup + JS live in each site's Site.Master). Explains what an installed
   app (PWA) is and how to install it on iPhone/Android. Mirrors the primer
   modal's look; scoped to .pwa-info-*. */
.pwa-info-overlay {
    position: fixed; inset: 0; z-index: 1200;               /* above chat/notification bars + primer */
    display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: pwa-info-fade .18s ease-out;
}
.pwa-info-overlay[hidden] { display: none; }
@keyframes pwa-info-fade { from { opacity: 0; } to { opacity: 1; } }
body.pwa-info-lock { overflow: hidden; }
.pwa-info-dialog {
    position: relative; width: 100%; max-width: 540px; max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--color-bg-card, #fff); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--border-radius, 12px);
    box-shadow: 0 18px 50px rgba(0,0,0,.35); padding: 22px 22px 18px; outline: none;
    animation: pwa-info-pop .2s ease-out;
}
@keyframes pwa-info-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.pwa-info-close {
    position: absolute; top: 8px; right: 10px; width: 32px; height: 32px;
    border: none; background: transparent; color: var(--color-text-muted);
    font-size: 24px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.pwa-info-close:hover { background: var(--color-bg-input); color: var(--color-text); }
.pwa-info-h { font-size: var(--font-size-xl, 1.3rem); font-weight: var(--font-weight-bold, 700); margin: 0 6px 10px 0; padding-right: 28px; }
.pwa-info-sub { font-size: var(--font-size-lg, 1.1rem); font-weight: var(--font-weight-bold, 700); margin: 16px 0 6px; }
.pwa-info-dialog p { margin: 0 0 10px; line-height: var(--line-height, 1.5); }
.pwa-info-steps { margin: 0; padding-left: 22px; }
.pwa-info-steps li { margin: 0 0 6px; line-height: var(--line-height, 1.5); }
.pwa-info-actions { margin-top: 18px; display: flex; justify-content: flex-end; }

/* ==========================================================================
   City autocomplete  (shared/city-autocomplete.js)
   Server-backed US-city typeahead popup anchored under any input carrying
   data-city-autocomplete. Theme-aware via the shared color tokens.
   ========================================================================== */
.city-ac-anchor { position: relative; }
.city-ac-list {
    position: absolute; z-index: 1000; left: 0; right: 0; top: 100%;
    margin: 4px 0 0; padding: 4px; list-style: none;
    max-height: 260px; overflow-y: auto;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #b6cede);
    border-radius: var(--border-radius-sm, 6px);
    box-shadow: var(--shadow-lg, 0 12px 24px -8px rgba(15,23,42,.15));
}
.city-ac-list[hidden] { display: none; }
.city-ac-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 7px 10px; cursor: pointer;
    border-radius: var(--border-radius-sm, 6px);
    color: var(--color-text, #1a1f2e);
    line-height: var(--line-height, 1.4);
}
.city-ac-item:hover,
.city-ac-item.active {
    background: var(--color-accent-light, #e0f6fe);
    color: var(--color-text, #1a1f2e);
}
:root[data-theme="dark"] .city-ac-item:hover,
:root[data-theme="dark"] .city-ac-item.active {
    background: var(--color-bg-input, #555);
}
.city-ac-name { font-weight: var(--font-weight-medium, 500); }
.city-ac-state {
    flex: none; font-size: .85em; font-weight: var(--font-weight-bold, 700);
    letter-spacing: .04em; color: var(--color-text-muted, #6c757d);
}
.city-ac-empty {
    padding: 8px 10px; color: var(--color-text-muted, #6c757d);
    font-style: italic; cursor: default;
}

/* ════════════════════════════════════════════════════════════════════════
   📖 TUTORIAL SYSTEM  (Scripts/tutorial.js + TutorialButton.ascx)
   Cross-site canonical copy (added 2026-07-17 during the help-system redesign
   that ported the qMEET pattern to PacklistPRO / qFIT / NobodyHasTHIS /
   paulmendelson.com). Two surfaces share ONE look:
     • Tutorial — opened on demand (📖 button / Tutorials index / ?tutorial=1).
     • "Need to Know" (NTK) — auto-opens once, DB-tracked; identical
       dialog with a warning-colored top stripe as the only tell.
   All colors use shared design tokens so it tracks light/dark automatically.
   Deliberately NEW names (.tutorial-*) so they never collide with the older
   .tips-trigger-wrap / .tip-icon-button / .primer-* rules that some sites
   still render during the transition.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 📖 trigger (TutorialButton.ascx) ─────────────────────────────────────
   Sits in the upper-right of <main class="page-wrapper">, same footprint as
   the ⓘ Tips trigger it replaces. (main.page-wrapper{position:relative} is
   already set site-wide and is what these absolute offsets hang off.) */
.tutorial-trigger-wrap {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    margin: 0;
}
@media (min-width: 768px) {
    .tutorial-trigger-wrap { top: 1.5rem; right: 1.5rem; }
}
@media (min-width: 1200px) {
    .tutorial-trigger-wrap { top: 2rem; right: 1.5rem; }
}

/* 2.75rem is the minimum comfortable tap target — the glyph is small, the hit
   area is not. Matches the ⓘ it replaces pixel for pixel. */
.tutorial-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #6c757d);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--border-radius-sm, 6px);
    transition: color var(--transition-fast, 0.15s ease),
                background-color var(--transition-fast, 0.15s ease);
}
.tutorial-icon-button:hover {
    color: var(--color-text, #1a1f2e);
    background-color: var(--color-primary-light, #e0f6fe);
}
.tutorial-icon-button:focus-visible {
    outline: 2px solid var(--color-border-focus, var(--color-primary, #0090C8));
    outline-offset: 2px;
}

/* Reserve right-side space so a long page title can't run under the trigger. */
.tutorial-trigger-wrap ~ .page-title,
.tutorial-trigger-wrap ~ .page-header,
.tutorial-trigger-wrap ~ * .page-title,
.tutorial-trigger-wrap ~ * .page-header {
    padding-right: 3rem;
}

/* ── modal overlay (Tutorial + NTK) ─────────────────────────────────────── */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;                     /* above sticky nav / chat / notification bars */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: tutorial-fade .18s var(--ease-out-quint, ease-out);
}
.tutorial-overlay[hidden] { display: none; }
@keyframes tutorial-fade { from { opacity: 0; } to { opacity: 1; } }

/* Lock background scroll while any tutorial/NTK panel is open. */
body.tutorial-lock { overflow: hidden; }

.tutorial-dialog {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card, #fff);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 12px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    padding: 22px 22px 18px;
    outline: none;
    animation: tutorial-pop .2s var(--ease-out-quint, ease-out);
}
@keyframes tutorial-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.tutorial-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.tutorial-close:hover { background: var(--color-bg-input); color: var(--color-text); }

/* ── Dialog titlebar: WHICH page this popup belongs to ─────────────────────
   Added 2026-07-31. Every NTK panel's own <h2> reads "💡 Things You Should
   Know" — identical on all 45 of them across three sites — so before this row
   existed the popup carried no clue which page had raised it. Authored per
   page in the markup (NOT derived from the page's <h1> at runtime: half the
   host pages render an ENTITY name there — the exercise, the item, the event —
   which is not the page's name).

   Deliberately a quiet titlebar and not a second heading: it sits above the
   panel's <h2> and must never compete with it. */
.tutorial-pagetitle {
    font-size: var(--font-size-sm, .85rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-muted);
    letter-spacing: .02em;
    margin: 0 0 12px;
    padding: 0 28px 8px 0;             /* clear the × */
    border-bottom: 1px solid var(--color-border);
}

/* Progress: "Step X of N" + dots */
.tutorial-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-right: 28px;               /* clear the × */
    min-height: 12px;                  /* hold the row height on a multi-panel overlay */
}
/* A single-panel overlay hides this row wholesale (tutorial.js) — one dot is not
   progress, it is an unexplained blue dot, and the step count is blank there too.
   The [hidden] attribute alone would LOSE to the display:flex above, so state it. */
.tutorial-progress[hidden] { display: none; }
.tutorial-stepcount {
    font-size: var(--font-size-sm, .85rem);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.tutorial-dots { display: flex; gap: 7px; flex-wrap: wrap; }
.tutorial-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background .15s ease, transform .15s ease;
}
.tutorial-dot.active {
    background: var(--color-accent, var(--color-primary));
    transform: scale(1.15);
}

/* Panels */
.tutorial-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 150px;
}
.tutorial-panel { animation: tutorial-fade .18s ease-out; }
.tutorial-panel[hidden] { display: none; }
.tutorial-h {
    font-size: var(--font-size-xl, 1.3rem);
    font-weight: var(--font-weight-bold, 700);
    margin: 0 0 10px;
}
.tutorial-panel p { margin: 0 0 10px; line-height: var(--line-height, 1.5); }
.tutorial-panel ul { margin: 0 0 10px; padding-left: 1.15rem; }
.tutorial-panel li { margin: 0 0 7px; line-height: var(--line-height, 1.5); }

/* Optional inline color-swatch chips (e.g. demoing item color codes in a tour). */
.tutorial-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1px solid var(--color-border);
    vertical-align: -2px;
    margin-right: 2px;
}
.tutorial-swatch-important { background: #ffff00; border-color: #000; }
.tutorial-swatch-low { background: #b0b0b0; border-color: #000; }

/* "Don't keep showing this" — lives IN the footer, immediately left of the ✓ Got It button.
   margin-right:auto pins it to the far left of the row; the button stays hard right. */
.tutorial-dontshow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    cursor: pointer;
    font-size: var(--font-size-sm, .9rem);
    line-height: 1.3;
}
.tutorial-dontshow[hidden] { display: none; }

/* Footer nav. flex-end + an auto right-margin on the left-hand item (rather than space-between)
   so a single-panel NTK — which hides Back entirely — still leaves "✓ Got It" hard right. */
.tutorial-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.tutorial-footer .button { min-width: 96px; }
.tutorial-footer .button[disabled] { opacity: .45; cursor: default; }
.tutorial-footer .tutorial-back { margin-right: auto; }
.tutorial-footer .tutorial-back[hidden] { display: none; }
/* When Back is visible too (a multi-panel NTK), Back owns the left edge and the checkbox
   sits beside the button instead — only one element can claim the auto margin. */
.tutorial-footer .tutorial-back:not([hidden]) ~ .tutorial-dontshow { margin-right: 0; }

@media (max-width: 480px) {
    /* Stack rather than crush the checkbox label against the button on a narrow screen. */
    .tutorial-footer { flex-wrap: wrap; }
    .tutorial-dontshow { margin-right: 0; flex: 1 1 100%; order: -1; }
}

/* ── "Need to Know" accent ──────────────────────────────────────
   Same dialog, one signal that this popped up on its own and is the critical
   stuff — a warning-colored top stripe. */
.tutorial-overlay[data-tutorial-key="ntk"] .tutorial-dialog {
    border-top: 4px solid var(--color-warning, #e0a800);
}
/* The hand-off row to the full Tutorial at the end of a NTK. */
.tutorial-more {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

/* The closing note at the BOTTOM of every "Need to Know" popup — "closing this without checking
   the box will snooze it until tomorrow…". Added 2026-08-02 with the once-a-day gate.

   🔑 There is NO markup for this in any .aspx: Scripts/tutorial.js (addSnoozeNote) appends one
   <p class="tutorial-snooze-note"> to each NTK's .tutorial-dialog at runtime, so all 45 popups
   across qMEET / qFIT / PacklistPRO get the same sentence and any new one inherits it. Searching
   the markup for this class finds nothing — that is expected, not a missing file.

   It sits AFTER .tutorial-footer (last child of the dialog), so it reads as a footnote under the
   checkbox and button it describes; the top border separates it from that row the same way
   .tutorial-more separates the hand-off button from the panel body above it.

   Quiet on purpose: this is the least important text in the dialog and must never compete with
   the panel's actual content. It carries the inline ? badge (.tutorial-help-glyph-inline), which
   sets its own colours, so the muted colour here applies to the surrounding sentence only. */
.tutorial-snooze-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    color: var(--color-text-muted, #6c757d);
}

@media (max-width: 480px) {
    .tutorial-dialog { padding: 18px 16px 14px; }
    .tutorial-h { font-size: var(--font-size-lg, 1.15rem); }
}

/* ── The site-wide floating "❓ Help" pill (Site.Master #tutorialHelpPill) ─────────────────
   Added 2026-07-18. Replaces the per-page 📖 TutorialButton on every site: the book icon was
   hard to spot and .tutorial-trigger-wrap reserved space that pushed page content down.
   Scripts/tutorial.js unhides it ONLY on pages that actually carry a Tutorial overlay, so a
   page with no tutorial shows nothing.

   🔑 WHY `var(--pill-cluster-right, …)` AND NOT A PLAIN VALUE — this one declaration has to be
   correct on all five sites, and they differ:
     • qMEET defines --pill-cluster-right in its own :root because it has a THREE-pill cluster
       ([Status] [❓] [Admin]) and shows its hamburger at EVERY width, so the anchor must track
       the centred nav container. Those cluster rules stay in qMEET/Content/styles.css.
     • PacklistPRO / qFIT / NobodyHasTHIS / paulmendelson.com have no competing floating pills
       and their .nav-toggle is phone-only (`@media (min-width: 992px) { display: none }`), so
       the fallback is all they need.
   ⚠ styles_shared.css loads AFTER each site's Content/styles.css, so a plain `right: 1rem`
   here would OVERRIDE qMEET's tuned cluster and drop the ❓ on top of its ☰. The var+fallback
   form lets the same rule resolve per site. Do not "simplify" it to a literal. */
.tutorial-help-pill {
    position: fixed;
    top: 0.5rem;
    right: var(--pill-cluster-right, 1rem);
    z-index: 1502;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary, #0090C8);
    /* Latent until now: the visible "?" is .tutorial-help-pill-glyph (#000,
       8.47:1). This is the fallback for any other text in the pill. */
    color: #111;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}
.tutorial-help-pill[hidden] { display: none; }
.tutorial-help-pill:hover { filter: brightness(1.08); }
.tutorial-help-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The pill's glyph is a plain text "?" in a span (NOT the ❓ emoji — an emoji ignores CSS
   color and always renders its own red). Black per the 2026-07-20 request; all 5 Site.Masters
   carry the matching <span class="tutorial-help-pill-glyph">?</span>. */
.tutorial-help-pill-glyph { color: #000; font-size: 1.05rem; font-weight: 700; }

/* The SAME badge, inline — carried by the "Open the Tutorial" button inside every "Need to
   Know" popup (45 of them across qMEET / PacklistPRO / qFIT). Added 2026-08-01 at the owner's
   request: that button used to show a book glyph, which taught nobody that the round ? at the
   top of the screen opens the very same Tutorial overlay. Making the two look identical is the
   entire point of this class.

   🔑 Mirrors .tutorial-help-pill + .tutorial-help-pill-glyph on purpose: same round shape, same
   var(--color-primary) fill, same BLACK bold "?" — and, for the same reason spelled out above,
   a plain text "?" and NOT the ❓ emoji, which ignores `color` and always renders its own red.
   Sized under the floating pill's 1.9rem so it sits on the text baseline inside a .button
   without stretching the button's line-height.

   ⚠ If the floating pill's fill or glyph colour ever changes, change it HERE TOO — two rules
   that are supposed to look identical will not tell you when they drift. */
.tutorial-help-glyph-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--color-primary, #0090C8);
    color: #000;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: -0.2em;
}

/* Below 992px the shared .nav-toggle (☰) appears in the top-right corner, so the pill has to
   clear it. On qMEET the var is defined and already accounts for its always-on hamburger, so
   this resolves to qMEET's own cluster anchor and changes nothing there. */
@media (max-width: 991px) {
    .tutorial-help-pill { right: var(--pill-cluster-right, 3.75rem); }
}

/* ── 49. In-card empty state — "prerequisite missing" vs "genuinely empty" ──────────────
   Added 2026-07-29 for qMEET / qFIT / PacklistPRO.

   THE PROBLEM THIS EXISTS TO FIX. Across the three sites the overwhelmingly common shape
   for a data card is: declare it `Visible="false"` in markup, load the data, and set
   `Visible = True` only on the happy path. Every other outcome — the user has not set the
   prerequisite yet, the prerequisite exists but resolves to nothing, the query legitimately
   returned zero rows, the loader threw and was swallowed — exits early and leaves the card
   hidden. All four render as *the same nothing*: the card simply is not on the page, so a
   user who is one click away from making the feature work gets exactly as much information
   as a user for whom there is genuinely nothing to show. (PacklistPRO's `pnlParksNearby` is
   the canonical example: no destination, unresolvable destination, no park within 60 miles,
   and an exception are four different situations behind one blank space.)

   THE FIX IS THE CARD STAYS. It renders one of these two notes instead of vanishing:

     data-empty-mode="prereq"  — something is MISSING and the user can go get it. Says what is
                                 needed and links straight to the page that provides it. Amber,
                                 because it is actionable.
     data-empty-mode="none"    — the prerequisite IS satisfied and the answer is honestly zero.
                                 Muted grey, no call to action, because there is nothing to do.

   The distinction is the whole point: "you have no trip destination" and "there are no parks
   near your destination" must not look alike.

   RELATIONSHIP TO THE EXISTING `.empty-state`. That block (§ above, ~line 2217) is the big
   centred page-level treatment — 4rem circled icon, centred text — and it is used on ~64
   pages. It is deliberately NOT changed here. Adding `data-empty-mode` re-lays the same
   element out compactly and left-aligned so it sits *inside* a card next to other cards
   without shouting. The child classes (`.empty-state-icon` / `-title` / `-sub` / `-actions`)
   are reused verbatim so there is only ever one empty-state vocabulary to learn.
   `.empty-state-hero` opts a moded block back into the big centred look for whole-page use.

   🔑 The mode signal is carried by the CONTAINER (left rule + tinted well), never by the
   glyph. Emoji ignore `color:` and always render their own palette — the same reason
   `.tutorial-help-pill-glyph` above is a plain text "?" and not ❓. So the glyph is free to
   be any emoji the caller likes without weakening the prereq/none distinction.

   ⚠ Do NOT put `.admin2-*`, `.dash2-*` or `.result-card` rules in this file — those are
   qMEET-only and live in qMEET/Content/styles.css. Nothing below references a card class at
   all: this block is self-contained so it drops into `.main-card`, `.dash-panel`,
   `<details class="card">`, or a bare div identically on all three sites. */
.empty-state[data-empty-mode] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.7rem;
    text-align: left;
    padding: 0.85rem 1rem;
    margin: 0.25rem 0 0;
    border-radius: var(--border-radius-sm, 6px);
    border: 1px solid transparent;
    border-left-width: 3px;
}

/* Shrink the shared 4rem circle down to an in-card badge. Same element, same class — only
   the metrics change — so a block can be moved between hero and in-card use by adding or
   removing one attribute. */
.empty-state[data-empty-mode] .empty-state-icon {
    width: 1.9rem;
    height: 1.9rem;
    margin-bottom: 0;
    font-size: 1rem;
    border-radius: 50%;
}
/* A literal 1rem, not a token: the note sits INSIDE a card that already has a `.card-title`,
   and `.card-title` is `--font-size-lg` (1.125rem) bold — as is the page-level
   `.empty-state-title`. --font-size-base is ALSO 1.125rem here, so reaching for it would
   have left the note's heading exactly as loud as the card's own, which is the one thing
   an in-card note must not be. There is no token between --font-size-sm (0.875) and
   --font-size-lg, so the step down is spelled out. */
.empty-state[data-empty-mode] .empty-state-title {
    font-size: 1rem;
    margin: 0 0 0.15rem;
}
/* The page-level `.empty-state-sub` centres itself with auto margins and clamps to 32rem.
   In a card it should just fill the column. */
.empty-state[data-empty-mode] .empty-state-sub {
    margin: 0;
    max-width: none;
    font-size: var(--font-size-sm, 0.9rem);
}
.empty-state[data-empty-mode] .empty-state-actions {
    justify-content: flex-start;
    margin-top: 0.55rem;
}
.empty-state[data-empty-mode] .empty-state-actions:empty { display: none; }
/* `.empty-state .button { margin-top: 0.75rem }` from the page-level block double-spaces the
   action row once `.empty-state-actions` already has its own margin. */
.empty-state[data-empty-mode] .button { margin-top: 0; }

/* ── Mode: prerequisite missing (actionable) ── */
.empty-state[data-empty-mode="prereq"] {
    background: var(--color-warning-bg, #fff3e0);
    border-color: var(--color-warning-border, #ffcc80);
    border-left-color: var(--color-warning, #e65100);
}
.empty-state[data-empty-mode="prereq"] .empty-state-icon {
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
    color: var(--color-warning, #e65100);
}
.empty-state[data-empty-mode="prereq"] .empty-state-title { color: var(--color-text); }

/* ── Mode: genuinely empty (informational, no call to action) ── */
.empty-state[data-empty-mode="none"] {
    background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-border) 60%, transparent);
    border-left-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
}
.empty-state[data-empty-mode="none"] .empty-state-icon {
    background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-border) 60%, transparent);
    color: var(--color-text-muted, #6c757d);
}

/* Opt a moded block back into the page-level centred treatment (whole-page empties that
   still want the prereq/none distinction — e.g. a search page with no saved filters yet). */
.empty-state-hero[data-empty-mode] {
    display: block;
    text-align: center;
    padding: 2rem 1rem;
}
.empty-state-hero[data-empty-mode] .empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
}
.empty-state-hero[data-empty-mode] .empty-state-sub {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.empty-state-hero[data-empty-mode] .empty-state-actions { justify-content: center; }

@media (max-width: 480px) {
    .empty-state[data-empty-mode] { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* 🔴 REQUIRED, not optional. `[hidden]` is a UA-stylesheet rule and LOSES to any author
   `display:` declaration — and `.empty-state[data-empty-mode]` above sets `display: grid`.
   Without this line, `el.hidden = true` (and `Visible="false"`-adjacent client toggling, as
   qMEET/ChatTextReplacements.aspx already does with `<div class="empty-state" hidden>`)
   renders the block VISIBLE. Same trap already worked around ~7 times elsewhere in this file.
   Keep it LAST in this section so it wins on source order against the equal-specificity
   display rules above. */
.empty-state[hidden] { display: none; }

/* ── 50. "Search ignores your filters" notice ──────────────────────────────────────────
   Added 2026-07-29 for qMEET (FindEvents) + PacklistPRO (Packlist / Tasklist / ShoppingList).
   Server half: Shared/SearchFilterNotice.vb (the one string; this is the one class).

   THE PROBLEM THIS EXISTS TO FIX. All four pages deliberately let a typed search term BYPASS
   the page's filters — a search that "can't find" an item because a filter is quietly
   excluding it reads as a broken search. But the filter dropdowns keep displaying their
   selections the whole time, so from the user's side the filters just stopped working. This
   notice is the missing half of that decision: it sits directly under the search box while a
   term is active, says the filters are paused, and offers the one-tap way back.

   INFO, NOT WARNING. Nothing is wrong and nothing was lost, so this is deliberately the info
   palette rather than the amber `warning` one that §49's `prereq` mode uses — it should be
   noticed on the way past, not treated as an error to clear.

   🔑 Every color here is a THEME-AWARE token. The qMEET-local `.es2-search-paused` rule this
   replaces used `--color-accent-light` (#e0f6fe), which has no dark-mode override, so in dark
   mode it painted near-white behind `--color-text`'s near-white type. `--color-info-bg` /
   `--color-info-border` both flip under [data-theme="dark"], and `color` is set explicitly
   rather than inherited, so the text can never be left riding an unrelated background. */
.search-filter-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-info-border, #81d4fa);
    border-left-width: 3px;
    border-radius: var(--border-radius-sm, 6px);
    background: var(--color-info-bg, #e1f5fe);
    color: var(--color-text, #1a1f2e);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.35;
}

/* The clear action is an <asp:LinkButton>, i.e. a real <a> that posts back — so it inherits
   the site-wide link color/underline unless told otherwise. Given its own weight + underline
   here so it reads as the actionable half of the sentence next to the plain text beside it. */
.search-filter-notice-clear {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-info, #0277bd);
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}
.search-filter-notice-clear:hover,
.search-filter-notice-clear:focus-visible {
    color: var(--color-text, #1a1f2e);
    text-decoration: underline;
}
/* --color-info is NOT overridden for dark mode (it is one flat #0277bd), and against
   --color-info-bg's dark value (#082a3d) it falls under 4.5:1. Lift the link to the same
   family the dark-mode info borders use so the actionable word stays the readable one. */
[data-theme="dark"] .search-filter-notice-clear { color: #7fd3f7; }

/* Same trap as §49's closer: `[hidden]` is a UA-stylesheet rule and LOSES to the author
   `display: flex` above, so an attribute-hidden notice would render VISIBLE. */
.search-filter-notice[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   §51 — "we'll send sign-in codes and password resets to X" email-use notice
   Server half: Shared/EmailUseNotice.vb (the one sentence; this is the one class).
   Live on all three sites in three places: Join2 (live readback under the email
   field), the post-signup ?welcome=1 banner, and Preferences beside the
   Two-Factor toggle.

   THE PROBLEM THIS EXISTS TO FIX. 2FA defaults ON everywhere (a NULL preference
   reads as True), so the address typed once on Join2 is the only way back into
   the account — yet that screen never said so and never read the address back.
   A typo stays invisible until the second device, when the emailed code and
   Forgot Login are both unreachable at once.

   INFO, NOT WARNING. Nothing is wrong yet; this is a confirm prompt, not an
   error. Same info palette and the same theme-aware tokens as §50 — every color
   below flips under [data-theme="dark"], and `color` is set explicitly rather
   than inherited so the text can never end up riding an unrelated background.
   ══════════════════════════════════════════════════════════════════════════════ */
.email-use-notice {
    display: block;
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-info-border, #7ec8e8);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--color-info-bg, #e8f6fd);
    color: var(--color-text, #1a1f2e);
    font-size: 0.9rem;
    line-height: 1.4;
}
.email-use-notice strong { white-space: nowrap; }

/* Same trap as §49's and §50's closers: `[hidden]` is a UA-stylesheet rule and
   LOSES to the author `display: block` above, so an attribute-hidden notice
   would render VISIBLE. Both forms are covered because Join2 hides it via the
   attribute (client-side) while the server surfaces use Visible="false". */
.email-use-notice[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   SAVE MODEL  —  "does this card save as you go, or not until you press something?"
   ------------------------------------------------------------------------------
   THE CANONICAL, CROSS-SITE definition. Rendered ONLY by Shared\SaveModelNotice.vb
   (linked into all three .vbproj) — if you find this markup hand-built in an .aspx
   or an .ascx, that copy is the bug.

   Promoted here 2026-07-31, replacing TWO rival implementations of the same idea
   that had grown up independently and looked nothing alike:
     • qFIT   .save-model         in qFIT/Content/styles.css  (flex, icon + body)
     • PLP    .options-save-model in THIS file                (plain block, no icon)
   Both are retired; their pages now render this. `.options-save-model` is kept
   below purely as a compatibility alias — do not write new markup against it.

   🔑 BOTH VARIANTS ARE INTENTIONALLY IDENTICAL IN LOOK. [data-save-model="auto"]
   and [data-save-model="deferred"] get the same box, border, colour and weight;
   only the sentence and the leading icon differ. That is the whole mechanism:
   because everything else is constant from card to card and site to site, the
   sentence is the one thing that changes as you move between them, so the change
   is what you notice. Give one variant its own colour and the eye files them as
   two unrelated notices and stops comparing the words. There is a data attribute
   rather than a modifier class precisely so nobody reaches for
   `.save-model--deferred { background: … }` without reading this.

   🔴 Do NOT re-home this on .alert-panel. That component silently loses any
   `display:flex` a variant sets (a later shared rule wins), which is exactly the
   icon+body layout this needs; and a full alert at the top of every control group
   reads as a page full of errors. This is a quiet standing note, not an alert.
   ══════════════════════════════════════════════════════════════════════════════ */
.save-model {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0.55rem 0.75rem;
    background-color: var(--color-info-bg, #e1f5fe);
    border: 1px solid var(--color-info-border, #81d4fa);
    border-left-width: 4px;
    border-radius: var(--border-radius, 10px);
    color: var(--color-text, #1a1f2e);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.4;
}
/* Same trap as §49's / §50's closers and .email-use-notice: [hidden] is a UA-sheet
   rule and LOSES to the author `display: flex` above, so an attribute-hidden notice
   would render VISIBLE. */
.save-model[hidden] { display: none; }
.save-model-icon {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1.4;
}
/* min-width:0 so a long sentence wraps inside the flex row instead of stretching it. */
.save-model-body { min-width: 0; }
.save-model-headline { font-weight: var(--font-weight-bold, 600); }
/* The button caption, quoted verbatim from the card's own button. Not styled as a
   button — it names one, it isn't one. */
.save-model-button { white-space: nowrap; }
/* 🔴 NOT var(--color-text-muted). Measured on this component's own background:
   #6c757d on the light --color-info-bg (#e1f5fe) is 4.13:1 — under AA for text
   this size. The muted token is sized for muted-on-card, and this box is not a
   card. #5a6570 on the same background measures 5.16:1. Dark mode keeps the
   token: #b1b5bb on the dark --color-info-bg (#082a3d) is 7.05:1, already clear.
   (Same class of fix, and the same reason, as the semantic-text overrides in
   the "Dark-mode semantic TEXT contrast" section of this file.) */
.save-model-detail {
    display: block;
    margin-top: 0.1rem;
    color: #5a6570;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-normal, 400);
}
[data-theme="dark"] .save-model-detail { color: var(--color-text-muted, #b1b5bb); }

/* The card's corner-× is absolutely positioned at top/right inside the padding box
   and is ~2.5rem tall, so it overlaps the first line or two of anything up there.
   Reserve room for it on every notice inside such a card (PLP ShoppingList still
   uses its own pre-promotion .sl-options-topbar, hence the second selector). */
.card-options-host > .save-model,
.sl-options-topbar ~ .save-model { padding-right: 3.25rem; }

/* ── Compatibility alias, 2026-07-31 ────────────────────────────────────────────
   .options-save-model was PLP's local name for this line before it was shared. The
   three PLP pages that used it now render .save-model, so nothing in the workspace
   needs this rule — it exists only so an un-migrated copy (a BACKUPS restore, a
   half-deployed FTP push) degrades to the right look instead of an unstyled <p>.
   Do not add new markup against it; delete it once a deploy has settled. */
.options-save-model {
    display: block;
    margin: 0 0 0.85rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-info-border, #81d4fa);
    border-left-width: 3px;
    border-radius: var(--border-radius-sm, 4px);
    background-color: var(--color-info-bg, #e1f5fe);
    color: var(--color-text, #1a1f2e);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
}
.options-save-model[hidden] { display: none; }
.card-options-host .options-save-model,
.sl-options-topbar ~ .options-save-model { padding-right: 3.25rem; }

/* The marker. Inline so it sits on the Apply button's baseline in the same row. */
.options-pending {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* No margin-left: every host row is a .form-actions flex row, which already
       supplies the gap. A margin here would double it. */
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-warning-border, #ffcc80);
    border-radius: 999px;
    background-color: var(--color-warning-bg, #fff3e0);
    color: var(--color-text, #1a1f2e);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
}
.options-pending[hidden] { display: none; }
.options-pending .options-pending-dot { color: var(--color-warning, #e65100); }
[data-theme="dark"] .options-pending .options-pending-dot { color: #ffa726; }

/* The ring on the Apply button itself. An ASP.NET Button renders as
   <input type="submit"> — a REPLACED element, so ::before/::after never render on
   it. That is why the ● lives in the sibling .options-pending and the button only
   gets an outline, which works on an input. outline (not box-shadow) so it stacks
   with the button's own shadow instead of replacing it. */
.button.is-pending,
.is-pending.button {
    outline: 2px solid var(--color-warning, #e65100);
    outline-offset: 2px;
}
[data-theme="dark"] .button.is-pending { outline-color: #ffa726; }

/* Motion-safe attention pulse on the ring's first appearance only. */
@media (prefers-reduced-motion: no-preference) {
    .button.is-pending { animation: optionsPendingPulse 0.9s var(--ease-out-quint, ease-out) 1; }
}
@keyframes optionsPendingPulse {
    0%   { outline-offset: 6px; }
    100% { outline-offset: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MARKED ROADS  (🛣 Mark a Road — Shared\map-roads.js)

   These rules are UNPREFIXED (`mr-*`) on purpose. qMEET's own sheet namespaces
   with qm-* and PacklistPRO's with plp-*, so a per-site prefix here would mean
   writing every rule twice for a module whose whole point is to exist once.
   They live in the SHARED sheet because the script does — same folder, same
   deploy script (Shared\Deploy-Shared.ps1).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The work bar ─────────────────────────────────────────────────────────
   Injected by the script immediately AFTER the map element, so it is in normal
   flow directly beneath the map and never covers it. See the 🛑 note in
   map-roads.js: covering the map with the controls that act on it is a mistake
   this page has already made once and had reverted by the owner. */
.mr-bar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.6rem 0 0.2rem;
    padding: 0.6rem 0.75rem;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid #f59e0b;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}
.mr-bar.open { display: flex; }

.mr-bar-step { flex: 1 1 14rem; min-width: 0; color: var(--color-text); }
.mr-bar-hint { flex: 1 1 100%; font-size: 0.85rem; color: var(--color-text-muted); }

/* The low-confidence warning takes the whole row: it is a sentence, not a chip,
   and squeezing it beside the buttons is how it stops being read. */
.mr-bar-warn {
    flex: 1 1 100%;
    font-size: 0.9rem;
    color: var(--color-warning, #e65100);
    line-height: 1.35;
}
[data-theme="dark"] .mr-bar-warn { color: #ffa726; }

.mr-warn { color: var(--color-warning, #e65100); }
[data-theme="dark"] .mr-warn { color: #ffa726; }

/* ── The 🛣 map control ───────────────────────────────────────────────────
   Matches the pin tool's 📌 control, which is a plain .leaflet-bar anchor. The
   emoji needs a nudge to sit centred in Leaflet's 26px box. */
.mr-ctl a {
    font-size: 1.05rem;
    line-height: 1.55rem;
    text-align: center;
    text-decoration: none;
}
.mr-ctl a.active {
    background-color: #f59e0b;
    color: #fff;
}

/* ── The name/surface form ────────────────────────────────────────────────
   Rides the shared .modal-overlay (which owns the backdrop and the .open
   display switch); this is only the box inside it. */
.mr-editor {
    width: min(30rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 1.1rem 1.2rem 1rem;
}
.mr-editor-head { font-size: 1.15rem; font-weight: 600; color: var(--color-text); }
.mr-editor-sub {
    margin: 0.15rem 0 0.9rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ── The popup on a saved road ────────────────────────────────────────────
   ⚠ Actions are flat <button>s in a flex row — never an <a> or a <details>
   nested inside one. That nesting is invalid HTML and the inner element becomes
   unclickable, which has already cost this codebase a live bug once. */
.mr-pop-title { font-weight: 600; color: var(--color-text); }
.mr-pop-sub { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.1rem; }
.mr-pop-src { font-size: 0.8rem; color: var(--color-text-muted); font-style: italic; margin-top: 0.15rem; }
.mr-pop-notes {
    margin-top: 0.45rem;
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.mr-pop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

/* Leaflet hard-codes a white popup with dark text. Without this the popup is a
   white card in the middle of a dark page — the same fix the pin popups carry. */
[data-theme="dark"] .mr-pop-title,
[data-theme="dark"] .mr-pop-notes { color: #0f172a; }
[data-theme="dark"] .mr-pop-sub,
[data-theme="dark"] .mr-pop-src { color: #475569; }

/* ── The bad-road warning inside a ROUTE row ──────────────────────────────
   Lives in the route list, which is a per-site forked file (qm-rt-* on qMEET,
   plp-rt-* on PLP) — so this one element takes the neutral mr-* namespace and
   both sites share the single rule. `display:block` puts it on its own line
   under the distance/duration: it is a sentence naming a road, and squeezed
   beside the metadata it stops being read. */
.mr-rt-badroads {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--color-warning, #e65100);
    white-space: normal;
}
[data-theme="dark"] .mr-rt-badroads { color: #ffa726; }

/* A route crossing a road marked IMPASSIBLE is not a stronger warning of the same
   kind — it is a different verdict (the route is excluded from ranking outright),
   so it reads in the danger colour rather than a louder amber. */
.mr-rt-badroads.is-blocked { color: var(--color-danger, #b91c1c); font-weight: 600; }
[data-theme="dark"] .mr-rt-badroads.is-blocked { color: #f87171; }

/* Shown only when EVERY alternate is blocked — see allRoutesBlocked(). Full width
   above the list, because it is a statement about the whole answer, not about one row. */
.mr-rt-allblocked { margin: 0.5rem 0 0.35rem; font-size: 0.88rem; line-height: 1.4; }

/* 🔴 ONE LINE MEANS ONE LINE (owner, 2026-08-10, twice). `rows="1"` on the markup is not
   enough by itself: the shared `.textarea` rule sets
   `min-height: calc(var(--input-height) * 2.5)`, which is ~3 lines and wins over the rows
   attribute entirely. THE ATTRIBUTE IS NOT THE HEIGHT — a CSS min-height is. `resize:
   vertical` is inherited from that same rule and deliberately kept, so a long note can
   still be dragged open when the member wants it. */
.mr-f-notes {
    min-height: var(--input-height, 2.5rem);
}

/* ── Severity on a saved road ─────────────────────────────────────────────
   Only rendered when a level was actually recorded (popupHtml omits it entirely at
   severity 0), so there is no "not rated" state to style. */
/* 🔑 SAME FOUR HUES AS THE LINE ON THE MAP — yellow / orange / red / magenta, from
   SEVERITIES in map-roads.js. These are TEXT on a card, so each is a step darker than the
   line colour for legibility; the dark-mode set goes the other way for the same reason.
   ⚠ Three surfaces carry this ramp — the line (map-roads.js SEVERITIES.color), this text,
   and the recording buttons (.rec-sev-* below). Change one, change all three, or the
   button you tap stops matching the road it draws. */
.mr-pop-sev { font-size: 0.85rem; font-weight: 600; margin-top: 0.1rem; }
.mr-sev-1 { color: #a16207; }   /* yellow  */
.mr-sev-2 { color: #c2410c; }   /* orange  */
.mr-sev-3 { color: #b91c1c; }   /* red     */
.mr-sev-4 { color: #a21caf; }   /* magenta */
[data-theme="dark"] .mr-sev-1 { color: #fbbf24; }
[data-theme="dark"] .mr-sev-2 { color: #fb923c; }
[data-theme="dark"] .mr-sev-3 { color: #f87171; }
[data-theme="dark"] .mr-sev-4 { color: #f0abfc; }

/* ── ✂ Adjust ends: the two draggable trim handles ────────────────────────
   L.divIcon markers, NOT the circleMarkers the drawing tool uses for its ends —
   a circleMarker cannot be dragged in Leaflet at all. 44px is the touch-target
   floor; these get dragged with a thumb, often in a moving vehicle's passenger
   seat. The inner span is what is actually seen; the box around it is grab area. */
.mr-trim-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    background: none;
    border: none;
}
.mr-trim-handle:active { cursor: grabbing; }
.mr-trim-handle span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.7rem;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.mr-trim-start span { background-color: #16a34a; }
.mr-trim-end span { background-color: #dc2626; }

/* ═══ ⏺ RECORD A BAD ROAD (Shared\map-record.js) ══════════════════════════
   Its own bar, separate from .mr-bar: both can legitimately be open at once,
   because recording does not stop the member marking a road by hand. Same rule
   as the work bar though — BELOW the map, never on it. */
.rec-bar {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.6rem 0 0.2rem;
    padding: 0.7rem 0.8rem;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid #dc2626;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}
.rec-bar.open { display: flex; }

.rec-head { font-size: 1rem; color: var(--color-text); }
.rec-sub { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.35; }
.rec-warn { color: var(--color-warning, #e65100); }
[data-theme="dark"] .rec-warn { color: #ffa726; }

/* The live indicator pulses so a glance confirms it is still running — a frozen
   "RECORDING" is exactly what a lost GPS or a backgrounded tab looks like. */
.rec-live { color: var(--color-danger, #b91c1c); font-weight: 600; }
[data-theme="dark"] .rec-live { color: #f87171; }
.rec-live::first-letter { animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
    .rec-live::first-letter { animation: none; }
}

.rec-gps { font-size: 0.8rem; font-weight: 400; white-space: nowrap; }
.rec-gps-ok { color: var(--color-text-muted); }
.rec-gps-wait { color: var(--color-text-muted); }
.rec-gps-stale { color: var(--color-danger, #b91c1c); }
[data-theme="dark"] .rec-gps-stale { color: #f87171; }

/* START and the four severity buttons are tapped AT SPEED. 3rem is well past the
   44px accessibility floor on purpose — this is the one control on the site with a
   genuine safety argument for being oversized. */
.rec-big {
    min-height: 3.25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* START and Done share one row. The bar is a flex COLUMN, so a bare button stretches
   to full width and Done would claim a second oversized row it does not deserve — it
   is the rare escape hatch, not the control being aimed at. START keeps the whole
   remaining width (and the 3.25rem target); Done is sized to its text. */
.rec-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.rec-actions .rec-big { flex: 1 1 auto; }
.rec-actions .button.transparent { flex: 0 0 auto; }

/* Two columns rather than four: four across is ~80px per target on a phone, and
   these are aimed at without looking. */
.rec-sevs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.rec-sev {
    min-height: 3rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}
/* 🔑 EXACTLY THE LINE COLOURS FROM SEVERITIES in map-roads.js — the button you tap at
   speed is the colour the road then draws on the map, so the two are learnable as one
   thing. Ramped yellow → orange → red → magenta so they are distinguishable at a glance,
   but the TEXT still says which is which, because colour alone is not a label.
   ⚠ Level 4 is MAGENTA, not the darker red it used to be: it is a different KIND of
   verdict (the route is excluded outright), not merely a worse one, and a fourth shade of
   red read as "very red" rather than as its own thing. */
.rec-sev-1 { background-color: #eab308; border-color: #eab308; color: #1c1917; }
.rec-sev-2 { background-color: #ea580c; border-color: #ea580c; }
.rec-sev-3 { background-color: #dc2626; border-color: #dc2626; }
.rec-sev-4 { background-color: #c026d3; border-color: #c026d3; }

/* The ⏺ map control, matching .mr-ctl's 🛣 and the pin tool's 📌. */
.rec-ctl a {
    font-size: 1.05rem;
    line-height: 1.55rem;
    text-align: center;
    text-decoration: none;
}
/* Armed or recording — the control itself carries the state, so the member can see
   the GPS is live even after scrolling the bar off screen. */
.rec-ctl a.rec-on {
    color: #dc2626;
    background-color: #fee2e2;
}
[data-theme="dark"] .rec-ctl a.rec-on { background-color: #7f1d1d; color: #fff; }

@media (min-width: 40rem) {
    .rec-sevs { grid-template-columns: repeat(4, 1fr); }
}

/* ── The saved-roads list under the map ───────────────────────────────────── */
.mr-list-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.15rem;
    border-bottom: 1px solid var(--color-border);
}
.mr-list-row:last-child { border-bottom: none; }

/* The colour swatch is what ties a row to its line on the map — the same device
   the route list uses, and for the same reason: nothing on the map is labelled. */
.mr-swatch {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 0.3rem;
    border-radius: 2px;
}
.mr-list-main { flex: 1 1 auto; min-width: 0; }
.mr-list-name { font-weight: 600; color: var(--color-text); }
.mr-list-meta { font-size: 0.82rem; color: var(--color-text-muted); }
.mr-list-row.is-hidden .mr-list-name,
.mr-list-row.is-hidden .mr-list-meta { opacity: 0.55; }

/* Phone layout (owner, 2026-08-10) — the same shape as My Places' saved-place rows,
   so the two lists on that page behave the same way: the road name and its
   type/length/severity line get the full width of the card, and 🔍 Find it / 👁 Hide
   drop to a line of their own underneath.
   The 34px indent lines those buttons up under the text rather than under the colour
   swatch, which is what makes the second line read as belonging to the row above it.
   🛑 The two buttons are wrapped in ONE .mr-list-acts flex item on purpose. Left as
   two separate flex children they cannot be dropped to a shared second line: a 100%
   flex-basis on the first only breaks the line if it also wins over max-content, and
   the width has to come from a single child taking 100% — exactly the same reason
   .mp-list-actions exists on the saved-place rows. And it must NOT come from a 100%
   basis on .mr-list-main, which cannot share a line with the swatch and would strand
   the swatch alone on row one. */
.mr-list-acts { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
.mr-list-acts .button { white-space: nowrap; }
@media (max-width: 767.98px) {
    .mr-list-row { flex-wrap: wrap; align-items: flex-start; }
    .mr-list-acts { width: 100%; padding-left: 34px; flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════════
   HAMBURGER NAV AT EVERY WIDTH (qMEET-only)
   ────────────────────────────────────────────────────────────────────
   Shared/styles_shared.css builds a mobile-first nav: the ☰ toggle plus a
   full-screen overlay <ul class="nav-menu">, which a set of
   @media (min-width: 992px) blocks then converts into a horizontal desktop
   bar with hover-open dropdowns. qMEET wants the hamburger on desktop too,
   so this file re-states the mobile rules INSIDE the same 992px breakpoint,
   cancelling each desktop block.

   Why a separate file rather than an edit to styles_shared.css: that
   stylesheet is shared by PacklistPRO / qFIT / NobodyHasTHIS, which all
   still want the desktop bar. And why not Content/styles.css: the bundle
   order is bootstrap → styles.css → styles_shared.css, so anything in
   styles.css LOSES the cascade to the shared desktop rules. This file is
   registered LAST in Bundle.config so equal-specificity rules win on order
   and no !important is needed.

   The JS half of the switch is Scripts/site.js initNav() → isMobileNav(),
   which is pinned to true so the accordion/close-on-tap behaviour matches.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {

    /* Cancels: @media (min-width: 992px) { .nav-toggle { display: none; } } */
    .nav-toggle { display: block; }

    /* Cancels the horizontal-row .nav-menu block — restore the overlay. */
    .nav-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-bg-nav);
        overflow-y: auto;
        z-index: calc(var(--nav-z) - 1);
        padding: 0.5rem 0 2rem;
        align-items: stretch;
        gap: 0;
    }
    .nav-menu.open { display: flex; }

    /* Cancels the desktop hover underline on root links (::after is absolutely
       positioned against a now-stacked row, so it would streak across the panel). */
    .nav-menu > .nav-item > .nav-link::after,
    .nav-menu > .nav-item > .nav-link.active::after,
    .nav-menu > .nav-item:hover > .nav-link::after {
        content: none;
        display: none;
    }

    /* Cancels hover-to-open flyouts: dropdowns become in-flow accordion
       sections toggled by site.js adding .open. */
    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown {
        display: none;
        position: static;
        min-width: 0;
        background-color: var(--color-bg-nav-dropdown);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin-top: 0;
        animation: none;
    }
    /* The invisible hover bridge has no purpose without flyouts. */
    .nav-item:hover .nav-dropdown::before,
    .nav-item:focus-within .nav-dropdown::before { content: none; }

    /* Re-state the @media (max-width: 991px) accordion block. */
    .nav-dropdown { padding-left: 1rem; background-color: var(--color-bg-nav-dropdown); }
    .nav-dropdown.open,
    .nav-item:hover .nav-dropdown.open,
    .nav-item:focus-within .nav-dropdown.open { display: block; }
    .nav-dropdown .nav-link {
        padding: 0.5rem 1.25rem;
        border-radius: 0;
        color: rgba(255,255,255,0.7);
    }
    .nav-dropdown .nav-link:hover { background-color: var(--color-accent); color: #fff; }
    .nav-dropdown .nav-link.active {
        background-color: var(--color-accent);
        color: #fff;
        font-weight: var(--font-weight-bold);
    }

    /* Re-state the mobile section-label padding. */
    .nav-section-label { padding-left: 1.25rem; padding-right: 1.25rem; }

    /* Cancels the desktop .nav-right row (unused in qMEET's markup today,
       kept so a future <div class="nav-right"> doesn't reintroduce the bar). */
    .nav-right {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
    }
}