/* Minification failed. Returning unminified contents.
(24,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(81,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(109,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(110,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(111,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(120,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(121,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(124,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(127,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(130,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(131,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(132,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(133,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(134,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(135,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(138,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(139,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(140,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(141,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(142,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(148,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(149,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(150,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(151,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(153,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(156,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(157,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(158,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(159,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(160,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(161,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(162,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(167,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(168,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(169,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(172,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(173,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(174,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(175,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(177,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(178,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(179,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(180,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(181,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(182,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(183,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(184,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(185,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(186,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(187,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(188,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(190,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(191,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(192,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(194,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(195,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(196,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(197,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(198,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(201,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(202,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(203,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(204,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(205,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(206,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(208,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(209,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(210,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(211,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(212,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(215,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(216,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(217,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(218,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(219,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(220,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(221,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(222,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(241,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(270,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-sans'
(271,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(272,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-base'
(273,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(274,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-bg'
(275,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-bg-texture-url'
(278,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h1'
(278,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(278,104): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-tight'
(278,132): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(278,164): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(279,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h2'
(279,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(279,104): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-tight'
(279,132): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(279,161): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(280,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h3'
(280,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-thin'
(280,104): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-base'
(280,132): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(280,161): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(281,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h4'
(281,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(281,104): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-base'
(281,132): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(282,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h5'
(282,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(282,104): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-base'
(282,132): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(283,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h6'
(283,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(283,104): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-base'
(283,132): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(285,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(285,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-loose'
(286,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(287,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(289,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(290,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(290,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(290,105): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(292,43): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(292,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(294,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-lead'
(294,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-thin'
(295,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-thin'
(297,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(298,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(302,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(303,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h1'
(304,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(309,43): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(313,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(314,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(317,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(318,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(319,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(319,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(323,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(324,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(327,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(330,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(331,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(332,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(333,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(340,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(341,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(342,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(345,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(347,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(351,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(356,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(357,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(358,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(359,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(367,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(373,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(374,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(375,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(382,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(392,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(393,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(402,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(419,36): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(420,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(421,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(433,13): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(434,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(435,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(435,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(436,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(437,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(438,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(441,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(442,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(444,47): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(448,13): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(452,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(453,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(456,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-bg-soft'
(457,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(463,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(464,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-dark'
(465,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(470,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-darker'
(471,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-dark'
(472,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(476,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(477,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-dark'
(478,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(483,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary-text'
(485,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(491,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(495,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(497,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(503,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(509,31): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(511,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(516,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(517,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(517,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(520,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(521,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(529,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(530,27): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(533,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(536,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(537,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(540,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(542,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(553,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(561,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(562,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-modal'
(563,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-shadow'
(564,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(565,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-sans'
(583,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(589,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(590,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(596,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(597,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(610,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(611,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(615,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(616,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-dropdown'
(621,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(622,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(643,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(649,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(659,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(660,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(661,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(667,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(668,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(668,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(669,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(680,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(681,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-icon-bg'
(682,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(687,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-tight'
(692,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(693,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(694,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(699,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(700,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(701,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(723,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-deep'
(724,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(725,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(726,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(728,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(737,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(755,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(764,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(768,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(772,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(791,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(792,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(793,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(808,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(809,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(810,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(816,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(817,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(818,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(831,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(844,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(847,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(859,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(859,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(867,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(868,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(869,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(877,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(889,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(890,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(891,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(891,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(892,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(900,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(901,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(904,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(910,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(920,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(924,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(941,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(958,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(959,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(964,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(976,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange-deep'
(977,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(981,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(982,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(994,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(995,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(1010,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(1012,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-separator'
(1024,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(1025,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(1026,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(1034,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(1036,74): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1040,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(1041,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(1042,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(1043,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(1047,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(1048,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(1067,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(1068,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1069,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1072,47): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1074,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(1076,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(1081,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-icons-fa'
(1083,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(1085,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary-text'
(1109,13): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(1114,13): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1115,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1115,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1116,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(1121,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-lead'
(1124,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(1125,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(1126,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(1126,75): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1128,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(1129,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(1154,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-green'
(1154,64): run-time error CSS1039: Token not allowed after unary operator: '-c2l-yellow'
(1154,83): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(1154,102): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(1162,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(1163,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(1164,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(1191,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1192,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-separator'
(1194,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(1197,42): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1197,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(1199,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1200,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1200,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1201,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-tint'
(1202,31): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1211,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1213,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1215,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-separator'
(1230,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1230,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(1231,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(1235,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(1235,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(1236,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(1236,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(1237,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(1237,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(1245,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1250,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1251,31): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1252,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(1256,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(1264,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1283,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-3'
(1284,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(1285,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(1285,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(1289,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1290,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(1309,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1310,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(1312,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(1315,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(1329,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1352,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1359,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(1360,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(1367,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(1368,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(1374,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(1375,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1376,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(1376,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(1380,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1384,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(1392,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(1401,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1405,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1412,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-toast-header-h'
(1412,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1417,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(1418,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-md'
(1419,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-sans'
(1424,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(1427,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(1428,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1429,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(1430,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(1504,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(1505,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(1506,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-toast-accent'
(1506,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1507,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(1508,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1509,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1509,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1510,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-dropdown'
(1511,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-sans'
(1517,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-icons-fa'
(1519,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(1520,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-toast-accent'
(1520,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1525,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1527,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1529,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1531,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1537,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(1538,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1543,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(1544,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(1549,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1550,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1553,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(1555,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(1557,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(1571,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(1575,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1589,36): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-modal'
(1589,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quint'
(1602,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(1603,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(1604,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-alert-accent'
(1604,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1605,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(1606,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1607,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1608,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-sans'
(1614,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-alert-accent'
(1614,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1615,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(1623,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(1624,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1625,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(1633,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(1635,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(1636,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(1637,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(1638,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(1638,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(1639,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(1639,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(1641,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(1641,79): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1655,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1655,66): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1656,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1656,67): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1657,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1657,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1659,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1660,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1722,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-alert-tint'
(1722,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-tint'
(1723,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(1726,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h3'
(1730,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(1743,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(1747,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1754,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1755,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1755,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1756,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(1757,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(1758,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(1763,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(1766,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(1767,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(1771,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1777,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1779,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(1780,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(1784,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1784,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(1785,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(1786,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1792,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(1796,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(1797,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-dropdown'
(1798,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(1803,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1804,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(1809,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1810,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-modal-title'
(1811,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-thin'
(1812,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1816,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1817,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(1822,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(1823,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(1826,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-text'
(1842,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1843,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1843,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1844,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(1845,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(1846,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(1852,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(1853,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(1854,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(1855,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-separator'
(1859,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(1861,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(1865,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(1866,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(1896,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(1902,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-gradient-from'
(1928,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(1932,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1951,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1952,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(1953,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint-border'
(1957,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint'
(1958,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(1998,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(1999,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-modal'
(2002,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(2003,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-shadow'
(2012,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(2013,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(2018,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(2035,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2040,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2044,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2044,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2044,79): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2045,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(2045,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2046,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(2051,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2051,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2051,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2052,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2052,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(2052,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(2052,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2053,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(2083,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2084,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2085,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2086,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2087,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2088,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(2097,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2099,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(2103,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2238,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2239,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(2240,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-separator'
(2250,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(2252,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2252,71): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2256,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-gradient-from'
(2256,84): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-gradient-to'
(2267,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-lead'
(2268,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(2269,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2274,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-gradient-from'
(2278,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(2279,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2289,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(2290,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(2293,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(2299,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-modal-title'
(2300,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-medium'
(2301,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-tight'
(2303,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2307,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-thin'
(2308,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2315,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(2326,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2327,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-control-h'
(2328,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2329,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(2330,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(2331,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(2333,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(2333,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(2334,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(2334,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(2340,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2341,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-bg-soft'
(2345,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(2361,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(2366,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(2372,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(2373,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(2379,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(2400,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(2406,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(2410,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(2419,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(2420,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(2421,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(2422,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-dropdown'
(2428,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2429,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2430,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(2431,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(2432,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(2438,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2439,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(2473,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2490,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2494,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(2503,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(2517,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2517,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(2517,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2531,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(2532,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(2546,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(2548,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(2553,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(2560,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(2560,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2561,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(2562,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(2566,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(2570,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(2592,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(2593,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(2594,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(2595,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2610,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(2611,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(2612,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(2617,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2618,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2619,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(2620,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(2621,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-purple'
(2622,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-blue-light'
(2623,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(2627,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2628,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2629,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(2630,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(2631,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(2633,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2635,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2637,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(2639,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(2640,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(2642,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-blue-light'
(2643,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-purple'
(2656,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-soft'
(2657,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(2662,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(2673,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2687,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(2688,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(2689,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(2700,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2701,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2705,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(2715,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(2716,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2717,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(2718,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(2719,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(2724,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2730,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(2749,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(2750,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(2751,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(2752,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(2753,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(2754,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(2757,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(2759,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint-border'
(2761,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2764,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-tint-border'
(2765,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-bg-soft'
(2777,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange-deep'
(2780,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(2781,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(2782,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(2787,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-green-deep'
(2792,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-info-text'
(2799,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(2804,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2805,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-bg-soft'
(2806,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2809,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(2811,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange-deep'
(2816,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(2817,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(2822,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(2823,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(2824,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(2827,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(2828,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(2843,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(2860,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2861,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(2966,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(2969,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(2976,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(2978,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(2980,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(2981,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(2982,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(2982,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(2992,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(2993,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3002,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(3009,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3011,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-separator'
(3064,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(3065,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(3066,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3082,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(3083,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(3090,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3091,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(3092,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3110,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(3117,31): run-time error CSS1030: Expected identifier, found '.'
(3117,66): run-time error CSS1031: Expected selector, found ')'
(3117,66): run-time error CSS1025: Expected comma or open brace, found ')'
(3131,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3132,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3133,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(3141,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-separator'
(3157,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(3158,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(3161,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(3162,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(3163,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-separator'
(3171,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(3172,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(3181,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3187,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(3198,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3202,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3207,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3224,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3225,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3226,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3231,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3251,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(3252,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(3253,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3254,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3256,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(3299,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3309,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(3310,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3315,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3321,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(3325,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3330,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-text'
(3337,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3344,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3345,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3346,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(3357,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3373,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3377,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(3384,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(3385,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3395,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3396,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3397,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(3404,88): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(3409,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(3415,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3422,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3423,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3440,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3441,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3442,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(3445,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(3453,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3454,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3461,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3473,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3474,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3475,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(3485,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-dark'
(3486,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(3505,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(3512,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3516,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3523,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3525,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(3529,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3534,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3552,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3560,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3561,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(3563,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3577,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(3578,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3583,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(3587,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3588,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(3593,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3604,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3613,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(3614,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3624,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3625,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3641,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(3654,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3658,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(3659,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3667,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3672,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(3681,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(3682,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3683,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3692,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(3693,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(3694,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(3695,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3702,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3703,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(3704,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3710,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3715,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3732,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(3738,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(3743,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(3751,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(3753,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(3756,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3768,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3787,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(3787,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(3798,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(3799,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(3801,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(3806,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3807,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(3812,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3813,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(3815,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(3824,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(3824,66): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(3842,47): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(3842,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-in'
(3863,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-dark'
(3864,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(3868,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-dark'
(3884,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(3891,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(3892,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(3901,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(3908,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(3913,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(3914,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(3919,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-soft'
(3920,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3937,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint'
(3938,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint-border'
(3939,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(3940,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3941,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(3942,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(3949,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(3954,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(3969,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(3970,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(4016,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(4017,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(4024,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(4025,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(4031,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(4032,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(4035,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4036,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(4044,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4045,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4049,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(4056,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4057,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4067,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-medium'
(4068,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(4072,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4073,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4079,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4080,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4084,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4091,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4128,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4129,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4130,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4135,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4143,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(4144,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4146,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4149,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(4154,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4173,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4181,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4184,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4188,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4193,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4198,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4200,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(4201,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(4202,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(4206,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4207,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(4222,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4223,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4224,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(4246,71): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4247,77): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4250,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(4251,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4255,74): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4268,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4279,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4281,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4295,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4298,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4301,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(4318,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(4319,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(4320,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(4330,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4331,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4332,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(4333,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(4334,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(4335,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-purple'
(4347,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(4348,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4349,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4359,76): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4362,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4363,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4363,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(4368,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4369,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4370,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(4378,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4383,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4384,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4385,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4393,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(4394,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4398,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4402,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4407,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4410,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4419,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(4421,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4430,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(4448,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4454,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(4466,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4467,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(4472,86): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4480,92): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4511,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(4523,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(4525,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(4525,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(4526,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(4531,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4532,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(4536,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4537,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4570,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4586,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4591,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4610,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4611,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4612,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(4616,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4617,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4628,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(4642,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(4644,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4647,82): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(4648,82): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange-deep'
(4649,82): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(4650,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(4650,82): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(4660,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4661,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4662,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4664,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(4664,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(4668,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4676,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4677,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4677,71): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4686,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(4690,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(4696,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4700,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(4718,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4722,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4734,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(4740,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4749,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4750,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(4752,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4753,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(4757,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4758,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(4779,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(4780,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4788,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(4810,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4811,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(4814,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(4814,63): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(4818,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(4819,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4824,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(4833,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4858,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4870,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(4871,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(4872,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4874,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(4878,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4884,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4894,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4895,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4897,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4899,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(4902,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(4902,63): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(4907,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4911,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4912,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4915,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(4922,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(4939,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4940,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4941,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4949,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4950,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(4959,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(4960,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4961,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(4966,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(4972,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(4973,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(4975,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(4983,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(4983,63): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(4987,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(4988,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5005,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(5005,75): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(5013,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5017,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5018,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5027,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(5028,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(5030,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5031,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(5036,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5037,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5048,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(5049,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(5056,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5061,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(5068,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(5069,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(5075,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5084,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(5091,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5100,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5101,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5106,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(5110,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(5115,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5116,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5138,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(5143,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(5150,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5151,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(5169,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5170,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5171,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(5176,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5176,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5181,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-card'
(5189,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-card'
(5189,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5192,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(5193,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange'
(5194,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(5204,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(5206,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5207,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(5213,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5217,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(5219,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(5220,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(5223,96): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(5224,97): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange-deep'
(5225,98): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(5230,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5231,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(5237,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(5260,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(5265,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(5269,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5286,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5286,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5304,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5305,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(5310,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(5311,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(5311,63): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(5315,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5316,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5317,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5321,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(5322,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(5326,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5327,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(5337,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(5340,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(5341,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(5341,65): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(5341,100): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-instant'
(5346,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5347,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5357,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(5358,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5415,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5416,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5426,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(5427,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5435,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(5436,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5437,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5450,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5450,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(5451,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5451,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(5464,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5469,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5475,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(5481,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(5482,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5485,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(5485,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(5489,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5490,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5491,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5495,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(5496,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(5497,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5501,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(5502,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(5503,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5513,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(5514,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5520,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(5551,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(5552,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5558,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(5564,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5590,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5595,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5621,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-lg'
(5622,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(5623,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5633,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5634,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(5638,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(5641,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5642,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(5654,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(5684,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(5729,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5730,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(5734,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(5735,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(5807,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(5808,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(5809,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-loose'
(5838,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(5839,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(5840,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(5841,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(5851,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(5852,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(5853,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5856,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(5873,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(5873,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(5875,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(5875,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(5876,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(5877,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(5881,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(5882,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(5883,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(5906,16): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(5907,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(5914,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(5915,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-loose'
(5916,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(5919,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(5928,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5932,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5933,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(5934,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(5937,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5937,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(5938,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5938,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(5942,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5961,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(5963,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(5963,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(5979,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(5983,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(5993,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(5994,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(5995,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(5999,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(6000,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6001,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(6001,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(6005,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6006,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6011,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(6012,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6021,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(6022,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6023,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(6027,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6032,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(6033,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6038,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-tertiary'
(6039,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(6052,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(6053,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(6059,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(6061,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(6062,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(6068,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6070,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(6071,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(6076,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6081,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6089,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6099,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6100,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(6102,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6115,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6135,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6137,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(6143,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(6144,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6152,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6153,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6157,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(6164,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6169,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6171,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6177,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6186,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dcal-cell'
(6187,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dcal-cell'
(6188,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dcal-cell'
(6193,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(6195,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-medium'
(6196,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(6203,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dcal-cell'
(6204,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dcal-cell'
(6205,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(6211,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6215,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6217,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(6221,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6222,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6223,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6234,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6235,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6236,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6242,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-dark'
(6260,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6264,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6286,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(6287,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6288,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6295,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6298,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6303,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-thin'
(6305,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6308,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6311,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(6313,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6319,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(6324,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6325,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6347,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6348,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6349,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(6351,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(6352,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(6359,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(6360,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6365,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6366,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6369,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6372,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6373,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6374,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6386,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6394,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6395,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6399,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6400,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6401,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6422,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6423,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6425,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(6436,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-thin'
(6438,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6441,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6446,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6452,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(6454,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6458,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6459,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(6461,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6483,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6485,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6498,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6502,56): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(6512,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(6517,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6524,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6528,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6534,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6535,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6536,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(6537,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-dropdown'
(6576,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6589,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6592,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6601,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(6602,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6608,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(6610,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6611,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6612,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6617,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6622,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6627,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6628,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6651,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6652,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6653,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6655,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(6656,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(6663,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6664,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6665,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6670,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6682,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6683,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-cal-cell'
(6684,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6685,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6686,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-sans'
(6689,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6690,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6706,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6709,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(6714,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(6715,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6735,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6739,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6740,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6748,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(6751,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6756,43): run-time error CSS1039: Token not allowed after unary operator: '-c2l-cal-cell'
(6758,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6763,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6765,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6769,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6786,43): run-time error CSS1039: Token not allowed after unary operator: '-c2l-cal-cell'
(6787,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-cal-cell'
(6794,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-medium'
(6795,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(6806,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-cal-cell'
(6807,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-cal-cell'
(6811,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(6818,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6820,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6821,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(6823,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6824,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6825,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6828,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6829,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6830,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6833,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-dark'
(6842,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6870,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6871,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6872,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6877,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6878,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6890,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6898,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6899,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(6901,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(6902,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(6908,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6909,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6910,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6912,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6913,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(6916,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(6941,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(6942,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6952,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(6954,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(6960,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6964,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6965,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6966,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6970,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6978,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6985,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(6986,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(6991,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(6994,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(6994,84): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(6995,56): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(6996,56): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7000,82): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7004,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red'
(7017,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7018,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(7020,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7029,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(7030,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7031,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(7036,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7039,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7049,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7050,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7051,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(7056,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7059,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7063,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7064,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7069,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7070,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(7073,42): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7077,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(7080,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7080,79): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7084,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7089,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7092,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7128,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7136,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7139,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7143,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7158,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7159,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(7161,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7165,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7170,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(7175,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7176,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7180,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7181,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7185,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7195,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(7197,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(7198,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(7216,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(7217,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7218,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7219,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7220,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(7228,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7229,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7230,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(7233,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(7235,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7245,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7246,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7249,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(7250,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7250,78): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7251,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7254,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7266,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7270,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7274,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7283,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(7287,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(7292,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(7293,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(7295,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7306,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7310,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(7311,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(7314,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7318,31): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7322,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7326,31): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(7330,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(7339,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7343,36): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7350,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(7351,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7356,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7360,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7364,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7368,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(7376,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint'
(7377,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint-border'
(7385,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7394,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-tint'
(7395,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-tint-border'
(7407,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(7408,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7412,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(7416,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(7425,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(7426,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-card'
(7441,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(7452,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(7455,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7455,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7456,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7456,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7460,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(7461,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(7465,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7466,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(7467,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(7473,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(7481,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-3'
(7483,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(7491,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(7494,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7494,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7495,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7495,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7496,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7496,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7501,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(7505,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7506,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7507,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(7508,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-sm'
(7521,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(7522,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(7557,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7557,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7558,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7558,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7559,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7559,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7563,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(7564,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(7568,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7570,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7571,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(7577,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7578,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(7590,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(7595,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7596,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(7608,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(7618,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7631,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(7643,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7650,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7651,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(7674,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(7680,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7685,47): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7697,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(7698,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7699,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7700,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-md'
(7701,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(7710,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(7710,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7713,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(7726,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7750,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quint'
(7767,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quint'
(7782,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(7788,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7791,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7791,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7792,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7792,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7793,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7806,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(7818,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(7819,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(7821,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(7829,26): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(7829,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(7833,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7834,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(7871,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7872,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-shadow'
(7919,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(7919,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(7919,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(7919,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(7920,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7921,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(7976,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(7982,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(7982,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(7983,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(7984,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(8041,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(8044,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(8045,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8048,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8051,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-text'
(8052,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8057,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8062,13): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8062,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8075,20): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8076,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-red-deep'
(8077,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(8084,13): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8085,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8085,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8086,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(8087,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-loose'
(8091,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h2'
(8092,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(8127,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8128,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8129,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8129,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8130,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(8131,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(8132,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8133,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8134,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8135,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(8140,56): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(8140,85): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(8155,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8156,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8157,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(8158,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(8161,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(8161,75): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(8162,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(8163,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8163,66): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8163,100): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(8166,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8167,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(8168,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(8169,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8175,71): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8176,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8176,79): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8179,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8180,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8196,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8196,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8196,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(8212,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(8232,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(8233,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8233,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8234,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(8235,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8236,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8243,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8243,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8244,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(8245,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8245,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8246,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(8247,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8262,36): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8262,63): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8274,36): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8278,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8279,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(8280,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(8281,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(8285,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8286,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-base'
(8287,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(8309,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8309,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8309,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(8329,14): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(8368,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8368,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8369,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(8370,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8371,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8383,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8383,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8384,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(8385,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(8386,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8387,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8400,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(8401,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(8402,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(8408,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8409,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-base'
(8410,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(8415,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8420,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8432,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8432,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8494,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8520,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(8588,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8588,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8589,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(8590,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8638,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(8650,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(8654,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(8655,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(8658,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(8662,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8662,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8663,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-lg'
(8664,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(8665,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8673,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8673,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8674,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8674,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(8675,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(8676,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(8677,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(8678,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-loose'
(8679,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(8685,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8686,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8687,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8688,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(8745,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(8745,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(8745,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(8765,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(8788,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8788,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8789,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(8790,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8791,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(8791,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(8807,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(8807,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(8808,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(8809,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(8810,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8825,36): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(8839,36): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(8849,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8850,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(8851,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(8852,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(8858,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(8859,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(8860,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-base'
(8861,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(8882,63): run-time error CSS1019: Unexpected token, found '-'
(8884,36): run-time error CSS1030: Expected identifier, found ' '
(8884,38): run-time error CSS1031: Expected selector, found '/'
(8884,38): run-time error CSS1025: Expected comma or open brace, found '/'
(8890,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(8891,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(8897,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(8897,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(8964,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(8980,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9023,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(9023,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9025,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9026,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-lead'
(9049,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9061,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9079,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9080,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9081,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9082,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-tight'
(9083,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9091,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9092,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(9093,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(9125,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(9125,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9166,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9207,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9208,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(9208,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9209,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(9210,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9211,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(9211,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9212,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(9228,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9229,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9230,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9231,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9232,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9238,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(9239,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(9246,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9247,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9248,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9249,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-tight'
(9257,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-snake-node-y'
(9261,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9286,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-snake-node-y'
(9287,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-snake-node-y'
(9290,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9315,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9316,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(9316,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9316,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9328,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-gantt-gutter'
(9341,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9361,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9366,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9367,16): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9368,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(9369,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(9383,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9421,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-gantt-gutter'
(9423,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9424,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9425,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(9426,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(9456,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9484,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9485,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9486,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(9486,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9487,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-xs'
(9488,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9489,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9490,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9502,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9527,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(9527,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(9554,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9562,97): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9564,47): run-time error CSS1039: Token not allowed after unary operator: '-c2l-pipeline-pip'
(9564,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-pipeline-pip'
(9564,120): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-circle'
(9566,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-pipeline-pip'
(9567,16): run-time error CSS1039: Token not allowed after unary operator: '-c2l-pipeline-start'
(9567,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-pipeline-start'
(9568,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9571,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-pipeline-pip'
(9572,16): run-time error CSS1039: Token not allowed after unary operator: '-c2l-pipeline-start'
(9572,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-pipeline-progress'
(9573,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(9573,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9575,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(9575,85): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9575,118): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9576,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(9576,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9576,115): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9603,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-timeline-accent'
(9603,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9604,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(9619,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9621,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9622,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9623,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-lh-tight'
(9624,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(9632,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9633,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(9634,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(9642,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(9642,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(9658,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9658,100): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(9659,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9659,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9663,16): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(9666,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9666,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9667,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9668,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9669,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9670,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9671,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-dropdown'
(9673,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9691,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9693,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9694,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-gradient-topnav'
(9697,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9700,76): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(9700,107): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9702,96): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(9703,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-light'
(9713,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9715,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9716,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(9717,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(9717,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(9717,99): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(9717,119): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(9720,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9720,82): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9720,109): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9721,56): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(9722,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(9730,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(9732,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9733,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9748,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9749,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(9750,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9758,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9759,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9760,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(9763,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(9764,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9765,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(9765,90): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9765,121): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9766,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(9767,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(9767,92): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9767,117): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9767,149): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-icon-bg'
(9767,208): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-xs'
(9768,78): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9768,103): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(9769,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(9770,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(9782,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(9782,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9782,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(9783,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9784,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9786,27): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(9789,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9789,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9789,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9790,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9791,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(9794,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(9799,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9800,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9801,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(9802,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(9805,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(9805,82): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9806,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9806,85): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9806,124): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9811,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9812,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9813,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9814,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9826,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(9826,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(9829,54): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(9830,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9830,91): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9833,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9833,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9833,92): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9833,128): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9833,172): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(9838,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9839,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9840,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(9841,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(9845,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(9845,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9846,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-icon-bg'
(9846,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9846,113): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9849,137): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(9849,170): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(9849,195): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(9849,225): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(9850,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9853,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(9853,106): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9854,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9854,83): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h1'
(9854,114): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(9854,141): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9855,56): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(9855,89): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(9855,114): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(9856,65): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(9856,106): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(9856,140): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(9856,174): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9864,26): run-time error CSS1030: Expected identifier, found '.'
(9864,197): run-time error CSS1031: Expected selector, found ')'
(9864,197): run-time error CSS1025: Expected comma or open brace, found ')'
(9869,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9874,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9885,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9892,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(9917,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(9918,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(9924,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(9938,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(9945,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(9953,107): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9953,150): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9954,88): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9954,129): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(9955,74): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(9955,107): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h2'
(9955,138): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9955,188): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9956,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-sans'
(9956,107): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(9957,41): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(9957,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(9957,129): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(9957,156): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(9957,195): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(9957,231): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(9959,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(9959,114): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(9960,30): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-h4'
(9960,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(9960,89): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(9960,112): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(9960,140): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(9961,109): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(9972,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(9973,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(9977,85): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(9977,132): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(9977,166): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9977,187): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9978,102): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(9978,162): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9978,183): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9979,82): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(9979,123): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9980,77): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(9980,116): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(9980,157): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(9986,74): run-time error CSS1030: Expected identifier, found '.'
(9986,106): run-time error CSS1031: Expected selector, found ')'
(9986,106): run-time error CSS1025: Expected comma or open brace, found ')'
(10056,56): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10056,97): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10056,127): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(10057,66): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10057,125): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10058,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10058,130): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10059,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10059,89): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(10059,115): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10059,135): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10059,168): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10059,213): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10063,36): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(10063,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10064,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10066,88): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10067,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10068,75): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-footer'
(10068,127): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10070,71): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10070,91): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10070,136): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(10071,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(10072,43): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10072,76): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10072,112): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10072,159): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10073,91): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10073,111): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10073,156): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(10074,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10076,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10076,78): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10076,140): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(10076,205): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(10079,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10080,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-deep'
(10081,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-green-deep'
(10082,31): run-time error CSS1039: Token not allowed after unary operator: '-c2l-purple'
(10082,63): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10083,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-orange-deep'
(10084,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(10091,101): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(10092,121): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10092,141): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10092,187): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10093,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10093,126): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10094,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(10095,38): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10099,117): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10100,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10101,64): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10104,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10116,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10116,83): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10119,117): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10120,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(10120,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10120,75): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(10142,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xl'
(10147,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10148,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10150,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10151,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-sm'
(10152,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10153,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(10153,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(10154,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(10154,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(10155,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(10155,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(10156,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(10156,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(10160,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(10161,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-tint'
(10162,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-card'
(10164,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10170,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10171,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10192,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10192,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10192,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10199,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-md'
(10200,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(10201,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10204,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(10205,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10210,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(10211,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10212,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-deep'
(10215,125): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(10216,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10229,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-2xl'
(10232,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10233,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(10235,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10237,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10240,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10246,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10257,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10261,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10262,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10264,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10265,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10268,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(10268,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(10269,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-base'
(10269,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(10270,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(10270,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(10271,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-dur-fast'
(10271,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-ease-out-quart'
(10275,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(10276,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary-tint'
(10277,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-card'
(10279,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10284,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(10288,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10299,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10303,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(10304,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-bold'
(10305,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10321,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10325,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10326,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10328,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10333,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10338,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10339,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(10340,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10341,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(10349,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10350,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10351,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10356,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(10357,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10358,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(10367,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10368,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(10372,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10373,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10374,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10384,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10385,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10387,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10392,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10393,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint-border'
(10397,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(10409,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10413,64): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10414,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10415,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10415,88): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10419,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(10421,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10423,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(10427,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint'
(10428,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(10428,77): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint'
(10430,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(10431,65): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(10432,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10433,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(10439,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10441,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10442,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10442,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10442,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10442,79): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10443,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10444,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10459,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-control-h'
(10462,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10463,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-control-h'
(10466,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-control-h'
(10470,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-control-h'
(10477,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10485,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10486,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10487,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10488,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10489,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10498,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10500,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10501,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10503,76): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10503,101): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10504,77): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10504,98): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(10510,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10510,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10511,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(10514,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(10516,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10524,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10525,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10525,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10531,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10532,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint'
(10533,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-tint-border'
(10534,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-pill'
(10535,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10536,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10544,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10552,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-base'
(10570,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg'
(10574,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10579,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10590,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg'
(10608,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10609,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10610,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10611,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-font-mono'
(10616,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10635,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10636,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10637,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10649,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10650,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10651,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(10652,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10652,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10653,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10667,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10671,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10672,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(10673,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(10687,33): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10688,24): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10702,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10703,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10704,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10705,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-1'
(10709,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10710,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(10711,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10719,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10720,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10721,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10727,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(10729,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10736,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10737,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(10739,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10746,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10747,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10748,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10753,99): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10753,131): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(10754,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(10754,97): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10755,65): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10756,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(10758,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10759,79): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10759,112): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10760,91): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10760,123): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(10760,164): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10761,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10772,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-control-h'
(10773,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10774,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(10776,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10787,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10788,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10789,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10794,42): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10795,88): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10795,120): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(10796,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10796,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(10797,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(10797,86): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10798,54): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10799,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(10802,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10805,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-control-h'
(10814,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10816,101): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10823,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10825,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(10826,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-md'
(10830,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10831,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10836,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(10837,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(10847,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(10848,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10850,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-3'
(10850,74): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10851,71): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(10851,101): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(10852,109): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(10853,44): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(10863,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10864,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10864,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10866,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10866,104): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(10866,145): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10881,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(10889,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10889,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10890,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10892,71): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10894,86): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10895,78): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10898,113): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(10901,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10908,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10908,89): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-4'
(10911,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10912,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10913,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(10916,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary-bg-soft'
(10917,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10918,56): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border-strong'
(10918,95): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10919,37): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10919,65): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10920,64): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10921,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10921,67): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10923,70): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10923,90): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10923,123): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(10924,46): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(10942,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10942,35): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(10943,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10948,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10950,79): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10950,107): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10950,139): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10951,47): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-2'
(10951,77): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(10954,83): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10955,68): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10955,104): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10963,60): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10973,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10973,91): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(10974,88): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10974,121): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(10975,59): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10977,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10977,91): run-time error CSS1039: Token not allowed after unary operator: '-c2l-primary'
(10977,118): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-on-primary'
(10978,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(10980,71): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(10980,103): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(10980,134): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-regular'
(11003,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface'
(11004,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(11005,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-sm'
(11006,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-shadow-dropdown'
(11007,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(11008,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(11008,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(11021,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(11025,23): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fw-semibold'
(11071,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(11076,16): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(11080,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-sm'
(11081,16): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(11097,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(11118,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(11137,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(11155,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-chart-series-1'
(11164,29): run-time error CSS1039: Token not allowed after unary operator: '-c2l-secondary'
(11175,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-sm'
(11176,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(11182,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(11183,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(11184,18): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(11185,28): run-time error CSS1039: Token not allowed after unary operator: '-c2l-border'
(11186,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-radius-md'
(11187,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-surface-2'
(11191,25): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(11198,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(11199,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fs-xs'
(11200,17): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(11202,61): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(11203,62): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(11212,100): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(11214,80): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(11215,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(11215,90): run-time error CSS1039: Token not allowed after unary operator: '-c2l-danger-accent'
(11223,22): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-lg'
(11224,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(11227,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-md'
(11231,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-space-xs'
(11247,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-fg-muted'
(11267,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11268,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11269,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11270,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11271,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11272,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11273,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11274,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11275,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11276,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11277,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11278,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11279,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11280,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11281,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11282,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11283,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11284,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11285,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11286,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11287,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11288,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11299,15): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fg'
(11300,21): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-font'
(11301,19): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-body'
(11305,53): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-accent'
(11306,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-h1'
(11306,88): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-accent'
(11307,57): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-small'
(11307,91): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fg-muted'
(11309,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-small'
(11309,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fg-muted'
(11312,43): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-h2'
(11312,74): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-accent'
(11312,125): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-rule'
(11313,40): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-h3'
(11315,32): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fg-muted'
(11318,31): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fg-muted'
(11318,69): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-small'
(11319,34): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fg-muted'
(11319,72): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-small'
(11320,76): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-table'
(11321,73): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fg'
(11322,54): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-rule'
(11323,109): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-fs-small'
(11324,42): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-high'
(11325,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-limited'
(11326,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-minimal'
(11327,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-prohibited'
(11328,42): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-none'
(11329,50): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-design'
(11330,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-development'
(11331,51): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-testing'
(11332,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-deployed'
(11333,58): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-decommissioned'
(11334,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-none'
(11372,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-high'
(11372,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-high'
(11373,42): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-limited'
(11373,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-limited'
(11374,42): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-minimal'
(11374,87): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-minimal'
(11375,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-prohibited'
(11375,93): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-prohibited'
(11376,39): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-none'
(11376,81): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-tier-none'
(11377,47): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-design'
(11377,92): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-design'
(11378,52): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-development'
(11378,102): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-development'
(11379,48): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-testing'
(11379,94): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-testing'
(11380,49): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-deployed'
(11380,96): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-deployed'
(11381,55): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-decommissioned'
(11381,108): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-decommissioned'
(11382,45): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-none'
(11382,88): run-time error CSS1039: Token not allowed after unary operator: '-c2l-print-stage-none'
 */
/* =========================================================
   Coach2Lead design system - shared tokens (coach2lead.design)
   Single source of truth for every GLOBAL (:root) --c2l-* custom property,
   with two recorded exceptions:
     1. Component-scoped locals set on a component root rather than :root -
        --c2l-dcal-cell (c2l-components.css:3694) and --c2l-cal-cell
        (c2l-components.css:4265). These are deliberately local: they are the
        knob a modifier class turns (.c2l-cal-tight, .c2l-cal--wide), which
        only works if they are set on the component, not globally.
     2. The six --c2l-arc-* AI Act navigator colors, declared on :root in
        Areas/AICMS/Content/aicms-design-extensions.css:10-17. These ARE
        global and by rights belong here, but they are compliance-domain
        semantics with a single consumer inside an archived directive
        (Areas/AICMS/Angular/aicms/_archive/eu-ai-act-radial-viz-20260702/
        directives/aiActRadialChart.js:141). Retiring or promoting them is a
        separate decision - not silently in scope of this file's claim.
   Promoted from Areas/AICMS/Content/aicms-design.css (production values)
   + motion tokens from design-mirror-final:docs/design/colors_and_type.css.
   Scoping: :root on purpose - tokens are inert without .c2l component rules.
   ========================================================= */

:root {
  /* ---------- Brand (Verbist & Verbist / Coach2Lead) ---------- */
  --c2l-primary:            #470544;
  --c2l-primary-dark:       #2E002C;
  --c2l-primary-darker:     #62175F;

  --c2l-secondary:          #4CACBE;
  --c2l-secondary-deep:     #2a7f8f;  /* AA-safe secondary fill for WHITE text.
                                         --c2l-secondary (#4CACBE) under white is
                                         2.64:1; this is 4.63:1. Added 2026-08-13
                                         for .c2l-panel-chip-badge. Use wherever
                                         white sits on a secondary fill; the base
                                         --c2l-secondary stays correct for fills
                                         carrying DARK text or no text at all. */
  --c2l-secondary-light:    #72c7d8;  /* link hover on the plum topbar; 1 rule
                                         (c2l-components.css:5510) */
  --c2l-secondary-soft:     #70c8d9;  /* hairline borders; 2/255 from -light, kept
                                         separate only because both shipped - do not
                                         mint a third member of this pair */
  --c2l-secondary-bg-soft:  #A9E1EC;  /* OPAQUE selected-surface fill; 11 rules across
                                         c2l-components.css + aicms-design.css. See the
                                         tint washes further down for the translucent
                                         counterpart family. */

  --c2l-tertiary:            #1ab394;
  /* WCAG AA text-safe companions to --c2l-secondary and --c2l-tertiary, minted 2026-10-21 from
     the axe findings of the AICMS screenshot tour (color-contrast, 112 items). The brand hues
     cannot carry text: --c2l-secondary #4CACBE is 2.64:1 on white and 2.32:1 on the #edf1f2
     panel wash, --c2l-tertiary #1ab394 is 2.65:1 on white. The text pair measures (computed
     with the WCAG relative-luminance formula): secondary-text #1b6170 7.02:1 on white and
     6.17:1 on #edf1f2; tertiary-text #0e7a64 5.27:1 on white and 4.63:1 on #edf1f2;
     info-text #00588f 5.78:1 on the .c2l-badge--info wash (#d5e4ec over #edf1f2).
     #1b6170 is the teal aicms-design.css already used for the page eyebrow. Use these wherever
     the hue carries TEXT or is the fill behind white text; the brand tokens stay for borders,
     chart series, icons and other non-text marks. Do not lighten without re-measuring. */
  --c2l-secondary-text:     #1b6170;
  --c2l-tertiary-text:      #0e7a64;
  --c2l-info-text:          #00588f;

  /* ---------- Extended palette ---------- */
  --c2l-yellow:             #ffed00;
  --c2l-orange:             #f29400;
  --c2l-red:                #e2001a;
  --c2l-red-deep:           #b10000;
  /* WCAG AA text-safe companions to --c2l-green / --c2l-orange, minted 2026-08-26 on the same
     grounds --c2l-fg-muted was darkened on 2026-08-13 and for the same reason --c2l-red-deep
     exists: the brand green and orange cannot carry text at all. Measured by axe-core against the
     live app - #ffffff on --c2l-green #41a62a is 3.12:1 and on --c2l-orange #f29400 is 2.33:1,
     and both fail equally as text ON white (3.12 / 2.33), against a 4.5:1 floor. The deep pair
     measures >= 6.5:1 against white in either direction and >= 5.1:1 as text on those hues' own
     .12/.14 tint washes (the badge case, the harder of the two). Use these wherever the hue
     carries or sits behind TEXT; the brand tokens stay for borders, chart series, node fills and
     other non-text marks. Do not lighten without re-measuring against the tint washes. */
  --c2l-green-deep:         #276b19;
  --c2l-orange-deep:        #8a5000;
  --c2l-blue-light:         #006ab3;
  --c2l-blue-dark:          #172983;
  --c2l-green:              #41a62a;
  --c2l-purple:             #81197f;
  --c2l-primary-bg-soft:    #f9f3f9;   /* pale primary tint (selected list items) */

  /* Categorical data-viz palette (chart series colors, C2lChartOptions.getColor's
     default token cycle) - mapped onto existing hues above, no new colors minted. */
  --c2l-chart-series-1:     var(--c2l-secondary);
  --c2l-chart-series-2:     var(--c2l-tertiary);
  --c2l-chart-series-3:     var(--c2l-orange);
  --c2l-chart-series-4:     var(--c2l-purple);
  --c2l-chart-series-5:     var(--c2l-blue-dark);
  --c2l-chart-series-6:     var(--c2l-yellow);
  --c2l-chart-series-7:     var(--c2l-red);
  --c2l-chart-series-8:     var(--c2l-blue-light);

  /* Status / impersonation */
  --c2l-danger-gradient-from: #BF0500;
  --c2l-danger-gradient-to:   #F0110B;
  --c2l-danger-accent:        #F74A45;

  /* ---------- Neutrals ---------- */
  --c2l-bg:                 #f5f7fa;
  --c2l-bg-texture-url:     url('/Content/design/assets/shattered-texture.svg');
  --c2l-surface:            #ffffff;
  --c2l-surface-2:          #edf1f2;
  --c2l-surface-3:          #e4eaec;
  --c2l-border:             #e7eaec;
  --c2l-border-strong:      #cccccc;

  --c2l-fg-1:               #313131;
  --c2l-fg-2:               #434343;
  --c2l-fg-3:               #515253;
  --c2l-fg-4:               #656565;
  /* WCAG AA constrained, darkened from #98a0a4 on 2026-08-13. The old value
     measured 2.33:1 against --c2l-surface-2 (#edf1f2), the design system's own
     panel tint, and 2.72:1 on white - both far under the 4.5:1 AA floor for
     normal text, and it is used on 79 declarations. AA at 14px forces roughly
     this luminance, so "muted" can no longer be much LIGHTER than --c2l-fg-4;
     it stays distinguishable by HUE (cool blue-grey vs neutral grey) instead.
     Measured after: 4.71:1 on #edf1f2, 5.4:1 on white. Do not lighten without
     re-measuring against #edf1f2, which is the harder of the two. */
  --c2l-fg-muted:           #646c70;
  --c2l-fg-on-primary:      #ffffff;

  /* ---------- Sidebar active-item (teal) ---------- */
  --c2l-sidebar-active:     #299bb1;  /* orphan: no production consumer; published on TokenComponentsSidebar */

  /* ---------- Control height ---------- */
  --c2l-control-h:          34px;    /* single-line field height; see .c2l-uniform-controls in c2l-components.css */

  /* ---------- Radii ---------- */
  --c2l-radius-xs:          2px;
  --c2l-radius-sm:          3px;
  --c2l-radius-md:          4px;
  --c2l-radius-lg:          0.25em;  /* consumed by Areas/Metrics/Content/metrics-design-extensions.css (Indicator Index cards, Task 2) */
  --c2l-radius-pill:        999px;
  --c2l-radius-circle:      50%;

  /* ---------- Elevation / shadows ---------- */
  --c2l-shadow-xs:          0 1px 0 rgba(0,0,0,.04);
  --c2l-shadow-sm:          0 1px 1px rgba(0,0,0,.075);
  --c2l-shadow-md:          0 2px 6px rgba(0,0,0,.08);
  --c2l-shadow-dropdown:    0 6px 12px rgba(0,0,0,.175);
  --c2l-shadow-open-inset:  inset 0 -5px 0 rgba(255,255,255,.5);  /* orphan: no production consumer; published on TokenElevation */

  /* PN-5 tint washes: TRANSLUCENT rgba, 5-7% alpha, meant to be layered over
     an arbitrary surface. Distinct from the -bg-soft family above, which are
     OPAQUE hex fills at full strength for a solid selected/active surface.
     Two vocabularies, two different jobs - not a naming inconsistency. */
  --c2l-primary-tint:          rgba(71, 5, 68, .05);
  --c2l-primary-tint-border:   rgba(71, 5, 68, .10);
  --c2l-secondary-tint:        rgba(76, 172, 190, .07);
  --c2l-secondary-tint-border: rgba(76, 172, 190, .18);
  /* PN-6 two-layer soft card shadow (existing --c2l-shadow-md is single-layer) */
  --c2l-shadow-card:        0 1px 2px rgba(15, 23, 42, .04), 0 4px 18px -6px rgba(15, 23, 42, .10);

  /* ---------- Spacing ---------- */
  --c2l-space-0:            0;  /* orphan: no production consumer; published on TokenSpacingScale */
  --c2l-space-xs:           4px;
  --c2l-space-sm:           8px;
  --c2l-space-md:           12px;
  --c2l-space-lg:           16px;
  --c2l-space-xl:           24px;
  --c2l-space-2xl:          32px;

  /* ---------- Gradients ---------- */
  /* Composed from the brand tokens on purpose - these were literal hex copies
     and had drifted 1/255 on the blue channel (#470545 vs #470544). */
  --c2l-gradient-topnav:    linear-gradient(to right, var(--c2l-primary) 0%, var(--c2l-primary-dark) 100%);
  --c2l-gradient-preloader: linear-gradient(90deg, var(--c2l-primary) 10%, var(--c2l-primary-dark) 90%);  /* orphan: no production consumer; published on TokenColorsGradients */
  --c2l-gradient-danger:    linear-gradient(to right, var(--c2l-danger-gradient-from) 0%, var(--c2l-danger-gradient-to) 100%);  /* orphan: no production consumer; published on TokenColorsGradients */

  /* ---------- Type ---------- */
  --c2l-font-sans: "Source Sans Pro", "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --c2l-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --c2l-font-icons-fa:  "FontAwesome";
  --c2l-font-icons-sli: "simple-line-icons";  /* orphan: no production consumer; published on TokenBrandIconography */

  --c2l-fs-xs:              12px;
  --c2l-fs-sm:              12px;
  --c2l-fs-base:            14px;
  --c2l-fs-md:              16px;
  --c2l-fs-lead:            18px;
  --c2l-fs-lg:              20px;
  --c2l-fs-h6:              12px;
  --c2l-fs-h5:              14px;
  --c2l-fs-h4:              18px;
  --c2l-fs-h3:              21px;
  --c2l-fs-h2:              24px;
  --c2l-fs-h1:              30px;

  --c2l-lh-tight:           1.2;
  --c2l-lh-base:            1.428;
  --c2l-lh-loose:           1.6;

  --c2l-fw-thin:            300;
  --c2l-fw-regular:         400;
  --c2l-fw-medium:          500;
  --c2l-fw-semibold:        600;
  --c2l-fw-bold:            700;

  /* ---------- Motion ---------- */
  --c2l-dur-instant:        100ms;
  --c2l-dur-fast:           150ms;
  --c2l-dur-base:           200ms;
  --c2l-dur-slow:           300ms;  /* consumed by the AI Act map band-entrance animation (aicms-ai-act-map.css, Task 11) */
  --c2l-dur-modal:          240ms;  /* consumed by .c2l-toast entrance (c2l-components.css, Task 12) */
  --c2l-dur-exit:           150ms;  /* orphan: no production consumer; published on TokenMotion */

  --c2l-ease-out-quart:     cubic-bezier(0.25, 1, 0.5, 1);
  --c2l-ease-out-quint:     cubic-bezier(0.22, 1, 0.36, 1);
  --c2l-ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);  /* orphan: no production consumer; published on TokenMotion */
  --c2l-ease-in:            cubic-bezier(0.5, 0, 0.75, 0);  /* consumed by the c2l-eselect-panel-out exit keyframe (W3-1, c2l-components.css) */
  --c2l-ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);  /* orphan: no production consumer; published on TokenMotion */

  /* ---------- Modal / dialog ---------- */
  --c2l-lh-normal:          var(--c2l-lh-base);  /* orphan: no production consumer; published on TokenTypeScale */
  --c2l-radius-modal:       10px;
  --c2l-fs-modal-title:     22px;
  --c2l-separator:          #f0f2f4;
  --c2l-surface-footer:     #fafbfc;
  --c2l-primary-overlay:    rgba(46, 0, 44, .42);  /* orphan: no production consumer; published on TokenColorsImpersonation */
  --c2l-primary-shadow:     rgba(71, 5, 68, .28);
  --c2l-primary-icon-bg:    rgba(71, 5, 68, .08);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  body.c2l, .c2l-surface {
    background-image: none !important;
    background-color: var(--c2l-surface) !important;
    color: #313131;
  }
  .c2l a {
    color: #313131;
    text-decoration: underline;
  }
  .c2l .no-print { display: none !important; }
}

/* =========================================================
   Coach2Lead design system - shared components (coach2lead.design)
   Generic component CSS promoted from Areas/AICMS/Content/aicms-design.css
   and aicms-design-extensions.css (Task 5). Selectors are c2l-* single
   names; the generic striping rules formerly under the legacy .aicms-table
   alias were renamed to .c2l-table in this change (CP-9 complete) - the
   aicms-* aliases that bridged the AICMS migration were otherwise dropped
   in Task 25 once every call site was renamed; everything else is a
   verbatim, same-selector relocation.
   Component registry: Areas/Surveys/Angular/design/COMPONENTS.md
   Section order below is canonical - later component tasks append new
   sections at the end of this file.
   ========================================================= */

/* =========================================================
   Semantic element styles - scoped to .c2l
   ========================================================= */

body.c2l, .c2l-surface {
  font-family: var(--c2l-font-sans);
  font-size: var(--c2l-fs-base);
  line-height: var(--c2l-lh-base);
  color: var(--c2l-fg-3);
  background-color: var(--c2l-bg);
  background-image: var(--c2l-bg-texture-url);
}

.c2l h1, .c2l .h1 { font-size: var(--c2l-fs-h1); font-weight: var(--c2l-fw-bold);    line-height: var(--c2l-lh-tight); color: var(--c2l-primary); margin: 0 0 var(--c2l-space-md); }
.c2l h2, .c2l .h2 { font-size: var(--c2l-fs-h2); font-weight: var(--c2l-fw-regular); line-height: var(--c2l-lh-tight); color: var(--c2l-fg-1); margin: 0 0 var(--c2l-space-sm); }
.c2l h3, .c2l .h3 { font-size: var(--c2l-fs-h3); font-weight: var(--c2l-fw-thin);    line-height: var(--c2l-lh-base);  color: var(--c2l-fg-1); margin: 0 0 var(--c2l-space-sm); }
.c2l h4, .c2l .h4 { font-size: var(--c2l-fs-h4); font-weight: var(--c2l-fw-semibold);line-height: var(--c2l-lh-base);  color: var(--c2l-fg-1); }
.c2l h5, .c2l .h5 { font-size: var(--c2l-fs-h5); font-weight: var(--c2l-fw-bold);    line-height: var(--c2l-lh-base);  color: var(--c2l-fg-1); text-transform: uppercase; letter-spacing: .02em; }
.c2l h6, .c2l .h6 { font-size: var(--c2l-fs-h6); font-weight: var(--c2l-fw-bold);    line-height: var(--c2l-lh-base);  color: var(--c2l-fg-4); text-transform: uppercase; letter-spacing: .06em; }

.c2l p            { margin: 0 0 var(--c2l-space-md); line-height: var(--c2l-lh-loose); }
.c2l a            { color: var(--c2l-primary); text-decoration: none; }
.c2l a:hover      { color: var(--c2l-secondary); text-decoration: underline; }

.c2l code, .c2l kbd, .c2l pre, .c2l samp { font-family: var(--c2l-font-mono); font-size: 90%; }
.c2l pre          { background: var(--c2l-surface-2); padding: var(--c2l-space-md); border-radius: var(--c2l-radius-sm); }

.c2l small, .c2l .small { font-size: var(--c2l-fs-sm); color: var(--c2l-fg-4); }

.c2l .lead        { font-size: var(--c2l-fs-lead); font-weight: var(--c2l-fw-thin); }
.c2l .text-thin   { font-weight: var(--c2l-fw-thin); }

.c2l .page-heading       { color: var(--c2l-primary); }
.c2l .page-heading small { color: var(--c2l-secondary); }

/* Brand wordmark (COACH2LEAD) */
.c2l-brand-logo {
  color: var(--c2l-fg-on-primary);
  font-size: var(--c2l-fs-h1);
  font-weight: var(--c2l-fw-bold);
  line-height: 55px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.c2l-brand-logo > .two-lead { color: var(--c2l-secondary); }

/* ---- Panels ---- */
.c2l .panel.panel-default {
  border-color: var(--c2l-border);
  border-top: 3px solid var(--c2l-primary);
}
.c2l .panel.panel-default > .panel-heading {
  background: var(--c2l-surface-2);
  border-bottom-color: var(--c2l-border);
  padding: var(--c2l-space-sm) var(--c2l-space-lg);
}
.c2l .panel.panel-default > .panel-heading .panel-title,
.c2l .panel.panel-default > .panel-heading > .panel-title {
  font-size: var(--c2l-fs-sm);
  font-weight: var(--c2l-fw-semibold);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--c2l-fg-3);
}
.c2l .panel.panel-default > .panel-footer {
  background: var(--c2l-surface-2);
  border-top-color: var(--c2l-border);
  color: var(--c2l-fg-muted);
  font-size: var(--c2l-fs-sm);
}

/* ---- Tables ---- */
.c2l .table > thead > tr > th,
.c2l .table > thead > tr > td.vv-bg-primary,
.c2l .table > thead > tr > td[class*="vv-bg"] {
  background: var(--c2l-surface-2);
  color: var(--c2l-fg-2);
  font-size: var(--c2l-fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: var(--c2l-fw-bold);
  padding: 9px 12px;
  border-bottom: 2px solid var(--c2l-secondary) !important;
  border-top: 0;
}
.c2l .table-hover > tbody > tr:hover > td {
  background-color: var(--c2l-surface-2);
}

/* ---- CP-1 Outline buttons ---- */
.c2l .c2l-outline-btn {
  background: var(--c2l-surface);
  border: 1px solid var(--c2l-border-strong);
  color: var(--c2l-fg-3);
  border-radius: var(--c2l-radius-sm);
}
/* Bootstrap's disabled .65 opacity blends otherwise AA-compliant outline
   text into #8e8f8f on white (3.24:1). Disabled controls remain visibly
   disabled through their border/state, but their text must stay readable. */
.c2l .c2l-outline-btn[disabled],
.c2l .c2l-outline-btn.disabled {
  opacity: 1;
  color: var(--c2l-fg-3);
}
.c2l .c2l-outline-btn:hover,
.c2l .c2l-outline-btn:focus,
.c2l .c2l-outline-btn:active,
.c2l .open > .dropdown-toggle.c2l-outline-btn {
  background: var(--c2l-surface);
  border-color: var(--c2l-primary);
  color: var(--c2l-primary);
}
.c2l .c2l-outline-btn-secondary,
.c2l .c2l-outline-btn-secondary:hover,
.c2l .c2l-outline-btn-secondary:focus,
.c2l .c2l-outline-btn-secondary:active,
.c2l .open > .dropdown-toggle.c2l-outline-btn-secondary {
  border-color: var(--c2l-secondary);
  /* Text at #1b6170, not var(--c2l-secondary): #4cacbe is 2.64:1 on white and
     fails AA for the button label; #1b6170 is the established AA text teal
     (7.02:1 on white - same move the note-text call sites above made). The
     border keeps the brand secondary; it is non-text. */
  color: #1b6170;
}

/* ---- Data table shell ---- */
.c2l .c2l-table-shell {
  border: 1px solid var(--c2l-border);
  border-radius: var(--c2l-radius-md);
  /* This class sits on the same element as Bootstrap's .table-responsive
     (which sets overflow-x: auto so oversized tables scroll horizontally
     instead of blowing out the layout). A plain `overflow: hidden` shorthand
     here clobbers that back to hidden, silently clipping content past the
     shell's edge with no way to scroll to it. Clip only the axis this class
     actually needs clipped (rounding the top/bottom corners); leave
     overflow-x alone so .table-responsive's scrolling still works. */
  overflow-y: hidden;
  background: var(--c2l-surface);
}
/* C6d (Phase C deferred item, resolved W2-11): opt-out for a table shell that hosts a
   popover picker (uib-datepicker-popup) in a cell - c2lDatePicker has no append-to-body,
   so its popup is a normal in-flow DOM descendant of the cell, and the base rule's
   overflow-y: hidden clips it vertically the moment it extends past the shell's own box
   (measured: a 280px-tall popup clipped at the shell's bottom edge with this rule alone -
   overflow-x was already effectively "auto" per the browser's own visible/hidden combination
   rule, so an explicit overflow-x: auto companion changes nothing; only relaxing overflow-y
   lets the popup escape). Apply this class ALONGSIDE .c2l-table-shell (not instead of it) on
   any table whose cells render a popup picker; it forfeits the shell's bottom-edge rounding
   clip in exchange for an unclipped popup - acceptable since these tables never need their
   own vertical scroll (they grow to fit content, no fixed max-height). First consumer:
   ConformityWizard.cshtml's internal-assessment and certificate tables. */
.c2l .c2l-table-shell--popover {
  overflow-y: visible;
}
.c2l .c2l-table { background: var(--c2l-surface); margin: 0; }
.c2l .c2l-table > thead > tr { background: var(--c2l-surface-2); }
.c2l .c2l-table > tbody > tr { border-bottom: 1px solid var(--c2l-border); transition: background-color .12s ease; }
.c2l .c2l-table > tbody > tr:hover { background-color: rgba(76, 172, 190, .12); }
.c2l .c2l-table > tbody > tr:last-child { border-bottom: 0; }
.c2l .c2l-table > tbody > tr > td { padding: 12px 14px; vertical-align: middle; }
.c2l .c2l-table > thead > tr > th { padding: 10px 14px; }

/* ---- Paging bar ---- */
.c2l .c2l-paging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--c2l-space-md);
  margin-top: var(--c2l-space-sm);
  padding: var(--c2l-space-sm) var(--c2l-space-lg);
  background: var(--c2l-surface);
  border: 1px solid var(--c2l-border);
  border-radius: var(--c2l-radius-md);
}
.c2l .c2l-paging-summary {
  color: var(--c2l-fg-3);
  font-size: var(--c2l-fs-sm);
}
.c2l .c2l-paging-summary strong { color: var(--c2l-fg-1); }
.c2l .c2l-paging-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--c2l-space-sm);
}

.c2l .ui-select-bootstrap .ui-select-choices-row.active > span {
  background: var(--c2l-secondary);
  color: var(--c2l-fg-on-primary);
}
.c2l .ui-select-bootstrap .ui-select-choices-row > span:hover {
  background: var(--c2l-secondary-bg-soft);
  color: var(--c2l-fg-1);
}

/* ---- CP-1 Brand button overrides ---- */
.c2l .btn-primary,
.c2l .btn-primary:focus {
  background: var(--c2l-primary);
  border-color: var(--c2l-primary-dark);
  color: var(--c2l-fg-on-primary);
}
.c2l .btn-primary:hover,
.c2l .btn-primary:active,
.c2l .open > .dropdown-toggle.btn-primary {
  background: var(--c2l-primary-darker);
  border-color: var(--c2l-primary-dark);
  color: var(--c2l-fg-on-primary);
}
.c2l .btn-primary[disabled],
.c2l .btn-primary.disabled {
  background: var(--c2l-primary);
  border-color: var(--c2l-primary-dark);
  color: var(--c2l-fg-on-primary);
  opacity: .55;
}
.c2l .btn-success,
.c2l .btn-success:focus {
  background: var(--c2l-tertiary-text);  /* white on --c2l-tertiary is 2.65:1; on #138a73 4.27:1 */
  border-color: #0b6352;
  color: var(--c2l-fg-on-primary);
}
.c2l .btn-success:hover,
.c2l .btn-success:active {
  background: #0c6f5b;
  border-color: #0a5a4a;
  color: var(--c2l-fg-on-primary);
}
.c2l .btn-danger,
.c2l .btn-danger:focus {
  background: var(--c2l-red-deep);
  border-color: #8a0000;
  color: var(--c2l-fg-on-primary);
}
.c2l .btn-danger:hover,
.c2l .btn-danger:active {
  background: #8a0000;
  border-color: #7a1022;
  color: var(--c2l-fg-on-primary);
}

/* ---- Validation panel ---- */
.c2l .panel.panel-danger {
  border: 1px solid #fadadd;
  border-left: 4px solid var(--c2l-red-deep);
  background: #fffafa;
  border-radius: var(--c2l-radius-sm);
}
.c2l .panel.panel-danger > .panel-heading {
  background: transparent;
  border-bottom-color: #fadadd;
  color: var(--c2l-red-deep);
  padding: var(--c2l-space-sm) var(--c2l-space-lg);
}
.c2l .panel.panel-danger > .panel-heading .panel-title {
  color: var(--c2l-red-deep);
  font-weight: var(--c2l-fw-semibold);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Empty state ---- */
.c2l .box-placeholder.box-placeholder-lg {
  background: var(--c2l-surface-2);
  border: 1px dashed var(--c2l-border-strong);
  border-radius: 6px;
  padding: 40px 20px;
  color: var(--c2l-fg-muted);
}
.c2l .box-placeholder.box-placeholder-lg h1 {
  color: var(--c2l-border-strong);
  margin-bottom: var(--c2l-space-md);
}
.c2l .box-placeholder.box-placeholder-lg .lead {
  color: var(--c2l-fg-3);
  font-size: 15px;
  margin-bottom: var(--c2l-space-lg);
}

/* ---- ngdialog modal header ---- */
.c2l.ngdialog-open {
  overflow: hidden !important;
}

.c2l .ngdialog.ngdialog-theme-default.wide {
  display: flex;
  justify-content: center;
  padding: var(--c2l-space-2xl);
}

.c2l .ngdialog.ngdialog-theme-default.wide .ngdialog-content {
  display: flex;
  flex-direction: column;
  margin: auto 0;
  padding: 0;
  background: var(--c2l-surface);
  border-radius: var(--c2l-radius-modal);
  box-shadow: 0 24px 64px var(--c2l-primary-shadow), 0 2px 6px rgba(0, 0, 0, .06);
  color: var(--c2l-fg-1);
  font-family: var(--c2l-font-sans);
}

.c2l .ngdialog.ngdialog-theme-default .ngdialog-close {
  top: 22px;
  right: 24px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  z-index: 4;
}

.c2l .ngdialog.ngdialog-theme-default .ngdialog-close:before {
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  line-height: 30px;
  color: var(--c2l-fg-muted);
  font-size: 24px;
  background: transparent;
}

.c2l .ngdialog.ngdialog-theme-default .ngdialog-close:hover:before {
  color: var(--c2l-fg-1);
  background: var(--c2l-surface-2);
}

.c2l .ngdialog-message h1:first-child {
  padding: 14px 0 12px;
  margin-bottom: 0;
  border-bottom: 2px solid var(--c2l-primary);
  background: var(--c2l-surface-2);
  text-align: center;
}

/* ---- ngdialog wide modal ---- */
.c2l .ngdialog.wide .ngdialog-content {
  max-width: 720px;
  width: 92%;
}

/* ---- Content-heading action bar buttons (right-aligned) ---- */
.c2l .content-wrapper .content-heading > div.pull-right .btn,
.c2l .content-wrapper > .content-heading > div.pull-right .btn {
  margin-left: var(--c2l-space-xs);
  border-radius: var(--c2l-radius-sm);
}
.c2l .content-wrapper .content-heading > div.pull-right .dropdown-menu,
.c2l .content-wrapper > .content-heading > div.pull-right .dropdown-menu {
  border-color: var(--c2l-border);
  box-shadow: var(--c2l-shadow-dropdown);
}

/* ---------- Setup tab redesign: inline field validation (aicmsFieldError) ---------- */
.c2l .c2l-field-error {
  color: var(--c2l-red-deep);  /* --c2l-danger-accent is 3.48:1 on white */
  font-size: var(--c2l-fs-sm, 12px);
  margin-top: 2px;
}

/* Defensive: the directive toggles this class manually via
   errorElement.toggleClass('ng-hide', ...) rather than the ngShow/ngHide
   directive, which is what normally triggers Angular's auto-injected
   `.ng-hide{display:none!important}` boilerplate stylesheet. Declare it
   explicitly so hiding works even if that auto-injection never fires. */
.c2l .c2l-field-error.ng-hide {
  display: none;
}

.c2l c2l-field-feedback,
.c2l .c2l-field-feedback > .c2l-field-error {
  display: block;
}

/* Opt-in interaction timing leaves validity live while deferring error paint. */
.c2l[c2l-validation-timing="interaction"]:not(.ng-submitted) .form-control.ng-invalid.ng-untouched,
.c2l [c2l-validation-timing="interaction"]:not(.ng-submitted) .form-control.ng-invalid.ng-untouched {
  border: 1px solid var(--c2l-border);
}
.c2l[c2l-validation-timing="interaction"] .form-control.ng-invalid.ng-touched,
.c2l[c2l-validation-timing="interaction"].ng-submitted .form-control.ng-invalid,
.c2l [c2l-validation-timing="interaction"] .form-control.ng-invalid.ng-touched,
.c2l [c2l-validation-timing="interaction"].ng-submitted .form-control.ng-invalid {
  border: 1px solid var(--c2l-danger-accent);
}

/* ---------- CP-4, PN-7 Setup tab redesign: icon-chip panel ----------
   Ported from design-mirror-final:docs/design/showcase/panels (variant 07 - "Icon chip"):
   a lighter alternative to the heavy .vv-panel-primary/.panel treatment -
   thin hairline border, no colored top rule, a small rounded icon swatch
   in the tone color leading the title/subtitle. Built entirely from
   existing production tokens (--c2l-border, --c2l-primary, --c2l-fg-*). */
.c2l .c2l-panel-chip {
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
}

.c2l .c2l-panel-chip-head {
    display: flex;
    align-items: center;
    gap: var(--c2l-space-md);
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-panel-chip-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--c2l-fs-base);
    background: var(--c2l-primary-icon-bg);
    color: var(--c2l-primary);
}

.c2l .c2l-panel-chip-titles {
    flex: 1;
    line-height: var(--c2l-lh-tight);
    min-width: 0;
}

.c2l .c2l-panel-chip-title {
    font-size: var(--c2l-fs-md);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-1);
    display: block;
}

.c2l .c2l-panel-chip-subtitle {
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-regular);
    color: var(--c2l-fg-4);
    margin-top: 2px;
    display: block;
}

.c2l .c2l-panel-chip-badge {
    margin-left: auto;
    flex-shrink: 0;
    /* Explicit colors, not inherited cascade: this badge sits in
       .c2l-panel-chip-head, not a Bootstrap .panel-heading, so the
       ambient ".panel.vv-panel-primary > .panel-heading .badge" rule
       (aicms-design.css) that used to color this same "NN%" badge no
       longer matches, and it would otherwise fall back to a low-contrast
       default (pale surface bg + white text - illegible).
       CP-2 consolidation audit (Task W3-6 Step 3, 2026-08): NOT a true
       duplicate of .c2l-badge/.c2l-badge--pill even setting colors aside -
       no border (the atom always draws one) and this padding (3px 8px)
       differs from the pill modifier's (4px 10px). Left independent by
       design; not rebased. */
    /* --c2l-secondary-deep, not --c2l-secondary: white on the base secondary
       measures 2.64:1 (11px text), under the 4.5:1 AA floor. Measured
       2026-08-13; the deep variant is 4.63:1. */
    background: var(--c2l-secondary-deep);
    color: var(--c2l-fg-on-primary);
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-semibold);
    padding: 3px 8px;
    border-radius: var(--c2l-radius-pill);
}

.c2l .c2l-panel-chip-action {
    margin-left: auto;
    flex-shrink: 0;
}

.c2l .c2l-panel-chip-body {
    padding: var(--c2l-space-md);
}

/* Opt in on a c2l-panel whose body is a table and optional paging bar.
   The panel supplies the outer frame; text/context blocks keep their own padding. */
.c2l .c2l-panel-table > .c2l-panel-chip > .c2l-panel-chip-body {
    padding: 0;
}

.c2l .c2l-panel-table > .c2l-panel-chip > .c2l-panel-chip-body > .c2l-table-shell {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.c2l .c2l-panel-table > .c2l-panel-chip > .c2l-panel-chip-body > .c2l-paging {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--c2l-border);
    border-radius: 0;
}

/* PN-2 "Rail" variant - 4px tone-colored left border on the chip panel.
   Accent recoloring rides the shared .c2l-panel-accent-{accent} axis (the
   never-consumed .c2l-panel-rail-secondary alias was removed - repo grep
   found zero usages). */
.c2l .c2l-panel-rail {
    border-left: 4px solid var(--c2l-primary);
}

.c2l .c2l-panel-rail.c2l-panel-accent-secondary {
    border-left-color: var(--c2l-secondary);
}

.c2l .c2l-panel-rail.c2l-panel-accent-neutral {
    border-left-color: var(--c2l-fg-muted);
}

/* ---------- Setup tab redesign: inline-horizontal form rows ----------
   Ported from design-mirror-final:docs/design/showcase/form-layouts (S-3 - "Inline horizontal"):
   fixed-width label column left, control(s) right, hairline row dividers.
   Denser than the stacked label-above-input Bootstrap default - intended
   for compliance forms with many short fields (this codebase's "Belgian
   admin density" case). Coexists with Bootstrap .form-control on inputs -
   only the row/label wrapper changes, not the control styling itself. */
.c2l .c2l-form-inline {
    display: flex;
    flex-direction: column;
}

.c2l .c2l-form-inline-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: start;
    gap: var(--c2l-space-md);
    padding: var(--c2l-space-sm) 0;
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-form-inline-row:last-child {
    border-bottom: 0;
}

/* Rows with no separate label column (the c2l-field-* directive renders its
   own label) - a lone .c2l-form-inline-field child must span the full row,
   not fall into the 160px label track. */
.c2l .c2l-form-inline-row--full {
    grid-template-columns: 1fr;
}

.c2l .c2l-form-inline-label {
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-1);
    padding-top: 7px;
}

.c2l .c2l-form-inline-hint {
    display: block;
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-regular);
    color: var(--c2l-fg-4);
    margin-top: 2px;
}

.c2l .c2l-form-inline-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Grouped sub-fields sharing one row label (e.g. Major/Minor/Revision) */
.c2l .c2l-form-inline-subgrid {
    display: grid;
    gap: var(--c2l-space-sm);
}

.c2l .c2l-form-inline-subgrid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.c2l .c2l-form-inline-subgrid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.c2l .c2l-form-inline-subfield-label {
    font-size: 10px;
    font-weight: var(--c2l-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c2l-fg-4);
    margin-bottom: 4px;
    display: block;
}

/* ---------- Setup tab redesign: checkbox chip options ----------
   Standalone version of .aicms-checkbox-option (that class only styles
   text/spacing when nested under .aicms-filter-actions elsewhere in this
   file); this variant works in any panel body. */
.c2l .c2l-checkbox-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--c2l-space-sm) var(--c2l-space-md);
}

.c2l .c2l-checkbox-chip-option {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-regular);
    color: var(--c2l-fg-2);
    cursor: pointer;
}

.c2l .c2l-checkbox-chip-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--c2l-primary);
    cursor: pointer;
}

/* ---------- PN-8 Single-page layout: category section header ----------
   Ported from design-mirror-final:docs/design/showcase/panels (variant 08 - "Section header"):
   a barely-a-panel structural divider between groups of icon-chip panels
   on the flat version-detail page. Built entirely from existing production
   tokens - no new custom properties. */
.c2l .c2l-category-header {
    display: flex;
    align-items: center;
    gap: var(--c2l-space-md);
    padding: 0 0 var(--c2l-space-sm);
    margin: var(--c2l-space-lg, 24px) 0 var(--c2l-space-md);
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-category-header:first-of-type {
    margin-top: 0;
}

.c2l .c2l-category-header .t {
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-bold, 700);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c2l-primary);
    white-space: nowrap;
}

.c2l .c2l-category-header .rule {
    flex: 1;
    border-top: 1px solid var(--c2l-border);
}

/* ---------- Field directives (c2l-field-*, S-1 stacked layout) ----------
   M-2's own rules (c2lFieldMultiSelectConst default/non-tags mode) live in a
   dedicated .c2l-checkbox-grid block further down, next to its M-4 sibling
   (.c2l-tag-cloud) - this shared wrapper only carries the field-level chrome
   (label, required marker, maxlength counter) common to every c2l-field-*
   directive. */
.c2l .c2l-field {
    margin-bottom: var(--c2l-space-md);
}

.c2l .c2l-field-required {
    color: var(--c2l-danger-accent);
    margin-left: 2px;
}

.c2l .c2l-field-static {
    margin-bottom: 0;
}

.c2l .c2l-field-textarea .c2l-field-static {
    white-space: pre-wrap;
}

/* Read-only unmatched-value marker (REG item 19): c2lFieldSelect /
   c2lFieldEnumSelect append this next to the raw stored value when it
   matches no option in the current list, instead of rendering a blank
   line. --c2l-fg-muted is the module's actual muted-text token (c2l-tokens.css). */
.c2l .c2l-field-unmatched {
    color: var(--c2l-fg-muted);
    font-size: 12px;
    margin-left: 6px;
}

/* E2b W2-7 review, Ruling 3: per-field explanatory line rendered INSIDE a
   c2lField* directive's own wrapper, under its control - distinct from
   .c2l-wizard-help, which is a consuming view's own sibling paragraph outside
   the field wrapper entirely. First consumer: c2lFieldYesNo's field.caption
   member (FieldYesNo.cshtml). Deliberately its own block-level atom rather
   than reusing .c2l-field-unmatched (that one is an inline marker appended
   next to a read-only value, not a full-width line under an editable
   control) or .c2l-wizard-help (scoped to the wizard-stage recipe, not the
   c2lField* family, and explicitly out of scope per Ruling 3). */
.c2l .c2l-field-caption {
    display: block;
    margin: 4px 0 0;
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-muted);
}

.c2l .c2l-field-maxlength {
    display: block;
    font-size: var(--c2l-fs-xs);
    text-align: right;
    transition: color .12s;
}

/* Counter escalation (state classes from counterState() on c2lFieldText /
   c2lFieldTextarea): the readout has to be felt before the limit bites, so
   it warms over 90% of the budget and goes red at the limit - where the
   input's maxlength attribute stops further typing. Colour AND weight both
   move so the step is not carried by hue alone. Beats the .text-muted on
   the same span on specificity (0,3,0 vs 0,1,0). */
.c2l .c2l-field-maxlength.is-near {
    color: var(--c2l-orange-deep);
    font-weight: var(--c2l-fw-semibold);
}

.c2l .c2l-field-maxlength.is-full {
    color: var(--c2l-red-deep);
    font-weight: var(--c2l-fw-bold);
}

/* Field-label badge chip. A MODIFIER on the .c2l-badge atom, never standalone:
   all seven Field*.cshtml emit class="c2l-badge c2l-field-badge". The selector
   is compound rather than the plain `.c2l .c2l-field-badge` it was written as
   at first, and that is load-bearing - the bare form has exactly the same
   specificity as the `.c2l .c2l-badge` atom block ~1400 lines below, so source
   order decided the font-weight and the atom's semibold won, rendering field
   badges heavier than the <label> they sit beside. The compound selector makes
   the modifier win on specificity instead of on position. */
.c2l .c2l-badge.c2l-field-badge {
    margin-left: var(--c2l-space-xs);
    font-weight: var(--c2l-fw-regular);
}

/* ---------- Wizard stepper chrome (c2l-wizard-*, W-1) ----------
   Promoted from aicms-design.css's AICMS Wizard scaffold "Step bar" block
   (Task 12), for the c2lWizardStepper directive. All 8 AICMS wizards now
   render via <c2l-wizard-stepper> (Task 24); the legacy alias selectors
   were dropped along with the last hand-written stepper markup in the
   wizard views. */
.c2l .c2l-wizard-steps {
  flex: 0 0 auto;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 22px 28px;
  background: var(--c2l-surface);
  border: 0;
  border-bottom: 1px solid var(--c2l-separator);
  border-radius: 0;
  box-shadow: none;
  counter-reset: wizard-step;
  gap: 0;
}
.c2l .c2l-wizard-step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  color: var(--c2l-fg-muted);
  font-size: var(--c2l-fs-sm);
  font-weight: var(--c2l-fw-semibold);
  min-width: 0;
}
.c2l .c2l-wizard-step:not(:last-child)::after {
  content: '';
  flex: 1 1 auto;
  height: 2px;
  margin-left: 10px;
  background: var(--c2l-border);
}
.c2l .c2l-wizard-step.is-done:not(:last-child)::after { background: var(--c2l-secondary); }
.c2l .c2l-wizard-step-marker {
  width: 28px;
  height: 28px;
  border-radius: var(--c2l-radius-circle);
  background: var(--c2l-surface-2);
  border: 2px solid var(--c2l-border-strong);
  color: var(--c2l-fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--c2l-fs-sm);
  font-weight: var(--c2l-fw-bold);
  flex-shrink: 0;
  transition: all .15s ease;
}
/* Task 10 correction: this used to fill the active marker solid
   (background: var(--c2l-primary), white icon) - the reference
   (modal-showcase.css:228, .step--current .step-dot) instead keeps it
   WHITE with a plum border/text and an outline glow ring. Only this
   active-state rule changes; .is-done directly below stays a solid fill on
   purpose - the reference's own .step--done (modal-showcase.css:230) is
   ALSO solid-filled, so that state was never mismatched. Hex-to-token:
   #fff -> --c2l-surface (exact). Glow ring rgba(70,5,68,.08) -> corrected
   to the exact --c2l-primary RGB (71,5,68 - the reference's "70" is an
   off-by-one slip, same class of correction the MD-2/4/5 header block
   comment further below already documents for its own icon-bg mapping); no
   token carries this exact .08 alpha, so the alpha stays a literal.
   wizardStepActiveMarkerToken.test.js locks this rule so a future edit
   cannot silently re-fill it. */
.c2l .c2l-wizard-step.is-active .c2l-wizard-step-marker {
  background: var(--c2l-surface);
  border-color: var(--c2l-primary);
  color: var(--c2l-primary);
  box-shadow: 0 0 0 4px rgba(71, 5, 68, .08);
}
.c2l .c2l-wizard-step.is-active { color: var(--c2l-primary); }
.c2l .c2l-wizard-step.is-done .c2l-wizard-step-marker {
  background: var(--c2l-tertiary);
  border-color: #138a73;
  color: var(--c2l-fg-on-primary);
}
.c2l .c2l-wizard-step.is-done .c2l-wizard-step-marker > span { display: none; }
.c2l .c2l-wizard-step.is-done .c2l-wizard-step-marker::before {
  content: '\f00c';
  font-family: var(--c2l-font-icons-fa);
  font-weight: 900;
  font-size: var(--c2l-fs-sm);
}
.c2l .c2l-wizard-step.is-done { color: var(--c2l-tertiary-text); }  /* label text: --c2l-tertiary is 2.65:1 on white */
.c2l .c2l-wizard-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- MD-5 wizard step body content (StyleGuideModals mdWizardDemo.html) ----------
   Ported from modal-variants.jsx's OnboardSupplierWizard step bodies (lines
   282-308) and their supporting rules in modal-showcase.css (.docs/.doc/
   .doc-n/.doc-s/.doc-act lines 242-250; .risk-meter* lines 235-239;
   .review* lines 252-255). Demo-only content for the style guide's
   canonical MD-5 recipe (COMPONENTS.md MD-5 row) - not a reusable catalog
   component, hence the c2l-wiz- prefix rather than c2l-wizard-: that
   namespace is the real W-1/W-2/W-3 wizard chrome (c2l-wizard-vstep/-astep/
   -stage and friends, further below) - keeping the two prefixes visually
   distinct avoids implying this demo markup joins that shared vocabulary.

   Scope step: document checklist. Hex-to-token: #1ab394 ok icon -> the SAME
   --c2l-tertiary this file already uses for the wizard stepper's own
   is-done marker above - reusing it here ties "done" green to one token
   across the module. #f29400 missing icon -> --c2l-orange (exact; the
   reference's own class name says "miss" but the color is warning orange,
   not danger red - verified against modal-showcase.css:246, not assumed).
   #e7eaec row border -> --c2l-border (exact). */
.c2l .c2l-wiz-docs {
  display: flex;
  flex-direction: column;
  gap: var(--c2l-space-xs);
}
.c2l .c2l-wiz-doc {
  display: flex;
  align-items: center;
  gap: var(--c2l-space-md);
  padding: var(--c2l-space-sm) var(--c2l-space-md);
  border: 1px solid var(--c2l-border);
  border-radius: 8px;
  font-size: 13px;
}
.c2l .c2l-wiz-doc i {
  font-size: var(--c2l-fs-lead);
  flex-shrink: 0;
}
.c2l .c2l-wiz-doc.is-ok i { color: var(--c2l-tertiary); }
.c2l .c2l-wiz-doc.is-missing i { color: var(--c2l-orange); }
.c2l .c2l-wiz-doc-name { font-weight: var(--c2l-fw-semibold); color: var(--c2l-fg-1); }
.c2l .c2l-wiz-doc-status {
  color: var(--c2l-fg-muted);
  font-size: var(--c2l-fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: auto;
}

/* Assess step: risk meter. Reuses the CP-5 c2lProgress directive/CSS above
   rather than hand-rolling a new bar - only the TRACK background and the
   fill's edge glow are overridden here, scoped to this demo via
   .c2l-wiz-risk so the shared .c2l-progress rules stay untouched for every
   other consumer. Gradient stops #41a62a/#ffed00/#f29400/#e2001a ->
   --c2l-green/--c2l-yellow/--c2l-orange/--c2l-red (all four exact -
   modal-showcase.css:237). Fill background #470544 already matches
   --c2l-primary, c2lProgress's own default fill color, so no override
   needed there. Fill glow rgba(70,5,68,.12) -> corrected to the exact
   --c2l-primary RGB (71,5,68) per this file's established practice of
   preferring the token's real value over the prototype's off-by-one hex
   (see the MD-2/4/5 header block's "Fix round 1 correction" comment further
   below for the same kind of correction); no named token carries this
   exact .12 alpha, so this is a literal - the SAME literal this file used,
   pre-Task-10, for the wizard stepper's own active-marker glow (now
   corrected to .08 above), so it is not a new value introduced by this
   task. */
.c2l .c2l-wiz-risk .c2l-progress {
  height: 10px;
  background: linear-gradient(to right, var(--c2l-green), var(--c2l-yellow), var(--c2l-orange), var(--c2l-red));
}
.c2l .c2l-wiz-risk .c2l-progress-bar {
  box-shadow: 0 0 0 3px rgba(71, 5, 68, .12);
}
.c2l .c2l-wiz-risk-marks {
  display: flex;
  justify-content: space-between;
  font-size: var(--c2l-fs-xs);
  color: var(--c2l-fg-4);
  margin-top: var(--c2l-space-xs);
}

/* Review step: summary rows. #f0f2f4 row divider -> --c2l-separator
   (exact, same token the shared .c2l-modal-hd divider uses). #656565 row
   label -> --c2l-fg-4 (exact, same token .c2l-modal-hd-desc uses). #313131
   bold value -> --c2l-fg-1 (exact). 13.5px row/note text reuses the same
   literal .c2l-modal-hd-desc already carries (no exact fs-* token matches
   13.5px). Note callout: #f0f8fa background has no exact token, but
   --c2l-secondary-tint (rgba(76,172,190,.07)) composites to rgb(242,249,250)
   over a white surface - within 2 on every channel of the target, the same
   composite-distance test the MD-2/4/5 header block comment further below
   already applies to its own icon-bg token choice. #1b6170 note text reuses
   the SAME literal .c2l-badge--secondary already carries, so it is still one
   shared value rather than a new one - but note that value DEVIATES from the
   design reference on purpose. Both were #206f7e, which is the reference's
   own teal (design-mirror-final:docs/design/preview/*, modal-showcase.css:255). Measured
   2026-08-13, #206f7e on --c2l-secondary-bg-soft (#A9E1EC) is 4.03:1, under
   the 4.5:1 AA floor, so both shipped call sites moved to #1b6170 (4.91:1).
   The reference package still says #206f7e; do not "restore" it from there. */
.c2l .c2l-wiz-review {
  display: flex;
  flex-direction: column;
}
.c2l .c2l-wiz-review-row {
  display: flex;
  justify-content: space-between;
  padding: var(--c2l-space-sm) 0;
  border-bottom: 1px solid var(--c2l-separator);
  font-size: 13.5px;
  color: var(--c2l-fg-4);
}
.c2l .c2l-wiz-review-row:last-child { border-bottom: 0; }
.c2l .c2l-wiz-review-row b { color: var(--c2l-fg-1); font-weight: var(--c2l-fw-semibold); }
.c2l .c2l-wiz-review-note {
  margin-top: var(--c2l-space-md);
  padding: var(--c2l-space-sm) var(--c2l-space-md);
  background: var(--c2l-secondary-tint);
  border-left: 3px solid var(--c2l-secondary);
  color: #1b6170;
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
}

/* ---------- TB-1 underline tabs ---------- */
.c2l .c2l-tabs {
    display: flex;
    gap: var(--c2l-space-md);
    list-style: none;
    margin: 0 0 var(--c2l-space-md);
    padding: 0;
    border-bottom: 2px solid var(--c2l-separator);
}

/* Resting tabs are GREY. This family had primary (plum) as the resting
   colour and secondary (cyan) as both hover and active - i.e. every tab
   shouted, the selected one was the only cyan thing on the strip, and the
   brand colour marked "not selected". The prototype has it the other way
   round (showcase/tabs/tabs.css: .tab -> --c2l-fg-4, .tab.on -> plum), so
   selection is what earns the brand colour. Applies family-wide: pills,
   segmented, vertical and rail all inherit this base and override only
   what their own variant needs. */
.c2l .c2l-tab > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--c2l-space-sm) var(--c2l-space-xs);
    color: var(--c2l-fg-4);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                background var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                border-color var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

/* Guarded on :not(.is-active) - without it, hovering the SELECTED tab
   dragged it back down to the resting colour. Each variant's own hover rule
   below carries one more class and overrides the wash where it needs to. */
.c2l .c2l-tab:not(.is-disabled):not(.is-active) > a:hover,
.c2l .c2l-tab:not(.is-disabled):not(.is-active) > a:focus {
    color: var(--c2l-fg-1);
    background: rgba(71, 5, 68, .045);
}

.c2l .c2l-tab.is-active > a {
    color: var(--c2l-primary);
    border-bottom-color: var(--c2l-primary);
    font-weight: var(--c2l-fw-semibold);
}

.c2l .c2l-tab.is-disabled > a {
    color: var(--c2l-fg-muted);
    cursor: not-allowed;
}

/* Manual tab activation makes keyboard focus distinct from selected content. */
.c2l .c2l-tab > a:focus-visible,
.c2l .c2l-tab-close:focus-visible,
.c2l .c2l-tab-add:focus-visible {
    outline: 2px solid var(--c2l-secondary);
    outline-offset: 2px;
}

/* The count badge is neutral until its tab is selected - it was permanently
   cyan, so it read as "active" on every tab at once and stopped carrying any
   selection signal. Cyan is now the selected state only (prototype:
   .tbadge -> --c2l-surface-3, .tab.on .tbadge -> --c2l-secondary). Pills and
   rail override this again further down, where the active tab's own fill
   demands a white-alpha badge instead.
   CP-2 consolidation audit (Task W3-6 Step 3, 2026-08): NOT rebased onto
   .c2l-badge - Tabs.cshtml pairs this class with Bootstrap's legacy
   `badge` for shape (padding/border-radius/font-size/display all come
   from the global Bootstrap rule, not from here or from .c2l-badge), so
   this block only ever carried the 3 color/transition declarations shown.
   Rebasing would mean removing the Bootstrap dependency and adding the
   full atom shape to the markup, a bigger change than a badge-CSS
   consolidation and outside this task's scope. Left independent. */
.c2l .c2l-tab-badge {
    background: var(--c2l-surface-3);
    color: var(--c2l-fg-3);
    transition: background var(--c2l-dur-fast), color var(--c2l-dur-fast);
}

.c2l .c2l-tab.is-active .c2l-tab-badge {
    background: var(--c2l-secondary);
    color: var(--c2l-fg-on-primary);
}

/* Shared dark tooltip, ported from the prototype's [data-tip] atom
   (showcase/tabs/tabs.css). Replaces the browser's native `title` bubble on
   tabs: that one is OS-styled, ~1s late, unstyleable, and does not match
   anything else in the catalog. CSS-only - no directive, no JS, no
   positioning library - so any element can opt in with the attribute.
   a11y is unaffected: ::after content is decorative, and the tab's own
   aria-label (icons mode) is what assistive tech reads. */
.c2l [data-c2l-tip] { position: relative; }

.c2l [data-c2l-tip]:hover::after,
.c2l [data-c2l-tip]:focus-visible::after {
    content: attr(data-c2l-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--c2l-fg-1);
    color: var(--c2l-fg-on-primary);
    font-size: 11px;
    font-weight: var(--c2l-fw-regular);
    line-height: 1.35;
    padding: 5px 9px;
    border-radius: var(--c2l-radius-xs);
    white-space: nowrap;
    z-index: 60;
    pointer-events: none;
}

.c2l [data-c2l-tip]:hover::before,
.c2l [data-c2l-tip]:focus-visible::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--c2l-fg-1);
    border-bottom: 0;
    z-index: 60;
    pointer-events: none;
}

/* Vertical families (TB-4/TB-5) have no room above a tab in a stacked rail -
   flip the bubble to the side the strip is not on. */
.c2l .c2l-tabs-vertical [data-c2l-tip]:hover::after,
.c2l .c2l-tabs-vertical [data-c2l-tip]:focus-visible::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 9px);
    transform: translateY(-50%);
}

.c2l .c2l-tabs-vertical [data-c2l-tip]:hover::before,
.c2l .c2l-tabs-vertical [data-c2l-tip]:focus-visible::before {
    bottom: auto;
    top: 50%;
    left: calc(100% + 4px);
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--c2l-fg-1);
    border-left: 0;
}

.c2l .c2l-tab-alert {
    width: 6px;
    height: 6px;
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-danger-accent);
}

/* ---------- CP-5 progress ---------- */
.c2l .c2l-progress {
    position: relative;
    height: 8px;
    border-radius: var(--c2l-radius-pill);
    background: var(--c2l-surface-2);
    overflow: hidden;
}

.c2l .c2l-progress-bar {
    height: 100%;
    border-radius: var(--c2l-radius-pill);
    background: var(--c2l-primary);
    transition: width var(--c2l-dur-base) var(--c2l-ease-out-quart);
}

.c2l .c2l-progress-secondary .c2l-progress-bar {
    background: var(--c2l-secondary);
}

.c2l .c2l-progress-danger .c2l-progress-bar {
    background: var(--c2l-danger-accent);
}

.c2l .c2l-progress-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--c2l-fg-2);
}

/* ---------- CP-6 toast skin (angular-toastr containers) ---------- */

/* angular-toastr pins the top-anchored stacks at top:12px, which drops them
   on top of the page header. Push the stack clear of whichever header the
   page has, plus the same 12px gutter toastr already uses on the right. */
body.c2l {
    --c2l-toast-header-h: 55px; /* app shell: fixed .topnavbar-wrapper */
}

body.c2l.c2l-styleguide-page {
    --c2l-toast-header-h: 56px; /* style-guide harness: .sg-header */
}

body.c2l #toast-container.toast-top-right,
body.c2l #toast-container.toast-top-left,
body.c2l #toast-container.toast-top-center,
body.c2l #toast-container.toast-top-full-width {
    top: calc(var(--c2l-toast-header-h) + var(--c2l-space-md));
}

body.c2l #toast-container > .toast {
    background-image: none;
    border-radius: var(--c2l-radius-sm);
    box-shadow: var(--c2l-shadow-md);
    font-family: var(--c2l-font-sans);
    opacity: 0.98;
}

body.c2l #toast-container > .toast .toast-title {
    font-weight: var(--c2l-fw-semibold);
}

body.c2l #toast-container > .toast-success { background-color: var(--c2l-tertiary); }
body.c2l #toast-container > .toast-info    { background-color: var(--c2l-secondary); }
body.c2l #toast-container > .toast-warning { background-color: var(--c2l-orange); }
body.c2l #toast-container > .toast-error   { background-color: var(--c2l-danger-accent); }

/* ===== BEGIN Task 12: opt-in .c2l-toast card + .c2l-alert (never touches
   bare .toast/.toast-{success,info,warning,error}/#toast-container/.alert/
   .alert-{success,info,warning,danger}) =====

   New, ADDITIVE skin - a call site opts in per call, not per page. Confirmed
   API: angular-toastr.js's createToast()/cleanOptionsOverride() apply any
   optionsOverride key not on its blacklist (containerId, iconClasses,
   maxOpened, newestOnTop, positionClass, preventDuplicates,
   preventOpenDuplicates, templates) - toastClass, iconClass, titleClass,
   messageClass, closeButton and closeHtml are all pass-through per call.
   The two style-guide call sites (styleguideModals.js vm.showToast,
   styleguideTokenToasts.js vm.showToast) pass toastClass: 'c2l-toast' and
   iconClass: 'c2l-toast--{ok,info,warn,err}' INSTEAD OF the library defaults
   ('toast' / 'toast-success' etc.) - so an opted-in toast never carries the
   legacy .toast/.toast-success classes at all, and cannot be matched by the
   CP-6 skin above or by angular-toastr.css's own bare .toast-success
   background-color. A plain toastr.success(...) call with no override is
   untouched by anything below - none of these selectors match unless the
   caller supplies .c2l-toast/.c2l-toast--{kind} itself. Same rule for
   inline alerts: .c2l-alert-* is a new class switched in only on
   TokenComponentsToasts.cshtml's demo markup, alongside (not instead of)
   Bootstrap's own .alert-* elsewhere in the app.

   Naming convention (final pre-merge fix wave, whole-branch review I-3):
   the four tone/kind classes on each of .c2l-toast and .c2l-alert are BEM
   MODIFIERS on the block itself and use DOUBLE-DASH - .c2l-toast--ok/
   --info/--warn/--err, .c2l-alert--ok/--info/--warn/--err - consistent with
   this file's other block-level tone modifiers (.c2l-modal-hd--danger,
   .c2l-card--accent-danger, .c2l-badge--primary). This block's own CHILD
   elements - .c2l-toast-title/-message/-dismiss, .c2l-alert-icon/-body/
   -title/-dismiss - are single-dash, matching the rest of this codebase's
   convention that single-dash names a descendant, not a variant. Kind
   classes were originally shipped single-dash (.c2l-toast-ok etc.), which
   made a child (.c2l-alert-icon) and a variant (.c2l-alert-ok) on the same
   element indistinguishable by name; do not reintroduce a single-dash kind
   class here.

   Ported from design-mirror-final:docs/design/components/Toast/Toast.jsx (300px card, 3px left
   accent border by kind, tone icon, bold title + message line, dismiss
   button, slide-in entrance) and design-mirror-final:docs/design/preview/components-toasts.html
   :14-31 (.alert.ok/info/warn/err - matching inline-alert pattern).

   Tokenized: border-radius (--c2l-radius-sm, exact: 3px), toast box-shadow
   (--c2l-shadow-dropdown - same rgba/offsets as the JSX's inline fallback),
   icon font-size (--c2l-fs-base, exact: 14px), message/dismiss font-size
   (--c2l-fs-sm, exact: 12px), spacing (--c2l-space-xs/sm/md, exact: 4/8/12
   px), title weight (--c2l-fw-bold), dismiss hover transition
   (--c2l-dur-fast / --c2l-ease-out-quart - exact match to the reference's
   own values), toast entrance duration/easing (--c2l-dur-modal 240ms /
   --c2l-ease-out-quint - both exact matches to Toast.jsx's inline
   "240ms cubic-bezier(.22,1,.36,1)"; this consumes --c2l-dur-modal, which
   was an orphan - its c2l-tokens.css marker is removed in this same commit).
   Kind accent colors reuse the SAME tokens the CP-6 skin above already maps
   for the same four kinds (--c2l-tertiary/--c2l-secondary/--c2l-orange/
   --c2l-danger-accent) rather than the reference's own literal hexes, so a
   user's mental model of "which color means which kind" stays one system.

   Literal, no matching token: 12.5px base font-size and 1.4/1.45
   line-height (the references sit between this scale's 12/14px and 1.428
   steps); 10px gap and top padding (same "between steps" reasoning); 1px
   icon margin-top (the reference's own literal, below the 4px floor of the
   spacing scale); 30px right padding on the toast card, reserved for the
   absolutely-positioned dismiss button - interlocked geometry, same
   convention as this file's other button-clearance paddings; #fff7f8 (err
   alert tint) has no danger-tint token and stays literal, same convention
   as this file's other untokenized prototype colors (#ced4da etc). */
.c2l .c2l-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 300px;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-left: 3px solid var(--c2l-toast-accent, var(--c2l-secondary));
    border-radius: var(--c2l-radius-sm);
    margin: 0 0 var(--c2l-space-sm);
    padding: 10px 30px var(--c2l-space-md) var(--c2l-space-md);
    box-shadow: var(--c2l-shadow-dropdown);
    font-family: var(--c2l-font-sans);
    font-size: 12.5px;
    line-height: 1.4;
}

.c2l .c2l-toast::before {
    font-family: var(--c2l-font-icons-fa);
    font-weight: 900;
    font-size: var(--c2l-fs-base);
    color: var(--c2l-toast-accent, var(--c2l-secondary));
    margin-top: 1px;
    flex-shrink: 0;
}

.c2l .c2l-toast--ok   { --c2l-toast-accent: var(--c2l-tertiary); }
.c2l .c2l-toast--ok::before   { content: '\f058'; }
.c2l .c2l-toast--info { --c2l-toast-accent: var(--c2l-secondary); }
.c2l .c2l-toast--info::before { content: '\f05a'; }
.c2l .c2l-toast--warn { --c2l-toast-accent: var(--c2l-orange); }
.c2l .c2l-toast--warn::before { content: '\f071'; }
.c2l .c2l-toast--err  { --c2l-toast-accent: var(--c2l-danger-accent); }
.c2l .c2l-toast--err::before  { content: '\f057'; }

.c2l .c2l-toast > div { flex: 1; min-width: 0; }

.c2l .c2l-toast-title {
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-1);
    display: block;
}

.c2l .c2l-toast-message {
    color: var(--c2l-fg-4);
    font-size: var(--c2l-fs-sm);
}

.c2l .c2l-toast-dismiss {
    position: absolute;
    top: var(--c2l-space-sm);
    right: var(--c2l-space-sm);
    background: transparent;
    border: 0;
    color: var(--c2l-fg-muted);
    cursor: pointer;
    font-size: var(--c2l-fs-sm);
    line-height: 1;
    padding: 2px var(--c2l-space-xs);
    /* Final pre-merge fix wave (whole-branch review, I-2): angular-toastr.js's
       toastLinkFunction() does button.addClass('toast-close-button')
       UNCONDITIONALLY on whatever closeHtml a caller supplies, so this
       element always renders as class="c2l-toast-dismiss toast-close-button"
       and inherits angular-toastr.css's vendor .toast-close-button rule
       (font-weight: bold; text-shadow: 0 1px 0 #ffffff; opacity: 0.8, with
       :hover/:focus dropping to opacity: 0.4 - the opposite of this catalog's
       hover-emphasis convention). These three declarations neutralize that
       vendor styling from the .c2l-toast-dismiss side (higher-specificity
       .c2l ancestor beats the bare vendor selector) rather than writing a
       rule keyed on .toast-close-button itself, which would restyle that
       class - and so every plain toastr call in every legacy area - app-wide. */
    opacity: 1;
    font-weight: var(--c2l-fw-regular);
    text-shadow: none;
}
.c2l .c2l-toast-dismiss:hover,
.c2l .c2l-toast-dismiss:focus { color: var(--c2l-fg-1); opacity: 1; }

/* Entrance only, no exit: the style guide's own bootstrap module
   (coach2leadDesignStyleGuide) does not depend on ngAnimate, so toastr's
   $animate.leave() never adds the ng-leave/ng-leave-active classes an exit
   rule would need to key off - same "no ngAnimate, entrance only" policy
   this file already uses for .c2l-eselect-panel-in, .c2l-chip-in,
   .c2l-acc-detail, c2l-dpop-in, c2lTabAdd and c2l-timeline-in. The sitewide
   reduced-motion clamp (c2l-tokens.css ~172-179) already forces
   1ms/1-iteration on this animation under prefers-reduced-motion: reduce;
   this module's stronger convention is to also gate the declaration itself
   behind no-preference. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-toast {
        animation: c2lToastIn var(--c2l-dur-modal) var(--c2l-ease-out-quint) both;
    }
}

@keyframes c2lToastIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.c2l .c2l-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-left: 3px solid var(--c2l-alert-accent, var(--c2l-secondary));
    border-radius: var(--c2l-radius-sm);
    padding: 9px var(--c2l-space-md);
    margin-bottom: var(--c2l-space-sm);
    font-family: var(--c2l-font-sans);
    font-size: 12.5px;
    line-height: 1.45;
}

.c2l .c2l-alert-icon {
    color: var(--c2l-alert-accent, var(--c2l-secondary));
    font-size: var(--c2l-fs-base);
    margin-top: 1px;
    flex-shrink: 0;
}

.c2l .c2l-alert-body { flex: 1; min-width: 0; }

.c2l .c2l-alert-title {
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-1);
    margin-right: var(--c2l-space-xs);
}

.c2l .c2l-alert-dismiss {
    margin-left: auto;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--c2l-fg-muted);
    cursor: pointer;
    font-size: var(--c2l-fs-sm);
    padding: 2px var(--c2l-space-xs);
    border-radius: var(--c2l-radius-sm);
    transition: background-color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                color var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}
.c2l .c2l-alert-dismiss:hover { background: var(--c2l-surface-2); color: var(--c2l-fg-1); }

/* E1 T3 (CP-15): each tone now also publishes --c2l-alert-tint, the 7% wash
   of the SAME accent token that tone already maps - --c2l-tertiary (#1ab394),
   --c2l-secondary (via the existing --c2l-secondary-tint token), --c2l-orange
   (#f29400), --c2l-danger-accent (#F74A45). Same reasoning the region header
   records for the accents themselves: a user's mental model of "which color
   means which kind" stays one system, so the wash is derived from this
   family's own tokens, not from the AICMS original's red/orange/green. 7%
   matches --c2l-secondary-tint, the one member of the pair that already has a
   token; the PN-5 wash family is documented as 5-7% alpha (c2l-tokens.css).
   All four of these declarations are INERT on their own - nothing reads
   --c2l-alert-tint except .is-result below - so every alert shipping today
   renders byte-identically. */
.c2l .c2l-alert--ok   { --c2l-alert-accent: var(--c2l-tertiary); --c2l-alert-tint: rgba(26, 179, 148, .07); }
.c2l .c2l-alert--info { --c2l-alert-accent: var(--c2l-secondary); --c2l-alert-tint: var(--c2l-secondary-tint); }
.c2l .c2l-alert--warn { --c2l-alert-accent: var(--c2l-orange); --c2l-alert-tint: rgba(242, 148, 0, .07); }
.c2l .c2l-alert--err  {
    --c2l-alert-accent: var(--c2l-danger-accent);
    --c2l-alert-tint: rgba(247, 74, 69, .07);
    background: #fff7f8;
}

/* E1 T3 (CP-15). `.is-result` - the verdict block a wizard's last step
   renders. A STATE, not a tone: it is composed WITH one of the four --tone
   modifiers above, never instead of one. The AICMS original is driven by a
   runtime ng-class tone map - four branches over vm.getDerivedTier() setting
   is-danger/is-warning/is-info/is-success, in
   Areas/AICMS/Views/Modal/AiClassificationWizard.cshtml - so a `--result`
   modifier would collide with exactly the class the consumer is already
   switching. `.is-` is this file's state prefix - 42 other states use it.

   Replaces `.c2l .aicms-wizard-callout.is-result`
   (Areas/AICMS/Content/aicms-design.css, "Callout (info banner inside
   wizard)" block), which is exactly three declarations:
       .is-result        { font-size: var(--c2l-fs-md); }        -> 16px
       .is-result > .fa  { font-size: var(--c2l-fs-h3); }        -> 21px
       .is-result strong { font-size: var(--c2l-fs-xs);          -> 11px
                           text-transform: uppercase;
                           letter-spacing: .04em; }
   All three port onto this family's explicit children (.c2l-alert-icon for
   the `> .fa` hook, .c2l-alert-title for `strong`). `display: block` is the
   fourth declaration: AICMS's `strong` is block-level from the base callout
   rule, and without it the 11px uppercase eyebrow sits inline in FRONT of
   the verdict rather than above it, which is what this state is for.

   DOM CONTRACT - three parts, all required. This family hooks explicit
   classes where `.aicms-wizard-callout` hooks bare elements (`> .fa`,
   `strong`), so Phase E2 must add all three when it re-classes a callout:
       1. the glyph needs   class="fa fa-... c2l-alert-icon"
       2. the label needs   class="c2l-alert-title"
       3. the label AND the verdict text must sit inside a wrapping
          <div class="c2l-alert-body">
   Part 3 is the one that looks optional and is not. The rules below use a
   DESCENDANT combinator, so an unwrapped .c2l-alert-title still picks up
   every typographic declaration - measured identical either way (11px,
   uppercase, .44px tracking). What breaks is layout: .c2l-alert is
   `display: flex`, so an unwrapped title and the verdict text node become
   two separate FLEX ITEMS on the main axis. `display` still computes to
   `block`, but a flex item's display does not produce block flow, so the
   eyebrow renders BESIDE the verdict instead of above it. Measured on the
   shipped demo block: wrapped, the verdict sits at the eyebrow's own left
   edge one line down; unwrapped, about 128px to its right on the same line.

   TINT DECISION (E1 T3 - on the phase sign-off list). `.is-result` RESTORES
   a per-tone tint, which the base .c2l-alert deliberately does not carry.
   Every AICMS callout is tinted; this family is flat except --err (#fff7f8),
   and flat is right for a notice. This state is not a notice - it is a
   compliance VERDICT ("Prohibited Practice - cannot proceed"), and the wash
   is what makes the four tiers readable at a glance. The change is confined
   to .is-result: the 19 ordinary callouts Phase E2 migrates stay flat, and
   only --err's existing tint is restated (#fff7f8 -> a 7% wash of the same
   danger accent, so all four tones wash at one strength).

   NOT ported, deliberately: AICMS also colors its `strong` by tone
   (--c2l-orange on white is about 2.2:1 at 11px). Tone is already carried by
   the left border, the icon and now the tint, so the eyebrow keeps
   .c2l-alert-title's --c2l-fg-1 rather than inheriting an a11y problem.
   Border width (3px, vs the AICMS callout's 4px) and padding are family
   values and stay family values - they are not is-result's to change. */
.c2l .c2l-alert.is-result {
    background: var(--c2l-alert-tint, var(--c2l-secondary-tint));
    font-size: var(--c2l-fs-md);
}

.c2l .c2l-alert.is-result .c2l-alert-icon { font-size: var(--c2l-fs-h3); }

.c2l .c2l-alert.is-result .c2l-alert-title {
    display: block;
    font-size: var(--c2l-fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* ===== END Task 12 opt-in toast/alert ===== */

/* ---------- CP-21 checklist + derived-answer (Task 14, FRIA wizard step 1) ----------
   New atoms for a derived-criteria list (fired/not-fired/unknown legs, each with its
   evidence rows and a link back to the record) and the one-line derived-answer summary
   below it. Both are AICMS-first but generic enough for any "derived from the record"
   step. Every color comes off an existing --c2l-* token - no raw hex. */
.c2l .c2l-checklist {
    list-style: none;
    margin: var(--c2l-space-lg) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--c2l-space-sm);
}

.c2l .c2l-checklist-item {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: start;
    gap: var(--c2l-space-sm);
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    background: var(--c2l-surface-2);
}

.c2l .c2l-checklist-item > .fa {
    margin-top: 2px;
    color: var(--c2l-fg-3);
}

.c2l .c2l-checklist-item--on > .fa { color: var(--c2l-tertiary); }
.c2l .c2l-checklist-item--unknown > .fa { color: var(--c2l-orange); }

.c2l .c2l-checklist-label {
    font-weight: 600;
    color: var(--c2l-fg-1);
}

.c2l .c2l-checklist-evidence {
    grid-column: 2 / 3;
    list-style: none;
    margin: var(--c2l-space-sm) 0 0;
    padding: 0;
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-3);
}

.c2l .c2l-derived-answer {
    margin: var(--c2l-space-md) 0 var(--c2l-space-lg);
    font-size: var(--c2l-fs-md);
    color: var(--c2l-fg-1);
}
/* ===== END CP-21 checklist + derived-answer ===== */

/* ---------- D-1 datepicker popup theming (uib-datepicker) ---------- */
.c2l .c2l-datepicker .c2l-datepicker-toggle {
    color: var(--c2l-secondary);
}

.c2l .uib-datepicker-popup.dropdown-menu {
    border-radius: var(--c2l-radius-sm);
    box-shadow: var(--c2l-shadow-dropdown);
    border: 1px solid var(--c2l-border);
}

.c2l .uib-datepicker .btn.active,
.c2l .uib-datepicker .btn.active:hover {
    background-color: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}

/* ---------- MD-1, MD-3 modal scaffold ---------- */
.c2l .c2l-modal h1 {
    margin: 0 0 var(--c2l-space-md);
    font-size: var(--c2l-fs-modal-title);
    font-weight: var(--c2l-fw-thin);
    color: var(--c2l-fg-1);
}

.c2l .c2l-modal h1 strong {
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-semibold);
}

.c2l .c2l-modal-eyebrow {
    display: block;
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c2l-secondary-text);  /* --c2l-secondary is 2.64:1 on white; axe color-contrast, AICMS tour 2026-10-21 */
}

/* Task 8 removed the ".c2l-modal-destructive .c2l-modal-eyebrow" rule that
   used to live here: DestructiveConfirm.cshtml's eyebrow moved into the
   shared .c2l-modal-hd block (c2l-modal-hd-eyebrow, below) as part of
   porting the MD-2 header, so no element inside .c2l-modal-destructive
   carried .c2l-modal-eyebrow any more and the rule matched nothing.
   Final pre-merge fix wave (whole-branch review, I-1): the now-inert
   .c2l-modal-destructive class itself was confirmed unused anywhere else
   in the repo (grepped) and dropped from DestructiveConfirm.cshtml's root
   element too, rather than left as a dead hook with nothing pointing at
   it. */

.c2l .c2l-modal-consequences {
    list-style: none;
    margin: 0 0 var(--c2l-space-md);
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    background: var(--c2l-surface-2);
    border-left: 3px solid var(--c2l-danger-accent);
    border-radius: var(--c2l-radius-xs);
}

.c2l .c2l-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--c2l-space-sm);
    margin-top: var(--c2l-space-lg);
    padding-top: var(--c2l-space-md);
    border-top: 1px solid var(--c2l-separator);
}

.c2l .c2l-modal-btn-ghost {
    color: var(--c2l-fg-3);
    background: transparent;
    border: 1px solid var(--c2l-border);
}

.c2l .c2l-modal-btn-ghost:hover {
    color: var(--c2l-fg-1);
    border-color: var(--c2l-border-strong);
}

/* Task 8 (MD-2 destructive confirm) restructures the footer to a
   left-aligned persistent warning meta + the existing right-aligned button
   group, ported from modal-showcase.css .ms-ft-meta (line 141). Chosen
   implementation deliberately does NOT touch .c2l-modal-footer's own
   justify-content (kept flex-end, above) - MD-4's current sheet demo
   (Discard/Publish) and MD-5's current wizard demo (Cancel/Back/Continue)
   are unwrapped multi-button footers with no meta element; switching the
   shared rule to justify-content: space-between would immediately scatter
   those buttons apart (a real regression, not a hypothetical one) before
   Tasks 9/10 ever touch their own templates. Instead, margin-right: auto on
   THIS class alone absorbs all free space to its right, pushing every
   sibling after it (however many) flush to the flex-end edge - visually
   identical to "meta + space-between" for this shape, but purely additive:
   a footer that never adds this class renders exactly as before.
   Structural properties (layout, gap, size) live in the base class, which
   is intentionally NOT danger-colored - Tasks 9/10 may want a left meta
   note that is not a warning. --danger is the one tone this task actually
   needs; no other tone is built (nobody has asked for one yet). Reuses
   --c2l-danger-gradient-from (#BF0500) - the SAME token the danger header
   gradient/icon already use above - matching the reference's #BF0500
   .ms-ft-meta color exactly, not a duplicated literal. 12.5px font-size has
   no matching token (delta vs --c2l-fs-sm's 12px is the same 0.5px margin
   already accepted for .c2l-modal-hd-desc's 13.5px vs --c2l-fs-base's 14px
   above), so it stays literal, same convention. */
.c2l .c2l-modal-footer-meta {
    display: flex;
    align-items: center;
    gap: var(--c2l-space-xs);
    margin-right: auto;
    font-size: 12.5px;
}

.c2l .c2l-modal-footer-meta--danger {
    color: var(--c2l-danger-gradient-from);
}

/* Task 9 (MD-4 side sheet, punch-list item 3) is the "left meta note that is
   not a warning" the comment above anticipated: a left-aligned "Help" link
   button. It reuses .c2l-modal-footer-meta directly for STRUCTURE (flex,
   gap, the margin-right: auto that pins it left and packs Discard/Save as
   draft/Publish to the right at the footer's own gap - exactly the mechanism
   Task 8 built, no change to it here) rather than duplicating that layout.
   But .c2l-modal-footer-meta alone renders as plain, non-interactive text
   (correct for DestructiveConfirm's static warning <span> above) - Help is a
   clickable <button>, so this sibling class layers on the "looks and behaves
   like a link" skin: no border/background (an ordinary Bootstrap .btn has
   both) and a hover color, ported from the reference's .btn--link (line 152)
   /.btn--link:hover (line 153). Resting color reuses --c2l-fg-3 - the SAME
   token .c2l-modal-btn-ghost (above) already rests at, so Help sits at the
   same visual weight as the ghost buttons on the other side of the footer.
   Hover color #470544 -> --c2l-primary (exact), matching the reference
   exactly rather than reusing --c2l-fg-1 (.c2l-modal-btn-ghost's own hover,
   a neutral darken) - a link's hover state is conventionally the brand
   color, not just "darker", and the reference draws that distinction too
   (.btn--ghost:hover stays neutral #cfd5da/#fafbfc; .btn--link:hover jumps
   straight to #470544). */
.c2l .c2l-modal-footer-help {
    background: transparent;
    border: 0;
    color: var(--c2l-fg-3);
}

.c2l .c2l-modal-footer-help:hover {
    color: var(--c2l-primary);
}

/* Task 9's "Save as draft" ghost-primary button, ported from the reference's
   .btn--ghost-primary/:hover (modal-showcase.css:150-151) - a third button
   weight between .c2l-modal-btn-ghost (neutral) and .btn-primary (solid),
   for an action that is neither as final as Publish nor as neutral as
   Discard. Hex-to-token: #fff resting background -> --c2l-surface (exact);
   #470544 resting text -> --c2l-primary (exact); #d9c3d8 resting border has
   no exact token, but --c2l-primary-tint-border (rgba(71, 5, 68, .10)) is
   already this file's established "soft primary border" token - reused by
   .c2l-badge--primary and two other blocks in this file - so reusing it here
   is consistent with existing practice rather than a new literal; #faf5fa
   hover background likewise has no exact token, but --c2l-primary-tint
   (rgba(71, 5, 68, .05), "pale primary tint") is that token's own declared
   purpose, so it is reused rather than duplicating .c2l-badge--primary's
   literal rgba(71, 5, 68, .08). #470544 hover border reuses --c2l-primary
   again, the same token the resting text already uses. */
.c2l .c2l-modal-btn-ghost-primary {
    color: var(--c2l-primary);
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-primary-tint-border);
}

.c2l .c2l-modal-btn-ghost-primary:hover {
    background: var(--c2l-primary-tint);
    border-color: var(--c2l-primary);
}

/* ngDialog's theme-default puts 1em of box padding on .ngdialog-content and
   the c2l scaffold pads again via .c2l-modal, so every c2lModals dialog was
   inset twice. The visible symptom is the footer: the shared
   .c2l-modal-footer rule draws its divider at the edge of whatever box
   contains it, and that box was the inner one - so the rule floated short
   of the modal's own edges on both sides instead of spanning it, and the
   header had no divider it could reach with either.
   Hand the padding to the scaffold: the host box goes to zero, .c2l-modal
   pads itself, and the footer bleeds back out to the full width as a real
   bar - the same three-band shape the MD-4 sheet builds explicitly.

   D-1 (REG item 5): app.css:7978-7984 ships a vendor
   ".ngdialog.ngdialog-theme-default .ngdialog-content" rule with
   "background-color: #fff !important" and "border-radius: 4px !important".
   !important always wins over a non-important declaration regardless of
   selector specificity, so a plain (non-!important) background/border-radius
   here is dead on arrival - proven by the pre-existing sibling rule at line
   280 (".ngdialog.ngdialog-theme-default.wide .ngdialog-content") which
   already declares both without !important and is inert today for the same
   reason. The className route (dropping "ngdialog-theme-default" from
   c2l-modal-host dialogs in c2lModals.js) was considered first per the task
   brief and rejected: c2l-components.css:292-315 keys its OWN close-X
   styling (position/size/the "x" glyph itself, via the vendor's :before
   content) off ".ngdialog.ngdialog-theme-default .ngdialog-close", and
   theme-default.css also supplies width:450px, position:relative (the close
   X's positioning context), the 160px top/bottom overlay padding, and the
   flyin/flyout entrance animation - none of which c2l-modal-host currently
   replaces. Forking all of that here to drop one class would be a much
   larger, higher-risk change than the ruling calls for. box-shadow has no
   competing vendor rule, so it does not need !important. No
   --c2l-shadow-modal token exists (grepped c2l-tokens.css); reusing the
   literal shared by the two other c2l modal surfaces that already draw this
   exact elevation (".wide .ngdialog-content" above and the MD-4 sheet host
   further below) keeps the shadow consistent across all modal chrome instead
   of introducing a fourth value or inventing a token this task wasn't asked
   to mint. */
.c2l .ngdialog.c2l-modal-host .ngdialog-content {
    max-width: calc(100vw - 2 * var(--c2l-space-lg));
    border-radius: var(--c2l-radius-modal) !important; /* counters app.css:7980 !important */
    padding: 0;
    overflow: hidden; /* keeps the bled-out footer inside the rounded corners */
    background: var(--c2l-surface) !important; /* counters app.css:7979 background-color !important */
    box-shadow: 0 24px 64px var(--c2l-primary-shadow), 0 2px 6px rgba(0, 0, 0, .06);
}

/* R04: a dialog taller than the viewport pushed its actions off-screen. The host
   box is capped to the viewport less the overlay gutter; .c2l-modal becomes the
   scroll container (its h1/.c2l-modal-hd header band scrolls with the body) and
   the footer bar sticks to the bottom edge. Sheets (full-height drawers) and
   wizards' own structure are untouched by the :not(.c2l-modal-sheet) guard. */
.c2l .ngdialog.c2l-modal-host:not(.c2l-modal-sheet) {
    padding-top: var(--c2l-space-2xl);
    padding-bottom: var(--c2l-space-2xl);
    box-sizing: border-box;
}

.c2l .ngdialog.c2l-modal-host:not(.c2l-modal-sheet) .ngdialog-content {
    max-height: calc(100vh - 2 * var(--c2l-space-2xl));
    display: flex;
    flex-direction: column;
}

.c2l .ngdialog.c2l-modal-host:not(.c2l-modal-sheet) .ngdialog-content > .c2l-modal {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
}

/* The footer's -lg bottom margin bleeds it over the container padding; the
   matching negative sticky inset keeps its border box flush with the
   scrollport edge (measured in the browser: +lg left a 2*lg gap). */
.c2l .ngdialog.c2l-modal-host:not(.c2l-modal-sheet) .c2l-modal > .c2l-modal-footer {
    position: sticky;
    bottom: calc(-1 * var(--c2l-space-lg));
    z-index: 2;
}

.c2l .ngdialog.c2l-modal-host .c2l-modal {
    padding: var(--c2l-space-lg);
}

.c2l .ngdialog.c2l-modal-host .c2l-modal > .c2l-modal-footer {
    margin: var(--c2l-space-lg) calc(-1 * var(--c2l-space-lg)) calc(-1 * var(--c2l-space-lg));
    padding: var(--c2l-space-md) var(--c2l-space-lg);
    background: var(--c2l-surface-footer);
}

/* Matching header band, so the two ends of the modal are built the same way. */
.c2l .ngdialog.c2l-modal-host .c2l-modal > h1 {
    margin: calc(-1 * var(--c2l-space-lg)) calc(-1 * var(--c2l-space-lg)) var(--c2l-space-lg);
    padding: var(--c2l-space-lg) var(--c2l-space-2xl) var(--c2l-space-md) var(--c2l-space-lg);
    border-bottom: 1px solid var(--c2l-border);
}

/* Task 8's own host-level bleed for the shared .c2l-modal-hd block (see the
   "MD-2/4/5 shared modal header block" comment further below for the
   content-level rules this bleeds). Same recipe as the > h1 rule directly
   above: cancel .c2l-modal's own 16px ambient padding on top/left/right via
   negative margin, then re-pad (extra on the right to clear ngDialog's
   stock close X). Left DELIBERATELY untouched: .c2l-modal-hd's own
   padding-bottom/margin-bottom/border-bottom/gradient (content-level rules
   below) - those already give the correct vertical rhythm before the body
   and the correct divider/gradient look, so this rule only adds the
   missing top/left/right bleed geometry, exactly like the existing
   .c2l-modal-footer host rule above leaves that block's own border-top
   alone and only adds margin/padding/background.
   :not(.c2l-modal-sheet) is required, not optional: this selector's
   ancestor otherwise matches ANY .c2l-modal-host element, including one
   that also carries .c2l-modal-sheet (openSheet only ADDS a className, it
   never drops c2l-modal-host - see c2lModals.js). The sheet's own
   .c2l-modal band (further below, "MD-4 side sheet") already bakes its
   full asymmetric header padding directly onto .c2l-modal itself - there is
   no ambient 16px padding there to cancel, so applying this rule's -16px
   margins in sheet mode would blow through into the wrong space the moment
   Task 9 adds a .c2l-modal-hd to the sheet template. Excluding it now means
   Task 9 starts from a correct baseline instead of inheriting a landmine.
   .c2l-modal-wide (MD-5) is deliberately NOT excluded: it shares the exact
   same uniform-16px-padding .c2l-modal as the regular/compact host (only
   .ngdialog-content's width differs, further below), so Task 10 gets this
   bleed for free. */
.c2l .ngdialog.c2l-modal-host:not(.c2l-modal-sheet) .c2l-modal > .c2l-modal-hd {
    margin-top: calc(-1 * var(--c2l-space-lg));
    margin-left: calc(-1 * var(--c2l-space-lg));
    margin-right: calc(-1 * var(--c2l-space-lg));
    padding-top: var(--c2l-space-lg);
    padding-left: var(--c2l-space-lg);
    padding-right: var(--c2l-space-2xl);
}

.c2l .ngdialog.c2l-modal-host:not(.c2l-modal-sheet) .c2l-modal > .c2l-modal-hd,
.c2l .ngdialog.c2l-modal-host:not(.c2l-modal-sheet) .c2l-modal > h1 {
    /* Item 12: header (title + clear of the close X) stays at the top of the
       scrolling .c2l-modal. Negative inset = the header's own bleed margin, so
       it pins flush to the scrollport edge (same trick as the footer above). */
    position: sticky;
    top: calc(-1 * var(--c2l-space-lg));
    z-index: 3;
    background: var(--c2l-surface);
}

.c2l .ngdialog.c2l-modal-host.c2l-modal-compact .ngdialog-content {
    max-width: min(420px, calc(100vw - 2 * var(--c2l-space-lg)));
}

/* ngDialog-theme-default.css applies its flyin/flyout keyframes to
   .ngdialog.ngdialog-theme-default unconditionally - every c2lModals
   variant carries that class alongside c2l-modal-host (c2lModals.js), so
   without this override every modal (openEdit/openCreate/openWizard/
   confirmDestructive) ignored the user's reduced-motion preference. Only
   the MD-4 sheet variant had its own override; this closes the gap for the
   rest of the family. */
@media (prefers-reduced-motion: reduce) {
    .c2l .ngdialog.c2l-modal-host,
    .c2l .ngdialog.c2l-modal-host.ngdialog-closing {
        animation: none;
    }
}

/* ---------- MD-2/4/5 shared modal header block (c2l-modal-hd) ----------
   Ported from design-mirror-final:docs/design/showcase/modal-patterns/modal-showcase.css
   .ms-hd/.ms-hd-ico block (lines 111-131). Feeds Task 8 (MD-2
   DestructiveConfirm.cshtml), Task 9 (MD-4 mdSheetDemo.html template) and
   Task 10 (MD-5 mdWizardDemo.html template) - CSS ONLY here, no template
   switches over to it in this task. Markup shape a consumer emits:

     <div class="c2l-modal-hd c2l-modal-hd--{danger|primary|neutral}">
         <span class="c2l-modal-hd-ico" aria-hidden="true"><i class="fa fa-..."></i></span>
         <div class="c2l-modal-hd-text">
             <span class="c2l-modal-hd-eyebrow">Eyebrow</span>
             <h1 class="c2l-modal-hd-title">Title <span class="c2l-modal-hd-title-accent">accent</span></h1>
             <p class="c2l-modal-hd-desc">Optional description line (omit the element entirely if unused).</p>
         </div>
     </div>

   Fix round 1 correction: the base rule below now DEFAULTS to the
   primary/neutral look (gradient + icon-chip tint + color), matching what
   the reference actually does - .ms-hd::before and .ms-hd-ico both carry
   the primary look as their base rule (modal-showcase.css:113,119), with
   .ms-hd--tone-primary/.ms--tone-primary being pure no-op duplicates of
   that default. An earlier version of this comment claimed the opposite
   (colorless base, "fail visibly" if a tone modifier is omitted) - that was
   wrong about what it was porting and has been reversed here.

   Consequence for the tone modifiers:
     - .c2l-modal-hd--primary is a DELIBERATE NO-OP - it matches the
       reference's own .ms-hd--tone-primary/.ms--tone-primary, which also
       changed nothing versus their base rule. No CSS selector for it
       appears below; do not "restore" one, and do not delete the class
       from markup thinking it is dead - callers may still write it for
       self-documentation (an explicit "this is the primary tone" marker in
       the HTML), it just never matches a rule of its own.
     - .c2l-modal-hd--neutral genuinely differs from the default in exactly
       one place: the icon-chip background swaps from the primary tint
       (--c2l-primary-bg-soft) to a plain neutral fill (--c2l-surface-2).
       Its gradient bar is identical to the default/primary gradient (true
       in the reference too - .ms-hd--tone-neutral::before and
       .ms-hd--tone-primary::before are the same declaration), so
       .c2l-modal-hd--neutral carries only an icon-chip rule, no ::before
       rule of its own.
     - .c2l-modal-hd--danger is the only tone that overrides both the
       gradient and the icon chip.
   Net effect: omitting every tone modifier, or writing --primary, renders
   the same default (primary) look - never a colorless/broken state. Only
   --danger and --neutral produce a visibly different rendering.

   Two simplifications versus the reference, both because this codebase's
   modal scaffold does not need what they existed for:
     - The reference keeps two tone-class tiers (.ms-hd--tone-X on the
       header row for the gradient bar, .ms--tone-X on an outer ancestor for
       the icon chip) that always paired 1:1 in every demo. Collapsed here
       into one modifier living on .c2l-modal-hd itself.
     - The reference wraps icon+text in an inner .ms-hd-l flex row so a
       third sibling (.ms-x close button) could share the outer flex row.
       ngDialog's own close X is positioned independently of this block, so
       icon and text are direct flex children of .c2l-modal-hd - no extra
       wrapper level.
   Only the danger/primary/neutral tones the brief named are built; the
   reference's fourth tone (.ms-hd--tone-success) is out of scope.

   This rule is deliberately host-agnostic (no bleed-margin assumption),
   mirroring how .c2l-modal h1 (content-level, above) and
   .c2l-modal-host .c2l-modal > h1 (host-level bleed, above) are already
   split in this file. Tasks 8/9/10 add their own host-level integration
   selector, same pattern as the existing > h1 rules, only if edge-to-edge
   bleed is wanted in a given host.

   Hex-to-token mapping (verified against Content/design/c2l-tokens.css):
     #f0f2f4 divider/gradient host  -> --c2l-separator (exact)
     #470544 / #4CACBE primary-neutral gradient + icon/title color
                                     -> --c2l-primary / --c2l-secondary (exact)
     #BF0500 / #F0110B danger gradient -> --c2l-danger-gradient-from /
                                           --c2l-danger-gradient-to (exact)
     #98a0a4 eyebrow                -> --c2l-fg-muted (exact)
     #656565 description            -> --c2l-fg-4 (exact)
     #edf1f2 neutral icon bg        -> --c2l-surface-2 (exact)
     22px title size -> --c2l-fs-modal-title; 1.2 line-height -> --c2l-lh-tight;
     500 title weight -> --c2l-fw-medium; 300 accent weight -> --c2l-fw-thin;
     18px icon glyph -> --c2l-fs-lead; 11px eyebrow -> --c2l-fs-xs; 700
     eyebrow weight -> --c2l-fw-bold; 2px gradient-bar radius -> --c2l-radius-xs
     (all exact).
   Fix round 1 correction: #f8eef7 (primary icon bg) has no exact-hex token,
   but --c2l-primary-bg-soft (#f9f3f9) is closer on every channel
   (delta +1,+5,+2 vs rgb(248,238,247)) than the first pass's
   --c2l-primary-icon-bg (rgba(71,5,68,.08), which composites to roughly
   rgb(240,235,240) over --c2l-surface - delta +8,+3,+7 - AND shifts if the
   chip ever sits on a non-white surface, since it is translucent while
   --c2l-primary-bg-soft is opaque). Checked --c2l-primary-bg-soft's
   existing semantic before reusing it: today it backs four "is-selected /
   is-checked / is-highlighted / has-selected" STATE classes
   (.c2l-eselect-item.is-selected, .c2l-checkbox-grid-cell.is-checked,
   .c2l-transfer-item.is-highlighted, .c2l-eselect-group-count.has-selected)
   - always gated by a state modifier, never a resting-state default. This
   icon chip is the first non-state, always-on consumer, but --c2l-surface-2
   already sets that precedent the other way (used for both static panel
   fills and interactive hover backgrounds elsewhere in this file) - a
   design token being shared across a state role and a static role is
   already normal practice here, not a new risk this file has not already
   taken. Reuse, not a literal, is the right call given the closer,
   surface-independent color match. #fde8e8 (danger icon bg) has no token
   at all and stays literal, the same convention already used for other
   untokenized prototype colors in this file (#ced4da etc). The danger icon
   glyph color reuses --c2l-danger-gradient-from directly - the SAME
   variable the gradient uses, not a duplicated literal, so the two can
   never drift out of sync.
   14px icon-to-text gap, 2px eyebrow margin, 6px desc margin, 13.5px desc
   size, 1.5 desc line-height, -.005em title tracking and .08em eyebrow
   tracking have no matching token and stay literal, the same call already
   made for irregular geometry elsewhere in this file (e.g.
   .c2l-panel-chip-icon's 6px radius, .c2l-panel-chip-subtitle's 2px
   margin). 10px icon-chip radius likewise stays literal - --c2l-radius-lg
   is an unrelated em-based orphan, not a px scale this chip can borrow. */
.c2l .c2l-modal-hd {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: var(--c2l-space-sm);
    margin-bottom: var(--c2l-space-md);
    border-bottom: 1px solid var(--c2l-separator);
}

.c2l .c2l-modal-hd::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: var(--c2l-radius-xs);
    opacity: .85;
    background: linear-gradient(to right, var(--c2l-primary) 0%, var(--c2l-secondary) 60%, transparent 100%);
}

.c2l .c2l-modal-hd--danger::before {
    background: linear-gradient(to right, var(--c2l-danger-gradient-from) 0%, var(--c2l-danger-gradient-to) 60%, transparent 100%);
}

.c2l .c2l-modal-hd-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--c2l-fs-lead);
    background: var(--c2l-primary-bg-soft);
    color: var(--c2l-primary);
}

.c2l .c2l-modal-hd--danger .c2l-modal-hd-ico {
    background: #fde8e8;
    color: var(--c2l-danger-gradient-from);
}

.c2l .c2l-modal-hd--neutral .c2l-modal-hd-ico {
    background: var(--c2l-surface-2);
    color: var(--c2l-primary);
}

.c2l .c2l-modal-hd-text {
    flex: 1;
    min-width: 0;
}

.c2l .c2l-modal-hd-eyebrow {
    display: block;
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c2l-fg-muted);
    margin-bottom: 2px;
}

.c2l .c2l-modal-hd-title {
    margin: 0;
    font-size: var(--c2l-fs-modal-title);
    font-weight: var(--c2l-fw-medium);
    line-height: var(--c2l-lh-tight);
    letter-spacing: -.005em;
    color: var(--c2l-primary);
}

.c2l .c2l-modal-hd-title-accent {
    font-weight: var(--c2l-fw-thin);
    color: var(--c2l-secondary);
}

.c2l .c2l-modal-hd-desc {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c2l-fg-4);
}

/* ---------- CP-7/CP-8 entity selects ---------- */
.c2l .c2l-eselect {
    position: relative;
}

.c2l .c2l-eselect-trigger {
    display: flex;
    align-items: center;
    gap: var(--c2l-space-sm);
    min-height: var(--c2l-control-h, 34px);
    padding: 6px var(--c2l-space-sm);
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    cursor: pointer;
    transition: border-color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                box-shadow var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

.c2l .c2l-eselect-trigger:focus,
.c2l .c2l-eselect.is-open .c2l-eselect-trigger {
    outline: none;
    border-color: var(--c2l-secondary);
    box-shadow: 0 0 0 3px var(--c2l-secondary-bg-soft);
}

.c2l .c2l-eselect.is-disabled .c2l-eselect-trigger {
    background: var(--c2l-surface-2);
    cursor: not-allowed;
}

.c2l .c2l-eselect.is-readonly .c2l-eselect-trigger {
    border-style: dashed;
    cursor: default;
}

.c2l .c2l-eselect-value,
.c2l .c2l-eselect-placeholder {
    flex: 1;
    min-width: 0;
}

.c2l .c2l-eselect-placeholder {
    color: var(--c2l-fg-muted);
    font-style: italic;
}

.c2l .c2l-eselect-name {
    font-weight: var(--c2l-fw-semibold);
}

.c2l .c2l-eselect-desc,
.c2l .c2l-eselect-item-desc {
    display: block;
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-fg-4);
}

.c2l .c2l-eselect-clear {
    border: 0;
    background: transparent;
    color: var(--c2l-fg-4);
    padding: 0 4px;
    /* WCAG 2.2 SC 2.5.8 target size (24x24 CSS px): the glyph stays the same, only the hit area grows. */
    min-width: 24px;
    min-height: 24px;
    /* -2px vertical margin: the trigger's content box is 34 - 2 border - 12 padding = 20px, so a 24px button would grow a
       clearable select with a value to 38px. 24 - 2 - 2 = 20 leaves the trigger at its min-height with or without a
       value; under .c2l-uniform-controls (padding 0, content 32px) the button fits either way. */
    margin: -2px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Remove / clear glyph of the entity selects: the same typographic multiplication sign the filter row
   uses for its clear control (.c2l-filter-clear). Font Awesome's fa-times is a heavy stroke next to it; a text
   glyph keeps the design system's crisp hairline look and scales with the control's font size. */
.c2l .c2l-eselect-x,
.c2l .c2l-x {
    display: inline-block;
    font-size: 1.4em;
    font-weight: var(--c2l-fw-regular);
    line-height: 1;
    vertical-align: middle;
}

.c2l .c2l-eselect-clear:hover {
    color: var(--c2l-danger-accent);
}

.c2l .c2l-eselect-caret {
    color: var(--c2l-fg-4);
}

.c2l .c2l-eselect-panel {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    box-shadow: var(--c2l-shadow-dropdown);
}

.c2l .c2l-eselect-search {
    display: flex;
    align-items: center;
    gap: var(--c2l-space-sm);
    padding: var(--c2l-space-sm);
    background: var(--c2l-surface-2);
    border-bottom: 1px solid var(--c2l-border);
    color: var(--c2l-fg-4);
}

.c2l .c2l-eselect-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--c2l-secondary);
    border-radius: var(--c2l-radius-xs);
    padding: 4px 8px;
    outline: none;
}

/* W3-4 Step 4 (CP-8 inline-in-trigger search, opt-in search-inline): same
   node class as the panel's search block above, but rendered INSIDE the
   trigger row rather than as a boxed panel header - drop the panel's
   background/border/padding shell and let it sit flush among the chips,
   min-width: 0 so a long chip row can still shrink it instead of
   overflowing the trigger. */
.c2l .c2l-eselect-search--inline {
    padding: 0;
    background: transparent;
    border-bottom: 0;
    flex: 1 1 auto;
    min-width: 60px;
}

.c2l .c2l-eselect-search--inline input {
    border: 0;
    padding: 2px 0;
    min-width: 0;
}

.c2l .c2l-eselect-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
}

.c2l .c2l-eselect-item {
    padding: 6px var(--c2l-space-sm);
    cursor: pointer;
    border-left: 3px solid transparent;
}

/* Hover and keyboard-focus are two different intensities of the same cyan
   wash, per the reference prototype (forms.css .m-chip .opt:hover /
   .opt.focused). Both used to share --c2l-secondary-bg-soft (#A9E1EC), an
   OPAQUE fill - far too saturated for a row you are merely pointing at, and
   it left hover and focus indistinguishable. Translucent so the selected
   tint underneath still reads through. */
.c2l .c2l-eselect-item:hover {
    background: rgba(76, 172, 190, .08);
}

.c2l .c2l-eselect-item.is-focused {
    background: rgba(76, 172, 190, .16);
    border-left-color: var(--c2l-secondary);
}

.c2l .c2l-eselect-item.is-selected {
    background: var(--c2l-primary-bg-soft);
}

.c2l .c2l-eselect-item.is-option-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.c2l .c2l-eselect-item-name {
    font-weight: var(--c2l-fw-semibold);
}

/* Multi-select rows that carry an icon: the icon is the row's identity, so it sits left as a
   34px medallion and the checkbox moves to a quiet trailing slot. Without a description the
   row centres on one line; with one the medallion top-aligns against name + description.
   Rows without an icon keep the plain checkbox-left layout above. Grid, so it does not
   depend on DOM order (checkbox, icon, name, description). */
.c2l .c2l-eselect-item.has-ico {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    column-gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: var(--c2l-space-sm) var(--c2l-space-md) var(--c2l-space-sm) 9px; /* 9 + 3px border = 12 */
}
.c2l .c2l-eselect-item.has-ico .c2l-eselect-ico {
    grid-column: 1;
    grid-row: 1;
    width: 34px;
    height: 34px;
    font-size: 16px;
    border-radius: 6px;
}
.c2l .c2l-eselect-item.has-ico .c2l-eselect-item-name { grid-column: 2; grid-row: 1; }
.c2l .c2l-eselect-item.has-ico .c2l-eselect-checkbox { grid-column: 3; grid-row: 1; margin: 0; }
.c2l .c2l-eselect-item.has-ico.has-desc {
    align-items: start;
    padding-top: var(--c2l-space-md);
    padding-bottom: var(--c2l-space-md);
}
.c2l .c2l-eselect-item.has-ico.has-desc .c2l-eselect-ico { grid-row: 1 / span 2; }
.c2l .c2l-eselect-item.has-ico .c2l-eselect-item-desc {
    grid-column: 2;
    grid-row: 2;
    margin-top: 2px;
    line-height: 1.35;
    white-space: normal;
}
/* Cap the first-line height of name and checkbox to one text line so they align when the row is top-aligned. */
.c2l .c2l-eselect-item.has-ico.has-desc .c2l-eselect-checkbox { margin-top: 2px; }

.c2l .c2l-eselect-empty {
    padding: var(--c2l-space-lg);
    text-align: center;
    color: var(--c2l-fg-4);
}

.c2l .c2l-eselect-empty a {
    display: block;
    margin-top: var(--c2l-space-xs);
}

.c2l .c2l-eselect-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--c2l-space-xs) var(--c2l-space-sm);
    border-top: 1px solid var(--c2l-border);
    font-size: var(--c2l-fs-sm);
    /* Reference gives the summary bar its own grey plane so it reads as
       chrome rather than as one more option row (forms.css .m-chip .footer,
       #fafbfc - the exact value behind --c2l-surface-footer). */
    background: var(--c2l-surface-footer);
}

.c2l .c2l-eselect-footer-value.is-muted {
    color: var(--c2l-fg-muted);
}

/* ---------- CP-8 multi-select chips (Tag shape) ---------- */
.c2l .c2l-eselect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.c2l .c2l-eselect-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 8px;
    /* Translucent cyan, not the opaque --c2l-secondary-bg-soft fill: a row
       of chips at #A9E1EC overwhelmed the trigger it sits in. Values from
       the reference prototype (forms.css .m-chip .chip). */
    background: rgba(76, 172, 190, .12);
    border: 1px solid rgba(76, 172, 190, .4);
    border-radius: var(--c2l-radius-xs);
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-primary);
}

/* Option / chip / selected-value icon chip - the `.opt-ico` atom from the
   reference prototype (design-mirror-final:docs/design/showcase/form-layouts/forms.css:429).
   The glyph sits in a tinted rounded square instead of floating bare
   against the row. The variant class comes straight from
   optionsConfig.colorField via ng-class, so an option carrying no colour
   still gets the neutral chip rather than no chip at all. */
.c2l .c2l-eselect-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--c2l-radius-sm);
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-3);
    font-size: 11px;
    flex-shrink: 0;
}

.c2l .c2l-eselect-ico.plum   { background: rgba(71, 5, 68, .12);    color: var(--c2l-primary); }
.c2l .c2l-eselect-ico.cyan   { background: rgba(76, 172, 190, .18); color: var(--c2l-secondary); }
.c2l .c2l-eselect-ico.green  { background: rgba(26, 179, 148, .16); color: var(--c2l-tertiary); }
.c2l .c2l-eselect-ico.orange { background: rgba(242, 148, 0, .16);  color: var(--c2l-orange); }
.c2l .c2l-eselect-ico.purple { background: rgba(129, 25, 127, .14); color: var(--c2l-purple); }
.c2l .c2l-eselect-ico.blue   { background: rgba(0, 106, 179, .14);  color: var(--c2l-blue-light); }
.c2l .c2l-eselect-ico.red    { background: rgba(226, 0, 26, .12);   color: var(--c2l-red); }
/* Configuration entities (AiConfigurationEntity.ColorClass) store Bootstrap contextual classes.
   Map them onto the same tints so a stage's colour code shows in the picker; text-muted keeps
   the neutral default. */
.c2l .c2l-eselect-ico.text-primary { background: rgba(71, 5, 68, .12);    color: var(--c2l-primary); }
.c2l .c2l-eselect-ico.text-info    { background: rgba(76, 172, 190, .18); color: var(--c2l-secondary); }
.c2l .c2l-eselect-ico.text-success { background: rgba(26, 179, 148, .16); color: var(--c2l-tertiary); }
.c2l .c2l-eselect-ico.text-warning { background: rgba(242, 148, 0, .16);  color: var(--c2l-orange); }
.c2l .c2l-eselect-ico.text-danger  { background: rgba(226, 0, 26, .12);   color: var(--c2l-red); }
/* Generated enum metadata (icon/color/description per member) uses the vv-text-* colour names. */
.c2l .c2l-eselect-ico.vv-text-primary    { background: rgba(71, 5, 68, .12);    color: var(--c2l-primary); }
.c2l .c2l-eselect-ico.vv-text-secundary,
.c2l .c2l-eselect-ico.vv-text-turquoise  { background: rgba(76, 172, 190, .18); color: var(--c2l-secondary); }
.c2l .c2l-eselect-ico.vv-text-tertiary,
.c2l .c2l-eselect-ico.vv-text-green      { background: rgba(26, 179, 148, .16); color: var(--c2l-tertiary); }
.c2l .c2l-eselect-ico.vv-text-orange,
.c2l .c2l-eselect-ico.vv-text-yellow     { background: rgba(242, 148, 0, .16);  color: var(--c2l-orange); }
.c2l .c2l-eselect-ico.vv-text-red        { background: rgba(226, 0, 26, .12);   color: var(--c2l-red); }
.c2l .c2l-eselect-ico.vv-text-blue,
.c2l .c2l-eselect-ico.vv-text-blue-light { background: rgba(0, 106, 179, .14);  color: var(--c2l-blue-light); }
.c2l .c2l-eselect-ico.vv-text-purple     { background: rgba(129, 25, 127, .14); color: var(--c2l-purple); }

/* Chips run a tighter rhythm than dropdown rows - the reference applies the
   same override inline on the chip's copy of the atom. */
.c2l .c2l-eselect-chip .c2l-eselect-ico {
    width: 14px;
    height: 14px;
    font-size: 9px;
}

.c2l .c2l-eselect-chip-remove {
    border: 0;
    background: transparent;
    border-left: 1px solid var(--c2l-secondary-soft);
    color: var(--c2l-fg-4);
    padding: 0 2px 0 6px;
}

.c2l .c2l-eselect-chip-remove:hover {
    color: var(--c2l-danger-accent);
}

/* W3-2 Step 1 (CP-8 chip focus ring, closes the COMPONENTS.md "deferred:
   chip focus ring" note). .c2l-eselect-chip itself is a <span> with no
   tabindex - the genuinely focusable, keyboard-reachable part of a chip is
   this native <button>, which had a :hover treatment but no :focus-visible
   ring, leaving a Tab-ing keyboard user with no visible indicator of which
   chip's remove control was about to activate. House ring values, same
   outline shape used elsewhere for chip-adjacent controls in this file. */
.c2l .c2l-eselect-chip-remove:focus-visible {
    outline: 2px solid var(--c2l-secondary);
    outline-offset: 1px;
}

.c2l .c2l-eselect.is-disabled .c2l-eselect-chip {
    opacity: 0.6;
}

.c2l .c2l-eselect-checkbox {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c2l-border-strong);
    border-radius: var(--c2l-radius-xs);
    background: var(--c2l-surface);
    margin-right: 6px;
    flex-shrink: 0;
}

.c2l .c2l-eselect-checkbox i {
    font-size: 10px;
    color: transparent;
}

.c2l .c2l-eselect-checkbox.is-checked {
    background: var(--c2l-primary);
    border-color: var(--c2l-primary);
}

.c2l .c2l-eselect-checkbox.is-checked i {
    color: var(--c2l-fg-on-primary);
}

/* ---------- CP-3 avatar (initials bubble) ---------- */
.c2l .c2l-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-secondary);
    color: var(--c2l-fg-on-primary);
    font-weight: var(--c2l-fw-semibold);
    font-size: var(--c2l-fs-sm);
    text-transform: uppercase;
}

.c2l .c2l-avatar-primary {
    background: var(--c2l-primary);
}

.c2l .c2l-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: var(--c2l-fs-xs);
}

/* =========================================================
   CP-2 badge / label atoms + collection-head atoms
   Promoted from aicms-design.css "Pills, badges, link cells" (originals stay
   until AICMS views migrate). Component-scoped badges: .c2l-field-badge WAS rebased onto this family in
   Phase D1 - it is now a modifier composed onto .c2l-badge, contributing
   spacing plus a LIGHTER font-weight that deliberately overrides the semibold
   below (see `.c2l .c2l-badge.c2l-field-badge` in the form-field block above;
   that selector is compound precisely so the override wins on specificity
   rather than on source order). .c2l-tab-badge, .c2l-panel-chip-badge and
   .c2l-eselect-chip are still independent.
   ========================================================= */
.c2l .c2l-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid var(--c2l-border-strong);
    border-radius: var(--c2l-radius-sm);
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-2);
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-semibold);
    white-space: nowrap;
}
.c2l .c2l-badge .fa { color: var(--c2l-fg-3); }
.c2l .c2l-badge--primary {
    border-color: var(--c2l-primary-tint-border);
    background: rgba(71, 5, 68, .08);
    color: var(--c2l-primary);
}
.c2l .c2l-badge--secondary {
    border-color: var(--c2l-secondary-tint-border);
    background: var(--c2l-secondary-bg-soft);
    color: #1b6170;
}
/* --c2l-orange-deep / --c2l-green-deep, not the old #a35e00 / #2d7a1e: axe-core measured those
   two at 4.21:1 and 4.42:1 against their OWN tint washes on the live app (T4 a11y ratchet,
   2026-08-26 - the composite is #f5e9d7 / #dfede1 once the .14/.12 wash lands on the page
   surface, not the white this pair was originally eyeballed against). Both cleared 4.5:1 on
   plain white, which is why the shortfall went unnoticed. The deep tokens measure >= 5.1:1 on
   the washes and keep the same amber / forest reading. */
.c2l .c2l-badge--warning {
    border-color: rgba(242, 148, 0, .35);
    background: rgba(242, 148, 0, .14);
    color: var(--c2l-orange-deep);
}
.c2l .c2l-badge--danger {
    border-color: var(--c2l-red-deep);
    background: var(--c2l-red-deep);
    color: var(--c2l-fg-on-primary);
}
.c2l .c2l-badge--success {
    border-color: rgba(65, 166, 42, .35);
    background: rgba(65, 166, 42, .12);
    color: var(--c2l-green-deep);
}
.c2l .c2l-badge--info {
    border-color: rgba(0, 106, 179, .35);
    background: rgba(0, 106, 179, .10);
    color: var(--c2l-info-text);  /* --c2l-blue-light is 4.35:1 on the wash over #edf1f2 */
}
.c2l .c2l-badge--pill {
    border-radius: 999px;
    padding: 4px 10px;
}
.c2l .c2l-badge--tag {
    font-family: var(--c2l-font-mono);
    padding: 1px 6px;
    letter-spacing: 0;
}
.c2l .c2l-badge.is-on {
    border-color: var(--c2l-secondary);
    background: var(--c2l-secondary-bg-soft);
    color: var(--c2l-primary);
}
.c2l .c2l-badge.is-alert {
    border-color: var(--c2l-orange);
    background: rgba(242, 148, 0, .14);
    color: var(--c2l-orange-deep);
}

/* CP-2 table link-cell text treatments (generic subset) */
.c2l .c2l-cell-link {
    color: var(--c2l-fg-1);
    font-size: var(--c2l-fs-base);
}
.c2l .c2l-cell-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--c2l-space-sm);
    color: var(--c2l-fg-4);
    font-size: var(--c2l-fs-xs);
}
.c2l .c2l-cell-numeric {
    color: var(--c2l-fg-3);
    font-size: var(--c2l-fs-sm);
    font-variant-numeric: tabular-nums;
}

/* Shared collection header (C-1/C-2/C-3 family; ported from forms.css .c-head) */
.c2l .c2l-collection-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.c2l .c2l-collection-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--c2l-fg-1);
}
/* CP-2 consolidation audit (Task W3-6 Step 3, 2026-08): NOT a true
   duplicate of .c2l-badge/.c2l-badge--pill - this is a fixed 22x22 circular
   counter (min-width/height, justify-content:center, no border), not the
   atom's text-length-driven inline chip; background is a solid
   --c2l-primary rather than the atom's neutral surface, and font-weight is
   a literal 700 rather than the --c2l-fw-semibold token. Left independent
   by design; not rebased. */
.c2l .c2l-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    font-size: 11px;
    font-weight: 700;
}

/* ---------- S-2 airy-underline form atom ----------
   Ported from design-mirror-final:docs/design/showcase/form-layouts (forms.css .s-airy block,
   forms-scalar.jsx ScalarAiry): eyebrow label over a borderless,
   surface-filled control with a 1px cyan bottom border; focus swaps the fill
   to white and thickens the underline to 2px primary (padding compensation
   keeps the row height fixed). Wrapper-class atom over the existing
   c2lField* DOM - same mechanism as .c2l-form-inline (S-3) above: no
   directive changes. Prototype literals tokenized: #fff -> --c2l-surface;
   #f2f3f5 (disabled fill) -> --c2l-separator (#f0f2f4, nearest existing
   token - no new token minted for a single consumer). The [disabled] rules
   target raw .form-control markup dropped directly into the wrapper (plain
   Bootstrap input/select/textarea carrying a disabled attribute) - the
   c2lField* directives never reach this branch on their own, because their
   read-only/allowEdit path renders p.form-control-static instead of a
   disabled control, so this branch is unreachable through those directives
   specifically.

   E2a Task 2 (ruling A2a): textarea.form-control now matched. It was
   originally excluded ("multi-line + bottom-border-only reads oddly"); the
   AICMS wizard adoption overrides that call - the wizards hold 74 textareas
   against 63 inputs and 22 selects, so leaving textarea out would dress 85
   of the 159 stage-body controls and strand the other 74 on raw Bootstrap 3
   beside them. Declarations are unchanged from input/select, including the
   :focus border-bottom:2px + padding-bottom:5px swap - that pair trades 1px
   of padding for 1px of border AT THE SAME EDGE, so their sum (7px, base and
   focus alike) and therefore the box's total height are unaffected by the
   swap, regardless of how the browser sizes the content box from `rows`
   (2, 3 and 4 across the wizards). `height` is deliberately not set here:
   Bootstrap's own `textarea.form-control { height: auto }`
   (Content/bootstrap.css) already stands unopposed, so `rows` keeps sizing
   the control exactly as it does on raw Bootstrap 3 today. `resize:
   vertical` is new and textarea-only in effect (the property is inert on
   input/select, so folding it into the shared selector costs nothing) -
   unconstrained `resize: both` would let a drag handle push the control
   wider than its grid/flex track, and an airy control has no side border to
   visually anchor a resize handle against in the first place. */

/* E2a Task 2 (ruling A1/A2): the label rule directly below is element-keyed
   on purpose - it was `.c2l-field label.control-label`, reaching only the
   c2lField* S-1 shape, until this task. The AICMS wizard adoption changes
   what has to be reached: E2a's stage bodies carry 203 labels, and 154 are
   bare <label> with no class and no .c2l-field ancestor (E2b's future
   c2lField* rows, not built yet) - a class-keyed selector leaves those 154
   unstyled. It would also strand the 10 `aicms-wizard-checkbox` labels,
   which carry no CSS of their own anywhere in the repo and today are styled
   ONLY by the retiring `.aicms-wizard-card-body label` rule this one
   replaces - itself element-keyed, for the identical reason. Dropping
   `.c2l-field label.control-label` for a bare `label` selector loses no
   existing reach: an element selector still matches every classed label the
   narrower one matched, so nothing already composing S-2 today loses
   coverage; specificity falls from (0,4,1) to (0,2,1).
   Checked against T-5 (`c2lToggleCards mode="choice-cards"`, the only other
   composition known to land in this body): its markup
   (Views/DesignDirective/ToggleCards.cshtml) renders zero <label> elements
   in ANY mode - role/aria-* on <div>, not native form controls - so this
   rule has nothing to reach inside it. The (0,2,1) vs `.c2l .c2l-toggle-cards
   ...`'s (0,2,0) ordering the retiring AICMS rule already carries today
   therefore stays inert here too, not a live collision.
   NOT carried over: `display: block`, which the retiring rule declares but
   this one deliberately does not - the six declarations below are S-2's
   already-fixed look (see the brief), not a fresh design decision to widen.
   Consequence, re-tallied across all 203 labels (final review fix wave - an
   earlier pass here named only 14 of them): THREE groups carry a competing
   `display` that the retiring rule's `display: block` (0,2,1) currently
   overrides.
   - `.radio-inline` (14 labels; Bootstrap pairs it with `.checkbox-inline`,
     but `checkbox-inline` has ZERO instances in the 8 wizards - do not
     assume both exist just because Bootstrap ships both). Bootstrap sets
     `display: inline-block` on `.radio-inline` at (0,1,0); with no
     competing `display` declaration here, it reverts to that inline-block
     and lays out side by side again.
   - `.aicms-wizard-choice` (24 labels in 13 `aicms-wizard-choices` groups;
     `.c2l .aicms-wizard-choice { display: flex }`, Areas/AICMS/Content/
     aicms-design.css, at (0,2,0)) - this is TRAP-3
     (docs/plan/e2-fact-pack-20260807/cross-01-css-retirement.md, search
     `TRAP-3:`), settled live before this task: production choice cards
     compute `display: block` today (the retiring rule outranks the flex
     declaration), while the style guide's identical markup - never wrapped
     in an `aicms-wizard-card-body` - computes `display: flex`. Production
     and the style guide have disagreed on this for as long as both existed.
     Once a wizard body is `c2l-form-airy`, no element-keyed rule forces
     `block` any more, so production choice cards finally render as the flex
     rows the style guide always showed. THIS BRANCH RESOLVES TRAP-3; it does
     not cause a regression - do not "fix" the resulting layout change with a
     `display: block` undo. That undo would re-break the flex layout
     permanently and would also drag the other 202 labels back under an
     element-keyed override, undoing this rule's whole point.
   - `.aicms-wizard-checkbox` (10 labels; no CSS rule anywhere in the repo
     targets the class - confirmed by grep) falls back to Bootstrap's own
     bare `label { display: inline-block }` (0,0,1), the same fallback a
     bare label gets - verified live by loading the repo's bootstrap.css
     standalone (grep confirms it is the only bare `label` element rule
     reachable from an AICMS page) and reading `getComputedStyle` on a
     `<label class="aicms-wizard-checkbox">` with no other rule present:
     `inline-block`, not `inline`.
   Bare labels (154 of the 203) are unaffected in practice either way - the
   block-level `.form-control` that follows starts a new line regardless of
   the label's own display. */
.c2l .c2l-form-airy label {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c2l-primary);
    margin-bottom: 2px;
}

.c2l .c2l-form-airy input.form-control,
.c2l .c2l-form-airy select.form-control,
.c2l .c2l-form-airy textarea.form-control {
    background: var(--c2l-surface-2);
    border: 0;
    border-bottom: 1px solid var(--c2l-secondary);
    padding: 6px 8px;
    font-size: var(--c2l-fs-base);
    color: var(--c2l-fg-1);
    border-radius: var(--c2l-radius-xs) var(--c2l-radius-xs) 0 0;
    box-shadow: none;
    resize: vertical;
    transition: background .12s, border-color .12s;
}

.c2l .c2l-form-airy input.form-control:focus,
.c2l .c2l-form-airy select.form-control:focus,
.c2l .c2l-form-airy textarea.form-control:focus {
    outline: none;
    background: var(--c2l-surface);
    border-bottom: 2px solid var(--c2l-primary);
    padding-bottom: 5px;
    box-shadow: none;
}

/* c2lBreezeValidation / ngRequired drive the ngModel state classes */
.c2l .c2l-form-airy input.form-control.ng-invalid.ng-touched,
.c2l .c2l-form-airy select.form-control.ng-invalid.ng-touched,
.c2l .c2l-form-airy textarea.form-control.ng-invalid.ng-touched {
    border-bottom: 2px solid var(--c2l-red);
    padding-bottom: 5px;
}

.c2l .c2l-form-airy input.form-control[disabled],
.c2l .c2l-form-airy select.form-control[disabled],
.c2l .c2l-form-airy textarea.form-control[disabled] {
    color: var(--c2l-fg-muted);
    cursor: not-allowed;
    background: var(--c2l-separator);
}

/* Optional layout helper: 2-col grid (18px row / 22px column gap) with
   --3/--4 modifiers for denser quick-edit panels (6+ short fields). */
.c2l .c2l-form-airy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
}

.c2l .c2l-form-airy-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.c2l .c2l-form-airy-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* The grid gap owns the vertical rhythm - drop the stacked default margin */
.c2l .c2l-form-airy-grid .c2l-field {
    margin-bottom: 0;
}

/* ---------- S-4 floating-label field layout ----------
   Ported from design-mirror-final:docs/design/showcase/form-layouts (forms.css .s-float block,
   forms-scalar.jsx ScalarFloating): the label rests inside the control
   (14px muted) and lifts above the top border - translateY(-19px)
   scale(.78), turning into a primary uppercase eyebrow whose background
   patch masks the border - when the field has a value
   (.c2l-field--has-value, controller-driven) or is focused (:focus-within).
   Opt-in via layout="floating" on c2lFieldText / c2lFieldSelect; no
   template reorder - the label is absolutely positioned over the existing
   label-before-input DOM. Lifted-label background #fff tokenized to
   --c2l-surface (verify against tinted panel surfaces before reusing
   inside PN-5 tint panels). */
.c2l .c2l-field--floating {
    position: relative;
    padding-top: 10px;
}

/* Resting `top` is aligned to where the typed text actually lands, not to
   the middle of the box: the input's 16px top padding + 1px border puts the
   first text line's centre at 27.7px from the field's top edge, and the
   label used to rest at 22px - close enough to look deliberate, far enough
   that the label visibly dropped ~6px the moment you typed. The lifted
   translateY below is offset by the same 5px so the floated position is
   pixel-identical to before this change. */
.c2l .c2l-field--floating label.control-label {
    position: absolute;
    top: 27px;
    left: 12px;
    margin-bottom: 0;
    font-size: var(--c2l-fs-base);
    font-weight: var(--c2l-fw-regular);
    color: var(--c2l-fg-muted);
    pointer-events: none;
    white-space: nowrap;
    transform-origin: top left;
    background: transparent;
    padding: 0 4px;
    margin-left: -4px;
    transition: transform .15s ease, color .15s, background .15s;
    z-index: 1;
}

/* Bootstrap 3 pins .form-control at height 34px - release it so the
   asymmetric 16px/8px padding (text clears the resting label) can apply. */
.c2l .c2l-field--floating .form-control {
    height: auto;
    padding: 16px 12px 8px;
    font-size: var(--c2l-fs-base);
    color: var(--c2l-fg-1);
    transition: border-color .12s, box-shadow .12s;
}

.c2l .c2l-field--floating.c2l-field--has-value label.control-label,
.c2l .c2l-field--floating:focus-within label.control-label {
    transform: translateY(-24px) scale(.78); /* -19px + the 5px resting shift above */
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
    background: var(--c2l-surface);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Custom chevron for the floating select (appearance:none drops the native
   arrow); inline SVG data URI is CSP-safe. */
.c2l .c2l-field--floating select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23627179' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.c2l .c2l-field--floating .form-control.ng-invalid.ng-touched {
    border-color: var(--c2l-red);
    box-shadow: 0 0 0 2px rgba(226, 0, 26, .15);
}

/* Progressive enhancement: the label tints red with the invalid control.
   The label PRECEDES the input in DOM order, so only :has() can reach it -
   engines without :has() simply skip the tint (border + glow still show). */
.c2l .c2l-field--floating:has(.form-control.ng-invalid.ng-touched) label.control-label {
    color: var(--c2l-red-deep);
}

/* ---------- S-5 click-to-edit rows (c2lFieldEditRow + .c2l-edit-rows) ----------
   Ported from design-mirror-final:docs/design/showcase/form-layouts (forms.css .s-readedit block,
   forms-scalar.jsx ScalarReadEdit). The bordered card is the static
   .c2l-edit-rows container atom (CSS-only, no behavior); each row is a
   c2lFieldEditRow directive. Prototype literals tokenized: hairlines
   #f2f3f5 -> --c2l-separator, label/hover wash #fafbfc ->
   --c2l-surface-footer (exact match). The editing wash #f7fafc stays a
   local literal (single consumer - no token minted, same policy as the
   T-3 icon tints). */
.c2l .c2l-edit-rows {
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
}

.c2l .c2l-edit-row {
    display: grid;
    grid-template-columns: 180px 1fr 36px;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid var(--c2l-separator);
    outline: none;
}

.c2l .c2l-edit-row:last-child {
    border-bottom: 0;
}

/* Read-only rows drop the icon column (ng-if removes the cell) */
.c2l .c2l-edit-row.is-static {
    grid-template-columns: 180px 1fr;
}

.c2l .c2l-edit-row-label {
    padding: 10px 14px;
    margin: 0;
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c2l-fg-4);
    background: var(--c2l-surface-footer);
    border-right: 1px solid var(--c2l-separator);
    height: 100%;
    display: flex;
    align-items: center;
}

.c2l .c2l-edit-row-value {
    padding: 10px 14px;
    font-size: var(--c2l-fs-base);
    color: var(--c2l-fg-1);
    cursor: text;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.c2l .c2l-edit-row-value.is-empty {
    color: var(--c2l-fg-muted);
    font-style: italic;
}

.c2l .c2l-edit-row:hover,
.c2l .c2l-edit-row:focus-visible {
    background: var(--c2l-surface-footer);
}

/* Real keyboard-focus signal, not just the background wash above - that
   luminance step (--c2l-surface -> --c2l-surface-footer, #ffffff -> #fafbfc)
   is too small on its own to read as focus, and outline:none is set on
   .c2l-edit-row itself (a role="button" div gets no useful native focus
   rectangle across browsers anyway). This inset ring is the FIRST
   :focus-visible rule in this stylesheet - the house pattern every future
   interactive row/pill that sets outline:none should follow. */
.c2l .c2l-edit-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-edit-row:hover .c2l-edit-row-value {
    color: var(--c2l-primary);
}

.c2l .c2l-edit-row-icon {
    text-align: center;
    color: var(--c2l-secondary);
    font-size: 13px;
    opacity: 0;
    cursor: pointer;
    transition: opacity .12s;
}

.c2l .c2l-edit-row:hover .c2l-edit-row-icon,
.c2l .c2l-edit-row:focus-visible .c2l-edit-row-icon {
    opacity: 1;
}

.c2l .c2l-edit-row.is-editing {
    background: #f7fafc; /* one-off editing wash - see block comment */
}

.c2l .c2l-edit-row.is-editing .c2l-edit-row-label {
    color: var(--c2l-primary);
    background: var(--c2l-surface);
    border-right-color: var(--c2l-secondary);
}

.c2l .c2l-edit-row.is-editing .c2l-edit-row-icon {
    opacity: 1;
    color: var(--c2l-primary);
}

/* Entering edit must not resize the row. The read view is one 20px line in a
   cell padded 10px/10px, which the 48px min-height above absorbs; the input's
   own box (line + 6px/6px padding + 1px borders = 33.6px) does not fit that
   same padding and used to push the row to 53.6px, shifting every row below
   it by ~6px on a single click. Dropping the cell's vertical padding while
   editing lets the input sit INSIDE the min-height instead of adding to it -
   align-items: center on the row keeps it centred. Horizontal padding stays
   so the input's left edge tracks the read view's. */
.c2l .c2l-edit-row.is-editing .c2l-edit-row-value {
    padding-top: 0;
    padding-bottom: 0;
}

.c2l .c2l-edit-row-input {
    width: 100%;
    padding: 6px 10px;
    font: inherit;
    font-size: var(--c2l-fs-base);
    color: var(--c2l-fg-1);
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-secondary);
    box-shadow: 0 0 0 2px rgba(76, 172, 190, .22);
    border-radius: var(--c2l-radius-sm);
}

.c2l .c2l-edit-row-input:focus {
    outline: none;
}

/* ---------- M-2 checkbox grid (c2lFieldMultiSelectConst default mode) ----------
   Ported from design-mirror-final:docs/design/showcase/form-layouts/forms.css .m-grid block
   (lines 577-640); hex-to-token mapping applied where an exact token exists
   (#fff -> --c2l-surface, #f9f3f9 -> --c2l-primary-bg-soft, 3px radius ->
   --c2l-radius-sm, 2px radius -> --c2l-radius-xs), matching the same policy
   already applied to the M-3/M-4 blocks below. Prototype literals without a
   token (#ced4da input border, and the rgba(76, 172, 190, *) hover wash /
   focus-ring alpha - the channel decomposition of --c2l-secondary #4CACBE
   already used verbatim by .c2l-eselect-item:hover and
   .c2l-edit-row-input:focus above) stay literal. The reference's own `.lbl`
   rule is NOT ported: the directive already renders the field label via the
   shared .c2l-field label.control-label markup above this branch, so a
   second label would duplicate it. Cell toggling reuses the same
   role="checkbox" / tabindex / aria-checked / onTagKeydown pattern as the
   M-4 block below, rather than the reference's mouse-only onClick, so
   replacing the old native checkbox inputs does not regress keyboard
   accessibility. */
.c2l .c2l-checkbox-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.c2l .c2l-checkbox-grid-search {
    position: relative;
    flex: 1;
    max-width: 320px;
}

.c2l .c2l-checkbox-grid-search .fa {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c2l-fg-muted);
    font-size: 12px;
}

.c2l .c2l-checkbox-grid-search input {
    width: 100%;
    padding: 6px 10px 6px 30px;
    font: inherit;
    font-size: 13px;
    border: 1px solid #ced4da;
    border-radius: var(--c2l-radius-sm);
    background: var(--c2l-surface);
}

.c2l .c2l-checkbox-grid-search input:focus-visible {
    outline: none;
    border-color: var(--c2l-secondary);
    box-shadow: 0 0 0 2px rgba(76, 172, 190, .22);
}

.c2l .c2l-checkbox-grid-meta {
    font-size: 11px;
    color: var(--c2l-fg-4);
}

.c2l .c2l-checkbox-grid-meta b {
    color: var(--c2l-primary);
}

.c2l .c2l-checkbox-grid-clear {
    margin-left: 10px;
    color: var(--c2l-secondary-text);  /* --c2l-secondary is 2.64:1 on white */
    text-decoration: underline;  /* non-colour cue: a link inside running text (axe link-in-text-block) */
    text-underline-offset: 2px;
    cursor: pointer;
}

.c2l .c2l-checkbox-grid-clear:hover {
    color: var(--c2l-primary);
}

.c2l .c2l-checkbox-grid-cells {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--c2l-border);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    overflow: hidden;
}

/* Collapses to one column at narrow widths - same breakpoint and rationale
   as .c2l-tc-grid (spec 4: media query) further down this file. */
@media (max-width: 767px) {
    .c2l .c2l-checkbox-grid-cells { grid-template-columns: 1fr; }
}

.c2l .c2l-checkbox-grid-cell {
    background: var(--c2l-surface);
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    outline: none;
    transition: background .08s;
}

.c2l .c2l-checkbox-grid-cell:hover {
    background: rgba(76, 172, 190, .06);
}

/* Same house :focus-visible ring as .c2l-tag / .c2l-transfer-item. */
.c2l .c2l-checkbox-grid-cell:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-checkbox-grid-cell.is-checked {
    background: var(--c2l-primary-bg-soft);
}

.c2l .c2l-checkbox-grid-cb {
    width: 16px;
    height: 16px;
    border: 1px solid #ced4da;
    border-radius: var(--c2l-radius-xs);
    background: var(--c2l-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    transition: background .12s, border-color .12s;
}

.c2l .c2l-checkbox-grid-cell.is-checked .c2l-checkbox-grid-cb {
    background: var(--c2l-primary);
    border-color: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    font-size: 10px;
}

/* Optional const-option icons retain a small gap in editable and static output. */
.c2l .c2l-field-multi-select-const .c2l-checkbox-grid-name > .fa,
.c2l .c2l-field-multi-select-const .c2l-tag > .fa,
.c2l .c2l-field-multi-select-const .c2l-field-static > span > .fa { margin-right: var(--c2l-space-xs); }

.c2l .c2l-checkbox-grid-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c2l-fg-1);
    line-height: 1.3;
}

.c2l .c2l-checkbox-grid-desc {
    font-size: 11px;
    color: var(--c2l-fg-muted);
    margin-top: 2px;
}

.c2l .c2l-checkbox-grid-empty {
    text-align: center;
    padding: 28px 12px;
    background: var(--c2l-surface);
    color: var(--c2l-fg-muted);
    font-size: 12px;
    grid-column: 1 / -1;
}

/* ---------- M-4 tag toggle cloud (c2lFieldMultiSelectConst mode="tags") ---------- */
.c2l .c2l-tag-cloud-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.c2l .c2l-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-pill);
    font-size: 12px;
    font-weight: 500;
    color: var(--c2l-fg-2);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    user-select: none;
    outline: none;
}

.c2l .c2l-tag:hover {
    border-color: var(--c2l-secondary);
    color: var(--c2l-primary);
}

/* House :focus-visible ring established at Task 5 (c2l-edit-row) - outline
   suppressed on the base rule, ring added only under :focus-visible, same
   split as .c2l-edit-row / .c2l-edit-row:focus-visible. */
.c2l .c2l-tag:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-tag-check {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width .15s ease, opacity .15s ease;
    font-size: 10px;
}

.c2l .c2l-tag.is-on {
    background: var(--c2l-primary);
    border-color: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    padding-left: 10px;
}

.c2l .c2l-tag.is-on .c2l-tag-check {
    width: 12px;
    opacity: 1;
}

.c2l .c2l-tag.is-on:hover {
    background: var(--c2l-primary-dark);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-tag-group {
    margin-bottom: 14px;
}

.c2l .c2l-tag-group:last-child {
    margin-bottom: 0;
}

.c2l .c2l-tag-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c2l-fg-4);
    margin-bottom: 6px;
}

.c2l .c2l-tag-group-header .rule {
    flex: 1;
    height: 1px;
    background: var(--c2l-border);
}

.c2l .c2l-tag-group-count {
    color: var(--c2l-secondary);
    font-weight: 700;
}

.c2l .c2l-tag-cloud-summary {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--c2l-border);
    font-size: 12px;
    color: var(--c2l-fg-4);
}

.c2l .c2l-tag-cloud-summary b {
    color: var(--c2l-primary);
}

.c2l .c2l-tag-cloud-clear {
    margin-left: 10px;
    color: var(--c2l-secondary);
    cursor: pointer;
}

/* ---------- M-3 two-pane transfer (c2lEntityTransfer) ---------- */
/* Values ported from design-mirror-final:docs/design/showcase/form-layouts/forms.css .m-xfer
   block (lines 642-729); hex-to-token mapping applied where an exact token
   exists (#fff -> --c2l-surface, #f9f3f9 -> --c2l-primary-bg-soft, radius
   3px -> --c2l-radius-sm); prototype literals without a token (#ced4da input
   border, #fafbfc controls background, hover/highlight rgba values) stay
   literal, matching the same policy already applied to the S-5/M-4 blocks
   above. */
.c2l .c2l-transfer-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c2l-primary);
    margin-bottom: 8px;
}

.c2l .c2l-transfer-shell {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    gap: 0;
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    overflow: hidden;
    background: var(--c2l-surface);
}

.c2l .c2l-transfer-pane {
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.c2l .c2l-transfer-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--c2l-surface-2);
    border-bottom: 1px solid var(--c2l-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c2l-fg-2);
}

.c2l .c2l-transfer-pane-head.is-assigned {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-transfer-count {
    font-weight: 400;
    color: var(--c2l-fg-muted);
    text-transform: none;
    letter-spacing: 0;
}

.c2l .c2l-transfer-pane-head.is-assigned .c2l-transfer-count {
    color: rgba(255, 255, 255, .7);
}

.c2l .c2l-transfer-search {
    padding: 6px 8px;
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-transfer-search input {
    width: 100%;
    padding: 4px 8px;
    font: inherit;
    font-size: 12px;
    border: 1px solid #ced4da;
    border-radius: var(--c2l-radius-sm);
    background: var(--c2l-surface);
    outline: none;
}

/* House :focus-visible ring (established at Task 5 / c2l-edit-row, reused at
   Task 6 / c2l-tag) - outline suppressed on the base rule above, ring added
   only under :focus-visible. Browsers apply :focus-visible to text inputs
   for both pointer and keyboard focus, so this reads identically to a plain
   :focus rule while keeping the shared pattern's structure. */
.c2l .c2l-transfer-search input:focus-visible {
    border-color: var(--c2l-secondary);
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-transfer-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    max-height: 260px;
}

.c2l .c2l-transfer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--c2l-fg-1);
    cursor: pointer;
    transition: background .08s;
    border-left: 3px solid transparent;
    outline: none;
}

.c2l .c2l-transfer-item:hover {
    background: rgba(76, 172, 190, .08);
}

/* Same house :focus-visible ring as .c2l-edit-row / .c2l-tag. */
.c2l .c2l-transfer-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-transfer-item.is-highlighted {
    background: var(--c2l-primary-bg-soft);
    border-left-color: var(--c2l-primary);
}

.c2l .c2l-transfer-item-name {
    font-weight: 500;
}

.c2l .c2l-transfer-item-icon {
    color: var(--c2l-fg-muted);
    font-size: 11px;
}

.c2l .c2l-transfer-item-icon.is-assigned {
    color: var(--c2l-tertiary);
}

.c2l .c2l-transfer-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--c2l-surface-footer);
    border-right: 1px solid var(--c2l-border);
    border-left: 1px solid var(--c2l-border);
}

.c2l .c2l-transfer-btn {
    width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
    border-radius: var(--c2l-radius-sm);
    color: var(--c2l-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: background .12s, color .12s, border-color .12s;
}

.c2l .c2l-transfer-btn:hover:not(:disabled) {
    background: var(--c2l-secondary);
    color: var(--c2l-fg-on-primary);
    border-color: var(--c2l-secondary);
}

.c2l .c2l-transfer-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    color: var(--c2l-fg-muted);
}

.c2l .c2l-transfer-empty {
    text-align: center;
    color: var(--c2l-fg-muted);
    font-size: 12px;
    padding: 30px 16px;
    font-style: italic;
}

.c2l .c2l-transfer.is-disabled .c2l-transfer-item {
    cursor: not-allowed;
    opacity: .6;
}

.c2l .c2l-transfer-static-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--c2l-fg-1);
}

/* ---------- CP-7/CP-8 entity selects - deferred-feature completion (Task 8) ---------- */
/* Invalid: ships unconditionally - both templates already compute is-invalid. */
.c2l .c2l-eselect.is-invalid .c2l-eselect-trigger {
    border-color: var(--c2l-danger-accent);
    box-shadow: 0 0 0 3px rgba(247, 74, 69, .18);
}

.c2l .c2l-eselect.is-invalid .c2l-eselect-caret {
    color: var(--c2l-danger-accent);
}

/* Group headers - shared by CP-7 (display-only) and CP-8 (group toggle). */
.c2l .c2l-eselect-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--c2l-space-sm) 5px;
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c2l-primary);
    background: #f7fbfc;
    border-bottom: 1px solid #eef1f2;
    cursor: pointer;
    user-select: none;
}

.c2l .c2l-eselect-group-header:focus {
    outline: none;
}

.c2l .c2l-eselect-group-header:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

/* optionsConfig.groupCollapsible: false - the header no longer toggles
   (role/tabindex are dropped entirely in the template), so it must not
   look clickable either. */
.c2l .c2l-eselect-group-header.is-static {
    cursor: default;
}

.c2l .c2l-eselect-group-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.c2l .c2l-eselect-group-caret {
    font-size: 9px;
    opacity: .5;
    transition: transform var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

.c2l .c2l-eselect-group-header.is-collapsed .c2l-eselect-group-caret {
    transform: rotate(-90deg);
}

.c2l .c2l-eselect-group-count {
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-muted);
    background: #e8eef0;
    border-radius: var(--c2l-radius-pill);
    padding: 1px 7px;
}

.c2l .c2l-eselect-group-count.has-selected {
    color: var(--c2l-primary);
    background: var(--c2l-primary-bg-soft);
}

/* Search-match highlight (3-span split, no ngSanitize). */
.c2l .c2l-eselect-hl {
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
    text-decoration: underline;
    text-decoration-color: var(--c2l-secondary);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* Opt-in entrance animation (animated binding). */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-eselect-animated .c2l-eselect-panel {
        transform-origin: top center;
        animation: c2l-eselect-panel-in var(--c2l-dur-base) var(--c2l-ease-out-quart) both;
    }
}

@keyframes c2l-eselect-panel-in {
    from { opacity: 0; transform: scaleY(.97); }
    to { opacity: 1; transform: scaleY(1); }
}

/* W3-1 Step 1: opt-in EXIT animation (animated binding) - CP-7 panel close.
   `.is-leaving` is added by vm.close() (c2lEntitySingleSelect.js) for one
   $timeout equal to this keyframe's duration (var(--c2l-dur-fast), 150ms)
   before vm.reallyClose() removes the panel from the DOM; reduced motion
   (or animated unset) skips straight to removal, so this rule never fires
   for it. Mirror of c2l-eselect-panel-in, played in reverse. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-eselect-animated .c2l-eselect-panel.is-leaving {
        transform-origin: top center;
        animation: c2l-eselect-panel-out var(--c2l-dur-fast) var(--c2l-ease-in) forwards;
    }
}

@keyframes c2l-eselect-panel-out {
    from { opacity: 1; transform: scaleY(1); }
    to { opacity: 0; transform: scaleY(.97); }
}

/* Tooltip skin. Rendered under <body> by tooltip-append-to-body (the uib
   portal), so these selectors CANNOT sit under the .c2l scope - the unique
   c2l-eselect-tooltip class (set via tooltip-class) is the scope instead.
   This is the one sanctioned exception to the .c2l scoping rule. */
.tooltip.c2l-eselect-tooltip.in {
    opacity: 1;
}

.tooltip.c2l-eselect-tooltip .tooltip-inner {
    max-width: 280px;
    padding: 10px 12px;
    text-align: left;
    background: var(--c2l-primary-dark);
    border-radius: var(--c2l-radius-md);
}

.tooltip.c2l-eselect-tooltip.top .tooltip-arrow {
    border-top-color: var(--c2l-primary-dark);
}

.c2l-eselect-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.c2l-eselect-tip-icon {
    font-size: 18px;
    margin-top: 2px;
}

.c2l-eselect-tip-group {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.c2l-eselect-tip-name {
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-on-primary);
}

.c2l-eselect-tip-rule {
    border-top: 1px solid rgba(255, 255, 255, .2);
    margin: 6px 0;
}

.c2l-eselect-tip-desc {
    font-size: var(--c2l-fs-sm);
    color: rgba(255, 255, 255, .85);
}

/* ---------- CP-8/M-1 multi select - deferred-feature completion (Task 9) ---------- */
/* Chip shape modifiers (chip-shape="pill|ghost"; default tag = base chip). */
.c2l .c2l-eselect-chip--pill {
    border-radius: var(--c2l-radius-pill);
    padding: 2px 6px 2px 10px;
}

.c2l .c2l-eselect-chip--pill .c2l-eselect-chip-remove {
    border-top-right-radius: var(--c2l-radius-pill);
    border-bottom-right-radius: var(--c2l-radius-pill);
}

.c2l .c2l-eselect-chip--ghost {
    background: transparent;
    border-color: var(--c2l-secondary-soft);
    color: var(--c2l-primary);
}

/* Badge overflow mode: one count pill replacing the chip row. CP-2
   consolidation audit (Task W3-6 Step 3, 2026-08): NOT a true duplicate of
   .c2l-badge/.c2l-badge--pill/.c2l-badge--primary composed together - it
   differs on gap (6px vs 4px), padding (2px 8px vs the pill modifier's
   4px 10px), border color (--c2l-primary-tint-border vs --c2l-border-strong),
   background (--c2l-primary-tint, alpha .05, vs the primary modifier's
   literal rgba(71,5,68,.08)) and font-size (--c2l-fs-sm vs --c2l-fs-xs) -
   this component needs the larger, softer-tint overflow-count treatment,
   not the atom's stock sizing. Left independent by design; not rebased. */
.c2l .c2l-eselect-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: var(--c2l-primary-tint);
    border: 1px solid var(--c2l-primary-tint-border);
    border-radius: var(--c2l-radius-pill);
    color: var(--c2l-primary);
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    margin-right: auto;
}

.c2l .c2l-eselect-badge-clear {
    border: 0;
    background: transparent;
    color: var(--c2l-primary);
    padding: 0 2px;
}

.c2l .c2l-eselect-badge-clear:hover {
    color: var(--c2l-danger-accent);
}

/* Capped items (max-selected reached, item not selected). */
.c2l .c2l-eselect-item.is-capped {
    opacity: .4;
    cursor: not-allowed;
}

.c2l .c2l-eselect-item.is-capped:hover {
    background: transparent;
    border-left-color: transparent;
}

.c2l .c2l-eselect-limit-warning {
    color: var(--c2l-danger-accent);
    font-weight: var(--c2l-fw-semibold);
    margin-left: 6px;
}

/* Opt-in chip entrance (animated binding) - spring overshoot as a plain
   cubic-bezier, ported from the forms.css chip-in keyframe. Panel entrance
   comes from Task 8's shared .c2l-eselect-animated .c2l-eselect-panel rule. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-eselect-animated .c2l-eselect-chip {
        animation: c2l-chip-in .24s cubic-bezier(.18, 1.4, .4, 1) both;
    }
}

@keyframes c2l-chip-in {
    from { transform: scale(.7); }
    to { transform: scale(1); }
}

/* W3-1 Step 2: opt-in EXIT animation (animated binding) - CP-8 chip removal.
   `.is-leaving` is added via vm.chipRows/vm.isChipLeaving
   (c2lEntityMultipleSelect.js) for one $timeout equal to this keyframe's
   duration (.24s, matching c2l-chip-in) after the model has already been
   spliced; reduced motion (or animated unset) skips the DOM lingering
   entirely, so this rule never fires for it. Scale/fade, mirror of
   c2l-chip-in played in reverse. pointer-events: none stops a stray click
   on the (already-hidden, see the .cshtml) remove control during exit. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-eselect-animated .c2l-eselect-chip.is-leaving {
        pointer-events: none;
        animation: c2l-chip-out .24s cubic-bezier(.5, 0, .75, 0) both;
    }
}

@keyframes c2l-chip-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(.7); }
}

/* ---------- T-1..T-5 toggle cards (c2lToggleCards) ---------- */
/* Shared parts (all modes). Ported from design-mirror-final:docs/design/showcase/form-layouts/forms.css .tc-* blocks. */
.c2l .c2l-tc-group { min-width: 0; }

.c2l .c2l-tc-body { min-width: 0; }

.c2l .c2l-tc-title {
    font-size: 13px;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.c2l .c2l-tc-desc {
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-fg-muted);
    margin-top: 2px;
    line-height: 1.45;
}

.c2l .c2l-tc-required {
    background: var(--c2l-red);
    color: var(--c2l-fg-on-primary);
    padding: 1px 5px;
    font-size: 9px;
    font-weight: var(--c2l-fw-bold);
    border-radius: var(--c2l-radius-xs);
    letter-spacing: .08em;
}

.c2l .c2l-tc-cb {
    width: 18px;
    height: 18px;
    border: 1px solid #ced4da; /* prototype grey, no token */
    border-radius: var(--c2l-radius-sm);
    background: var(--c2l-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c2l-fg-on-primary);
    font-size: 11px;
    transition: background .12s, border-color .12s;
}

.c2l .c2l-tc-row.on .c2l-tc-cb,
.c2l .c2l-tc-card.on .c2l-tc-cb {
    background: var(--c2l-primary);
    border-color: var(--c2l-primary);
}

.c2l .c2l-tc-group-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--c2l-fw-medium);
    color: var(--c2l-fg-4);
}

.c2l .c2l-tc-group-count b {
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
}

.c2l .c2l-tc-select-all {
    font-size: 10px;
    cursor: pointer;
    color: var(--c2l-secondary);
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .08em;
}

.c2l .c2l-tc-select-all:hover { color: var(--c2l-primary); }

/* Keyboard a11y (port addition - the prototype is mouse-only). Same house
   :focus-visible ring as .c2l-edit-row / .c2l-tag / .c2l-transfer-item -
   outline suppressed on the base row rule, ring added only here. */
.c2l .c2l-tc-row:focus-visible,
.c2l .c2l-tc-card:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-toggle-cards.is-disabled { opacity: .6; }

/* Disabled and read-only are different refusals and get different cursors.
   Disabled means "you may not do this" - not-allowed says so; the plain
   default arrow reads as "there is nothing here to click" and leaves the
   user guessing why their click did nothing. Read-only keeps `default`:
   the content is legitimately inert rather than blocked. The checkbox
   needs its own rule - a UA-disabled input does not inherit the row's
   cursor. */
.c2l .c2l-toggle-cards.is-disabled .c2l-tc-row,
.c2l .c2l-toggle-cards.is-disabled .c2l-tc-card,
.c2l .c2l-toggle-cards.is-disabled .c2l-tc-cb { cursor: not-allowed; }

.c2l .c2l-toggle-cards.is-readonly .c2l-tc-row,
.c2l .c2l-toggle-cards.is-readonly .c2l-tc-card { cursor: default; }

/* D5: a per-option `disabled` row/card is inert independently of the
   component-level is-disabled/is-readonly root state above (tabindex -1
   already drops it from the tab order - see c2lToggleCards.js
   vm.tabindexFor) - gate the cursor the same way so it does not visually
   invite a click that vm.toggle() already no-ops. All four modes put the
   class on the row or the card, so both need covering.
   The `.c2l-toggle-cards` step is load-bearing, not decoration: each mode
   block below sets `cursor: pointer` at .c2l + mode + element (0,3,0) and
   comes LATER in this file, so the shorter .c2l + element + .disabled
   (also 0,3,0) lost the tie on source order and disabled rows kept the
   pointer. The extra class makes this 0,4,0 and order-independent. */
.c2l .c2l-toggle-cards .c2l-tc-row.disabled,
.c2l .c2l-toggle-cards .c2l-tc-card.disabled,
.c2l .c2l-toggle-cards .c2l-tc-row.disabled .c2l-tc-cb,
.c2l .c2l-toggle-cards .c2l-tc-card.disabled .c2l-tc-cb { cursor: not-allowed; }

/* T-1 rows mode */
.c2l .c2l-toggle-cards--rows {
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    overflow: hidden;
}

.c2l .c2l-toggle-cards--rows .c2l-tc-group:not(:last-child) {
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-toggle-cards--rows .c2l-tc-group-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--c2l-surface-2);
    border-bottom: 1px solid var(--c2l-border);
    font-size: 11px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c2l-fg-2);
}

.c2l .c2l-toggle-cards--rows .c2l-tc-group-name i {
    margin-right: 6px;
    color: var(--c2l-secondary);
}

.c2l .c2l-toggle-cards--rows .c2l-tc-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 16px;
    border-bottom: 1px solid #f2f3f5; /* prototype hairline, no token */
    cursor: pointer;
    transition: background .1s;
    outline: none;
}

.c2l .c2l-toggle-cards--rows .c2l-tc-row:last-child { border-bottom: 0; }
.c2l .c2l-toggle-cards--rows .c2l-tc-row:hover { background: rgba(76,172,190,.05); }
.c2l .c2l-toggle-cards--rows .c2l-tc-row.on { background: rgba(71,5,68,.04); }
.c2l .c2l-toggle-cards--rows .c2l-tc-cb { margin-top: 1px; }
.c2l .c2l-toggle-cards--rows .c2l-tc-row.on .c2l-tc-title { color: var(--c2l-primary); }

/* T-2/T-3 shared group head (rule line + count pill) */
.c2l .c2l-tc-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c2l-primary);
    margin-bottom: 10px;
}

.c2l .c2l-tc-group-head i { color: var(--c2l-secondary); }

.c2l .c2l-tc-group-head .rule {
    flex: 1;
    height: 1px;
    background: var(--c2l-border);
}

.c2l .c2l-tc-count {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    padding: 2px 8px;
    background: var(--c2l-surface-2);
    border-radius: var(--c2l-radius-pill);
    color: var(--c2l-fg-3);
}

.c2l .c2l-tc-count.on {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}

/* T-2 cards mode */
.c2l .c2l-toggle-cards--cards .c2l-tc-group { margin-bottom: 14px; }
.c2l .c2l-toggle-cards--cards .c2l-tc-group:last-child { margin-bottom: 0; }

.c2l .c2l-tc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.c2l .c2l-tc-card {
    position: relative;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    cursor: pointer;
    outline: none; /* D8 fix round 1: house ring only, see .c2l-tc-row/.c2l-tc-card:focus-visible above */
}

.c2l .c2l-toggle-cards--cards .c2l-tc-card {
    padding: 14px 16px 14px 18px;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

.c2l .c2l-toggle-cards--cards .c2l-tc-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    border-radius: 3px 0 0 3px;
    transition: background .15s;
}

.c2l .c2l-toggle-cards--cards .c2l-tc-card:hover { border-color: var(--c2l-secondary); }
.c2l .c2l-toggle-cards--cards .c2l-tc-card:hover::before { background: var(--c2l-secondary); }

.c2l .c2l-toggle-cards--cards .c2l-tc-card.on {
    background: var(--c2l-surface-footer);
    border-color: var(--c2l-primary);
    box-shadow: 0 2px 10px rgba(71,5,68,.08);
}

.c2l .c2l-toggle-cards--cards .c2l-tc-card.on::before { background: var(--c2l-primary); }

/* W3-2 Step 2. Same collision the E1 T7 (T-5) fix comment above records as a
   follow-up for T-2/T-3: the shared house ring
   `.c2l-tc-card:focus-visible { box-shadow: inset 0 0 0 2px var(--c2l-secondary) }`
   is (0,3,0); `.c2l-toggle-cards--cards .c2l-tc-card.on` above is (0,4,0) AND
   later in source order, so it wins box-shadow outright on a selected card
   and the focus ring never paints (WCAG 2.4.7). Composed here rather than
   raising the shared ring's specificity (would also touch every other
   mode). The second shadow is a verbatim restatement of the `.on` halo two
   rules up - box-shadow does not accumulate across rules - keep the two in
   sync if either changes. */
.c2l .c2l-toggle-cards--cards .c2l-tc-card.on:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary), 0 2px 10px rgba(71,5,68,.08);
}

.c2l .c2l-tc-card-row1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.c2l .c2l-toggle-cards--cards .c2l-tc-title,
.c2l .c2l-toggle-cards--icon-cards .c2l-tc-title { font-weight: var(--c2l-fw-bold); }

.c2l .c2l-tc-card.on .c2l-tc-title { color: var(--c2l-primary); }
.c2l .c2l-toggle-cards--cards .c2l-tc-cb { flex-shrink: 0; }

.c2l .c2l-toggle-cards--cards .c2l-tc-desc {
    margin-top: 6px;
    line-height: 1.5;
}

.c2l .c2l-tc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c2l-secondary);
}

.c2l .c2l-tc-meta.is-mitigate { color: var(--c2l-tertiary); }

/* T-3 icon-cards mode */
.c2l .c2l-toggle-cards--icon-cards .c2l-tc-group { margin-bottom: 14px; }
.c2l .c2l-toggle-cards--icon-cards .c2l-tc-group:last-child { margin-bottom: 0; }

.c2l .c2l-toggle-cards--icon-cards .c2l-tc-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    transition: border-color .12s, background .12s;
}

.c2l .c2l-tc-ico {
    width: 44px;
    height: 44px;
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}

/* Six local swatch tints - rgba literals per spec 3.4 (no second consumer yet) */
.c2l .c2l-tc-ico.plum   { background: rgba(71,5,68,.08);    color: var(--c2l-primary); }
.c2l .c2l-tc-ico.cyan   { background: rgba(76,172,190,.14); color: var(--c2l-secondary); }
.c2l .c2l-tc-ico.green  { background: rgba(26,179,148,.14); color: var(--c2l-tertiary); }
.c2l .c2l-tc-ico.orange { background: rgba(242,148,0,.16);  color: var(--c2l-orange); }
.c2l .c2l-tc-ico.red    { background: rgba(226,0,26,.12);   color: var(--c2l-red); }
.c2l .c2l-tc-ico.purple { background: rgba(129,25,127,.12); color: var(--c2l-purple); }

.c2l .c2l-toggle-cards--icon-cards .c2l-tc-body {
    min-width: 0;
    flex: 1;
}

.c2l .c2l-toggle-cards--icon-cards .c2l-tc-desc { margin-top: 4px; }

.c2l .c2l-tc-check {
    width: 22px;
    height: 22px;
    border-radius: var(--c2l-radius-circle);
    border: 1.5px solid var(--c2l-border);
    background: var(--c2l-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
    font-size: 11px;
    transition: all .18s;
}

.c2l .c2l-toggle-cards--icon-cards .c2l-tc-card:hover { border-color: var(--c2l-secondary); }

.c2l .c2l-toggle-cards--icon-cards .c2l-tc-card.on {
    border-color: var(--c2l-primary);
    background: linear-gradient(180deg, var(--c2l-surface) 0%, var(--c2l-surface-footer) 100%);
    box-shadow: 0 4px 14px rgba(71,5,68,.06);
}

.c2l .c2l-tc-card.on .c2l-tc-check {
    background: var(--c2l-primary);
    border-color: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}

/* W3-2 Step 2. T-3's half of the same collision fixed for T-2 above - see
   that comment for the full explanation. Second shadow restates the T-3
   `.c2l-toggle-cards--icon-cards .c2l-tc-card.on` halo (box-shadow: 0 4px
   14px rgba(71,5,68,.06)) verbatim; keep the two in sync if either changes. */
.c2l .c2l-toggle-cards--icon-cards .c2l-tc-card.on:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary), 0 4px 14px rgba(71,5,68,.06);
}

/* T-4 switch-rows mode */
.c2l .c2l-toggle-cards--switch-rows {
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-group-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--c2l-surface-footer);
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-group:not(:last-child) .c2l-tc-row:last-child {
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-group:not(:first-child) .c2l-tc-group-bar {
    border-top: 1px solid var(--c2l-border);
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-group-name {
    font-size: 11px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c2l-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.c2l .c2l-tc-group-ic {
    width: 22px;
    height: 22px;
    border-radius: var(--c2l-radius-md);
    background: rgba(76,172,190,.14);
    color: var(--c2l-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-group-meta {
    font-size: 11px;
    color: var(--c2l-fg-muted);
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row {
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 16px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #f2f3f5; /* prototype hairline, no token */
    cursor: pointer;
    transition: background .1s;
    outline: none; /* D8 fix round 1: house ring only, see .c2l-tc-row/.c2l-tc-card:focus-visible above */
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row:last-child { border-bottom: 0; }
.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row:hover { background: rgba(76,172,190,.04); }
.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row.on { background: rgba(71,5,68,.03); }
.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row.on .c2l-tc-title { color: var(--c2l-primary); }

.c2l .c2l-tc-switch {
    width: 38px;
    height: 22px;
    background: #ced4da; /* prototype grey, no token */
    border-radius: var(--c2l-radius-pill);
    position: relative;
    transition: background .15s;
}

.c2l .c2l-tc-switch::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    background: var(--c2l-surface);
    border-radius: var(--c2l-radius-circle);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: left .15s ease;
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row.on .c2l-tc-switch { background: var(--c2l-secondary); }
.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row.on .c2l-tc-switch::before { left: 18px; }

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row.disabled {
    opacity: .5;
    cursor: not-allowed;
}

.c2l .c2l-toggle-cards--switch-rows .c2l-tc-row.disabled .c2l-tc-switch { background: var(--c2l-border); }

/* E1 T7 (T-5). Replaces `.aicms-wizard-choices` / `.aicms-wizard-choice` /
   `.aicms-wizard-choice-body` (Areas/AICMS/Content/aicms-design.css) - the
   single-select radiogroup skin of c2lToggleCards, `mode="choice-cards"`.
   ADD-only, on the same terms as the E1 T4 block further down: the AICMS
   originals stay live until E2's final task retires them.
   Geometry is ported from those three rules so Phase E2's 13 choice groups
   migrate as a class rename rather than a redesign.

   Every rule that RE-DECLARES a shared atom is scoped under the mode class on
   purpose: T-2 and T-3 keep the shared .c2l-tc-grid's hard 1fr 1fr and the
   shared .c2l-tc-card padding, both of which five style-guide consumers
   already depend on.

   The two exceptions are the .c2l-tc-radio rules at the bottom of this block:
   `.c2l .c2l-tc-radio` and `.c2l .c2l-tc-card.on .c2l-tc-radio` are NOT
   mode-scoped. They are safe only because .c2l-tc-radio is emitted nowhere
   except the choice-cards branch of ToggleCards.cshtml - the class itself is
   the scope, not the selector. Anyone adding a .c2l-tc-radio element to
   another mode inherits these rules; scope them then. */
.c2l .c2l-toggle-cards--choice-cards .c2l-tc-group { margin-bottom: 14px; }
.c2l .c2l-toggle-cards--choice-cards .c2l-tc-group:last-child { margin-bottom: 0; }

/* (0,3,0) against the shared .c2l-tc-grid's (0,2,0), so this also outranks
   the max-width:767px collapse-to-1fr rule further down the file - deliberate:
   auto-fit already collapses on its own below one minimum column, and forcing
   1fr there would throw away the two-up layout at exactly the widths E2's
   wizard modals render in. The existing rule is left untouched. */
.c2l .c2l-toggle-cards--choice-cards .c2l-tc-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--c2l-space-md);
}

/* Density opt-in via density="compact" - the .aicms-wizard-choices.is-compact
   equivalent (220px instead of a 260px minimum column). 4 of the 13 AICMS
   groups use it. */
.c2l .c2l-toggle-cards--choice-cards.is-compact .c2l-tc-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.c2l .c2l-toggle-cards--choice-cards .c2l-tc-card {
    display: flex;
    gap: var(--c2l-space-md);
    align-items: flex-start;
    padding: var(--c2l-space-md) var(--c2l-space-lg);
    border-color: var(--c2l-border-strong);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.c2l .c2l-toggle-cards--choice-cards .c2l-tc-card:hover {
    border-color: var(--c2l-secondary);
    background: var(--c2l-surface-2);
}

.c2l .c2l-toggle-cards--choice-cards .c2l-tc-card.on {
    border-color: var(--c2l-primary);
    background: var(--c2l-surface);
    box-shadow: 0 0 0 3px rgba(71,5,68,.08);
}

/* E1 T7 (T-5), final fix wave. WCAG 2.4.7: without this the keyboard focus
   ring is INVISIBLE on the only card a T-5 question can put focus on.
   The house ring is `.c2l .c2l-tc-card:focus-visible { box-shadow: inset 0 0
   0 2px var(--c2l-secondary) }` near the top of the toggle-cards block,
   (0,3,0), and `.c2l .c2l-tc-card { outline: none }` removes the UA fallback.
   The `.on` rule directly above is (0,4,0) AND later in source order, so on
   any selected card it wins `box-shadow` outright and the ring never paints.
   T-2 and T-3 carry the identical collision (fixed at W3-2 Step 2, see
   `.c2l-toggle-cards--cards .c2l-tc-card.on:focus-visible` /
   `.c2l-toggle-cards--icon-cards .c2l-tc-card.on:focus-visible` above) - it
   stayed out of sight there for longer because every unselected card in
   those two modes is still its own tab stop, so a keyboard user always had
   somewhere to land that showed the ring. T-5 is different because of the
   other half of this mode - the roving tabindex makes the selected option the
   radiogroup's SINGLE tab stop (c2lToggleCards.js isRovingOption/tabindexFor)
   and the arrow keys move focus and selection together, so once a question is
   answered EVERY focusable card in it is a selected card. Measured before the
   fix on StyleGuideToggles: answer a question, Tab away, Tab back, and the
   focused card computes `rgba(71,5,68,.08) 0 0 0 3px` with no inset ring -
   byte-identical to what it looked like unfocused.
   Composing both shadows here, scoped to this mode, rather than raising the
   shared ring's specificity: that would also change T-2 and T-3 - no longer
   a reason to avoid it now that both are fixed too (W3-2 Step 2, see above),
   but the composed-per-mode shape stays the right one regardless, since each
   mode restates its own distinct `.on` halo shadow.
   The second shadow below is a verbatim restatement of the `.on` halo above -
   `box-shadow` does not accumulate across rules, so it has to be repeated;
   keep the two in sync if either changes. */
.c2l .c2l-toggle-cards--choice-cards .c2l-tc-card.on:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary), 0 0 0 3px rgba(71,5,68,.08);
}

.c2l .c2l-toggle-cards--choice-cards .c2l-tc-card.disabled { opacity: .5; }

/* The round sibling of .c2l-tc-cb. Decorative (aria-hidden in the template) -
   the announced state is aria-checked on the card itself. The selected dot is
   a thick border rather than a pseudo-element, which keeps the 16px box under
   the inherited border-box sizing. */
.c2l .c2l-tc-radio {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 1px solid #ced4da; /* prototype grey, same literal as .c2l-tc-cb */
    border-radius: 50%;
    background: var(--c2l-surface);
    transition: border-color .12s, border-width .12s;
}

.c2l .c2l-tc-card.on .c2l-tc-radio {
    border-color: var(--c2l-primary);
    border-width: 5px;
}

/* Card grids collapse to one column at narrow widths (spec 4: media query) */
@media (max-width: 767px) {
    .c2l .c2l-tc-grid { grid-template-columns: 1fr; }
}

/* Toggle-foot atom - consumer-composed summary footer (risk classification
   logic is app-domain and stays in the consuming controller; see the
   style-guide recipe on StyleGuideToggles) */
.c2l .c2l-toggle-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(71,5,68,.04), rgba(76,172,190,.04));
    border: 1px dashed var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    font-size: var(--c2l-fs-sm);
}

.c2l .c2l-toggle-foot .total b {
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
}

.c2l .c2l-toggle-foot .right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.c2l .c2l-toggle-foot-note {
    font-size: 11px;
    color: var(--c2l-fg-muted);
}

/* CP-2 consolidation audit (Task W3-6 Step 3, 2026-08): NOT a true
   duplicate of .c2l-badge/.c2l-badge--pill - this is the base shape shared
   by a 4-member risk-tier color family (.high/.med/.low/.none below, each
   with its own literal background/color), has no border, and uses the
   --c2l-fw-bold token rather than the atom's --c2l-fw-semibold. Left
   independent by design; not rebased. */
.c2l .c2l-toggle-foot-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--c2l-radius-pill);
    font-size: 11px;
    font-weight: var(--c2l-fw-bold);
}

.c2l .c2l-toggle-foot-badge.high { background: rgba(226,0,26,.12);   color: var(--c2l-red-deep); }
.c2l .c2l-toggle-foot-badge.med  { background: rgba(242,148,0,.16);  color: var(--c2l-orange-deep); }
.c2l .c2l-toggle-foot-badge.low  { background: rgba(26,179,148,.16); color: var(--c2l-tertiary); }
.c2l .c2l-toggle-foot-badge.none { background: var(--c2l-surface-2); color: var(--c2l-fg-3); }

/* ---------- [Aggregates] C-1 accordion repeater (c2l-acc-*) ---------- */
.c2l .c2l-acc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c2l .c2l-acc-row {
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    overflow: hidden;
    transition: border-color var(--c2l-dur-fast), box-shadow var(--c2l-dur-fast);
}

.c2l .c2l-acc-row.is-open {
    border-color: var(--c2l-secondary);
    box-shadow: 0 4px 14px rgba(76, 172, 190, .15);
}

/* Ported for the deferred HTML5 drag-and-drop follow-up (CSS-free later). */
.c2l .c2l-acc-row.is-dragging { opacity: .4; }

.c2l .c2l-acc-row.is-drop-target {
    border-color: var(--c2l-secondary);
    box-shadow: 0 -2px 0 0 var(--c2l-secondary) inset, 0 2px 0 0 var(--c2l-secondary);
}

.c2l .c2l-acc-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 6px;
    cursor: pointer;
    transition: background var(--c2l-dur-instant);
    outline: none;
}

.c2l .c2l-acc-summary:hover { background: var(--c2l-surface-footer); }

/* House :focus-visible ring (established at Task 5 / c2l-edit-row, reused
   throughout the catalog - c2l-tag, c2l-transfer-item, c2l-tc-row/-card) -
   outline suppressed on the base rule above, ring added only here. */
.c2l .c2l-acc-summary:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-acc-grip {
    color: var(--c2l-fg-muted);
    cursor: grab;
    width: 24px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
}

.c2l .c2l-acc-grip:active { cursor: grabbing; }

/* Drag-to-reorder feedback (c2lAccDrag). The dragged row fades; the row
   under the pointer grows a solid cyan edge on the side the dragged row
   will land - above when dragging upward, below when dragging downward. */
.c2l .c2l-acc-row.is-dragging {
    opacity: .45;
}

.c2l .c2l-acc-row.is-drop-before {
    box-shadow: inset 0 3px 0 0 var(--c2l-secondary);
}

.c2l .c2l-acc-row.is-drop-after {
    box-shadow: inset 0 -3px 0 0 var(--c2l-secondary);
}

.c2l .c2l-acc-lead {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.c2l .c2l-acc-caret {
    font-size: 10px;
    color: var(--c2l-fg-muted);
    transition: transform .18s;
}

.c2l .c2l-acc-row.is-open .c2l-acc-caret {
    transform: rotate(90deg);
    color: var(--c2l-secondary);
}

.c2l .c2l-acc-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--c2l-radius-sm);
    background: var(--c2l-surface-2);
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-3);
}

.c2l .c2l-acc-row.is-open .c2l-acc-index {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-acc-main {
    flex: 1;
    min-width: 0;
}

/* Consumer utility for the transcluded summary region: approximates the
   prototype's scannable columns (title / owner / date / status). Free-form
   flex inside .c2l-acc-main is equally supported. */
.c2l .c2l-acc-cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 110px;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.c2l .c2l-acc-name {
    font-size: 13px;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c2l .c2l-acc-meta {
    font-size: 12px;
    color: var(--c2l-fg-3);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.c2l .c2l-acc-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.c2l .c2l-acc-actions button {
    background: transparent;
    border: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--c2l-radius-sm);
    color: var(--c2l-fg-muted);
    cursor: pointer;
    font-size: 13px;
    transition: background var(--c2l-dur-instant), color var(--c2l-dur-instant);
}

.c2l .c2l-acc-actions button:hover {
    background: var(--c2l-surface-2);
    color: var(--c2l-primary);
}

.c2l .c2l-acc-actions button.del:hover {
    background: rgba(226, 0, 26, .1);
    color: var(--c2l-red);
}

.c2l .c2l-acc-actions button[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.c2l .c2l-acc-detail {
    border-top: 1px solid var(--c2l-border);
    padding: 16px 18px 18px 30px;
    background: #fbfcfd;
    overflow: hidden;
}

/* Opt-in entrance animation (animated binding) - entrance only, no exit,
   no ngAnimate, gated behind the .c2l-acc-animated modifier the same way
   as .c2l-eselect-animated (CP-7/CP-8) - default rendering has no
   animation. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-acc-animated .c2l-acc-detail { animation: c2l-acc-detail .22s ease-out both; }
}

@keyframes c2l-acc-detail {
    from { transform: translateY(-6px); }
    to   { transform: none; }
}

.c2l .c2l-acc-detail-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--c2l-border);
}

/* Collapse reads as a link, not a control. It is a way back out of a row you
   already opened - the same weight as the footer links elsewhere in the
   catalog (.c2l-eselect-footer a) - and a full btn-default chip gave it more
   visual weight than the Save/Remove actions it sits beside. */
.c2l .c2l-acc-collapse-link {
    border: 0;
    background: transparent;
    padding: 2px 4px;
    font: inherit;
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-secondary);
    cursor: pointer;
    transition: color var(--c2l-dur-instant);
}

.c2l .c2l-acc-collapse-link:hover {
    color: var(--c2l-primary);
    text-decoration: underline;
}

.c2l .c2l-acc-collapse-link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-acc-add-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 1px dashed var(--c2l-secondary);
    border-radius: var(--c2l-radius-sm);
    background: rgba(76, 172, 190, .04);
    color: var(--c2l-secondary);
    font-family: inherit;
    font-weight: var(--c2l-fw-semibold);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--c2l-dur-instant), color var(--c2l-dur-instant);
}

.c2l .c2l-acc-add-row:hover {
    background: rgba(76, 172, 190, .12);
    color: var(--c2l-primary);
}

.c2l .c2l-acc-empty {
    border: 1px dashed var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    padding: 32px;
    text-align: center;
    color: var(--c2l-fg-muted);
    font-size: 13px;
    background: #fbfcfd;
}

.c2l .c2l-acc-empty-icon {
    font-size: 24px;
    color: var(--c2l-border-strong);
    margin-bottom: 6px;
}

.c2l .c2l-acc-empty-hint {
    font-size: 11px;
    margin-top: 4px;
}

/* ---------- [Aggregates] C-2 master-detail split (pattern recipe, c2l-md-*) ----------
   Desktop-first: the 280px/1fr shell needs roughly >= 720px of width; below
   that, prefer the C-1 accordion repeater instead of engineering a stacked
   fallback here. Shell height is the min-height below; list and detail body
   scroll internally. */
.c2l .c2l-md {
    display: grid;
    grid-template-columns: 280px 1fr;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    overflow: hidden;
    min-height: 460px;
}

.c2l .c2l-md-list {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--c2l-border);
    background: var(--c2l-surface-footer);
    min-width: 0;
}

.c2l .c2l-md-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c2l-border);
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-md-list-title {
    font-size: 11px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.c2l .c2l-md-list-add {
    background: var(--c2l-surface);
    color: var(--c2l-primary);
    border: 0;
    border-radius: var(--c2l-radius-sm);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background var(--c2l-dur-instant), color var(--c2l-dur-instant);
}

.c2l .c2l-md-list-add:hover {
    background: var(--c2l-secondary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-md-list-items {
    flex: 1;
    overflow-y: auto;
}

.c2l .c2l-md-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f2f3f5;
    cursor: pointer;
    border-left: 3px solid transparent;
    outline: none;
    transition: background var(--c2l-dur-instant), border-left-color var(--c2l-dur-instant);
}

.c2l .c2l-md-item:hover { background: rgba(76, 172, 190, .06); }

/* House :focus-visible ring, same shape as .c2l-acc-summary immediately
   above: outline:none on the base rule, ring only under :focus-visible. */
.c2l .c2l-md-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-md-item.is-active {
    background: var(--c2l-surface);
    border-left-color: var(--c2l-primary);
}

.c2l .c2l-md-item-index {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-surface-2);
    font-size: 11px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-3);
    flex-shrink: 0;
}

.c2l .c2l-md-item.is-active .c2l-md-item-index {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-md-item-body {
    flex: 1;
    min-width: 0;
}

.c2l .c2l-md-item-name {
    display: block;
    font-size: 13px;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-1);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c2l .c2l-md-item.is-active .c2l-md-item-name { color: var(--c2l-primary); }

.c2l .c2l-md-item-sub {
    display: block;
    font-size: 11px;
    color: var(--c2l-fg-muted);
    margin-top: 2px;
}

.c2l .c2l-md-item-alert {
    width: 8px;
    height: 8px;
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-red);
    flex-shrink: 0;
}

.c2l .c2l-md-list-foot {
    padding: 8px 12px;
    border-top: 1px solid var(--c2l-border);
    display: flex;
    gap: 4px;
    justify-content: center;
}

.c2l .c2l-md-list-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--c2l-fg-muted);
    font-size: 12px;
}

.c2l .c2l-md-detail {
    display: flex;
    flex-direction: column;
    background: var(--c2l-surface);
    min-width: 0;
}

.c2l .c2l-md-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
}

.c2l .c2l-md-detail-crumbs {
    font-size: 11px;
    color: var(--c2l-fg-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: var(--c2l-fw-semibold);
}

.c2l .c2l-md-detail-title {
    font-size: 17px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-primary);
}

.c2l .c2l-md-detail-actions {
    display: flex;
    gap: 6px;
}

.c2l .c2l-md-detail-body {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
}

.c2l .c2l-md-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 60px 32px;
    text-align: center;
    color: var(--c2l-fg-muted);
}

.c2l .c2l-md-empty-icon {
    font-size: 36px;
    color: var(--c2l-border-strong);
    margin-bottom: 12px;
}

.c2l .c2l-md-empty h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-2);
}

.c2l .c2l-md-empty p {
    font-size: 13px;
    margin: 0;
    max-width: 280px;
}

/* ---------- [Aggregates] C-3 card grid + modal editor (pattern recipe, c2l-card-*) ---------- */
.c2l .c2l-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.c2l .c2l-card {
    position: relative;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    padding: 14px;
    border-left: 4px solid transparent;
    outline: none;
    cursor: pointer;
    transition: box-shadow var(--c2l-dur-fast), border-color var(--c2l-dur-fast);
}

.c2l .c2l-card:hover,
.c2l .c2l-card:focus-within {
    box-shadow: var(--c2l-shadow-card);
}

/* House :focus-visible ring (established at Task 5 / c2l-edit-row, reused
   throughout the catalog) - outline suppressed on the base rule above; the
   ring layers onto the hover/lift shadow so a keyboard-focused card still
   reads as lifted. */
.c2l .c2l-card:focus-visible {
    box-shadow: var(--c2l-shadow-card), inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-card--accent-danger  { border-left-color: var(--c2l-red); }
.c2l .c2l-card--accent-warning { border-left-color: var(--c2l-orange); }
.c2l .c2l-card--accent-success { border-left-color: var(--c2l-tertiary); }

.c2l .c2l-card-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.c2l .c2l-card-ref {
    font-family: var(--c2l-font-mono);
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-muted);
    letter-spacing: .04em;
}

.c2l .c2l-card-pill {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 8px;
    border-radius: var(--c2l-radius-pill);
    margin-left: auto;
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-2);
}

.c2l .c2l-card--accent-danger  .c2l-card-pill { background: rgba(226, 0, 26, .12); color: var(--c2l-red-deep); }
.c2l .c2l-card--accent-warning .c2l-card-pill { background: rgba(242, 148, 0, .16); color: var(--c2l-orange-deep); }
.c2l .c2l-card--accent-success .c2l-card-pill { background: rgba(26, 179, 148, .16); color: var(--c2l-tertiary); }

.c2l .c2l-card-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-1);
    line-height: 1.3;
}

.c2l .c2l-card-desc {
    font-size: 12px;
    color: var(--c2l-fg-4);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    min-height: 36px;
}

.c2l .c2l-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #f2f3f5;
}

.c2l .c2l-card-owner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--c2l-fg-3);
}

.c2l .c2l-card-count {
    font-size: 11px;
    color: var(--c2l-fg-muted);
}

.c2l .c2l-card-count i {
    color: var(--c2l-secondary);
    margin-right: 3px;
}

/* Hover-revealed actions; :focus-within keeps them reachable by keyboard
   (covers both the card itself receiving focus and a nested action button
   receiving it). In-flow reveal: the actions span is a flex child of
   .c2l-card-row1 right after the pill, collapsed to max-width: 0 at rest.
   Growing max-width on hover/focus-within pushes .c2l-card-pill left via its
   existing margin-left: auto (:3430) - no absolute positioning, no recenter
   hack, and the motion is a smooth animation rather than an instant swap. */
.c2l .c2l-card-actions {
    display: flex;
    gap: 2px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--c2l-dur-fast), opacity var(--c2l-dur-fast);
}

.c2l .c2l-card:hover .c2l-card-actions,
.c2l .c2l-card:focus-within .c2l-card-actions {
    /* 54px = 2 x 24px buttons (.c2l-card-actions button's width, below) +
       2px gap (.c2l-card-actions' gap, above) + 4px slack; bump this if a
       third action button is added or .c2l-card-actions button's width
       changes, or the overflow: hidden above will clip the buttons
       silently with no build error, test failure, or visual warning. */
    max-width: 54px;
    opacity: 1;
}

.c2l .c2l-card-actions button {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--c2l-fg-3);
    transition: background var(--c2l-dur-instant), color var(--c2l-dur-instant);
}

.c2l .c2l-card-actions button:hover {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    border-color: var(--c2l-primary);
}

.c2l .c2l-card-actions button.del:hover {
    background: var(--c2l-red);
    border-color: var(--c2l-red);
}

.c2l .c2l-card-add-tile {
    border: 2px dashed var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    padding: 14px;
    width: 100%;
    background: rgba(76, 172, 190, .03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 132px;
    color: var(--c2l-fg-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--c2l-fw-semibold);
    transition: border-color var(--c2l-dur-instant), color var(--c2l-dur-instant), background var(--c2l-dur-instant);
}

.c2l .c2l-card-add-tile:hover,
.c2l .c2l-card-add-tile:focus {
    border-color: var(--c2l-secondary);
    color: var(--c2l-secondary);
    background: rgba(76, 172, 190, .08);
}

.c2l .c2l-card-add-plus {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-surface);
    border: 1px solid currentColor;
    margin-bottom: 8px;
    font-size: 16px;
}

/* W2-12 Step 2. `.c2l-modal-wizard-host` - promoted verbatim from
   `.aicms-modal-wizard` (`Areas/AICMS/Content/aicms-design.css`, "Step card"
   region, E2a ruling A4). The outer modal-scroll/flex-column plumbing common
   to all 8 wizard modal roots: makes the ng-if'd content div and the
   ng-switch element flex-column children that shrink correctly inside the
   ngdialog scroll host, so a step's own flex chain (`.c2l-wizard-stage` and
   friends, below) has a sized ancestor to fill. E2a kept the AICMS-namespaced
   original alive through E2a specifically so this promotion, and the
   `tests/e2e/visual/design-refactor-snapshots.spec.js` selector update that
   goes with it, could land together in E2b - see that file's `A4` ruling row.
   Declarations below are copied from `.aicms-modal-wizard`'s rules unchanged;
   only the selector's class name and the div[ng-if] value change (still
   `vm.version`, present in all 8 wizard controllers). */
.c2l .c2l-modal-wizard-host > div[ng-if="vm.version"],
.c2l .c2l-modal-wizard-host > div.ng-scope {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
.c2l .c2l-modal-wizard-host ng-switch {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

/* ---------- [Wizards] W-2 vertical sidebar wizard ----------
   c2lWizardSidebar rail chrome + .c2l-wizard-stage-* CSS atoms. The stage
   side is stateless composition markup (see the StyleGuideWizards recipe);
   field styling inside the stage body comes from the c2lField* directives.
   Ported from design-mirror-final:docs/design/showcase/form-layouts/forms.css .w-vert block. */
.c2l .c2l-wizard-vert {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 480px;
}

/* The grid item here is the <c2l-wizard-sidebar> ELEMENT, not the rail div
   inside it. A custom element is display:inline by default, so while the
   grid stretched the element to the full row height, the plum .c2l-wizard-rail
   inside it stayed content-height and stopped short of the stage footer.
   Make the host a block that takes the stretched height, then let the rail
   fill it. */
.c2l .c2l-wizard-vert > c2l-wizard-sidebar {
    display: block;
    height: 100%;
    min-height: 0;
}

.c2l .c2l-wizard-rail {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    padding: 22px 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.c2l .c2l-wizard-rail-heading {
    margin: 0 0 4px;
    padding: 0 22px;
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .55);
}

.c2l .c2l-wizard-rail-title {
    padding: 0 22px 18px;
    font-size: var(--c2l-fs-md);
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-on-primary);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 12px;
}

.c2l .c2l-wizard-vstep {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 22px;
    cursor: pointer;
    border-left: 3px solid transparent;
    outline: none;
    transition: background var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                border-left-color var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

.c2l .c2l-wizard-vstep:hover {
    background: rgba(255, 255, 255, .04);
}

/* House :focus-visible ring (established at Task 5 / c2l-edit-row, reused
   throughout the module) - outline suppressed on the base rule above, ring
   added only under :focus-visible. var(--c2l-secondary) is already the
   rail's own accent color (is-active border, progress fill), so it reads
   clearly against the dark plum background. */
.c2l .c2l-wizard-vstep:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-wizard-vstep.is-active {
    background: rgba(255, 255, 255, .08);
    border-left-color: var(--c2l-secondary);
}

.c2l .c2l-wizard-vstep-bullet {
    width: 26px;
    height: 26px;
    border-radius: var(--c2l-radius-circle);
    border: 2px solid rgba(255, 255, 255, .4);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-bold);
    color: rgba(255, 255, 255, .7);
    flex-shrink: 0;
    transition: all var(--c2l-dur-base) var(--c2l-ease-out-quart);
}

.c2l .c2l-wizard-vstep.is-active .c2l-wizard-vstep-bullet {
    background: var(--c2l-surface);
    color: var(--c2l-primary);
    border-color: var(--c2l-surface);
}

.c2l .c2l-wizard-vstep.is-done .c2l-wizard-vstep-bullet {
    background: var(--c2l-tertiary);
    border-color: var(--c2l-tertiary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-wizard-vstep.is-error .c2l-wizard-vstep-bullet {
    background: var(--c2l-red);
    border-color: var(--c2l-red);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-wizard-vstep-text {
    min-width: 0;
}

.c2l .c2l-wizard-vstep-name {
    display: block;
    font-size: 13px;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-on-primary);
    line-height: 1.3;
}

.c2l .c2l-wizard-vstep-sub {
    display: block;
    font-size: var(--c2l-fs-xs);
    color: rgba(255, 255, 255, .55);
    margin-top: 2px;
}

.c2l .c2l-wizard-vstep.is-locked {
    cursor: not-allowed;
    opacity: .5;
}

.c2l .c2l-wizard-vstep.is-locked:hover {
    background: transparent;
}

.c2l .c2l-wizard-rail-progress {
    margin-top: auto;
    padding: 18px 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.c2l .c2l-wizard-rail-progress-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.c2l .c2l-wizard-rail-progress-label b {
    color: var(--c2l-fg-on-primary);
    font-weight: var(--c2l-fw-bold);
}

.c2l .c2l-wizard-rail-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, .15);
    border-radius: var(--c2l-radius-pill);
    overflow: hidden;
}

.c2l .c2l-wizard-rail-progress-fill {
    height: 100%;
    background: var(--c2l-secondary);
    transition: width .35s ease;
}

/* Stage side - stateless composition atoms (no directive).

   Phase E1 Task 2 widened these atoms so an AICMS wizard step can be composed
   out of them. Every amendment below is derived from the AICMS wizard
   scaffold that Phase E2 retires - Areas/AICMS/Content/aicms-design.css,
   "AICMS Wizard scaffold (FRIA + reusable for other wizards)" block - and
   each one names the rule it replaces. */

/* E1 D2a. Replaces the flex plumbing of `.aicms-wizard-card`, which is
   `flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column`.
   `display`/`flex-direction` were already correct here; `flex` and
   `min-height` are what let the stage shrink inside a height-constrained
   flex column (the modal) instead of forcing it open.
   W-2's stage is a GRID item, where `flex` is inert - but `min-height` is
   NOT a flex property and does apply there, overriding a grid item's
   automatic minimum size. It happens to change nothing in W-2 today
   (measured); a maintainer changing this must re-measure, not assume. */
.c2l .c2l-wizard-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--c2l-surface);
}

.c2l .c2l-wizard-stage-head {
    padding: 22px 28px 12px;
    border-bottom: 1px solid var(--c2l-border);
}

/* E1 D2c. Replaces `.aicms-wizard-card-head h2`. All 41 AICMS step titles
   are <h2>; this head styled `h3` by element only, so a migrated step would
   render unstyled. Both branches are written out in full DELIBERATELY: the
   abbreviated `.c2l .c2l-wizard-stage-head h2, h3 { }` would attach a bare
   `h3` selector matching every <h3> on every page that loads this
   stylesheet. The h3 branch is byte-identical to the `h3` rule it extends,
   so its specificity (0,2,1) and the existing W-2 rendering are unchanged.

   Typography deltas, both on the phase sign-off list:
   - size `var(--c2l-fs-h3)` (21px) -> `var(--c2l-fs-lg)` (20px). Plan-
     mandated; Task 8's sign-off text names it.
   - AICMS's `line-height: var(--c2l-lh-tight)` is NOT restated here, and for
     an <h2> it does not need to be: the module's own type scale
     (`.c2l h2` at the top of this file) already supplies exactly
     `var(--c2l-lh-tight)`. Measured: h2 = 24px on a 20px title, the same 1.2
     ratio AICMS declared. `.c2l h3` however supplies `var(--c2l-lh-base)`
     (1.428, measured 28.56px), so the two branches of THIS shared block
     render 4.56px apart. Normalising them means declaring a line-height for
     both, which moves W-2's existing <h3> - outside what ruling A5
     authorised, so it is recorded rather than done. */
.c2l .c2l-wizard-stage-head h2,
.c2l .c2l-wizard-stage-head h3 {
    margin: 0;
    font-size: var(--c2l-fs-lg);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-primary);
}

/* E1 D2d. Replaces `.aicms-wizard-card-head h2 > .fa` ("Wizard step head
   icon"). 36 of the 41 AICMS step titles carry a leading icon and keep it;
   the child combinator makes this a no-op on the 5 FriaWizard headings that
   have none, so no heading is required to carry an icon. Mirrored onto the
   h3 branch so both heading levels the head now accepts behave alike. */
.c2l .c2l-wizard-stage-head h2 > .fa,
.c2l .c2l-wizard-stage-head h3 > .fa {
    color: var(--c2l-secondary);
    margin-right: var(--c2l-space-sm);
}

.c2l .c2l-wizard-stage-crumbs {
    font-size: var(--c2l-fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c2l-secondary);
    font-weight: var(--c2l-fw-bold);
    margin-bottom: 4px;
}

/* E1 D2e. This - NOT `-stage-crumbs` - is the target for
   `.aicms-wizard-card-subtitle`: it keeps the subtitle BELOW the heading, so
   E2's per-view diffs stay a class rename rather than a DOM reorder. The
   typography deliberately changes (11px uppercase tracked #98a0a4 -> 13px
   sentence-case #656565, plus a 580px measure cap); that delta is on the
   phase sign-off list. Left as-is on purpose. */
.c2l .c2l-wizard-stage-sub {
    font-size: 13px;
    color: var(--c2l-fg-4);
    margin-top: 6px;
    max-width: 580px;
}

/* E1 D2a + D2b (author ruling A5). Replaces `.aicms-wizard-card-body`,
   which is `flex: 1 1 auto; min-height: 0; display: flex;
   flex-direction: column; gap: var(--c2l-space-lg)` - every one of those
   five declarations is taken from that rule verbatim (`--c2l-space-lg` is
   16px, c2l-tokens.css). `flex: 1 1 auto` supersedes the old `flex: 1`
   (= `1 1 0%`); with a single growing item the resolved height is the same.
   `overflow-y: auto` is the ONE declaration with no AICMS counterpart: the
   AICMS chain only clips (`.aicms-wizard-card { overflow: hidden }`), and
   without it `min-height: 0` would let a tall step spill over its own
   footer instead of scrolling. Ruling A5 accepts the resulting inter-field
   shift in the W-2 demo, and the figure is 12px -> 28px (+16px). That is the
   RE-RULED number: the author was re-asked on 2026-08-07, after a controlled
   live measurement, and kept the faithful port. An earlier "+4px" in this
   comment measured box-to-box geometry rather than visible whitespace and is
   RETIRED - do not re-correct it back. W-2's rows are c2lField* directives,
   not `.form-group`, so they keep `.c2l .c2l-field`'s own 12px on top of this
   rule's 16px `gap`; the `.form-group` reset below spells out why that reset
   deliberately does not cover them. */
.c2l .c2l-wizard-stage-body {
    padding: 22px 28px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--c2l-space-lg);
}

/* E1 D2b, second half. Verbatim from `.aicms-wizard-card-body .form-group`
   (aicms-design.css). Without it D2b's promise is false: Bootstrap 3's
   `.form-group { margin-bottom: 15px }` (Content/bootstrap.css) renders ON
   TOP of the new gap once the body is a flex container, so rows sit ~31px
   apart and the last one leaves 15px of dead space at the bottom of the
   scroll area. Nothing under Content/design/ styles `.form-group` (zero
   hits; positive-controlled against `form-control`, 18 hits), so this is the
   only thing standing between E2 and that regression on 179 `.form-group`
   elements - every one of them inside an `aicms-wizard-card-body` today.
   NOTE it does NOT cover `.c2l-field`, the c2lField* directives' own wrapper
   (`margin-bottom: var(--c2l-space-md)`, 12px). AICMS does not zero that
   either, so a `<c2l-field-*>` row keeps 12px + the 16px gap in the stage
   exactly as it does in an AICMS wizard body today. */
.c2l .c2l-wizard-stage-body .form-group {
    margin: 0;
}

/* E1 T3, final fix wave. Same defect, same shape, as the `.form-group` reset
   directly above - and as `-prompt`'s `margin: 0` in the E1 T4 block below.
   `.c2l .c2l-alert` carries `margin-bottom: var(--c2l-space-sm)` (8px, in the
   Task 12 region of this file); `.c2l .aicms-wizard-callout`
   (Areas/AICMS/Content/aicms-design.css) carries NO margin at all and relies
   entirely on `.aicms-wizard-card-body`'s 16px gap. Margins on flex items do
   not collapse - they add ON TOP of `gap` - so without this every one of the
   20 callouts Phase E2 re-classes to `.c2l-alert` would sit 24px above its
   next sibling where it sits 16px today, while every other block in the same
   step stayed at 16px. E1 renders no alert inside a stage body (CP-15's demo
   lives on TokenComponentsToasts, where the 8px is correct), which is why
   nothing here catches it.
   Scoped to the stage rather than changing `.c2l-alert`'s own margin: the
   family has consumers outside a wizard, where an 8px separation between
   stacked alerts is the right default. (0,3,0) beats `.c2l .c2l-alert`'s
   (0,2,0), so this lands regardless of source order. */
.c2l .c2l-wizard-stage-body .c2l-alert {
    margin: 0;
}

.c2l .c2l-wizard-stage-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    border-top: 1px solid var(--c2l-border);
    background: var(--c2l-surface-footer);
}

.c2l .c2l-wizard-stage-meta {
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-fg-muted);
}

.c2l .c2l-wizard-stage-actions {
    display: flex;
    gap: 6px;
}

/* Author ruling A11 (E2a Task 4 follow-up, 2026-08-07). `-stage-foot` is
   `justify-content: space-between`, which - per the CSS Box Alignment spec -
   is equivalent to `flex-start` when the flex container has only ONE
   alignment subject. Every one of the 41 AICMS wizard step footers wraps its
   buttons in a lone `.c2l-wizard-stage-actions` with no `-stage-meta`
   sibling (verified live post-Task-4: none of the 8 wizard views has a
   second top-level child in any footer), so without this rule the actions
   block sits flush against the footer's LEFT edge - reproduced empirically
   in an isolated Playwright harness (Task 4 report, "Visual check" section)
   before this rule existed. `:only-child` pulls that lone block to the
   right via `margin-left: auto` instead, matching the house convention:
   `.c2l-modal-footer` (above, ~L1425) is `justify-content: flex-end` and
   every one of the 20 pre-existing migrated AICMS modals right-aligns its
   actions that way - this brings the wizard footer into line rather than
   inventing a new look.
   Deliberately NOT a real `-stage-meta` sibling with autosave copy: grepping
   the wizard controllers for `$interval`/`autoSave` found nothing - none of
   the 8 wizards autosaves - so the W-2 demo's "Draft saved automatically."
   text would be a false claim if reused inside an actual wizard step. The
   fix has to live in the atom, not in invented per-step copy.
   Both W-2 style-guide demos (`c2l-wizard-vert` sidebar panel and the
   "AICMS step recipe" panel, `Views/DesignDirective/StyleGuideWizards.cshtml`)
   carry a real `-stage-meta` div immediately before `-stage-actions`, so
   `:only-child` does not match there and neither demo's rendering changes -
   verified both in source (two children, not one) and empirically (second
   Playwright reading below, Task 4 report addendum). */
.c2l .c2l-wizard-stage-actions:only-child {
    margin-left: auto;
}

/* E1 D2f (author ruling A6). Replaces
   `.aicms-wizard-card-footer .btn { min-width: 120px }`, so E2 can wrap each
   wizard's existing footer buttons in `.c2l-wizard-stage-actions` without
   restyling them - E2 must supply that wrapper. Scoped off `btn-sm`/`btn-xs`
   because the AICMS rule only ever applied to full-size buttons: as measured
   at E1 T2, every button inside an `aicms-wizard-card-footer` was full-size
   and every `btn-sm` in those files was a body row-action. (A live census
   belongs in the E1 T2 report, not here - it is guaranteed stale once E2
   rewrites these views and nothing checks it.) The W-2 style-guide demo
   footer is btn-sm and is therefore untouched. */
.c2l .c2l-wizard-stage-foot .btn:not(.btn-sm):not(.btn-xs) {
    min-width: 120px;
}

/* E1 T4 - the four wizard TEXT atoms, promoted from the same retiring AICMS
   wizard scaffold the stage atoms above came from. They are the content of a
   step body, not its chrome, so they stay part of the W-2 stage recipe rather
   than taking catalog codes of their own (see COMPONENTS.md W-2).
   ADD-only on purpose: the `.aicms-wizard-*` originals in
   Areas/AICMS/Content/aicms-design.css are NOT retired here. Phase E2 migrates
   the eight wizard views one at a time and every view it has not reached yet
   still needs them; E2's final task deletes them.
   Declarations below are copied from those rules unchanged. */

/* E1 T4a. Replaces `.aicms-wizard-prompt` (14 uses across 7 of the 8 wizard
   views, as measured at E1 T4). `margin: 0` is the load-bearing one: `.c2l p`
   at the top of this file gives every paragraph
   `margin: 0 0 var(--c2l-space-md)` (12px), and once `-stage-body` became a
   flex column with a 16px `gap` (E1 T2 / ruling A5) that 12px stacks on top of
   the gap, so a leading paragraph reads 28px instead of 16px. E1 T2 recorded
   the defect (FIX-1a) and left the fix here. Specificity (0,2,0) beats
   `.c2l p` (0,1,1), so the reset lands. */
.c2l .c2l-wizard-prompt {
    margin: 0;
    font-size: var(--c2l-fs-md);
    color: var(--c2l-fg-1);
    line-height: var(--c2l-lh-loose);
}

/* E1 T4b. Replaces `.aicms-wizard-help` (57 uses - 56 on <p>, 1 on a <label> -
   as measured at E1 T4). `text-transform: none` + `letter-spacing: 0` are
   carried over deliberately, and NOT for the reason the AICMS file suggests.
   They read as an undo of `.aicms-wizard-card-body label`
   (`text-transform: uppercase; letter-spacing: .04em`), but they never were
   one: that selector is (0,2,1) and this one is (0,2,0), so on the single
   `<label class="aicms-wizard-help">` in the wizard views the label rule wins
   outright, and on the other 56 the element is a <p> the label rule cannot
   match. What they actually do is make this atom context-independent -
   `text-transform` and `letter-spacing` INHERIT.
   CORRECTED, E2a Task 2 final review fix wave: this comment used to cite
   `.c2l-form-airy .c2l-field label.control-label` and claim both
   declarations are inert in the default cascade. That selector no longer
   exists - E2a Task 2 widened it to the element-keyed `.c2l .c2l-form-airy
   label` (0,2,1), still described just below `.c2l-wizard-stage-body`'s S-2
   row in COMPONENTS.md - and the inert claim is now FALSE for the one
   `<label class="aicms-wizard-help">` case: once a stage body composes
   `c2l-form-airy` (the recipe this task establishes), that label rule
   outranks `.c2l-wizard-help` ((0,2,1) beats (0,2,0)) and overrides
   `text-transform: none` / `letter-spacing: 0` right back to uppercase /
   `.14em`, along with font-size, weight, color and the bottom half of the
   margin. See the corrected COMPONENTS.md W-2 row for the full consequence.
   The declarations stay inert ONLY for the 56 `<p>` uses, which the label
   rule cannot match, and for any future consumer of this atom that is not
   composed with `c2l-form-airy`. */
.c2l .c2l-wizard-help {
    margin: -4px 0 var(--c2l-space-sm);
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-fg-3);
    font-weight: var(--c2l-fw-regular);
    text-transform: none;
    letter-spacing: 0;
}

/* E1 T4c. Replaces `.aicms-wizard-substep` (6 uses, as measured at E1 T4) -
   a ruled sub-section inside a step body. It is a flex column in its own
   right, so its `gap` (12px) governs the rows inside it while
   `-stage-body`'s 16px gap governs the blocks around it. */
.c2l .c2l-wizard-substep {
    padding: var(--c2l-space-md) 0 0;
    margin-top: var(--c2l-space-sm);
    border-top: 1px solid var(--c2l-border);
    display: flex;
    flex-direction: column;
    gap: var(--c2l-space-md);
}

/* E1 T4d. Replaces `.aicms-wizard-summary` and its two child rules (4 uses,
   as measured at E1 T4 - every one of them a review/confirm step). The child
   rules stay ELEMENT-keyed on dt/dd rather than gaining `-summary-term` /
   `-summary-value` classes: all four call sites are already
   `<dl class="...-summary">` with direct `<dt>`/`<dd>` children, the two-column
   grid depends on those children alternating term/value, and <dl> is the
   correct element for a term/value review list. E2 therefore supplies the same
   markup it has today and its diff stays a class rename.
   `text-transform: none` + `letter-spacing: 0` on `dt` are carried verbatim
   for the same inheritance reason as T4b; no rule in scope uppercases a <dt>
   today. */
.c2l .c2l-wizard-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--c2l-space-sm) var(--c2l-space-lg);
    margin: 0;
    padding: var(--c2l-space-md) var(--c2l-space-lg);
    background: var(--c2l-surface-2);
    border-radius: var(--c2l-radius-sm);
}

.c2l .c2l-wizard-summary dt {
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-2);
    align-self: center;
    text-transform: none;
    letter-spacing: 0;
}

.c2l .c2l-wizard-summary dd {
    margin: 0;
    align-self: center;
    text-align: right;
}

/* W2-12 Step 1b. Promoted verbatim from `.aicms-prohibited-list`
   (`Areas/AICMS/Content/aicms-design.css`, "Prohibited practice list inside callout"
   region) - the AiClassificationWizard Step-1 Article-5 satellite list, the sole
   consumer. Discovered mid-retirement (W2-12 Step 1 consumer-proof grep): the CSS
   retirement's own "prove zero consumers" gate found this one still live and
   guarded by a positive assertion, so it was never a Wave-2 sweep target and no
   task owned it (errata banner entry, docs/plan/2026-08-11-design-polish-e2b-d2.plan.md).
   Resolved the same way E2a promoted the four wizard text atoms above: rename only,
   declarations copied unchanged, zero pixels move. The `.aicms-prohibited-list`
   original is deleted in the same Step 3 pass that retires `.aicms-wizard-card*`. */
.c2l .c2l-prohibited-list {
  margin: var(--c2l-space-sm) 0 0;
  padding-left: var(--c2l-space-lg);
  list-style: none;
}
.c2l .c2l-prohibited-list > li {
  position: relative;
  padding: 4px 0 4px 0;
  border-bottom: 1px solid rgba(76, 172, 190, .18);
  font-size: var(--c2l-fs-sm);
  line-height: var(--c2l-lh-loose);
  color: var(--c2l-fg-2);
}
.c2l .c2l-prohibited-list > li:last-child { border-bottom: 0; }
.c2l .c2l-prohibited-list > li > strong { color: var(--c2l-primary); }

/* ---------- [Wizards] W-3 inline accordion wizard ----------
   c2lWizardAccordion + c2lWizardAccordionStep pair. Flow state (active
   index, doneUpTo) is consumer-side; .c2l-wizard-astep-actions styles the
   consumer's in-body actions row. Ported from
   design-mirror-final:docs/design/showcase/form-layouts/forms.css .w-acc block. */
.c2l .c2l-wizard-accordion {
    padding: 18px 24px 24px;
    background: var(--c2l-surface);
}

.c2l .c2l-wizard-astep {
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                box-shadow var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

.c2l .c2l-wizard-astep.is-active {
    border-color: var(--c2l-secondary);
    box-shadow: 0 4px 14px rgba(76, 172, 190, .12);
}

.c2l .c2l-wizard-astep.is-done .c2l-wizard-astep-head {
    background: #f5fbf9;
}

.c2l .c2l-wizard-astep.is-locked {
    opacity: .55;
}

.c2l .c2l-wizard-astep-head {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    background: var(--c2l-surface-footer);
    outline: none;
    transition: background var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

/* House :focus-visible ring (established at Task 5 / c2l-edit-row, reused
   throughout the catalog - c2l-acc-summary, c2l-wizard-vstep, c2l-card) -
   outline suppressed on the base rule above, ring added only here. This is
   "half" of this component's focus treatment: the head is the D8 focusable
   node (role="button", tabindex, keydown), so it gets the house ring. The
   OTHER half - the nested Edit button on a done-and-collapsed head - is
   deliberately left WITHOUT an outline: none override, same as
   .c2l-acc-actions button / .c2l-card-actions button elsewhere in this
   file: a real native <button> keeps its browser-default focus outline
   unless something suppresses it, so that outline already satisfies "never
   outline: none without a genuinely visible :focus-visible replacement" -
   there is nothing to replace. */
.c2l .c2l-wizard-astep-head:focus-visible {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-wizard-astep.is-active .c2l-wizard-astep-head {
    background: var(--c2l-surface);
}

.c2l .c2l-wizard-astep.is-locked .c2l-wizard-astep-head {
    cursor: not-allowed;
}

.c2l .c2l-wizard-astep-bullet {
    width: 30px;
    height: 30px;
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-bold);
    transition: all var(--c2l-dur-base) var(--c2l-ease-out-quart);
}

.c2l .c2l-wizard-astep.is-active .c2l-wizard-astep-bullet {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    box-shadow: 0 0 0 4px rgba(71, 5, 68, .1);
}

.c2l .c2l-wizard-astep.is-done .c2l-wizard-astep-bullet {
    background: var(--c2l-tertiary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-wizard-astep-text {
    min-width: 0;
}

.c2l .c2l-wizard-astep-name {
    display: block;
    font-size: var(--c2l-fs-base);
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-fg-1);
}

.c2l .c2l-wizard-astep.is-active .c2l-wizard-astep-name {
    color: var(--c2l-primary);
}

.c2l .c2l-wizard-astep-sub {
    display: block;
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-fg-muted);
    margin-top: 2px;
}

.c2l .c2l-wizard-astep.is-done .c2l-wizard-astep-sub {
    color: var(--c2l-tertiary);
    font-weight: var(--c2l-fw-semibold);
}

.c2l .c2l-wizard-astep-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.c2l .c2l-wizard-astep-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-3);
    max-width: 260px;
    justify-content: flex-end;
}

.c2l .c2l-wizard-astep-summary-pill {
    background: var(--c2l-surface-2);
    padding: 2px 8px;
    border-radius: var(--c2l-radius-pill);
    font-weight: var(--c2l-fw-semibold);
}

.c2l .c2l-wizard-astep-edit {
    background: transparent;
    border: 0;
    color: var(--c2l-secondary);
    cursor: pointer;
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    padding: 4px 8px;
}

.c2l .c2l-wizard-astep-edit:hover {
    color: var(--c2l-primary);
}

.c2l .c2l-wizard-astep-body {
    padding: 4px 24px 20px 64px;
    border-top: 1px solid var(--c2l-border);
}

.c2l .c2l-wizard-astep-actions {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--c2l-border);
}

/* ---------- [DATES A] D-2 inline calendar skin + readout atoms ---------- */
/* .c2l-cal-inline maps the showcase .dcal rhythm onto uib-datepicker's table
   markup: 38px cells by default (D-2 wide), 28px with the .c2l-cal-tight
   modifier (D-3 mini calendar, DT-1 popover calendar). --c2l-dcal-cell is a
   component-scoped custom property, not a global token. */
.c2l .c2l-datepicker-inline {
    display: inline-block;
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    padding: 6px 10px 10px;
    background: var(--c2l-surface);
}

.c2l .c2l-datepicker-inline.is-disabled {
    pointer-events: none;
    opacity: .55;
}

.c2l .c2l-cal-inline {
    --c2l-dcal-cell: 38px;
    user-select: none;
}

.c2l .c2l-cal-inline.c2l-cal-tight { --c2l-dcal-cell: 28px; }

.c2l .c2l-cal-inline table { border-collapse: separate; }
/* D2 fix round 1 (finding 3): a "table:focus{outline:none}" rule shipped
   here originally is dead CSS - uib puts tabindex="0" on the .uib-daypicker
   wrapper div (uib/template/datepicker/datepicker.html), never on the
   <table>, so the table itself is never keyboard-focusable and the rule
   never fires. Pruned rather than kept as inert cruft. The real focus
   target (.uib-daypicker) is left with its native default outline - see
   the .btn.active span ring below for the roving-cursor indicator, which
   is the actual per-cell feedback sighted keyboard users need. */

/* header: quiet nav arrows + bold plum title (uib's stock month/year
   drill-down header is accepted - no hand-rolled header) */
.c2l .c2l-cal-inline .btn.uib-left,
.c2l .c2l-cal-inline .btn.uib-right {
    width: 26px;
    padding: 4px 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--c2l-radius-sm);
    box-shadow: none;
    color: var(--c2l-fg-3);
    font-size: 12px;
}

.c2l .c2l-cal-inline .btn.uib-left:hover,
.c2l .c2l-cal-inline .btn.uib-right:hover {
    background: var(--c2l-surface-2);
    color: var(--c2l-primary);
}

.c2l .c2l-cal-inline .btn.uib-title {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-primary);
    letter-spacing: .01em;
}

.c2l .c2l-cal-inline .btn.uib-title:hover { background-color: var(--c2l-surface-2); }

/* weekday header row: 10px uppercase; weekend columns (Sa/Su under
   startingDay 1) tinted secondary */
.c2l .c2l-cal-inline .uib-daypicker thead tr:last-child th {
    text-align: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-cal-inline .uib-daypicker thead tr:last-child th small {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .06em;
    color: var(--c2l-fg-muted);
    text-transform: uppercase;
}

.c2l .c2l-cal-inline .uib-daypicker thead tr:last-child th:nth-child(6) small,
.c2l .c2l-cal-inline .uib-daypicker thead tr:last-child th:nth-child(7) small {
    color: var(--c2l-secondary);
}

/* day cells: the button is a transparent hit-area, the inner span is the
   circular day pill (uib marks today with span.text-info, out-of-month with
   span.text-muted, selected with btn.btn-info via uib-is-class) */
.c2l .c2l-cal-inline .uib-daypicker .uib-day { padding: 0; }

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn {
    width: var(--c2l-dcal-cell);
    height: var(--c2l-dcal-cell);
    min-width: var(--c2l-dcal-cell);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: var(--c2l-radius-circle);
    font-size: 12.5px;
    font-weight: var(--c2l-fw-medium);
    color: var(--c2l-fg-2);
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--c2l-dcal-cell) - 8px);
    height: calc(var(--c2l-dcal-cell) - 8px);
    border-radius: var(--c2l-radius-circle);
    transition: background .12s, color .12s, box-shadow .12s;
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn:hover span {
    background: rgba(76,172,190,.16);
    color: var(--c2l-primary);
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn span.text-muted {
    color: var(--c2l-fg-muted);
    opacity: .4;
    font-weight: var(--c2l-fw-regular);
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn span.text-info {
    box-shadow: inset 0 0 0 1.5px var(--c2l-secondary);
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn.btn-info,
.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn.btn-info:hover,
.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn.active {
    background: transparent;
    box-shadow: none;
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn.btn-info span {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    font-weight: var(--c2l-fw-bold);
    box-shadow: 0 2px 6px rgba(71,5,68,.35);
    opacity: 1;
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn.btn-info:hover span {
    background: var(--c2l-primary-dark);
}

/* D2 fix round 1 (finding 2): "active" is uib's roving aria-activedescendant
   cursor cell (day.html's uib-is-class binds 'active' for activeDt). DOM
   focus never leaves the .uib-daypicker container while arrow-keying, so
   without a per-cell marker a sighted keyboard user gets no positional
   feedback at all - only screen-reader users hear the movement. House ring
   (box-shadow: inset 0 0 0 2px var(--c2l-secondary), established at Task 5 /
   c2l-edit-row and reused throughout this stylesheet under :focus-visible)
   repurposed here as a class-driven marker, since this composite widget
   never gives the day button real DOM focus to hang a :focus-visible rule
   off of. The .btn.active.btn-info variant layers the ring on top of the
   selected-day fill (extra box-shadow entry, not a replacement) so a cell
   that is both the roving cursor AND the selected date shows both signals -
   this is the common case right after a keyboard selection. Distinct from
   both a plain day (no ring) and a merely-selected day (fill, no ring). */
.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn.active span {
    box-shadow: inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn.active.btn-info span {
    box-shadow: 0 2px 6px rgba(71,5,68,.35), inset 0 0 0 2px var(--c2l-secondary);
}

.c2l .c2l-cal-inline .uib-daypicker .uib-day .btn[disabled] {
    cursor: not-allowed;
    opacity: .35;
}

/* D-2 readout atoms - consumer-composed side panel (NOT directive markup).
   The consumer binds its own weekday/delta/weekend expressions; see the
   StyleGuideDates demo for the documented recipe. */
.c2l .c2l-date-inline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: flex-start;
}

.c2l .c2l-date-readout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--c2l-surface-footer);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    padding: 14px 16px;
    min-width: 0;
}

.c2l .c2l-date-readout-eyebrow {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c2l-secondary);
}

.c2l .c2l-date-readout-big {
    font-size: 28px;
    font-weight: var(--c2l-fw-thin);
    line-height: 1.05;
    color: var(--c2l-primary);
}

.c2l .c2l-date-readout-big b { font-weight: var(--c2l-fw-bold); }

.c2l .c2l-date-readout-iso {
    font-family: var(--c2l-font-mono);
    font-size: 12px;
    color: var(--c2l-fg-muted);
}

.c2l .c2l-date-readout-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--c2l-fg-4);
    line-height: 1.5;
}

.c2l .c2l-date-readout-meta b {
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
}

@media (max-width: 880px) {
    .c2l .c2l-date-inline { grid-template-columns: 1fr; }
}

/* ---------- [DATES A] D-3 quick deadline chips ---------- */
/* .c2l-chip / .c2l-chip-moment / .c2l-chip.on / .c2l-chip-custom are PINNED
   cross-family names - DR-2's quick-range pills reuse them verbatim.
   Focus ring: .c2l-chip renders as a real native <button> (see
   DateQuickChips.cshtml), so - same precedent as .c2l-acc-actions button /
   .c2l-card-actions button elsewhere in this file - no outline:none +
   house :focus-visible ring pair is added here. The browser's own default
   focus outline already satisfies "never outline: none without a
   genuinely visible :focus-visible replacement" (Global A11y policy);
   there is nothing to replace. */
.c2l .c2l-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-pill);
    font-size: 12px;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-2);
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, border-color .12s, color .12s;
}

.c2l .c2l-chip-moment {
    font-weight: var(--c2l-fw-regular);
    color: var(--c2l-fg-muted);
    font-variant-numeric: tabular-nums;
}

.c2l .c2l-chip:hover {
    border-color: var(--c2l-secondary);
    color: var(--c2l-primary);
}

.c2l .c2l-chip:hover .c2l-chip-moment { color: var(--c2l-secondary); }

.c2l .c2l-chip.on {
    background: var(--c2l-primary);
    border-color: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-chip.on .c2l-chip-moment { color: rgba(255,255,255,.78); }

.c2l .c2l-chip[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.c2l .c2l-chip-custom {
    border-style: dashed;
    color: var(--c2l-secondary);
    /* Not a control in this revision (no click handler, non-focusable) -
       override the base .c2l-chip pointer cursor so it never visually
       promises a click it does not accept. */
    cursor: default;
}

.c2l .c2l-chip-custom:hover {
    border-color: var(--c2l-border);
    color: var(--c2l-secondary);
}

.c2l .c2l-chip-custom.on {
    background: var(--c2l-secondary);
    border-color: var(--c2l-secondary);
    color: var(--c2l-fg-on-primary);
    border-style: solid;
}

.c2l .c2l-date-chips {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.c2l .c2l-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.c2l .c2l-chips-split {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: flex-start;
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    padding: 14px;
    background: var(--c2l-surface-footer);
}

.c2l .c2l-chips-resolved {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c2l .c2l-chips-resolved-line {
    font-size: 22px;
    font-weight: var(--c2l-fw-thin);
    line-height: 1.1;
    color: var(--c2l-primary);
}

.c2l .c2l-chips-resolved-line b { font-weight: var(--c2l-fw-bold); }

.c2l .c2l-chips-resolved-line.is-empty {
    font-size: 12px;
    font-style: italic;
    color: var(--c2l-fg-muted);
}

.c2l .c2l-chips-resolved-iso {
    display: block;
    margin-top: 4px;
    font-family: var(--c2l-font-mono);
    font-size: 12px;
    color: var(--c2l-fg-muted);
}

.c2l .c2l-chips-minical {
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    padding: 4px 6px 6px;
    background: var(--c2l-surface);
}

.c2l .c2l-date-chips.is-disabled .c2l-chips-minical {
    pointer-events: none;
    opacity: .55;
}

@media (max-width: 880px) {
    .c2l .c2l-chips-split { grid-template-columns: 1fr; }
}

/* ---------- [DATES A] DT-1 date+time picker ---------- */
/* .c2l-date-trigger and .c2l-date-panel (+ .c2l-date-pop wrapper and the
   c2l-dpop-in keyframes) are PINNED shared names - DR-1 reuses them
   verbatim; do not redefine them there. */
.c2l .c2l-date-pop { position: relative; }

.c2l .c2l-date-trigger {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    background: var(--c2l-surface);
    border: 1px solid #ced4da;
    border-radius: var(--c2l-radius-sm);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
    position: relative;
    outline: none; /* role="button" div gets no useful native focus rectangle
                       across browsers anyway - the :focus-within ring below
                       (already present for the .is-open state) is the real
                       replacement, same house-pattern intent as
                       .c2l-edit-row / .c2l-tag elsewhere in this file. */
}

.c2l .c2l-date-trigger.is-open,
.c2l .c2l-date-trigger:focus-within {
    border-color: var(--c2l-secondary);
    box-shadow: 0 0 0 2px rgba(76,172,190,.22);
}

.c2l .c2l-date-trigger.is-invalid { border-color: var(--c2l-danger-accent); }

.c2l .c2l-date-trigger-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--c2l-fg-1);
    padding: 7px 10px;
    cursor: pointer;
}

.c2l .c2l-date-trigger-input::placeholder { color: var(--c2l-fg-muted); }

.c2l .c2l-date-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 0 6px;
    color: var(--c2l-secondary);
    font-size: 13px;
}

.c2l .c2l-date-trigger:hover .c2l-date-trigger-icon { color: var(--c2l-primary); }

.c2l .c2l-date-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    box-shadow: var(--c2l-shadow-dropdown);
    padding: 8px 10px 10px;
    z-index: 40;
    width: max-content;
    transform-origin: top left;
}

/* Opt-in entrance animation (animated binding) - entrance only, no exit,
   no ngAnimate, gated behind the .c2l-date-animated modifier the same way
   as .c2l-eselect-animated (CP-7/CP-8) / .c2l-acc-animated - default
   rendering (animated unset) has no animation. Global Constraints'
   animation policy governs over the brief's example CSS, which shipped
   this ungated. c2l-dpop-in is a PINNED shared keyframe name - DR-1
   reuses it verbatim when it opts in via its own animated binding; each
   directive instance's own root carries or omits .c2l-date-animated, so
   this descendant selector scopes correctly per instance. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-date-animated .c2l-date-panel { animation: c2l-dpop-in .18s ease-out both; }
}

@keyframes c2l-dpop-in {
    from { transform: translateY(-4px) scale(.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.c2l .c2l-datetime { position: relative; }

.c2l .c2l-datetime.is-disabled .c2l-date-trigger {
    opacity: .55;
    cursor: not-allowed;
}

.c2l .c2l-datetime-row {
    display: grid;
    grid-template-columns: auto auto auto;
}

.c2l .c2l-datetime-divider {
    width: 1px;
    background: var(--c2l-border);
    margin: 8px 6px;
}

.c2l .c2l-timepad {
    display: flex;
    flex-direction: column;
    padding: 8px 4px 4px 8px;
    min-width: 140px;
}

.c2l .c2l-timepad-label {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c2l-primary);
    margin-bottom: 6px;
}

.c2l .c2l-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--c2l-surface-2);
    border-radius: var(--c2l-radius-sm);
    padding: 8px 10px;
    margin-bottom: 8px;
}

.c2l .c2l-clock-seg {
    font-family: var(--c2l-font-mono);
    font-size: 22px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-primary);
    background: var(--c2l-surface);
    border: 1px solid transparent;
    width: 44px;
    padding: 2px 0;
    text-align: center;
    border-radius: var(--c2l-radius-sm);
    outline: none;
}

.c2l .c2l-clock-seg:focus {
    border-color: var(--c2l-secondary);
    box-shadow: 0 0 0 2px rgba(76,172,190,.22);
}

.c2l .c2l-clock-colon {
    color: var(--c2l-secondary);
    font-weight: var(--c2l-fw-bold);
    font-size: 22px;
}

.c2l .c2l-timepad-steps {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* .c2l-timepad-step renders as a real native <button> with visible text
   content (the numeric delta, e.g. "-15", or the preset label, e.g.
   "13:30") - not icon-only, so its accessible name already comes from
   that text and no aria-label is needed. No outline:none + house
   :focus-visible ring pair is added here either, same precedent as
   .c2l-chip / .c2l-card-actions button elsewhere in this file: the
   browser's own default focus outline already satisfies "never
   outline: none without a genuinely visible :focus-visible replacement"
   (Global A11y policy) - there is nothing to replace. */
.c2l .c2l-timepad-step {
    flex: 1;
    padding: 4px 6px;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    font-size: 11px;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-3);
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
}

.c2l .c2l-timepad-step:hover {
    background: var(--c2l-secondary);
    border-color: var(--c2l-secondary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-timepad-commit {
    margin-top: 8px;
    border-top: 1px solid var(--c2l-border);
    padding-top: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* ---------- [Dates] c2lMonthGrid shared calendar ----------
   Hand-rolled 42-cell month grid consumed by DR-1/DR-2 (uib-datepicker has
   no range painting / hover hook). Ported from
   design-mirror-final:docs/design/showcase/form-layouts/forms-dates.css .dcal block. */
.c2l .c2l-cal {
    --c2l-cal-cell: 34px;
    width: calc(var(--c2l-cal-cell) * 7 + 12px);
    background: var(--c2l-surface);
    border-radius: var(--c2l-radius-sm);
    font-family: var(--c2l-font-sans);
    user-select: none;
}
.c2l .c2l-cal--tight { --c2l-cal-cell: 28px; }
.c2l .c2l-cal--wide { --c2l-cal-cell: 38px; }

.c2l .c2l-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 8px 4px 6px;
}
.c2l .c2l-cal-nav {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--c2l-radius-sm);
    cursor: pointer;
    background: transparent;
    color: var(--c2l-fg-3);
    font-size: 12px;
    transition: background .12s, color .12s, border-color .12s;
}
.c2l .c2l-cal-nav:hover {
    background: var(--c2l-surface-2);
    color: var(--c2l-primary);
}
.c2l .c2l-cal-nav:disabled {
    opacity: .25;
    cursor: not-allowed;
    background: transparent;
}
.c2l .c2l-cal-title {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.c2l .c2l-cal-sel {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--c2l-radius-sm);
    padding: 3px 22px 3px 8px;
    font: inherit;
    font-size: 13px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-primary);
    letter-spacing: .01em;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23470544' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.3L5 4.7L9 1.3'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: background-color .12s, border-color .12s;
}
.c2l .c2l-cal-sel:hover { background-color: var(--c2l-surface-2); }
.c2l .c2l-cal-sel:focus {
    outline: none;
    border-color: var(--c2l-secondary);
    box-shadow: 0 0 0 2px rgba(76, 172, 190, .22);
}
.c2l .c2l-cal-week {
    display: grid;
    grid-template-columns: repeat(7, var(--c2l-cal-cell));
    padding: 4px 0 2px;
    border-bottom: 1px solid var(--c2l-border);
}
.c2l .c2l-cal-wd {
    text-align: center;
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .06em;
    color: var(--c2l-fg-muted);
    text-transform: uppercase;
    padding: 4px 0;
}
.c2l .c2l-cal-wd.we { color: var(--c2l-secondary); } /* Sa/Su accents */
/* Fix round 1 (finding 1c): role="grid" may only directly own role="row"
   children (WAI-ARIA required-owned-elements) - cells are now grouped into
   6 .c2l-cal-row[role="row"] wrappers instead of sitting flat under
   .c2l-cal-grid. The CSS Grid that used to live directly on .c2l-cal-grid
   moved down onto .c2l-cal-row (one 7-column grid per week); .c2l-cal-grid
   itself is now a plain flex column stacking the 6 rows - net rendered
   layout is pixel-identical to the single-grid version. */
.c2l .c2l-cal-grid {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    position: relative;
    outline: none;
}
.c2l .c2l-cal-row {
    display: grid;
    grid-template-columns: repeat(7, var(--c2l-cal-cell));
    grid-auto-rows: var(--c2l-cal-cell);
}
.c2l .c2l-cal-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: var(--c2l-fw-medium);
    color: var(--c2l-fg-2);
    cursor: pointer;
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    font-family: inherit;
    padding: 0;
    transition: color .12s;
}
.c2l .c2l-cal-cell .num {
    width: calc(var(--c2l-cal-cell) - 8px);
    height: calc(var(--c2l-cal-cell) - 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--c2l-radius-circle);
    position: relative;
    z-index: 2;
    transition: background .12s, color .12s, box-shadow .12s;
}
.c2l .c2l-cal-cell:hover .num {
    background: rgba(76, 172, 190, .16);
    color: var(--c2l-primary);
}
.c2l .c2l-cal-cell.out { color: var(--c2l-fg-muted); opacity: .4; }
.c2l .c2l-cal-cell.out .num { font-weight: var(--c2l-fw-regular); }
.c2l .c2l-cal-cell.is-today .num {
    box-shadow: inset 0 0 0 1.5px var(--c2l-secondary);
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
}
.c2l .c2l-cal-cell.is-sel .num {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    font-weight: var(--c2l-fw-bold);
    box-shadow: 0 2px 6px rgba(71, 5, 68, .35);
}
.c2l .c2l-cal-cell.is-sel:hover .num { background: var(--c2l-primary-dark); }
/* House :focus-visible ring (established at Task 5 / c2l-edit-row, reused
   throughout the catalog) applied directly to the day cell via the
   .is-focus class marker - c2l-cal-grid is the sole real Tab stop (D8);
   real DOM focus never visits a day cell (see c2lMonthGrid.js header), so
   the roving cursor is tracked in JS and rendered here the same way the
   D-3 mini calendar's own composite active-cell ring already works. Same
   ring VALUE as .c2l-edit-row/.c2l-tag/etc, not the softer select-focus
   glow used by .c2l-cal-sel:focus above. */
.c2l .c2l-cal-cell.is-focus .num { box-shadow: inset 0 0 0 2px var(--c2l-secondary); }

/* ...but never ON TOP of the selected day. .is-focus and .is-today both sit
   later in this file than .is-sel, so a selected day that also held the
   roving cursor (or was today) had its plum lift replaced by a cyan ring -
   reading as a second, competing selection. The solid plum fill is already
   an unambiguous "this is the active date"; restore its own shadow. */
.c2l .c2l-cal-cell.is-sel.is-focus .num,
.c2l .c2l-cal-cell.is-sel.is-today .num {
    box-shadow: 0 2px 6px rgba(71, 5, 68, .35);
}

/* Range painting - a half-height band behind the day pill */
.c2l .c2l-cal-cell.in-range::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    right: 0;
    background: rgba(76, 172, 190, .18);
    z-index: 0;
}
.c2l .c2l-cal-cell.range-start::before { left: 50%; }
.c2l .c2l-cal-cell.range-end::before { right: 50%; }
.c2l .c2l-cal-cell.range-single::before { display: none; }
.c2l .c2l-cal-cell.range-start .num,
.c2l .c2l-cal-cell.range-end .num {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    font-weight: var(--c2l-fw-bold);
    box-shadow: 0 2px 6px rgba(71, 5, 68, .35);
}
.c2l .c2l-cal-cell.range-end.range-start::before { display: none; }
.c2l .c2l-cal-cell.in-range:not(.range-start):not(.range-end) .num {
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
}
.c2l .c2l-cal-cell.in-range:not(.range-start):not(.range-end):hover .num {
    background: rgba(76, 172, 190, .32);
}

.c2l .c2l-cal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 4px;
    border-top: 1px solid var(--c2l-border);
}
.c2l .c2l-cal-quick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-pill);
    font-size: 11px;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-3);
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
}
.c2l .c2l-cal-quick:hover {
    background: var(--c2l-secondary);
    color: var(--c2l-fg-on-primary);
    border-color: var(--c2l-secondary);
}
.c2l .c2l-cal-quick .fa-circle { font-size: 6px; color: var(--c2l-secondary); }
.c2l .c2l-cal-quick:hover .fa-circle { color: var(--c2l-fg-on-primary); }
.c2l .c2l-cal-quick--clear {
    border-color: transparent;
    color: var(--c2l-fg-muted);
    margin-left: auto;
}

/* ---------- [Dates] DR-1 c2lDateRangePicker ----------
   Popover chrome consumes .c2l-date-trigger / .c2l-date-panel / the
   .c2l-date-animated opt-in gate / c2l-dpop-in keyframes from DT-1 (Task
   19); only DR-1-specific layout lives here. Ported from
   design-mirror-final:docs/design/showcase/form-layouts/forms-dates.css .dr-pop block. */
.c2l .c2l-daterange { position: relative; }
.c2l .c2l-daterange .c2l-date-trigger-input { font-variant-numeric: tabular-nums; }
.c2l .c2l-daterange .c2l-date-panel { padding: 0; }
.c2l .c2l-daterange.is-disabled .c2l-date-trigger {
    opacity: .55;
    cursor: not-allowed;
}
.c2l .c2l-daterange-row {
    display: grid;
    grid-template-columns: 140px auto;
}
.c2l .c2l-daterange-row.no-presets { grid-template-columns: auto; }
.c2l .c2l-daterange-presets {
    display: flex;
    flex-direction: column;
    padding: 12px 6px;
    background: var(--c2l-surface-footer);
    border-right: 1px solid var(--c2l-border);
    min-width: 140px;
}
.c2l .c2l-daterange-preset {
    text-align: left;
    background: transparent;
    border: 0;
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    color: var(--c2l-fg-2);
    cursor: pointer;
    border-radius: var(--c2l-radius-sm);
    border-left: 3px solid transparent;
    transition: background .12s, color .12s, border-left-color .12s;
}
.c2l .c2l-daterange-preset:hover {
    background: rgba(76, 172, 190, .1);
    color: var(--c2l-primary);
}
.c2l .c2l-daterange-preset.on {
    background: rgba(71, 5, 68, .06);
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-bold);
    border-left-color: var(--c2l-primary);
}
.c2l .c2l-daterange-preset-sep {
    height: 1px;
    background: var(--c2l-border);
    margin: 6px 6px;
}
.c2l .c2l-daterange-cals {
    display: grid;
    grid-template-columns: auto 1px auto;
    align-items: start;
}
.c2l .c2l-daterange-gap { background: var(--c2l-border); align-self: stretch; }
.c2l .c2l-daterange-cal { padding: 6px 10px 6px; }
.c2l .c2l-daterange-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
    gap: 10px;
}
.c2l .c2l-daterange-foot .summary {
    font-size: 12px;
    color: var(--c2l-fg-3);
    font-variant-numeric: tabular-nums;
}
.c2l .c2l-daterange-foot .summary b { color: var(--c2l-primary); font-weight: var(--c2l-fw-bold); }
.c2l .c2l-daterange-foot .summary .arrow { color: var(--c2l-secondary); margin: 0 6px; }
.c2l .c2l-daterange-foot .summary .muted { color: var(--c2l-fg-muted); margin-left: 6px; }
.c2l .c2l-daterange-foot .actions { display: flex; gap: 6px; }
@media (max-width: 880px) {
    .c2l .c2l-daterange-row { grid-template-columns: 1fr; }
    .c2l .c2l-daterange-presets { border-right: 0; border-bottom: 1px solid var(--c2l-border); }
    .c2l .c2l-daterange-cals { grid-template-columns: 1fr; }
    .c2l .c2l-daterange-gap { display: none; }
}
.c2l .c2l-cal-quick--clear:hover { color: var(--c2l-red); background: transparent; }

/* ---------- [Dates] DR-2 c2lDateRangeCalendar ----------
   Inline range calendar readout + quick-range row. Quick-range pills reuse
   the D-3 .c2l-chip classes (Task 18) - no duplicate pill styles here.
   Ported from design-mirror-final:docs/design/showcase/form-layouts/forms-dates.css .dr-inline. */
.c2l .c2l-dr-inline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: flex-start;
}
.c2l .c2l-dr-inline-cal {
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    padding: 6px 12px 10px;
    background: var(--c2l-surface);
}
.c2l .c2l-dr-inline-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.c2l .c2l-dr-readout {
    background: var(--c2l-surface-footer);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    padding: 14px 16px;
}
.c2l .c2l-dr-readout-eyebrow {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c2l-secondary);
}
.c2l .c2l-dr-readout-ends {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.c2l .c2l-dr-readout-pt {
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    padding: 8px 10px;
}
.c2l .c2l-dr-readout-pt .lbl {
    font-size: 9px;
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c2l-fg-muted);
}
.c2l .c2l-dr-readout-pt .val {
    font-size: 14px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-primary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.c2l .c2l-dr-readout-pt.empty .val {
    color: var(--c2l-fg-muted);
    font-weight: var(--c2l-fw-regular);
    font-style: italic;
}
.c2l .c2l-dr-readout-arrow { color: var(--c2l-secondary); font-size: 16px; }
.c2l .c2l-dr-readout-summary {
    margin-top: 10px;
    font-size: 12px;
    color: var(--c2l-fg-4);
    line-height: 1.55;
}
.c2l .c2l-dr-readout-summary b { color: var(--c2l-primary); font-weight: var(--c2l-fw-bold); }
.c2l .c2l-dr-readout-hint {
    margin-top: 8px;
    font-size: 11px;
    color: var(--c2l-secondary);
    font-style: italic;
}
.c2l .c2l-dr-quick-label {
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c2l-fg-muted);
    margin-bottom: 6px;
}
.c2l .c2l-dr-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
/* Review round 1, Finding 1: whole-widget ng-disabled dims the calendar
   side (which has no native disabled concept of its own - c2lMonthGrid's
   cells stay interactive at all times per its own contract, so the
   controller guards clicks instead) - same .is-disabled shape as
   c2lDateQuickChips' .c2l-chips-minical treatment. The quick-range chips
   dim via the existing .c2l-chip[disabled] rule (D-3) once ng-disabled
   sets the native disabled attribute - no separate rule needed here. */
.c2l .c2l-dr-inline.is-disabled .c2l-dr-inline-cal {
    pointer-events: none;
    opacity: .55;
}
@media (max-width: 880px) {
    .c2l .c2l-dr-inline { grid-template-columns: 1fr; }
}

/* ---------- [Dates] DR-3 c2lDateRangeTwinFields ----------
   Linked From/To uib-datepicker-popup pair. Ported from
   design-mirror-final:docs/design/showcase/form-layouts/forms-dates.css .dr-twin .pair; the
   prototype's shared dual-month popover is deliberately not ported (DR-1
   owns range painting). */
.c2l .c2l-daterange-twin-pair {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    align-items: end;
    gap: 6px;
}
.c2l .c2l-daterange-twin-arrow {
    text-align: center;
    color: var(--c2l-secondary);
    font-size: 14px;
    padding-bottom: 9px;
}
.c2l .c2l-daterange-twin-col { min-width: 0; }
.c2l .c2l-daterange-twin-label {
    display: block;
    font-size: 11px;
    font-weight: var(--c2l-fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c2l-primary);
    margin-bottom: 5px;
}
.c2l .c2l-daterange-twin .form-control:focus {
    border-color: var(--c2l-primary);
    box-shadow: 0 0 0 2px rgba(71, 5, 68, .18);
}

/* ---------- [Dates] DT-2 slot-split atoms (pattern recipe) ----------
   Calendly-style booking layout: D-2 inline calendar left, consumer slot
   markup right. Composition is consumer-owned (availability = server data,
   booking = app flow) - see the StyleGuideDates recipe for the reference
   implementation. Ported from
   design-mirror-final:docs/design/showcase/form-layouts/forms-dates.css .dt-split block;
   selected-slot scale transform dropped (animation policy). */
.c2l .c2l-slot-split {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    overflow: hidden;
    background: var(--c2l-surface);
}
.c2l .c2l-slot-cal {
    padding: 6px 12px 10px;
    border-right: 1px solid var(--c2l-border);
}
.c2l .c2l-slot-side {
    display: flex;
    flex-direction: column;
    background: var(--c2l-surface-footer);
    min-width: 260px;
}
.c2l .c2l-slot-head {
    padding: 14px 16px 8px;
    border-bottom: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
}
.c2l .c2l-slot-head .day {
    font-size: 13px;
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-primary);
}
.c2l .c2l-slot-head .date {
    font-size: 11px;
    color: var(--c2l-fg-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.c2l .c2l-slot-head .tz {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--c2l-fg-4);
    padding: 2px 8px;
    border-radius: var(--c2l-radius-pill);
    background: var(--c2l-surface-2);
}
.c2l .c2l-slot-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px 12px;
    max-height: 320px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: start;
}
.c2l .c2l-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    font-size: 12.5px;
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-primary);
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-secondary);
    border-radius: var(--c2l-radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    transition: background .12s, color .12s;
}
.c2l .c2l-slot:hover { background: rgba(76, 172, 190, .12); }
.c2l .c2l-slot.on {
    background: var(--c2l-primary);
    border-color: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
}
.c2l .c2l-slot[disabled] {
    background: var(--c2l-surface-2);
    border-color: transparent;
    color: var(--c2l-fg-muted);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, .2);
}
.c2l .c2l-slot-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
    gap: 10px;
}
.c2l .c2l-slot-foot .picked { font-size: 12px; color: var(--c2l-fg-3); }
.c2l .c2l-slot-foot .picked b { color: var(--c2l-primary); font-weight: var(--c2l-fw-bold); }
.c2l .c2l-slot-foot .none { color: var(--c2l-fg-muted); font-style: italic; }
@media (max-width: 880px) {
    .c2l .c2l-slot-split { grid-template-columns: 1fr; }
    .c2l .c2l-slot-cal { border-right: 0; border-bottom: 1px solid var(--c2l-border); }
}

/* ---------- [Panels] PN-1, PN-3, PN-4, PN-5, PN-6 tone variants + accent axis ----------
   tone="{hairline|underline|stripe|tint|soft}" -> .c2l-panel-{tone} on the
   .c2l-panel-chip root; accent="{secondary|neutral}" ->
   .c2l-panel-accent-{accent} (default primary = no class). Values ported
   from design-mirror-final:docs/design/showcase/panels/panels.css. */

/* Shared tone marker - dot under hairline, pin under soft (one template span) */
.c2l .c2l-panel-marker {
    flex-shrink: 0;
    background: var(--c2l-primary);
}

.c2l .c2l-panel-accent-secondary .c2l-panel-marker {
    background: var(--c2l-secondary);
}

.c2l .c2l-panel-accent-neutral .c2l-panel-marker {
    background: var(--c2l-fg-muted);
}

/* PN-1 hairline: border-only card (base .c2l-panel-chip surface + head
   hairline already provide the card), 8px tone dot, downsized title,
   muted uppercase badge restyle */
.c2l .c2l-panel-hairline .c2l-panel-marker {
    width: 8px;
    height: 8px;
    border-radius: var(--c2l-radius-circle);
}

.c2l .c2l-panel-hairline .c2l-panel-chip-title {
    font-size: var(--c2l-fs-base);
    letter-spacing: 0.01em;
}

.c2l .c2l-panel-hairline .c2l-panel-chip-badge {
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-4);
    font-size: 10px;
    font-weight: var(--c2l-fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
}

/* PN-3 underline: 2px tone rule under the head, title restyled to an
   uppercase eyebrow. Subheading is documented unsupported with this tone
   (not CSS-suppressed). The head action link is plain consumer content in
   the <c2l-panel-actions> slot. */
.c2l .c2l-panel-underline .c2l-panel-chip-head {
    border-bottom: 2px solid var(--c2l-primary);
}

.c2l .c2l-panel-underline .c2l-panel-chip-title {
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c2l-primary);
}

.c2l .c2l-panel-underline.c2l-panel-accent-secondary .c2l-panel-chip-head {
    border-bottom-color: var(--c2l-secondary);
}

.c2l .c2l-panel-underline.c2l-panel-accent-secondary .c2l-panel-chip-title {
    color: var(--c2l-secondary);
}

.c2l .c2l-panel-underline.c2l-panel-accent-neutral .c2l-panel-chip-head {
    border-bottom-color: var(--c2l-border-strong);
}

.c2l .c2l-panel-underline.c2l-panel-accent-neutral .c2l-panel-chip-title {
    color: var(--c2l-fg-4);
}

/* PN-4 top stripe: 2px tone top border, dashed head divider, icon restyled
   from the leading 30px chip to a trailing 22px plain glyph. flex "order"
   moves the existing icon span after badge/actions with zero template cost;
   DOM order diverges from visual order, acceptable because the glyph is
   aria-hidden decorative. */
.c2l .c2l-panel-stripe {
    border-top: 2px solid var(--c2l-primary);
}

.c2l .c2l-panel-stripe .c2l-panel-chip-head {
    border-bottom: 1px dashed var(--c2l-border);
}

.c2l .c2l-panel-stripe .c2l-panel-chip-icon {
    background: transparent;
    width: 22px;
    height: 22px;
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-primary);
    order: 10;
}

.c2l .c2l-panel-stripe.c2l-panel-accent-secondary {
    border-top-color: var(--c2l-secondary);
}

.c2l .c2l-panel-stripe.c2l-panel-accent-secondary .c2l-panel-chip-icon {
    color: var(--c2l-secondary);
}

.c2l .c2l-panel-stripe.c2l-panel-accent-neutral {
    border-top-color: var(--c2l-fg-muted);
}

.c2l .c2l-panel-stripe.c2l-panel-accent-neutral .c2l-panel-chip-icon {
    color: var(--c2l-fg-4);
}

/* PN-5 tint: whole-surface brand wash + translucent border, no head
   divider. USAGE RULE: max 2-3 tint panels per page. Wash tokens come from
   c2l-tokens.css (Task 2); the darkened title/body text colors are
   prototype literals kept local until a second consumer appears. */
.c2l .c2l-panel-tint {
    background: var(--c2l-primary-tint);
    border-color: var(--c2l-primary-tint-border);
}

.c2l .c2l-panel-tint .c2l-panel-chip-head {
    border-bottom: 0;
}

.c2l .c2l-panel-tint .c2l-panel-chip-title {
    color: var(--c2l-primary);
}

.c2l .c2l-panel-tint .c2l-panel-chip-body {
    padding-top: 4px;
    color: #4a3a48; /* prototype darkened plum body text */
}

.c2l .c2l-panel-tint.c2l-panel-accent-secondary {
    background: var(--c2l-secondary-tint);
    border-color: var(--c2l-secondary-tint-border);
}

.c2l .c2l-panel-tint.c2l-panel-accent-secondary .c2l-panel-chip-title {
    color: #2a7c8a; /* prototype darkened cyan title */
}

.c2l .c2l-panel-tint.c2l-panel-accent-secondary .c2l-panel-chip-body {
    color: #3a5a60; /* prototype darkened cyan body text */
}

.c2l .c2l-panel-tint.c2l-panel-accent-neutral {
    background: var(--c2l-surface-2);
    border-color: var(--c2l-border);
}

.c2l .c2l-panel-tint.c2l-panel-accent-neutral .c2l-panel-chip-title {
    color: var(--c2l-fg-1);
}

.c2l .c2l-panel-tint.c2l-panel-accent-neutral .c2l-panel-chip-body {
    color: var(--c2l-fg-3);
}

/* PN-6 soft elevated: borderless, +2px radius, two-layer --c2l-shadow-card
   (Task 2 token), 4x18 tone pin, tightened head/body vertical padding.
   Reads best on clean (non-textured) page backgrounds - verify on the
   production .c2l-surface before adopting on a textured page. */
.c2l .c2l-panel-soft {
    border: 0;
    border-radius: calc(var(--c2l-radius-md) + 2px);
    box-shadow: var(--c2l-shadow-card);
}

.c2l .c2l-panel-soft .c2l-panel-chip-head {
    border-bottom: 0;
    padding-bottom: 4px;
}

.c2l .c2l-panel-soft .c2l-panel-chip-body {
    padding-top: 6px;
}

.c2l .c2l-panel-soft .c2l-panel-marker {
    width: 4px;
    height: 18px;
    border-radius: var(--c2l-radius-pill);
}

/* ---------- TB-2, TB-3, TB-7 tabs: pills, segmented, align, size, wrap ---------- */
.c2l .c2l-tabs-pills {
    gap: 6px;
    border-bottom: 0;
}

.c2l .c2l-tabs-pills .c2l-tab > a {
    padding: 7px 14px;
    border-radius: var(--c2l-radius-pill);
    border-bottom: 0;
    margin-bottom: 0;
    transition: color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                background var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

.c2l .c2l-tabs-pills .c2l-tab:not(.is-disabled):not(.is-active) > a:hover {
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-1);
}

.c2l .c2l-tabs-pills .c2l-tab.is-active > a {
    background: var(--c2l-primary);
    color: var(--c2l-fg-on-primary);
    font-weight: var(--c2l-fw-semibold);
    border-bottom: 0;
}

.c2l .c2l-tabs-pills .c2l-tab.is-active > a .c2l-tab-badge {
    background: rgba(255, 255, 255, .22);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-tabs-segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    background: var(--c2l-surface-3);
    padding: 3px;
    border-radius: var(--c2l-radius-md);
    border-bottom: 0;
}

.c2l .c2l-tabs-segmented .c2l-tab > a {
    display: flex;
    justify-content: center;
    padding: 7px 12px;
    border-radius: var(--c2l-radius-sm);
    border-bottom: 0;
    margin-bottom: 0;
    transition: color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                background var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                box-shadow var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

.c2l .c2l-tabs-segmented .c2l-tab:not(.is-disabled):not(.is-active) > a:hover {
    background: rgba(255, 255, 255, .55);
    color: var(--c2l-fg-1);
}

.c2l .c2l-tabs-segmented .c2l-tab.is-active > a {
    background: var(--c2l-surface);
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-semibold);
    box-shadow: var(--c2l-shadow-sm);
}

.c2l .c2l-tabs-align-center { justify-content: center; }
.c2l .c2l-tabs-align-right { justify-content: flex-end; }

/* Justified against ul>li>a: flex:1 on the li, block-level centered anchor. */
.c2l .c2l-tabs-align-justified .c2l-tab { flex: 1; }
.c2l .c2l-tabs-align-justified .c2l-tab > a {
    display: flex;
    justify-content: center;
}

.c2l .c2l-tabs-compact .c2l-tab > a { font-size: var(--c2l-fs-sm); padding: 6px 10px; }
.c2l .c2l-tabs-large .c2l-tab > a { font-size: var(--c2l-fs-md); padding: 13px 18px; }
.c2l .c2l-tabs-compact.c2l-tabs-pills .c2l-tab > a { padding: 4px 10px; }
.c2l .c2l-tabs-large.c2l-tabs-pills .c2l-tab > a { padding: 10px 20px; }
.c2l .c2l-tabs-compact.c2l-tabs-segmented .c2l-tab > a { padding: 4px 8px; }
.c2l .c2l-tabs-large.c2l-tabs-segmented .c2l-tab > a { padding: 10px 16px; }

.c2l .c2l-tabs-compact .c2l-tab-badge {
    min-width: 15px;
    padding: 1px 4px;
    font-size: 9.5px;
}

.c2l .c2l-tabs-wrap {
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 0;
}

/* ---------- TB-4, TB-5, TB-8 tabs: vertical, rail, right, icons ---------- */
.c2l .c2l-tabs-vertical {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 190px;
    border-bottom: 0;
}

.c2l .c2l-tabs-vertical .c2l-tab > a {
    display: flex;
    justify-content: flex-start;
    padding: 9px 14px;
    border-bottom: 0;
    margin-bottom: 0;
    border-left: 3px solid transparent;
    border-radius: 0 3px 3px 0;
    transition: color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                background var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                border-color var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

.c2l .c2l-tabs-vertical .c2l-tab:not(.is-disabled):not(.is-active) > a:hover {
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-1);
}

.c2l .c2l-tabs-vertical .c2l-tab.is-active > a {
    border-left-color: var(--c2l-secondary);
    background: rgba(76, 172, 190, .10);
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-semibold);
}

.c2l .c2l-tabs-vertical .c2l-tab-badge { margin-left: auto; }

.c2l .c2l-tabs-rail {
    background: var(--c2l-primary);
    border-radius: var(--c2l-radius-md);
    padding: 8px 0;
    min-width: 210px;
}

.c2l .c2l-tabs-rail .c2l-tab > a {
    color: rgba(255, 255, 255, .72);
    border-radius: 0;
}

.c2l .c2l-tabs-rail .c2l-tab:not(.is-disabled):not(.is-active) > a:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-tabs-rail .c2l-tab.is-active > a {
    background: rgba(255, 255, 255, .12);
    border-left-color: var(--c2l-secondary);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-tabs-rail .c2l-tab.is-disabled > a { color: rgba(255, 255, 255, .28); }

/* The rail sits on plum, so its badges stay white-alpha in BOTH states - the
   grey/cyan pair above is for badges on a light surface. .is-active carries
   one more class than the plain rail selector, so it has to be named here
   explicitly or the shared active-cyan would win on the selected tab. */
.c2l .c2l-tabs-rail .c2l-tab-badge,
.c2l .c2l-tabs-rail .c2l-tab.is-active .c2l-tab-badge {
    background: rgba(255, 255, 255, .18);
    color: var(--c2l-fg-on-primary);
}

.c2l .c2l-tabs-right .c2l-tab > a {
    border-left: 0;
    border-right: 3px solid transparent;
    flex-direction: row-reverse;
    border-radius: 3px 0 0 3px;
}

.c2l .c2l-tabs-right .c2l-tab.is-active > a { border-right-color: var(--c2l-secondary); }

.c2l .c2l-tabs-right .c2l-tab-badge {
    margin-left: 0;
    margin-right: auto;
}

.c2l .c2l-tabs-icons .c2l-tab > a {
    position: relative;
    width: 42px;
    height: 38px;
    justify-content: center;
    padding: 0;
    border-radius: var(--c2l-radius-sm);
}

.c2l .c2l-tabs-compact.c2l-tabs-icons .c2l-tab > a { width: 32px; height: 30px; }
.c2l .c2l-tabs-large.c2l-tabs-icons .c2l-tab > a { width: 50px; height: 46px; }

.c2l .c2l-tab-alert-corner {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 2px var(--c2l-surface);
}

/* ---------- TB-6 tabs: scroll overflow ---------- */
.c2l .c2l-tabs-scrollwrap { position: relative; }

.c2l .c2l-tabs-scrollwrap.is-scroll {
    border-bottom: 1px solid var(--c2l-border);
    margin: 0 0 var(--c2l-space-md);
}

.c2l .c2l-tabs-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 0;
    margin-bottom: 0;
}

.c2l .c2l-tabs-scroll::-webkit-scrollbar { display: none; }

.c2l .c2l-tabs-scroll .c2l-tab { flex: none; }
.c2l .c2l-tabs-scroll .c2l-tab > a { white-space: nowrap; }

.c2l .c2l-tabs-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--c2l-dur-base);
    z-index: 5;
}

.c2l .c2l-tabs-edge-left {
    left: 0;
    background: linear-gradient(to right, var(--c2l-surface) 25%, transparent);
}

.c2l .c2l-tabs-edge-right {
    right: 0;
    background: linear-gradient(to left, var(--c2l-surface) 25%, transparent);
}

.c2l .c2l-tabs-edge.show { opacity: 1; }

.c2l .c2l-tabs-chev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 26px;
    height: 26px;
    border-radius: var(--c2l-radius-circle);
    border: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
    box-shadow: var(--c2l-shadow-md);
    color: var(--c2l-fg-3);
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--c2l-dur-base), color var(--c2l-dur-fast);
}

.c2l .c2l-tabs-chev:hover { color: var(--c2l-primary); }
.c2l .c2l-tabs-chev-left { left: 4px; }
.c2l .c2l-tabs-chev-right { right: 4px; }

.c2l .c2l-tabs-chev.show {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- TB-9 dynamic tabs ---------- */
.c2l .c2l-tabs-dynamic {
    gap: 2px;
    align-items: flex-end;
    border-bottom: 1px solid var(--c2l-border);
}

.c2l .c2l-tabs-dynamic .c2l-tab {
    max-width: 220px;
    overflow: hidden;
    position: relative;
}

.c2l .c2l-tabs-dynamic .c2l-tab > a {
    padding: 9px 28px 9px 14px;
    margin-bottom: -1px;
    white-space: nowrap;
}

/* Opt-in entrance animation (animated binding) - entrance only, no exit,
   no ngAnimate, gated behind the .c2l-tabs-dynamic-animated modifier the
   same way as .c2l-eselect-animated (CP-7/CP-8) / .c2l-acc-animated -
   default rendering (animated unset) has no animation. The keyframe still
   fires on initial render (ng-repeat insertion, not scoped to "added after
   mount") - an accepted trade within the gated mode, same shape the
   no-ngAnimate policy already makes elsewhere in this catalog. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-tabs-dynamic-animated .c2l-tab {
        animation: c2lTabAdd 260ms var(--c2l-ease-out-quint);
    }
}

@keyframes c2lTabAdd {
    from { max-width: 0; opacity: 0; }
    to { max-width: 220px; opacity: 1; }
}

/* W3-1 Step 3: opt-in EXIT animation (animated binding) - TB-9 exit
   collapse. `.is-leaving` is added via renderTabs/isLeaving
   (c2lTabsDynamic.js) for one $timeout equal to this keyframe's duration
   (260ms, matching c2lTabAdd) after on-close has already fired; reduced
   motion (or animated unset) never marks anything closing, so this rule
   never fires for it. Mirror of c2lTabAdd, played in reverse. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-tabs-dynamic-animated .c2l-tab.is-leaving {
        animation: c2lTabRemove 260ms var(--c2l-ease-out-quint) forwards;
    }
}

@keyframes c2lTabRemove {
    from { max-width: 220px; opacity: 1; }
    to { max-width: 0; opacity: 0; }
}

.c2l .c2l-tab-close {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 17px;
    height: 17px;
    border-radius: var(--c2l-radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: var(--c2l-fg-muted);
    opacity: 0;
    transform: translateY(-50%) scale(.55);
    transition: opacity var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                transform var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                background var(--c2l-dur-fast);
    cursor: pointer;
}

.c2l .c2l-tab:hover .c2l-tab-close,
.c2l .c2l-tab.is-active .c2l-tab-close,
.c2l .c2l-tab-close:focus-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.c2l .c2l-tab-close:hover {
    background: rgba(226, 0, 26, .12);
    color: var(--c2l-danger-accent);
}

.c2l .c2l-tab-add-item {
    display: flex;
    align-items: flex-end;
}

.c2l .c2l-tab-add {
    width: 28px;
    height: 28px;
    margin: 0 0 5px 8px;
    border-radius: var(--c2l-radius-md);
    border: 1px dashed var(--c2l-border-strong);
    background: none;
    color: var(--c2l-fg-muted);
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    transition: all var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}

.c2l .c2l-tab-add:hover {
    color: var(--c2l-secondary);
    border-color: var(--c2l-secondary);
    background: rgba(76, 172, 190, .08);
}

.c2l .c2l-tab-add:active { transform: scale(.9); }

/* ---------- MD-4 side sheet (c2l-modal-sheet) ----------
   Right-edge drawer preset for c2lModals.openSheet(). Ported from
   design-mirror-final:docs/design/showcase/modal-patterns/modal-showcase.css .ms--drawer.
   No backdrop-filter blur (paint cost on heavy grid pages); ngDialog's
   stock close X is kept. Single ~560px width in v1. */
.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet {
    padding: 0; /* kill theme-default's 160px top/bottom padding */
}

.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet .ngdialog-content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: min(560px, 100vw);
    max-width: 100vw;
    height: 100vh;
    /* !important required: the D-1 base host rule above (.c2l-modal-host
       .ngdialog-content, no .c2l-modal-sheet) now sets
       "border-radius: var(--c2l-radius-modal) !important" to counter
       app.css's vendor !important. !important always wins over a
       non-important declaration regardless of specificity, so without this
       the sheet's intentional square right-edge-drawer corners would be
       overridden back to 10px by that base rule despite this selector being
       more specific. Caught live (computed style read 10px on an openSheet
       dialog before this was added) - not just a source-scan assumption. */
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--c2l-surface);
    box-shadow: 0 24px 64px var(--c2l-primary-shadow), 0 2px 6px rgba(0, 0, 0, .06);
}

/* W3-4 Step 2 (MD-4 width option): c2lModals.openSheet({width: 'wide'})
   composes this modifier alongside the base sheet class above. No
   !important needed - unlike the border-radius rule above (which fights
   app.css's !important), the base rule's "width: min(560px, 100vw)" is a
   plain declaration, so this selector's ONE extra class
   (.c2l-modal-sheet--wide) already wins on specificity alone. */
.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet.c2l-modal-sheet--wide .ngdialog-content {
    width: min(760px, 100vw);
}

/* theme-default's ngdialog-flyin/flyout keyframes animate translateY(-40px)
   - the wrong axis for a right-edge sheet. Kill them unconditionally (also
   covers prefers-reduced-motion), then re-add the X-axis slide only for
   users who allow motion. */
.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet .ngdialog-content,
.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet.ngdialog-closing .ngdialog-content {
    animation: none;
}

/* Scaffold: callers wrap scrollable content in .c2l-modal-sheet-body and
   reuse the shared .c2l-modal-footer as the bottom-pinned bar. */
.c2l .c2l-modal-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Sheet chrome: header band / scrolling body / pinned footer bar.
   The recipe claimed all three, but none of it was wired. ngDialog's
   theme-default box padding was still on .ngdialog-content, so every band
   inherited one shared inset and the header sat flush against the body
   with no rule between them; .ngdialog-content ALSO kept overflow-y:auto,
   so the whole drawer scrolled as one column and the "fixed" header and
   "pinned" footer scrolled away with it; and .c2l-modal-footer's shared
   rule contributes only a top border and vertical padding, which on a
   full-bleed drawer left the buttons hanging in space with no bar under
   them. Each band now owns its own padding and the scroll belongs to the
   body alone. */
.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet .ngdialog-content {
    padding: 0;
    overflow: hidden;
}

.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet > .ngdialog-content > .c2l-modal {
    flex: 0 0 auto;
    padding: var(--c2l-space-lg) var(--c2l-space-2xl) var(--c2l-space-md) var(--c2l-space-lg);
    border-bottom: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
}

/* Right inset above clears ngDialog's stock close X, which the sheet keeps.
   Left in place even though Task 9's new sheet template no longer has a
   bare <h1> as a DIRECT child of .c2l-modal (it now nests one inside
   .c2l-modal-hd-title, several levels down) - the selector has no ">"
   between .c2l-modal and h1, so it still matches that nested title and still
   sets the same margin: 0 the shared .c2l-modal-hd-title rule already sets
   on its own (c2l-modal-hd-title, further below). Harmless, exact-value
   duplication, not a conflict; removing a pre-existing rule outside what
   this task actually needs to touch is unnecessary risk for zero benefit, so
   it stays. */
.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet > .ngdialog-content > .c2l-modal h1 {
    margin: 0;
}

/* Task 9 (MD-4 side sheet, punch-list item 3) integration for the shared
   .c2l-modal-hd block ("MD-2/4/5 shared modal header block" comment, further
   below, has the full markup contract). This is a SEPARATE, additive rule -
   NOT a relaxation of the ":not(.c2l-modal-sheet)" exclusion on the
   regular/wide host's own bleed rule above (modalHeaderHostBleedScope.
   test.js locks that exclusion in and must stay green). The two hosts need
   opposite treatment: the regular/wide host has an ambient UNIFORM 16px
   .c2l-modal padding with no border/background of its own, so .c2l-modal-hd
   supplies the only divider there and that rule only ever bleeds the
   sides/top to reach the modal edges, deliberately leaving .c2l-modal-hd's
   own bottom border/padding/margin alone (its own comment says so). The
   sheet is the opposite: its own .c2l-modal rule (immediately above) already
   supplies a full asymmetric header-band padding + border-bottom +
   background - there is no ambient padding to cancel, but there IS now a
   redundant bottom framing to remove. Without this rule, .c2l-modal-hd's own
   border-bottom + padding-bottom + margin-bottom would stack a second
   border and two extra gaps underneath the outer band's already-correct
   one. This rule zeroes exactly those three longhands - same "touch only
   what's redundant, nothing else" discipline the regular-host rule uses, just
   aimed at the opposite end of the box model. Every other .c2l-modal-hd
   declaration (icon chip, eyebrow, title, and the ::before gradient bar) is
   untouched: the gradient bar still renders, now flush against the zeroed
   bottom edge, sitting just above the outer band's own border-bottom.
   Side effect worth recording for the whole-branch review (deferred ledger,
   per this task's brief item 4): because this rule adds no NEGATIVE margins
   the way the regular-host bleed rule does, .c2l-modal-hd::before is never
   bled edge-to-edge here - it stays inset within the sheet's own asymmetric
   padding, which is what the reference actually does (modal-showcase.css:
   113) and is the OPPOSITE of the left:0/right:0 full-bleed gap already
   flagged as deferred against the shared block for the regular/wide host.
   That known issue does not reproduce in the sheet host. */
.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet > .ngdialog-content > .c2l-modal > .c2l-modal-hd {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet .c2l-modal-sheet-body {
    padding: var(--c2l-space-lg);
}

.c2l .ngdialog.c2l-modal-host.c2l-modal-sheet .c2l-modal-footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding: var(--c2l-space-md) var(--c2l-space-lg);
    border-top: 1px solid var(--c2l-border);
    background: var(--c2l-surface-footer);
}

@media (prefers-reduced-motion: no-preference) {
    .c2l .ngdialog.c2l-modal-host.c2l-modal-sheet .ngdialog-content {
        animation: c2l-sheet-in .2s ease-out;
    }

    .c2l .ngdialog.c2l-modal-host.c2l-modal-sheet.ngdialog-closing .ngdialog-content {
        animation: c2l-sheet-out .2s ease-in forwards;
    }
}

@keyframes c2l-sheet-in {
    0% {
        opacity: 0;
        transform: translateX(24px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes c2l-sheet-out {
    0% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translateX(24px);
    }
}

/* ---------- MD-5 wide wizard modal host (c2l-modal-wide) ----------
   Width block promoted from AICMS's .aicms-modal-wide (aicms-design.css).
   The aicms-modal-wide alias was retired in Phase A of the AICMS
   design-adoption program: all 8 AICMS wizards now open through
   c2lModals.openWizard() using this className, and the per-area alias is
   gone. New areas use c2lModals.openWizard() and this className instead of
   minting per-area aliases. Border radius comes from the .c2l-modal-host
   base block. */
.c2l .ngdialog.c2l-modal-host.c2l-modal-wide .ngdialog-content {
    width: min(960px, calc(100vw - 64px));
    max-width: calc(100vw - 64px);
}

/* ---------- Modal form-layout atoms (c2l-modal-section/-grid/-info) ----------
   Promoted from AICMS's aicms-modal-* scaffold (aicms-design.css) in Phase B
   of the AICMS design-adoption program: CreateAiSystem/EditAiSystem moved onto
   the c2l-modal host presets and their section/grid/info-note layout classes
   moved here under the c2l-modal-* namespace (same promotion pattern as the
   c2l-modal-wide block above). MD-1 content-level companions. */
.c2l .c2l-modal-section {
  margin-bottom: var(--c2l-space-xl);
}
.c2l .c2l-modal-section + .c2l-modal-section {
  border-top: 1px solid var(--c2l-border);
  padding-top: var(--c2l-space-lg);
}
.c2l .c2l-modal-section-title {
  font-size: var(--c2l-fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c2l-secondary-text);  /* --c2l-secondary is 2.64:1 on white */
  margin: 0 0 var(--c2l-space-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.c2l .c2l-modal-section-title > .fa { color: var(--c2l-primary); }

.c2l .c2l-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--c2l-space-md) var(--c2l-space-lg);
}
.c2l .c2l-modal-col-1 { grid-column: span 1; }
.c2l .c2l-modal-col-2 { grid-column: 1 / -1; }
/* Modal-only inline validation message (CreateAiSystem.cshtml's email field). Deliberately
   distinct from .c2l-field-error: that name is the promoted c2l-field-* directive error
   style above (color/font-size/margin-top only) - merging this heavier ruleset
   (inline-flex/gap/red-deep) onto the same selector would leak onto every c2l-field-*
   error across AICMS. Kept as its own c2l-modal-field-error class instead. */
.c2l .c2l-modal-field-error {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--c2l-space-xs);
  color: var(--c2l-red-deep);
  font-size: var(--c2l-fs-xs);
}

/* Info-only modals */
.c2l .c2l-modal-info-body {
  display: flex;
  align-items: flex-start;
  gap: var(--c2l-space-md);
  padding: var(--c2l-space-md) 0 var(--c2l-space-lg);
  color: var(--c2l-fg-2);
  line-height: var(--c2l-lh-loose);
}
.c2l .c2l-modal-info-icon {
  flex-shrink: 0;
  font-size: var(--c2l-fs-h2);
  color: var(--c2l-secondary);
  margin-top: 2px;
}
.c2l .c2l-modal-info-body p { margin: 0; }

/* ---------- TL-01, TL-02, TL-03, TL-04 - vertical timeline family ----------
   Ported from the prototype design-mirror-final:docs/design/showcase/timelines/tl-styles.css.
   The prototype's per-variant .tNN-* names do NOT survive a literal rename:
   the four variants share one renderer (c2lTimeline) and one set of family
   classes, so each rule is ported onto the family class under its variant
   modifier. The prototype's --type-accent becomes --c2l-timeline-accent, set
   per row by ng-style from the c2lTimelineTypes taxonomy - it is a row-local
   custom property, never a declared token.

   The prototype's .is-new pulse/pop-in/slide-down rules ARE now ported, for
   TL-01/TL-02/TL-04 only (Task 6, punch-list item TL-01/02/04). The blocker
   recorded here used to be that they need a transient just-added flag the
   directive's no-mutation contract does not provide - c2lTimeline.js resolves
   that by deriving the flag from the existing `items` $watchCollection diff
   (an add is the array growing with a new head item), never from a write to
   `items` or the item itself, so the no-mutation contract still holds. See
   the keyframes below the family (c2l-timeline-pop-in, c2l-timeline-pulse,
   next to the existing entrance keyframe) and each variant's own section for
   the per-variant application. TL-03 (rail) intentionally keeps no matching
   CSS - out of this task's scope - even though it shares the same controller
   and therefore also computes the flag. */

/* Shared across the timeline family - no prototype counterpart to rename.
   The two CTAs are the prototype's .tl-addbtn (tl-styles.css:41); the meta
   spans and the empty state are new. The transition and :active press
   (Task 6) port tl-styles.css:47,50 - this is a plain hover/press affordance
   every other catalog button already carries, not an is-new concern, so it
   is picked up independently of the is-new work above. */
.c2l .c2l-timeline-add,
.c2l .c2l-timeline-flow-add {
    display: inline-flex; align-items: center; gap: var(--c2l-space-xs);
    margin-top: var(--c2l-space-md);
    padding: var(--c2l-space-xs) var(--c2l-space-md);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-surface);
    color: var(--c2l-primary);
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    cursor: pointer;
    transition: border-color .12s, color .12s, transform .08s;
}
.c2l .c2l-timeline-add:hover,
.c2l .c2l-timeline-flow-add:hover { border-color: var(--c2l-secondary); color: var(--c2l-secondary); }
.c2l .c2l-timeline-add:active,
.c2l .c2l-timeline-flow-add:active { transform: translateY(1px); }

/* The meta line is family-wide, NOT per-variant. Every variant renders the
   same four spans from the same shared template, so every variant wanted a
   byte-identical rule: TL-01 and TL-02 had already shipped one copy each, and
   the selector map prescribes the same for TL-03 and TL-04, which would have
   made four. De-duplicated here instead. A variant that genuinely needs a
   different meta line overrides these declarations under its own modifier -
   nothing else in the stylesheet selects .c2l-timeline-meta, so lowering the
   specificity from three classes to two hands no other rule a win. */
.c2l .c2l-timeline-meta {
    display: flex;
    align-items: center;
    gap: var(--c2l-space-sm);
    margin-bottom: var(--c2l-space-xs);
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-muted);
}

.c2l .c2l-timeline-who { font-weight: var(--c2l-fw-semibold); color: var(--c2l-fg-2); }
.c2l .c2l-timeline-when { color: var(--c2l-fg-muted); }
.c2l .c2l-timeline-type { color: var(--c2l-timeline-accent, var(--c2l-primary)); font-weight: var(--c2l-fw-semibold); }

.c2l .c2l-timeline-empty {
    display: flex; align-items: center; gap: var(--c2l-space-sm);
    padding: var(--c2l-space-xl);
    color: var(--c2l-fg-muted);
    font-size: var(--c2l-fs-sm);
}

/* Style-guide page furniture: the taxonomy legend and the TL-08 stage
   controls. Both are page markup rather than directive output, but nothing
   else defines them. */
.c2l .c2l-timeline-legend { display: flex; flex-wrap: wrap; gap: var(--c2l-space-sm); }
.c2l .c2l-timeline-legend .c2l-badge { color: var(--c2l-timeline-accent, var(--c2l-primary)); }
.c2l .c2l-timeline-legend .c2l-badge .fa { color: inherit; }
.c2l .c2l-timeline-pipeline-controls {
    display: flex; justify-content: flex-end; gap: var(--c2l-space-sm);
    margin-top: var(--c2l-space-lg);
}

/* TL-01 classic push-down. Port of tl-styles.css:108-161 (.t01-*).
   The prototype's fixed artboard sizing (height: 100%, overflow-y: auto) is
   dropped - a style-guide panel is not a fixed-height artboard. .t01-item's
   bare `transition` is NOT ported as a transition: it only ever animated the
   is-new push-down, which IS ported now (Task 6), as an `animation` under
   the shared reduced-motion media query below rather than as a bare
   `transition` on every item unconditionally.
   Interlocked positional geometry stays a literal on purpose: the rule
   offset, the node's absolute position and size, the card's left margin and
   the two chevron triangles are one coordinate system, and rounding any of
   them onto the 4px spacing scale misaligns the connector against the node.
   Plain box padding, gaps and margins DO go through the scale. */
.c2l .c2l-timeline--classic {
    padding: var(--c2l-space-lg) var(--c2l-space-lg) var(--c2l-space-xl);
}

.c2l .c2l-timeline--classic .c2l-timeline-list {
    position: relative;
    padding-left: 36px;
}

.c2l .c2l-timeline--classic .c2l-timeline-list::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 1px;
    background: var(--c2l-border);
}

.c2l .c2l-timeline--classic .c2l-timeline-item {
    position: relative;
    padding: 10px 0 14px;
}

/* The node disc has no background of its own in the prototype - the JSX set
   it inline from the type palette. Here it comes from the row accent, so the
   glyph is never white-on-transparent. */
.c2l .c2l-timeline--classic .c2l-timeline-node {
    position: absolute;
    left: -28px;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-timeline-accent, var(--c2l-primary));
    color: var(--c2l-fg-on-primary);
    font-size: var(--c2l-fs-sm);
    box-shadow: 0 0 0 3px var(--c2l-surface);
    z-index: 2;
}

.c2l .c2l-timeline--classic .c2l-timeline-card {
    position: relative;
    margin-left: 10px;
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    border: 1px solid var(--c2l-border);
    border-left: 3px solid var(--c2l-timeline-accent, var(--c2l-primary));
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-surface);
}

/* Connector: a short stem in the row accent plus a chevron pointing at the
   card's accent stripe, drawn as two stacked triangles so the inner one
   tracks the card surface under any surface mood. */
.c2l .c2l-timeline--classic .c2l-timeline-card::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 10px 6px 0;
    border-color: transparent var(--c2l-timeline-accent, var(--c2l-primary)) transparent transparent;
}

.c2l .c2l-timeline--classic .c2l-timeline-card::after {
    content: "";
    position: absolute;
    left: -6px;
    top: 11px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 8px 5px 0;
    border-color: transparent var(--c2l-surface) transparent transparent;
}

.c2l .c2l-timeline--classic .c2l-timeline-title {
    margin-bottom: var(--c2l-space-xs);
    font-size: var(--c2l-fs-base);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-1);
}

.c2l .c2l-timeline--classic .c2l-timeline-body {
    font-size: var(--c2l-fs-sm);
    line-height: var(--c2l-lh-base);
    color: var(--c2l-fg-3);
}

/* TL-02 alternating spine. Port of tl-styles.css:163-205 (.t02-*).
   Side alternation is template-only: the item carries .is-left / .is-right
   from $even / $odd (Timeline.cshtml), which is the port of the prototype's
   .t02-item.left / .right. No controller state backs it.
   Dropped from the prototype, per the plan's DROP rules: .t02's
   height/overflow-y artboard sizing. The two .is-new pop-in/pulse rules
   (:175-176) are ported now (Task 6) - see the keyframes after TL-04 below.
   Also dropped: .t02-list::before's first `background:
   var(--c2l-secondary)` declaration, which the repeating-linear-gradient on
   the very next line overrides in the same rule - it is dead, not a fallback
   (repeating-linear-gradient needs no fallback in any browser this app
   supports), and the gradient already paints in the same token.
   Interlocked positional geometry stays a literal for the same reason as
   TL-01: the 36px centre column, the 30px node inside it, the rule's
   translateX(-1px) centring and the connector's +/-14px reach are one
   coordinate system, and rounding any of them onto the 4px spacing scale
   pulls the connector off the node. Plain box padding, gaps and margins DO
   go through the scale. */
.c2l .c2l-timeline--spine {
    padding: var(--c2l-space-lg) var(--c2l-space-lg) var(--c2l-space-xl);
}

.c2l .c2l-timeline--spine .c2l-timeline-list {
    position: relative;
}

/* The spine itself: a dashed centre rule drawn as a repeating gradient rather
   than a border, so the dash rhythm is exact rather than browser-dependent.
   Unlike TL-01's rule it is not inset - it runs the full list height. */
.c2l .c2l-timeline--spine .c2l-timeline-list::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-1px);
    background: repeating-linear-gradient(
        to bottom,
        var(--c2l-secondary) 0 6px,
        transparent 6px 12px);
}

/* Three columns: card, spine, card. The node always takes column 2; the card
   takes column 1 or 3 from the side class, so a row needs no other hook. */
.c2l .c2l-timeline--spine .c2l-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    min-height: 70px;
    padding: 10px 0;
}

/* Diamond node: a square rotated 45deg, with the glyph counter-rotated so it
   stays upright. No border-radius - the family sets none and TL-01's circle is
   scoped to its own modifier. Background comes from the row accent, as in
   TL-01, because the prototype set it inline from the type palette.

   `grid-row: 1` is LOAD-BEARING, not decoration. The shared template emits the
   node FIRST and the card second; the prototype emitted them the other way
   round (tl-vertical.jsx:87,92). With the node auto-placed, sparse
   auto-placement leaves the cursor at column 3, and an .is-left card - whose
   definite column-start of 1 is BEHIND that cursor - is pushed onto a second
   implicit row, rendering below the diamond instead of beside it. Pinning the
   node to row 1 makes it definitely-positioned, so it no longer advances the
   cursor and the card's auto row resolves to row 1 on BOTH sides, whatever the
   DOM order. Do not remove it because "the item only has one row anyway" -
   that is true only because of this line. */
.c2l .c2l-timeline--spine .c2l-timeline-node {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--c2l-timeline-accent, var(--c2l-primary));
    color: var(--c2l-fg-on-primary);
    font-size: var(--c2l-fs-sm);
    box-shadow: 0 0 0 4px var(--c2l-surface);
    transform: rotate(45deg);
    z-index: 2;
}

.c2l .c2l-timeline--spine .c2l-timeline-node > i {
    transform: rotate(-45deg);
}

.c2l .c2l-timeline--spine .c2l-timeline-card {
    position: relative;
    align-self: center;
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-surface);
    font-size: var(--c2l-fs-sm);
}

/* The prototype's .t02-card .t-when is a bare block above the title; the
   ported template renders the time inside the shared meta line alongside the
   avatar, the author and the type. Its type scale and colour therefore land on
   the family-wide .c2l-timeline-meta rule above, which is where the flex
   layout the prototype's single span never needed also lives.
   The two rules below DO stay variant-scoped, because each differs from its
   --classic counterpart on purpose: the spine title carries no margin-bottom
   (the body supplies the gap with margin-top instead), and the spine body
   takes its font-size by inheritance from the card. */
.c2l .c2l-timeline--spine .c2l-timeline-title {
    font-size: var(--c2l-fs-base);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-1);
}

/* No font-size of its own: the prototype lets the body inherit the card's,
   and the card sets it above. */
.c2l .c2l-timeline--spine .c2l-timeline-body {
    margin-top: var(--c2l-space-xs);
    line-height: var(--c2l-lh-base);
    color: var(--c2l-fg-3);
}

.c2l .c2l-timeline--spine .c2l-timeline-item.is-left .c2l-timeline-card {
    grid-column: 1;
    margin-right: var(--c2l-space-sm);
}

.c2l .c2l-timeline--spine .c2l-timeline-item.is-right .c2l-timeline-card {
    grid-column: 3;
    margin-left: var(--c2l-space-sm);
}

/* Connector: a short accent bar reaching from the card edge to the spine.
   It is a bar, not TL-01's chevron - the prototype draws no triangle here. */
.c2l .c2l-timeline--spine .c2l-timeline-item.is-left .c2l-timeline-card::after,
.c2l .c2l-timeline--spine .c2l-timeline-item.is-right .c2l-timeline-card::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 2px;
    background: var(--c2l-timeline-accent, var(--c2l-primary));
}

.c2l .c2l-timeline--spine .c2l-timeline-item.is-left .c2l-timeline-card::after { right: -14px; }
.c2l .c2l-timeline--spine .c2l-timeline-item.is-right .c2l-timeline-card::after { left: -14px; }

/* TL-03 icon rail with detail pane. Port of tl-styles.css:207-266 (.t03-*).
   The one INTERACTIVE variant: its rows are role="button" (Timeline.cshtml),
   .is-selected is the class the shared template emits for the active row - the
   prototype's .t03-knob.active - and the pane in column 2 renders vm.active.

   Two prototype rules MERGE onto one element: .t03-rail (the plum column,
   :209) and .t03-rail-list (:218) both describe what the ported template
   renders as the single .c2l-timeline-list div. The <ul>/<li> half of that
   reset - list-style, margin and .t03-knob's width: 100% - is dropped with the
   <ul>: the port renders divs, on which all three are no-ops.

   NOT ported as written: .t03-rail fills the rail with
   linear-gradient(180deg, var(--c2l-primary), var(--c2l-primary-dark))
   (tl-styles.css:210). The design contract permits gradients on chrome only
   and forbids gradient fills in content (design-mirror-final:docs/design/README.md:117); a rail
   inside a style-guide panel is content, so this is the flat brand colour.

   Dropped, on the artboard reasoning TL-01 and TL-02 already recorded: .t03's
   height: 100%, and overflow-y: auto on BOTH the rail and the detail pane -
   they scrolled inside a fixed-height artboard, and a panel that sizes to its
   content cannot overflow. Dropped per the plan's DROP table: .t03-knob-when
   (:248, the rail renders knobs only) and .t03-detail-when (:259, the port
   folds the time into the eyebrow). Dropped with the family's animation
   policy: the two .is-new rules (:240-247).

   Interlocked positional geometry stays literal, same rule as TL-01 and TL-02:
   the 72px rail column, the list's 14px vertical padding, the hairline's 35px
   offset and matching 14px insets, the 56px knob row and the 30px diamond are
   one coordinate system - the hairline keeps the prototype's 35px, half a
   pixel left of the 72px column's true centre, and it stops exactly where the
   list's padding starts. Plain box padding, gaps and margins in the detail
   pane DO go
   through the spacing scale. */
.c2l .c2l-timeline--rail {
    display: grid;
    grid-template-columns: 72px 1fr;
}

/* Placement is explicit, not left to auto-placement. In the style-guide call
   site only two children are grid items at once - ng-if leaves a comment node
   rather than an element, so an absent child never takes a cell - but a
   consumer that binds on-add adds a THIRD, and the empty state replaces the
   list with a child that would otherwise be crushed into the 72px rail column.
   Both therefore span the full width on their own row. TL-02 shipped a real
   bug from exactly this class of assumption (see its .c2l-timeline-node
   grid-row note above), so the four children are pinned rather than reasoned
   about. */
.c2l .c2l-timeline--rail .c2l-timeline-empty,
.c2l .c2l-timeline--rail .c2l-timeline-add {
    grid-column: 1 / -1;
}

.c2l .c2l-timeline--rail .c2l-timeline-list {
    grid-column: 1;
    position: relative;
    padding: 14px 0;
    background: var(--c2l-primary);
}

/* The rail's hairline. The prototype gave it its own element (.t03-rail-line,
   :214); the shared template renders one node and one card per row and nothing
   spare, so it is a pseudo-element here. White at 18% over the plum: an alpha
   wash has no token - c2l-tokens.css declares opaque values only - so the
   prototype's own value is transcribed, as are the two row washes below
   (:216, :224, :225). */
.c2l .c2l-timeline--rail .c2l-timeline-list::before {
    content: "";
    position: absolute;
    left: 35px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: rgba(255, 255, 255, .18);
}

.c2l .c2l-timeline--rail .c2l-timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    cursor: pointer;
    transition: background var(--c2l-dur-fast);
}

.c2l .c2l-timeline--rail .c2l-timeline-item:hover {
    background: rgba(255, 255, 255, .06);
}

/* Half the selection signal; the knob rim below is the other half. On its own
   this row wash measures only 1.35:1 against an unselected row, which is why
   the rim exists.

   The prototype ringed the active diamond (.t03-knob.active .t03-knob-dot,
   :235-239: outline 2px solid white plus a second box-shadow layer) and
   shadowed every knob (:232). NEITHER declaration is ported, because
   clip-path is applied AFTER both: measured in Chromium 148 (bundled with
   Playwright 1.60.0) with them restored and computed live (outline-style
   solid / 2px / offset 2px, both shadow layers present), the outline
   contributes 0 of 2916 pixels and the box-shadow leaks only 8 of 2916, at
   the diamond's four vertex tips, at a delta of <= 3/255 - visually nothing.

   filter: drop-shadow() fails the SAME way, for the same reason: filters
   apply to the element BEFORE clipping, so the halo is cut away with
   everything else outside the polygon. Isolated four-case test on one plum
   ground - clip-path + drop-shadow is pixel-identical to clip-path alone
   (worst case 1/255 in one channel of one pixel), while that same
   drop-shadow with NO clip-path paints a halo reaching rgb(151,114,150).
   A clipped shape cannot carry an outer ring of any kind, which is why the
   rim below is its own separately clipped box rather than an effect on this
   one. */
.c2l .c2l-timeline--rail .c2l-timeline-item.is-selected {
    background: rgba(255, 255, 255, .12);
}

/* The rail shows knobs only; the card carrying the row's text is what the
   detail pane renders instead. display: none also takes that text out of the
   accessibility tree, which is why the template gives each row an explicit
   aria-label. */
.c2l .c2l-timeline--rail .c2l-timeline-card {
    display: none;
}

/* Diamond by clip-path, not by rotation. TL-02's diamond is a rotated square
   with a counter-rotated glyph; the prototype cut this one with a polygon
   (:231), which keeps the glyph upright with no counter-transform. Background
   comes from the row accent, as in TL-01 and TL-02, because the prototype set
   it inline from the type palette.

   z-index: 2 does NOT do what an earlier version of this comment claimed. It
   is not what puts the knob over the hairline: paint order already does that,
   the list's ::before being a z-index: auto positioned box that comes first
   in DOM order. Measured against the PRE-RIM stylesheet, setting this to 0
   left the hairline pixel at the knob's centre unmoved.

   What it does do, now that the rim below exists, is keep the knob above that
   rim - a positive-z-index box later in paint order. Measured with this at 0:
   the rim covers the accent diamond outright, every knob's centre pixel turns
   rim-white, and a status knob's "fill contrast" reads 3.91:1 instead of
   1.00:1 purely because the knob is no longer the thing being measured.
   Load-bearing for that reason, and prototype-faithful either way (:233): do
   not remove it, same standing instruction as TL-02's grid-row note above. */
.c2l .c2l-timeline--rail .c2l-timeline-node {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--c2l-timeline-accent, var(--c2l-primary));
    color: var(--c2l-fg-on-primary);
    font-size: var(--c2l-fs-sm);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* The knob rim - the ring the prototype intended (:236 outline: 2px solid
   #fff), restored in the only way a clip-path'd shape can carry one: a
   SECOND, larger, separately clipped diamond painted behind the knob. See the
   .is-selected comment above for why outline, box-shadow and drop-shadow all
   fail here.

   It exists because the row wash alone is a 1.35:1 selection signal, and
   because a knob whose accent equals the rail is invisible without it: the
   taxonomy gives `status` tone: var(--c2l-primary) (c2lTimelineTypes.js:26)
   and this rail is filled with var(--c2l-primary), so a status diamond
   measures exactly 1.00:1 against its own background - only the white glyph
   shows. `meeting` measures 1.22:1 and `milestone` 1.73:1. The rim is
   type-independent, so it fixes all eight at once instead of re-toning a
   taxonomy that four other variants share.

   Geometry: for a rim of size S behind the 30px knob, the visible
   perpendicular width is (S/2 - 15) / sqrt(2). 34px gives 1.41px and 36px
   gives 2.12px, the latter matching the prototype's 2px outline. Absolutely
   positioned so it stays out of the item's flex flow, and z-index: 1 to sit
   between the hairline and the knob.

   Measured in Chromium 148, brightest pixel in the 4px band outside the
   diamond, against that row's own background: unselected 1.00 -> 3.91:1,
   selected 1.00 -> 11.33:1, and selected rim vs unselected rim 3.91:1 (the
   row wash alone was 1.35:1). The 45% white is a variant-local literal - the
   rail's other two washes above are the prototype's own and c2l-tokens.css
   declares no alpha values - while the selected rim is fully opaque and so
   goes through --c2l-fg-on-primary rather than a literal. */
.c2l .c2l-timeline--rail .c2l-timeline-item::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, .45);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.c2l .c2l-timeline--rail .c2l-timeline-item.is-selected::after {
    width: 36px;
    height: 36px;
    background: var(--c2l-fg-on-primary);
}

/* The detail pane. The prototype's 22px/24px padding rounds onto the scale
   (24px), as do the title's 4px/6px margins (4px/8px) and the body's 12px/14px
   padding (12px/16px). Its type sizes round onto the nearest token: the
   eyebrow's 10px to --c2l-fs-xs (11px), the body's 13.5px to --c2l-fs-base
   (14px) and its 1.55 line-height to --c2l-lh-loose (1.6). The eyebrow's
   letter-spacing stays a literal - it is a typographic ratio, and
   c2l-tokens.css declares no letter-spacing scale to round it onto. */
.c2l .c2l-timeline--rail .c2l-timeline-detail {
    grid-column: 2;
    padding: var(--c2l-space-xl);
}

.c2l .c2l-timeline--rail .c2l-timeline-detail-eyebrow {
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-semibold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c2l-fg-muted);
}

.c2l .c2l-timeline--rail .c2l-timeline-detail-title {
    margin: var(--c2l-space-xs) 0 var(--c2l-space-sm);
    font-size: var(--c2l-fs-lg);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-primary);
}

/* The accent fallback is --c2l-secondary, not the family's --c2l-primary: the
   prototype wrote it that way here (:263) and nowhere else. It never fires in
   practice - the template's ng-style always sets --c2l-timeline-accent on the
   pane - so this preserves the prototype's intent at no cost. */
.c2l .c2l-timeline--rail .c2l-timeline-detail-body {
    padding: var(--c2l-space-md) var(--c2l-space-lg);
    border-left: 3px solid var(--c2l-timeline-accent, var(--c2l-secondary));
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-surface-2);
    font-size: var(--c2l-fs-base);
    line-height: var(--c2l-lh-loose);
    color: var(--c2l-fg-3);
}

.c2l .c2l-timeline--rail .c2l-timeline-detail-who {
    display: flex;
    align-items: center;
    gap: var(--c2l-space-sm);
    margin-top: var(--c2l-space-lg);
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-fg-4);
}

/* TL-04 threaded log. Port of tl-styles.css:268-303 (.t04-*).
   Chat-style: small ringed nodes on a hairline left rule, each row's text in a
   bubble with a tail pointing back at its node. The ONLY variant whose node is
   surface-filled with the row accent on its ring and glyph - TL-01, TL-02 and
   TL-03 all fill the node with the accent instead.

   .t04-row (:288) has no element in the port, and its three declarations are
   already shipped: display: flex + gap + align-items are exactly what the
   family-wide .c2l-timeline-meta rule (:5888) carries, which is where the
   avatar now lives - nested in the meta line rather than made a sibling of the
   bubble. Its gap rounds onto the scale there (10px -> 8px --c2l-space-sm) and
   its align-items becomes center rather than flex-start, because the port's
   avatar is an inline meta item and not a full-height column sibling.
   Restating flex on the card instead would turn the card into a flex ROW and
   lay meta, title and body out side by side.

   No threaded-scoped copy of .c2l-timeline-meta is added, on purpose. Compared
   declaration by declaration, .t04-meta (:294) differs from the family rule in
   nothing that survives tokenization: font-size 11px IS --c2l-fs-xs, the
   colour is the same --c2l-fg-muted, display: flex is the same, and its 6px
   gap is off-scale and rounds to the family's --c2l-space-sm. The prototype's
   missing align-items and margin-bottom are additions the family makes, not
   values it contradicts. .t04-meta .who (:295) is likewise byte-identical to
   the family .c2l-timeline-who. -title and -body DO stay variant-scoped,
   because those genuinely differ from --classic and --spine.

   NOT a port: the bubble tail. The prototype draws none - .t04-* carries no
   pseudo-element but .t04-list::before, and its bubble sits flush beside an
   avatar rather than pointing anywhere. The brief specifies one, so it is
   built with TL-01's own technique (two stacked triangles, :5986-6008), sized
   for this bubble's 1px --c2l-border rather than TL-01's 3px accent stripe:
   the outer triangle is the border colour and the inner one, offset 1px right,
   is the surface, so the tail reads as an extension of the bubble outline.

   Dropped, on the artboard reasoning TL-01..TL-03 already recorded: .t04's
   height: 100% and overflow-y: auto. The two .is-new rules (:276, :287) are
   ported now (Task 6) - node pop only, no pulse, matching the reference
   exactly (t04-node never gets tl-pulse, unlike t01/t02's nodes). Dropped
   per the plan's DROP table: .t04-reactions and .t04-react (:298-303) - the
   prototype's hardcoded
   "thumbs-up 2" / "Reply" chips are fake affordances with no callback behind
   them, and c2lTimeline.test.js guards their absence. Dropped as dead:
   .t04-bubble's flex: 1 (:290), which only meant anything as a flex child of
   .t04-row, and the port's bubble is a block in normal flow already filling
   its row.

   Interlocked positional geometry stays literal, same rule as TL-01..TL-03:
   the list's 22px indent, the rule at 9px, the node's -18px offset and 20px
   box, the card's 8px clearance and the tail's 7px reach are one coordinate
   system - the node spans 4px..24px from the list edge and the card starts at
   30px, so the tail exactly bridges the 6px between them. Rounding any of
   those onto the 4px spacing scale pulls the tail off the node. Plain box
   padding, margins and type sizes DO go through the scale. */
.c2l .c2l-timeline--threaded {
    padding: var(--c2l-space-lg) var(--c2l-space-xl) var(--c2l-space-xl);
}

/* .t04 declares no background of its own - unlike TL-03's plum rail, this
   variant sits on whatever surface its panel provides. */
.c2l .c2l-timeline--threaded .c2l-timeline-list {
    position: relative;
    padding-left: 22px;
}

/* The thread rule. It runs BEHIND the nodes, not across them: each node is
   opaque --c2l-surface at z-index 2, so it masks the 2px line where it
   crosses. */
.c2l .c2l-timeline--threaded .c2l-timeline-list::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--c2l-border);
}

.c2l .c2l-timeline--threaded .c2l-timeline-item {
    position: relative;
    padding: 8px 0 14px;
}

/* Ringed, not filled. The accent is the 2px ring and the glyph; the fill is
   the surface, which is also what hides the thread rule behind it. The 9px
   glyph is a literal: it sits below --c2l-fs-xs (11px), the smallest type
   token, and an 11px FontAwesome glyph crowds a 20px disc with a 2px ring.
   Sub-token icon sizes are precedented in this file (:1330, :2189, :2392). */
.c2l .c2l-timeline--threaded .c2l-timeline-node {
    position: absolute;
    left: -18px;
    top: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--c2l-timeline-accent, var(--c2l-primary));
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-surface);
    color: var(--c2l-timeline-accent, var(--c2l-primary));
    font-size: 9px;
}

/* The card's only job under --threaded is to clear the node so the tail has
   somewhere to sit; everything else about the box is on .c2l-timeline-bubble
   below, which the template puts on this same element. Nothing reaches it from
   the family or from --classic: every other card rule in this section is
   scoped to its own modifier. margin-left is a literal for the same reason
   TL-01's is (:5975) - it is one end of the connector's coordinate system. */
.c2l .c2l-timeline--threaded .c2l-timeline-card {
    margin-left: 8px;
}

.c2l .c2l-timeline--threaded .c2l-timeline-bubble {
    position: relative;
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-surface);
}

/* Tail, outer half: the border colour. Its base sits on the bubble's outer
   border edge and its apex reaches 1px past the node's widest point, so the
   two always touch however the row reflows. */
.c2l .c2l-timeline--threaded .c2l-timeline-bubble::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 7px 6px 0;
    border-color: transparent var(--c2l-border) transparent transparent;
}

/* Tail, inner half: the surface, one pixel to the right, so the outer
   triangle survives as a 1px rim and the tail opens into the bubble. */
.c2l .c2l-timeline--threaded .c2l-timeline-bubble::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 7px 6px 0;
    border-color: transparent var(--c2l-surface) transparent transparent;
}

/* 13px is equidistant between --c2l-fs-sm (12px) and --c2l-fs-base (14px).
   Rounded UP: 12px would make the title the same size as the body below and
   leave weight as the only hierarchy, and --c2l-fs-base is what --classic and
   --spine already give their titles. The 2px margin-top rounds to
   --c2l-space-xs and collapses with the meta line's equal margin-bottom, so
   the gap stays 4px either way. */
.c2l .c2l-timeline--threaded .c2l-timeline-title {
    margin-top: var(--c2l-space-xs);
    font-size: var(--c2l-fs-base);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-1);
}

/* 12.5px rounds to --c2l-fs-sm and 1.5 to --c2l-lh-base (1.428, nearer than
   --c2l-lh-loose's 1.6), the same pair --classic took from the same values. */
.c2l .c2l-timeline--threaded .c2l-timeline-body {
    margin-top: var(--c2l-space-xs);
    font-size: var(--c2l-fs-sm);
    line-height: var(--c2l-lh-base);
    color: var(--c2l-fg-3);
}

/* One entrance keyframe for the whole family - c2lTimeline, c2lTimelineFlow
   and c2lTimelinePipeline all opt in to THIS animation through their own
   `animated` binding, so it is defined once here. Entrance only; there is no
   exit animation and no ngAnimate anywhere in the family. */
@keyframes c2l-timeline-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* TL-01/02/04 "just added" pop + pulse (Task 6). c2l-timeline-in above
   already has the fade + translateY shape the prototype's tl-slide-down
   wants for the whole item (tl-styles.css:87-90), so it is reused here at
   its own timing instead of a near-duplicate keyframe; only
   c2l-timeline-pop-in (scale bounce) and c2l-timeline-pulse (box-shadow
   ring) are genuinely new shapes, ported from tl-styles.css:78-86.
   c2l-timeline-pulse's rgba(76, 172, 190, ...) is --c2l-secondary's own
   decimal RGB, not a new color - the same literal this stylesheet already
   uses at a dozen call sites (e.g. :1807, :4802) and c2l-tokens.css's own
   --c2l-secondary-tint/-tint-border (:97-98). No --c2l-dur-*/--c2l-ease-*
   token matches these durations or the bounce cubic-bezier, so those stay
   literals, same as the reference. */
@keyframes c2l-timeline-pop-in {
    0%   { opacity: 0; transform: scale(.5); }
    60%  { opacity: 1; transform: scale(1.18); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes c2l-timeline-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(76, 172, 190, .6); }
    100% { box-shadow: 0 0 0 14px rgba(76, 172, 190, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-timeline-animated .c2l-timeline-item {
        animation: c2l-timeline-in var(--c2l-dur-base) var(--c2l-ease-out-quart) both;
    }

    /* Scoped per variant, not a bare .c2l-timeline-item.is-new: TL-03 (rail)
       shares this same directive/template and the style guide's own
       vm.events array (c2lTimeline.js header doc block), so an unscoped rule
       would reach it too. Rail gets no is-new CSS on purpose - out of this
       task's scope - so nothing below matches a rail row. */
    .c2l .c2l-timeline--classic .c2l-timeline-item.is-new {
        animation: c2l-timeline-in .5s cubic-bezier(.32, 1.4, .55, 1) both;
    }
    .c2l .c2l-timeline--classic .c2l-timeline-item.is-new .c2l-timeline-node {
        animation: c2l-timeline-pop-in .55s cubic-bezier(.32, 1.4, .55, 1) both,
                    c2l-timeline-pulse 1.2s ease-out .25s 1;
    }

    .c2l .c2l-timeline--spine .c2l-timeline-item.is-new .c2l-timeline-card {
        animation: c2l-timeline-pop-in .5s cubic-bezier(.32, 1.4, .55, 1) both;
    }
    .c2l .c2l-timeline--spine .c2l-timeline-item.is-new .c2l-timeline-node {
        animation: c2l-timeline-pop-in .55s cubic-bezier(.32, 1.4, .55, 1) both,
                    c2l-timeline-pulse 1.2s ease-out .25s 1;
    }

    .c2l .c2l-timeline--threaded .c2l-timeline-item.is-new {
        animation: c2l-timeline-in .5s cubic-bezier(.32, 1.4, .55, 1) both;
    }
    .c2l .c2l-timeline--threaded .c2l-timeline-item.is-new .c2l-timeline-node {
        animation: c2l-timeline-pop-in .55s cubic-bezier(.32, 1.4, .55, 1) both;
    }
}

/* ---------- TL-05, TL-06, TL-07 - horizontal timeline family ----------
   Ported from the prototype design-mirror-final:docs/design/showcase/timelines/tl-styles.css on
   the same terms as the vertical family above: the prototype's per-variant
   .tNN-* names are mapped onto ONE set of .c2l-timeline-flow-* family classes
   under a mode modifier, because c2lTimelineFlow renders every mode from a
   single template. The prototype's --type-accent becomes
   --c2l-timeline-accent, set per step by ng-style from the c2lTimelineTypes
   taxonomy - a step-local custom property, never a declared token. The Add CTA
   is not restated here: .c2l-timeline-flow-add already shares the family rule
   above. The prototype's .is-new pop-in / pulse / slide-in-right rules are
   NOT ported here - out of scope for Task 6, which covers TL-01/02/04 only
   (c2lTimeline.js). The vertical family above now derives the same flag from
   its own `items` $watchCollection diff without breaking the no-mutation
   contract; the same technique would apply equally to c2lTimelineFlow's own
   `items` watch if a future task extends is-new to TL-05/06/07.

   ONE fact governs every width below. The prototype was authored WITHOUT
   box-sizing: border-box - there is no such declaration anywhere under
   design-mirror-final:docs/design/showcase/timelines/ - while this app sets it globally through
   Bootstrap. Every declared width therefore renders NARROWER here than on the
   artboard: a step is 132px in total rather than 132px plus 12px of padding.
   That is kept rather than compensated for. Measured in Chromium 148, it
   tightens the hexagon pitch from 144px to 132px and CLOSES the gap between
   the connector arrowhead and the next node from the prototype's 25px to 13px,
   which is the direction the port wants. */

/* TL-05 process hexagons */

/* .t05 (:306) contributes its padding only. 24px 22px both round to
   --c2l-space-xl. Dropped: height: 100%, the fixed artboard sizing every
   variant in this family drops, and with it display: flex + flex-direction:
   column - under a flex column the Add CTA below the track becomes a
   stretch-aligned flex item and spans the whole panel width, where the
   vertical family's block flow lets the same inline-flex button shrink-wrap. */
.c2l .c2l-timeline-flow--hexagons {
    padding: var(--c2l-space-xl);
}

/* .t05-track (:307). Dropped: flex: 1 and min-height: 0, which only meant
   anything as a child of the dropped fixed-height flex column - and with them
   the asymmetric 20px top padding, which existed solely to offset flex
   centring inside that column. That is artboard chrome, so it goes rather than
   being rounded onto a scale it never belonged to. The 6px lateral and bottom
   padding IS load-bearing - it keeps the first and last step off the scroll
   edges - and rounds to --c2l-space-sm, the same 6px -> 8px rounding the
   family already recorded for .t04-meta's gap (:6443). */
.c2l .c2l-timeline-flow--hexagons .c2l-timeline-flow-track {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--c2l-space-sm);
    scrollbar-width: thin;
}

/* .t05-step (:314). The 132px width and the 6px inner padding are interlocked
   with the 64px node and the 56px connector below - one horizontal coordinate
   system, the same reason TL-01..TL-04 keep their positional geometry literal.
   flex: 0 0 auto is what makes the track SCROLL rather than squashing the
   steps once they outrun the panel. */
.c2l .c2l-timeline-flow--hexagons .c2l-timeline-flow-step {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 132px;
    padding: 0 6px;
}

/* .t05-step-row (:343). Its width is exactly the node's 64px, because the only
   other child - the connector - is absolutely positioned. That is what makes
   the connector's left: 100% land on the node's right edge. */
.c2l .c2l-timeline-flow--hexagons .c2l-timeline-flow-step-row {
    position: relative;
    display: flex;
    align-items: center;
}

/* .t05-hex (:320). A clip-path node can carry no ring, outline, box-shadow or
   filter - Chromium applies all four BEFORE the clip, so any halo would be
   invisible - and the prototype asks for none, unlike the TL-03 knob that
   needed a separately-clipped rim. The polygon stays literal: its vertices are
   proportional and no token could express them. 18px is --c2l-fs-lead exactly;
   the prototype's `color: #fff` is --c2l-fg-on-primary. The accent falls back
   to --c2l-primary for a row with no type, as in TL-01 and TL-02. */
.c2l .c2l-timeline-flow--hexagons .c2l-timeline-flow-node {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--c2l-timeline-accent, var(--c2l-primary));
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
    color: var(--c2l-fg-on-primary);
    font-size: var(--c2l-fs-lead);
}

/* .t05-conn (:331) and its arrowhead (:336). left: 100% puts the bar at the
   node's right edge and the -2px pull tucks its left end under the node's
   right vertex so no seam shows where the two meet. The 56px reach, the 3px
   bar and the 8x10 arrowhead are one coordinate system with the 132px step and
   the 64px node, so they stay literal exactly like TL-01's chevron. Ported
   verbatim including the 56px: it leaves the arrow tip pointing at the next
   node across clear air rather than touching it, which is the prototype's own
   look (25px of air there, 13px here) and not a defect this port was asked to
   change.
   .t05-step:last-child .t05-conn { display: none } (:342) is deliberately NOT
   ported. The controller flags the last row and the template drops the element
   with ng-if, so there is no trailing connector left to hide - shipping the
   CSS rule as well would guard a case the DOM no longer produces. */
.c2l .c2l-timeline-flow--hexagons .c2l-timeline-flow-conn {
    position: absolute;
    left: 100%;
    top: 50%;
    z-index: 1;
    width: 56px;
    height: 3px;
    background: var(--c2l-border);
    transform: translate(-2px, -50%);
}

.c2l .c2l-timeline-flow--hexagons .c2l-timeline-flow-conn::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--c2l-border);
}

/* .t05-label (:344). 12.5px rounds to --c2l-fs-sm and 1.25 to --c2l-lh-tight
   (1.2, nearer than --c2l-lh-base's 1.428) - the same pair the vertical family
   took from the same values. margin-top: 10px is equidistant between
   --c2l-space-sm and --c2l-space-md and rounds DOWN, because the node's
   clip-path stops at 94%: nearly 4px of its 64px box is already empty below
   the bottom vertex, so the OPTICAL gap is ~4px larger than whatever is
   declared here.
   max-width: 124px is NOT ported, and this was MEASURED rather than reasoned.
   The label is a block-level item in a column flex container, so its width is
   the CROSS size: fit-content, already bounded by the step's 120px inner box.
   Rendering three title lengths in Chromium 148 with the declaration and
   without it gives byte-identical label rects every time (50.67px one line,
   118.70px one line, 120.00px wrapped to three lines), so the cap can never
   bind and shipping it would be dead CSS. */
.c2l .c2l-timeline-flow--hexagons .c2l-timeline-flow-label {
    margin-top: var(--c2l-space-sm);
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    line-height: var(--c2l-lh-tight);
    color: var(--c2l-fg-1);
    text-align: center;
}

/* .t05-when (:349). 10.5px sits below --c2l-fs-xs (11px), the smallest type
   token, and takes it; the 2px margin rounds to --c2l-space-xs, the same
   rounding TL-04 recorded for its title (:6575). */
.c2l .c2l-timeline-flow--hexagons .c2l-timeline-flow-when {
    margin-top: var(--c2l-space-xs);
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-muted);
}

/* .t05-body (:350) is NOT ported, per the plan's DROP table: the hexagon track
   renders a label and a date only, and the template emits no body element for
   this rule to reach. */

/* TL-06 wrapped snake */

/* DEVIATION, deliberate. tl-horizontal.jsx:85-120 draws every connector as an
   absolutely positioned SVG overlay whose endpoints are calc() strings rebuilt
   on each render. Porting that to AngularJS would mean assembling SVG
   attribute strings in a controller - untestable, and fragile at any width the
   prototype was never tried at. This port draws the connectors as CSS
   pseudo-elements on the cell instead, with the direction chosen by an
   .is-reversed class on odd rows: same visual, no coordinate math, and the
   cell math (row / column / turn) stays a plain unit-testable mapping.
   The snake needs BOTH directions - a horizontal run along each row AND a
   vertical drop where the row turns (tl-horizontal.jsx:104-119). Horizontal
   only would render as four detached runs rather than one continuous path,
   which is why there is a second pseudo-element and why the controller flags
   `turns` and `isLastCell`.
   .t06-row (:359, display: contents) and .t06-line (:382) are DROPPED - they
   are the SVG-overlay scaffolding these pseudo-elements replace. */

/* .t06 (:353) contributes its padding only. 18px takes --c2l-space-lg (16px,
   2px away) over --c2l-space-xl (6px away); 22px takes --c2l-space-xl, the
   same 22px -> 24px rounding TL-05 recorded at :6634. Dropped: height: 100%,
   the fixed artboard sizing every variant in this family drops, and with it
   overflow-y: auto, which only scrolled because of that height and is inert
   without it. */
.c2l .c2l-timeline-flow--snake {
    padding: var(--c2l-space-lg) var(--c2l-space-xl);
}

/* .t06-grid (:354). The prototype's `gap: 0 18px` becomes row-gap: 0 with NO
   column gap, and both halves of that are load-bearing.
   Row: the vertical drop below anchors to the cell box, so row-gap: 0 is what
   makes the next row's top edge identical to this cell's bottom edge.
   Column: the horizontal run below spans left: 50% to right: -50%, which
   reaches the next column's centre only at column-gap 0 - any gap g leaves a
   g-wide break in the middle of every run. The prototype could afford 18px
   because its SVG drew to absolute cell centres and simply crossed the gap.
   position: relative is also dropped: it existed to contain the overlay, and
   there is no overlay any more.
   --c2l-snake-node-y is a block-local custom property, not a token - same
   status as --c2l-timeline-accent. */
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-grid {
    display: grid;
    /* minmax(0, 1fr), NOT the prototype's repeat(4, 1fr). A bare 1fr is
       minmax(AUTO, 1fr), so a column's floor is its min-content width: one
       unbreakable token in a title - a reference code, a URL, an ID - widens
       that column and shrinks its siblings. The connectors span left: 50% to
       right: -50%, i.e. half of THIS cell in each direction, which reaches the
       next node only while all four columns are the same width. Measured with
       a 60-char reference code in one title: the tracks resolved to
       110.453/520.625/110.453/110.469px, one run stopped 205.09px short of its
       node and two connectors rendered outside the grid's own padding box
       (x=915.39 and x=-125.86 against a grid spanning 24..876). minmax(0, 1fr)
       lets a column collapse below min-content, keeping all four equal.
       Overflow is handled where it belongs, by the mini card's text wrapping. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0;
    /* Declared, not inherited. This is the grid's initial behaviour (align-items
       normal behaves as stretch for a grid item with an auto block size), but
       the drop below DEPENDS on it: bottom: -42px reaches the next node only
       because every cell box is stretched to the full row track, so the cell's
       bottom edge IS the row boundary. With align-items: start the cells shrink
       to their content and both drops land 14.39px short - measured. A silent
       dependency on an initial value is not something the next reader should
       have to rediscover. */
    align-items: stretch;
    /* Node centre = padding-top (22px) + circle radius (20px). */
    --c2l-snake-node-y: 42px;
}

/* .t06-cell (:360). The 22/32 padding is interlocked with the 40px circle and
   the 42px node offset - one vertical coordinate system, so it stays literal
   for the same reason TL-01..TL-05 keep theirs. The prototype's inline
   zIndex: 1 (tl-horizontal.jsx:131) is NOT reproduced here: it existed to lift
   the whole cell above the z-index: 0 overlay, and the connectors now live
   INSIDE the cell. Its job moves to -mini below. Leaving the cell at
   z-index: auto is deliberate - it creates no stacking context, so the three
   layers (connector 0, mini 1, circle 2) resolve against ONE context and a
   drop leaving this cell still passes behind the next row's circle. */
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-cell {
    position: relative;
    padding: 22px 0 32px;
}

/* .t06-circle (:367). 40px square with a 3px ring: under this app's global
   border-box that is 40px TOTAL, which is what makes the node centre land at
   22 + 20 = 42px. 14px is --c2l-fs-base exactly, 8px is --c2l-space-sm, 50% is
   --c2l-radius-circle and the prototype's `background: #fff` is
   --c2l-surface. Unlike TL-05's filled hexagon this node is surface-filled
   with the accent on its ring and glyph, exactly as TL-04's bubble node is.
   The accent falls back to --c2l-primary for a row with no type, as everywhere
   else in the family.
   The connectors below anchor at left: 50%, so the node must actually BE at
   the cell's horizontal centre. The prototype's .t06-circle is a bare 40px
   block with no centring rule (tl-styles.css:367), which puts its centre 20px
   from the cell's left edge - while the prototype's own SVG draws to cell
   centres (tl-horizontal.jsx:97). Centre it explicitly here rather than
   inherit that mismatch. */
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-circle {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--c2l-space-sm);
    border: 3px solid var(--c2l-timeline-accent, var(--c2l-primary));
    border-radius: var(--c2l-radius-circle);
    background: var(--c2l-surface);
    color: var(--c2l-timeline-accent, var(--c2l-primary));
    font-size: var(--c2l-fs-base);
}

/* .t06-mini (:374). 6px and 9px both round to --c2l-space-sm (8px) - the same
   6px -> 8px rounding the family already recorded for .t04-meta's gap (:6443).
   11.5px is equidistant between --c2l-fs-xs (11px) and --c2l-fs-sm (12px); it
   takes --c2l-fs-sm because the only thing inheriting it is the title, which
   is this variant's counterpart to TL-05's -label, and that is --c2l-fs-sm.
   position/z-index are NOT in the prototype rule: they carry over the job of
   the cell's inline zIndex: 1 (tl-horizontal.jsx:131). Without them the card
   is an in-flow non-positioned block, painted BEFORE any positioned z-index: 0
   element, so the turn's 3px drop would rule straight down over the card and
   its text instead of passing behind it as it does on the artboard. */
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-mini {
    position: relative;
    z-index: 1;
    padding: var(--c2l-space-sm);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-surface);
    font-size: var(--c2l-fs-sm);
}

/* .t06-mini .t-when (:379). 10px sits below --c2l-fs-xs (11px), the smallest
   type token, and takes it - the same floor TL-05's .t05-when hit at :6764. */
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-when {
    color: var(--c2l-fg-muted);
    font-size: var(--c2l-fs-xs);
}

/* .t06-mini .t-title (:380). 600 is --c2l-fw-semibold, the 2px margin rounds
   to --c2l-space-xs and 1.25 to --c2l-lh-tight (1.2) - the same three
   roundings TL-05 recorded for its own label at :6741. */
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-label {
    margin-top: var(--c2l-space-xs);
    color: var(--c2l-fg-1);
    font-weight: var(--c2l-fw-semibold);
    line-height: var(--c2l-lh-tight);
}

/* Horizontal run to the next cell in the same row. Suppressed on the cell
   that turns (it drops instead) and on the last cell overall. */
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-cell::after {
    content: '';
    position: absolute;
    top: var(--c2l-snake-node-y);
    left: 50%;
    right: -50%;
    height: 3px;
    background: var(--c2l-border);
    z-index: 0;
}
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-cell.is-reversed::after { left: -50%; right: 50%; }
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-cell.is-turn::after,
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-cell.is-last::after { display: none; }

/* Vertical drop at the row turn, on the edge the row ended at - the equivalent
   of the prototype's inter-row SVG lines. Starts at this node's centre and ends
   one node-offset past the cell's bottom edge, which is exactly the next node's
   centre - and crucially it stays exact at ANY row height, where a fixed row
   pitch would not: the cell's height is content-driven, so one wrapped title
   breaks any hardcoded number.
   That invariant rests on THREE conditions, all of them stated on the grid rule
   above, none of them optional:
     1. row-gap: 0, so the next row's top edge IS this cell's bottom edge;
     2. align-items: stretch, so the cell's bottom edge IS the row boundary
        rather than wherever its own content happened to stop (with
        align-items: start both drops measure 14.39px short);
     3. the 42px node offset being the same on both rows, which holds because
        it is padding-top + radius and neither varies with content.
   Break any one of the three and the drop stops short or overshoots. */
.c2l .c2l-timeline-flow--snake .c2l-timeline-flow-cell.is-turn::before {
    content: '';
    position: absolute;
    top: var(--c2l-snake-node-y);
    bottom: calc(-1 * var(--c2l-snake-node-y));
    left: 50%;
    width: 3px;
    background: var(--c2l-border);
    z-index: 0;
}

/* TL-07 gantt bars */

/* The prototype projected events onto this axis through a hardcoded map from
   display STRINGS to slots, defaulting anything unrecognised to slot 9
   (tl-horizontal.jsx:157-160,203). The port computes the slot from the real
   date via c2lTimelineTypes.dayOffset, so nothing below depends on a label.
   The prototype's .t07-bar.is-new slide-in + pulse (:410) is NOT ported, for
   the reason the vertical family recorded at :5856. */

/* .t07 (:388) contributes its padding only: 18px takes --c2l-space-lg and
   22px --c2l-space-xl, the same pair TL-06 recorded at :6795. Dropped:
   height: 100% and, with it, display: flex + flex-direction: column - the
   fixed artboard sizing every variant in this family drops.
   --c2l-gantt-gutter is a block-local custom property, NOT a token - same
   status as --c2l-snake-node-y (:6822) and --c2l-timeline-accent. It exists
   because the axis spacer and every lane label must be exactly as wide as
   each other: between them they decide where the track's 0% sits, and any
   drift puts every tick a gutter-width away from the bar it dates. The
   prototype states the same 90px twice instead - inline on the spacer
   (tl-horizontal.jsx:185) and again on .t07-rowlabel (:416). */
.c2l .c2l-timeline-flow--gantt {
    --c2l-gantt-gutter: 90px;
    padding: var(--c2l-space-lg) var(--c2l-space-xl) var(--c2l-space-xl);
}

/* The prototype's axis header is an inline style="display: flex" wrapper over
   a bare 90px spacer div (tl-horizontal.jsx:184-185). Both get a class here
   because this port carries no inline styles. The spacer is load-bearing, not
   decoration: it is what puts the axis and the lane tracks on ONE scale. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-axis-row {
    display: flex;
}

.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-gutter {
    width: var(--c2l-gantt-gutter);
    flex: none;
}

/* .t07-axis (:389). Its `flex: none` is overridden by the prototype's own
   inline flex: 1 (tl-horizontal.jsx:186), so the port takes flex: 1 - the
   axis is what absorbs the width the gutter leaves. The 26px height is
   positional geometry interlocked with the tick label's 4px offsets below and
   stays literal, as the rest of the family's does. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-axis {
    position: relative;
    flex: 1;
    height: 26px;
    border-bottom: 1px solid var(--c2l-border);
}

/* .t07-tick (:393) and its label (:394). The prototype's dashed #e7eaec is
   --c2l-border exactly. 4px is --c2l-space-xs exactly; 10px sits below
   --c2l-fs-xs (11px), the smallest type token, and takes it - the same floor
   TL-05 (:6764) and TL-06 (:6891) hit. The .08em tracking has no token and
   stays literal, as the style-guide crumb's .02em does (:6974).
   KNOWN, ported faithfully: the last tick is at day 13 = 100%, so its label
   starts AT the axis's right edge and renders outside the axis box. The
   prototype has exactly the same geometry (tl-horizontal.jsx:188). Measured in
   Chromium 148: the "TODAY" label overhangs the axis by 46.28px, which the
   variant's own 24px right padding and the panel body's 16px absorb all but
   6.28px of; nothing on the path sets a clipping overflow, so it is neither
   cut off nor does it widen the document (scrollWidth == clientWidth at both
   1280px and 1024px). Left as the prototype draws it. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px dashed var(--c2l-border);
}

.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-tick > span {
    position: absolute;
    bottom: var(--c2l-space-xs);
    left: var(--c2l-space-xs);
    color: var(--c2l-fg-muted);
    font-size: var(--c2l-fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* .t07-rows (:399) folds into this wrapper, per the plan's root/wrapper
   table. Only the 8px vertical padding survives, and it is --c2l-space-sm
   exactly. Dropped: flex: 1 and min-height: 0, which meant something only as
   a child of the dropped fixed-height flex column, and with them
   overflow-y: auto, which only scrolled because of that height - the same
   reasoning TL-06 recorded at :6795. position: relative goes too: the bars
   position against the lane track, never against this box, exactly as
   .t06-grid's was dropped once the overlay it contained was gone (:6813). */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-gantt {
    padding: var(--c2l-space-sm) 0;
}

/* .t07-row (:400). The 38px MUST be `height`, not min-height, and this was
   measured rather than reasoned: the track below is height: 100%, and a
   percentage height only resolves against a parent with a DEFINITE height,
   which min-height does not provide. Perturbing this one declaration to
   min-height in Chromium 148 collapses the track from 38px to 0px; this
   rule's align-items: center then centres that zero-height box, and every bar
   lands 19px below its lane's centre line - 11.19px of each bar ends up
   inside the NEXT lane, so every bar reads against the wrong label. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-lane {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
}

/* .t07-rowlabel (:414). The width comes from the shared gutter property so it
   can never drift from the axis spacer; 11px is --c2l-fs-xs exactly.
   position: relative + z-index: 2 are ported verbatim and are DEFENSIVE, not
   load-bearing: the lane rule is a pseudo-element on the track, and the track
   is this label's SIBLING starting exactly where the label ends, so the rule
   cannot reach the text (measured: rule painted 155..1215, label right edge
   155.00, and a hit test on the label returns the label itself). Kept anyway,
   because a positioned z-index pseudo-element painting over an in-flow block
   is the trap TL-06's -mini hit at :6876 and the prototype guards it here.
   Under this app's global border-box the 90px is the TOTAL - padding and the
   1px border included - which is exactly what makes it agree with the axis
   spacer's bare 90px (measured: both track and axis start at x=155.00 and are
   1060.00px wide, delta 0.0000px on every lane). The 10px padding-right is
   equidistant between --c2l-space-sm and --c2l-space-md; it rounds DOWN, with
   the bar's padding below, for the reason recorded there. Because the gutter
   total is fixed by the width, this choice moves the label text only, never
   the scale. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-lane-label {
    position: relative;
    z-index: 2;
    width: var(--c2l-gantt-gutter);
    flex: none;
    padding-right: var(--c2l-space-sm);
    border-right: 1px solid var(--c2l-border);
    color: var(--c2l-fg-4);
    font-size: var(--c2l-fs-xs);
    text-align: right;
}

/* The prototype's inline <div style="position: relative; flex: 1;
   height: 100%"> (tl-horizontal.jsx:200) - the bars' positioning context, and
   the other half of the height contract noted on the lane above. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-lane-track {
    position: relative;
    flex: 1;
    height: 100%;
}

/* .t07-rowline (:401) becomes a ::before on the track: the prototype drew it
   with a dedicated empty <div> and this port has no element for it (selector
   map). top: 50% resolves against the lane's definite 38px to the prototype's
   own 19px, and stays right if that pitch ever changes.
   The prototype's #f3f5f6 is 12/255 lighter than --c2l-border, deliberately
   fainter than the axis rule above it. That distinction is DROPPED rather
   than routed through a surface-fill token: every other hairline in this
   variant (the axis border-bottom, the tick's dashed border-left, the label's
   border-right) is already --c2l-border, and a 1px rule is a border
   semantically even where a pseudo-element has to paint it with background. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-lane-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--c2l-border);
}

/* .t07-bar (:402). The 22px height and 8px top are one vertical coordinate
   system with the lane's 38px - 8 + 22 + 8 centres the bar exactly - and stay
   literal for the same reason the rest of the family keeps its positional
   geometry. 11.5px is equidistant between --c2l-fs-xs and --c2l-fs-sm and
   takes --c2l-fs-sm, the same call TL-06 made for the same 11.5px at :6873
   and for the same reason: the only thing inheriting it is an event title.
   600 is --c2l-fw-semibold, `color: #fff` is --c2l-fg-on-primary, and
   0 1px 0 rgba(0,0,0,.06) is --c2l-shadow-xs - identical geometry, 2/100 of
   alpha apart. The accent falls back to --c2l-primary for a row with no type,
   as everywhere else in the family.
   The 10px lateral padding is equidistant between --c2l-space-sm and
   --c2l-space-md and rounds DOWN. MEASURED in Chromium 148, not assumed: the
   binding case is a ONE-day bar, 81.50px wide on a 1230px panel, of which the
   icon and its margin already take ~20px. Characters of the title that render
   before the ellipsis, at --c2l-space-md / the prototype's own 10px /
   --c2l-space-sm: 6 / 7 / 7 for a milestone, 5 / 5 / 7 for a meeting. Rounding
   down therefore matches or beats the prototype on every bar, where rounding
   up loses text on all of them. The label's padding-right takes the same value
   so the two 10px roundings in this block do not disagree. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-bar {
    position: absolute;
    top: 8px;
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--c2l-space-sm);
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-timeline-accent, var(--c2l-primary));
    box-shadow: var(--c2l-shadow-xs);
    color: var(--c2l-fg-on-primary);
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
}

/* .t07-bar i (:413). 6px rounds to --c2l-space-sm, the same 6px -> 8px the
   family already recorded at :6443; it costs one character of the title on the
   narrowest bar against --c2l-space-xs, which is not enough to break a
   family-wide rounding for. A flex: none guard was written here and then
   REMOVED after measuring: the glyph cannot shrink anyway, because an <i> with
   visible overflow keeps its content as its automatic minimum size while the
   title span next to it has overflow: hidden and so floors at 0. Both flex
   values give byte-identical rects on all seven bars. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-bar i {
    margin-right: var(--c2l-space-sm);
    opacity: .95;
}

/* The prototype sets these three inline on the bar's title span
   (tl-horizontal.jsx:216-218) and this port carries no inline styles, so they
   become a rule. Load-bearing, not cosmetic: a 2-day bar is 2/13 of the track
   and no realistic title fits it, so without the clamp every title wraps to a
   second line and spills out of the 22px bar into the lane below. */
.c2l .c2l-timeline-flow--gantt .c2l-timeline-flow-bar > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Entrance animation for the whole horizontal family, over the keyframe the
   vertical family defines at :6598. -cell is TL-06's step element and -bar is
   TL-07's; they are named here rather than in their own tasks so the rule is
   written once. TL-07's own entrance (.t07-bar.is-new, :410) is not ported -
   this is the module's opt-in entrance, which the directive's `animated`
   binding documents for every mode it renders. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-timeline-flow-animated .c2l-timeline-flow-step,
    .c2l .c2l-timeline-flow-animated .c2l-timeline-flow-cell,
    .c2l .c2l-timeline-flow-animated .c2l-timeline-flow-bar {
        animation: c2l-timeline-in var(--c2l-dur-base) var(--c2l-ease-out-quart) both;
    }
}

/* ---------- TL-08 - pipeline stages ---------- */

/* Port of tl-styles.css:421-460 (.t08-*), renamed per the plan's selector map
   rather than mechanically: -track / -step / -pip keep their names under the
   .c2l-timeline-pipeline- family prefix, and .t08-step-lbl / -step-sub become
   -label / -sub.
   .t08 (:422) contributes its padding only. 28px is equidistant between
   --c2l-space-xl (24px) and --c2l-space-2xl (32px) and rounds DOWN, the same
   call TL-05 made on its own equidistant 10px at :6741; 22px takes
   --c2l-space-xl, the same 22px -> 24px rounding TL-06 (:6795) and TL-07
   (:6980) both recorded - so both axes land on one token. Dropped:
   height: 100% and, with it, display: flex + flex-direction: column +
   justify-content: center, the fixed-artboard sizing and its vertical
   centring that every variant in this family drops.
   Dropped: .t08-pip::after (:455), a transparent inset ring that exists only
   so .t08-step.is-new can animate it (:446). No .is-new entrance is ported
   anywhere in this family, so the ring would be an invisible pseudo-element
   with nothing left to reveal it - and with it goes .t08-pip's
   position: relative, which was only there to contain it.
   Dropped: the track's transition: width (:439). It animated the prototype's
   stage advance; this module's animation policy is entrance only, opt-in and
   behind prefers-reduced-motion. */
.c2l .c2l-timeline-pipeline {
    padding: var(--c2l-space-xl);
}

/* The rule sits at the PIP's centre, not the step's. Each step stacks pip +
   label + sub-label, so `top: 50%` of the step lands in the label text. The
   pip is a fixed 36px at the top of the stack, so its centre is 18px down -
   expressed as a property so the two pseudo-elements and the pip cannot
   drift apart. */
.c2l .c2l-timeline-pipeline-track { position: relative; display: flex; align-items: flex-start; --c2l-pipeline-pip: 36px; }
.c2l .c2l-timeline-pipeline-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.c2l .c2l-timeline-pipeline-pip { width: var(--c2l-pipeline-pip); height: var(--c2l-pipeline-pip); border-radius: var(--c2l-radius-circle); display: flex; align-items: center; justify-content: center; }
.c2l .c2l-timeline-pipeline-track::before {
    content: ''; position: absolute; top: calc(var(--c2l-pipeline-pip) / 2); transform: translateY(-50%);
    left: var(--c2l-pipeline-start); right: var(--c2l-pipeline-start);
    height: 3px; background: var(--c2l-border); z-index: 1;
}
.c2l .c2l-timeline-pipeline-track::after {
    content: ''; position: absolute; top: calc(var(--c2l-pipeline-pip) / 2); transform: translateY(-50%);
    left: var(--c2l-pipeline-start); width: var(--c2l-pipeline-progress);
    height: 3px; background: var(--c2l-timeline-accent, var(--c2l-primary)); z-index: 1;
}
.c2l .c2l-timeline-pipeline-pip { border: 2px solid var(--c2l-timeline-accent, var(--c2l-primary)); background: var(--c2l-surface); }
.c2l .c2l-timeline-pipeline-pip.is-done { background: var(--c2l-timeline-accent, var(--c2l-primary)); color: var(--c2l-fg-on-primary); }

/* --c2l-pipeline-pip / -start / -progress are block-local custom properties,
   NOT tokens - same status as --c2l-snake-node-y (:6822), --c2l-gantt-gutter
   (:6984) and --c2l-timeline-accent. -start and -progress are written by the
   directive from the stage count, which is why nothing here restates a pip
   size the way the prototype's `left: 18px` / `calc(P% - (P/100 * 36px))`
   pair did (tl-styles.css:428,434,437 and tl-horizontal.jsx:280). That pair
   only lines up at one pip size; a fraction of N is exact at any size and any
   stage count. The prototype's own 0 18px track padding goes with it.
   Deviations from :427-440 recorded rather than ported: the rule is 3px, not
   6px, and carries no border-radius - at 3px a 3px radius is a full pill on a
   1.5px half-height and reads as fringe, and the rest of this family draws
   its connectors as square 3px runs (:6931). align-items is flex-start, not
   center: with the label and sub-label now inside the step, centring would
   distribute the pips against the TALLEST step's box instead of aligning
   every pip on one line. */

/* Completion of the .t08-pip port (:447-453): the block above carries the
   pip's box and ring but not its glyph. Both halves are in the prototype rule
   and both are load-bearing - without the colour, a stage that has not been
   reached draws its icon in inherited body text rather than in its own stage
   tone, which is the whole point of the per-stage `tone`. 13px takes
   --c2l-fs-base (14px, 1px away) over --c2l-fs-sm (12px). The .is-done rule
   above outranks this one on specificity, not source order, so a reached
   pip's white glyph is unaffected. */
.c2l .c2l-timeline-pipeline-pip {
    color: var(--c2l-timeline-accent, var(--c2l-primary));
    font-size: var(--c2l-fs-base);
}

/* .t08-step-lbl (:459). 11.5px is equidistant between --c2l-fs-xs (11px) and
   --c2l-fs-sm (12px) and takes --c2l-fs-sm, the same call TL-06 recorded for
   the same value at :6892; 600 is --c2l-fw-semibold and 1.25 rounds to
   --c2l-lh-tight (1.2). margin-top: 10px is equidistant between
   --c2l-space-sm and --c2l-space-md and rounds DOWN, as TL-05's identical
   10px did at :6741.
   max-width: 110px stays a literal, unlike TL-05's DROPPED 124px cap (:6748):
   the steps here are flex: 1 across a full-width track, so on any realistic
   panel a step is far wider than 110px and the cap genuinely binds - it is
   what wraps a long stage name over its own pip instead of letting it crowd
   the neighbouring stage. */
.c2l .c2l-timeline-pipeline-label {
    margin-top: var(--c2l-space-sm);
    max-width: 110px;
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-semibold);
    line-height: var(--c2l-lh-tight);
    color: var(--c2l-fg-2);
    text-align: center;
}

/* .t08-step-sub (:460). 10px sits below --c2l-fs-xs (11px), the smallest type
   token, and takes it - the same floor TL-05 (:6764) and TL-06 (:6912) hit;
   the 2px margin rounds to --c2l-space-xs. */
.c2l .c2l-timeline-pipeline-sub {
    margin-top: var(--c2l-space-xs);
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-muted);
}

/* Entrance animation over the keyframe the vertical family defines at :6598.
   Without this selector the .c2l-timeline-pipeline-animated class the
   template emits for the `animated` binding would be inert. */
@media (prefers-reduced-motion: no-preference) {
    .c2l .c2l-timeline-pipeline-animated .c2l-timeline-pipeline-step {
        animation: c2l-timeline-in var(--c2l-dur-base) var(--c2l-ease-out-quart) both;
    }
}

/* ==========================================================
   Style guide harness chrome (Views/DesignDirective/*.cshtml only)
   One shell for every style-guide page (_StyleGuideChrome.cshtml, used
   by _StyleGuideLayout and _TokenLayout): a sticky plum header with the
   search, a sticky left navigation (overview, the 12 component
   categories with the current page's sections nested under the current
   one, the foundation token pages in folds), and a white main column.
   Text sits on white; only the demo stage is a recessed plane.
   .c2l-brand-logo is white-text-only, so it lives on the header's
   --c2l-gradient-topnav (the real app shell's), never on the page.
   ========================================================== */
.c2l-styleguide-page { padding: 0 !important; }
body.c2l.c2l-styleguide-page { background: var(--c2l-surface); background-image: none; color: var(--c2l-fg-2); }
.c2l-styleguide-page ::selection { background: var(--c2l-primary); color: var(--c2l-fg-on-primary); }

.c2l .sg-skip {
    position: absolute;
    left: var(--c2l-space-lg);
    top: -64px;
    z-index: 1100;
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    background: var(--c2l-surface);
    color: var(--c2l-primary);
    font-weight: var(--c2l-fw-semibold);
    border-radius: var(--c2l-radius-md);
    box-shadow: var(--c2l-shadow-dropdown);
}
.c2l .sg-skip:focus { top: var(--c2l-space-sm); text-decoration: none; }

.sg-shell {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header" "nav main";
    min-height: 100vh;
}

/* Header */
.c2l .sg-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: var(--c2l-space-xl);
    height: 56px;
    padding: 0 var(--c2l-space-xl);
    background: var(--c2l-gradient-topnav);
    box-shadow: 0 2px 10px -4px rgba(46, 0, 44, .45);
}
.c2l .sg-header-home { display: flex; align-items: baseline; gap: var(--c2l-space-md); flex: none; min-width: 240px; text-decoration: none; }
.c2l .sg-header-home:hover { text-decoration: none; }
.c2l .sg-header-home .c2l-brand-logo { font-size: 24px; line-height: 1; }
.c2l .sg-header-product { color: rgba(255, 255, 255, .88); font-size: var(--c2l-fs-md); font-weight: var(--c2l-fw-semibold); white-space: nowrap; }
.c2l sg-search { display: block; flex: 0 1 600px; min-width: 0; }
.c2l .sg-header-source { margin-left: auto; color: rgba(255, 255, 255, .88); font-family: var(--c2l-font-mono); font-size: 13px; white-space: nowrap; }
.c2l .sg-header-source:hover { color: var(--c2l-secondary-light); }

/* Search (sgSearch.js) */
.c2l .sg-search { position: relative; }
.c2l .sg-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .88); pointer-events: none; }
.c2l .sg-search-input {
    width: 100%;
    height: 36px;
    padding: 0 40px 0 36px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: var(--c2l-radius-md);
    background: rgba(255, 255, 255, .12);
    color: var(--c2l-fg-on-primary);
    font-size: var(--c2l-fs-base);
    transition: background-color var(--c2l-dur-fast) var(--c2l-ease-out-quart), border-color var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}
.c2l .sg-search-input::placeholder { color: rgba(255, 255, 255, .82); opacity: 1; }
.c2l .sg-search-input:focus { background: var(--c2l-surface); border-color: var(--c2l-surface); color: var(--c2l-fg-1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.c2l .sg-search-input:focus::placeholder { color: var(--c2l-fg-4); }
.c2l .sg-search:focus-within .sg-search-icon { color: var(--c2l-fg-3); }
.c2l .sg-search-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--c2l-radius-sm);
    background: transparent;
    color: var(--c2l-fg-on-primary);
    font-size: var(--c2l-fs-sm);
    box-shadow: none;
}
.c2l .sg-search:focus-within .sg-search-kbd { display: none; }
.c2l .sg-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1040;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--c2l-surface);
    border: 1px solid var(--c2l-border-strong);
    border-radius: var(--c2l-radius-md);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .28);
}
.c2l .sg-search-results > li {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "name code group" "desc desc desc";
    align-items: baseline;
    gap: 2px var(--c2l-space-sm);
    padding: var(--c2l-space-sm) 10px;
    border-radius: var(--c2l-radius-sm);
    cursor: pointer;
}
.c2l .sg-search-results > li.is-active { background: var(--c2l-primary-bg-soft); }
.c2l .sg-search-results > li.is-active .sg-search-name { color: var(--c2l-primary); }
.c2l .sg-search-name { grid-area: name; font-size: var(--c2l-fs-base); font-weight: var(--c2l-fw-semibold); color: var(--c2l-fg-1); }
.c2l .sg-search-name.is-tag { font-family: var(--c2l-font-mono); font-size: 13px; }
.c2l .sg-search-code { grid-area: code; font-family: var(--c2l-font-mono); font-size: var(--c2l-fs-sm); color: var(--c2l-primary); background: var(--c2l-primary-icon-bg); padding: 0 6px; border-radius: var(--c2l-radius-xs); }
.c2l .sg-search-group { grid-area: group; justify-self: end; font-size: var(--c2l-fs-sm); color: var(--c2l-fg-3); }
.c2l .sg-search-desc { grid-area: desc; font-size: 13px; color: var(--c2l-fg-3); }
.c2l .sg-search-results > li.sg-search-empty { display: block; cursor: default; color: var(--c2l-fg-3); }

/* Left navigation */
.c2l .sg-nav {
    grid-area: nav;
    position: sticky;
    top: 56px;
    align-self: start;
    height: calc(100vh - 56px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--c2l-space-lg) var(--c2l-space-md) var(--c2l-space-2xl);
    background: var(--c2l-surface);
    border-right: 1px solid var(--c2l-border);
    scrollbar-width: thin;
    scrollbar-color: var(--c2l-border-strong) transparent;
}
.c2l .sg-nav-group {
    margin: var(--c2l-space-xl) var(--c2l-space-md) var(--c2l-space-xs);
    font-size: var(--c2l-fs-sm);
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c2l-fg-3);
}
.c2l .sg-nav-list { list-style: none; margin: 0; padding: 0; }
.c2l .sg-nav-list > li > a {
    display: block;
    padding: 6px var(--c2l-space-md);
    border-radius: var(--c2l-radius-md);
    color: var(--c2l-fg-2);
    font-size: var(--c2l-fs-base);
    line-height: 1.35;
}
.c2l .sg-nav-list > li > a:hover { background: var(--c2l-surface-2); color: var(--c2l-fg-1); text-decoration: none; }
.c2l .sg-nav-list > li.is-current > a { background: var(--c2l-primary); color: var(--c2l-fg-on-primary); font-weight: var(--c2l-fw-semibold); }
.c2l .sg-nav-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--c2l-space-md);
    border-radius: var(--c2l-radius-md);
    color: var(--c2l-fg-1);
    font-weight: var(--c2l-fw-semibold);
    cursor: pointer;
    list-style: none;
}
.c2l .sg-nav-fold > summary::-webkit-details-marker { display: none; }
.c2l .sg-nav-fold > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}
.c2l .sg-nav-fold[open] > summary::after { transform: rotate(45deg); }
.c2l .sg-nav-fold > summary:hover { background: var(--c2l-surface-2); }
.c2l .sg-nav-fold > .sg-nav-list { padding-left: var(--c2l-space-md); margin-bottom: var(--c2l-space-xs); }

/* This page's sections, nested under the current navigation entry (sgToc.js) */
.c2l .sg-toc ul { list-style: none; margin: var(--c2l-space-xs) 0 var(--c2l-space-sm) var(--c2l-space-md); padding: 0 0 0 var(--c2l-space-sm); border-left: 1px solid var(--c2l-border-strong); }
.c2l .sg-toc a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--c2l-space-sm);
    padding: 4px var(--c2l-space-sm);
    border-radius: var(--c2l-radius-sm);
    color: var(--c2l-fg-2);
    font-size: 13px;
    line-height: 1.35;
}
.c2l .sg-toc a:hover { background: var(--c2l-surface-2); color: var(--c2l-fg-1); text-decoration: none; }
.c2l .sg-toc a.is-active { background: var(--c2l-primary-icon-bg); color: var(--c2l-primary); font-weight: var(--c2l-fw-semibold); }
.c2l .sg-toc-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* The code never squeezes the name: capped, one line, ellipsis. */
.c2l .sg-toc-code { flex: 0 1 auto; max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--c2l-font-mono); font-size: var(--c2l-fs-sm); color: var(--c2l-fg-3); font-weight: var(--c2l-fw-regular); }
.c2l .sg-toc a.is-active .sg-toc-code { color: var(--c2l-primary); }

/* Main column */
.c2l .sg-main { grid-area: main; min-width: 0; padding: var(--c2l-space-2xl) 40px 64px; background: var(--c2l-surface); outline: none; }
.c2l .sg-main h1.sg-page-title { margin: 0 0 var(--c2l-space-sm); font-size: var(--c2l-fs-h1); font-weight: var(--c2l-fw-bold); color: var(--c2l-fg-1); letter-spacing: -.01em; }
.c2l .sg-page-lead { max-width: 80ch; margin: 0 0 var(--c2l-space-2xl); font-size: var(--c2l-fs-md); color: var(--c2l-fg-2); }
.c2l .sg-page-lead kbd { padding: 0 6px; border: 1px solid var(--c2l-border-strong); border-radius: var(--c2l-radius-sm); background: var(--c2l-surface-footer); color: var(--c2l-fg-1); box-shadow: none; }

/* Keyboard focus. The legacy Angle theme (Content/app/app.css) kills every
   outline with `*:focus { outline: 0 !important }` and
   `a { outline: none !important }`. The style guide's own chrome gets a
   visible ring back - higher specificity, also !important. Live demos
   (.sg-demo-live) are deliberately NOT covered: they show what production
   renders, focus gap included. */
.c2l-styleguide-page :is(.sg-skip, .sg-header, .sg-nav, .sg-section-head, .sg-docs, .sg-notes, .sg-demo-bar, .sg-page-lead, .c2l-styleguide-catalog, .c2l-styleguide-token-grid, .sg-directive-index) :focus-visible,
.c2l-styleguide-page .sg-skip:focus-visible {
    outline: 2px solid var(--c2l-primary) !important;
    outline-offset: 2px !important;
}
.c2l-styleguide-page .sg-header :focus-visible { outline-color: var(--c2l-fg-on-primary) !important; }
.c2l-styleguide-page .sg-header .sg-search-input:focus-visible { outline: 0 !important; }

.c2l-styleguide-body > c2l-panel {
    display: block;
    margin-bottom: var(--c2l-space-xl);
}

/* Chart-playground action rows combine long explanatory badges with Bootstrap
   buttons. Both atoms default to nowrap, so the controls used to retain a
   500px+ intrinsic width on mobile. Keep this scoped to the chart showcase:
   wrap the button content without weakening production button/badge density. */
.c2l .c2l-styleguide-chart-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--c2l-space-sm);
    min-width: 0;
}
.c2l .c2l-styleguide-chart-actions .btn {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--c2l-space-xs);
    max-width: 100%;
    white-space: normal;
    text-align: left;
}
.c2l .c2l-styleguide-chart-actions .c2l-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

/* Specimen panels nested inside a section panel.
   Every style-guide section is itself a c2lPanel, and most sections demo
   panels - so a PN-* specimen rendered inside one is a panel drawn on a
   panel, in the same surface colour, with the same border. The tones the
   page exists to distinguish (hairline vs underline vs rail vs tint) are
   exactly the low-contrast ones, and they vanished into their host: PN-3
   was reported as MISSING from a page it has always been on.
   Fix is separation, not restyling the components: recess the section
   body to a distinct plane so any specimen drawn on it reads as an object
   ON something, and give each specimen real vertical breathing room.
   Scoped to the style-guide harness - production panels nest rarely and
   must keep shipping their real surface. */
.c2l-styleguide-body > c2l-panel:has(c2l-panel) > .c2l-panel-chip > .c2l-panel-chip-body {
    background: var(--c2l-surface-2);
    padding: var(--c2l-space-lg);
}

/* A specimen is a block with its own rhythm, not inline flow content. */
.c2l-styleguide-body > c2l-panel c2l-panel {
    display: block;
    margin-bottom: var(--c2l-space-lg);
}

.c2l-styleguide-body > c2l-panel .row > [class^="col-"] > c2l-panel:last-child,
.c2l-styleguide-body > c2l-panel > .c2l-panel-chip > .c2l-panel-chip-body > c2l-panel:last-child {
    margin-bottom: 0;
}

/* Tones that are borderless or nearly so (soft, underline, hairline) need
   the recessed plane behind them to stay legible - keep their own surface
   opaque against it rather than letting the wash blend in. Tint (PN-5) is
   excluded: its own --c2l-primary-tint wash plus translucent border is the
   point of the tone, so forcing it opaque here would erase the wash. */
.c2l-styleguide-body > c2l-panel c2l-panel > .c2l-panel-chip:not(.c2l-panel-tint) {
    background: var(--c2l-surface);
}

/* .text-muted (Bootstrap #777) reads as grey-on-grey against the textured
   .c2l-surface background at 12-13px - scoped bump to a darker, still-muted
   foreground token. Scoped to this harness only, not a global .text-muted
   override, since production areas already rely on the lighter tone. */
.c2l-styleguide-page .text-muted { color: var(--c2l-fg-3); }

/* ==========================================================
   Style guide DOCUMENTATION chrome (sg-* family, styleguide/docs/*.js).
   Same harness scope as the block above: Views/DesignDirective only.
   ========================================================== */
/* A section is unframed: a rule above it, a large title, then its parts.
   The demo is the one framed object in it. */
.c2l-styleguide-body > sg-section, .c2l-styleguide-body sg-section { display: block; padding: 40px 0 var(--c2l-space-sm); border-top: 1px solid var(--c2l-border); scroll-margin-top: 72px; }
.c2l .sg-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c2l-space-sm) 14px; margin-bottom: var(--c2l-space-xl); }
.c2l .sg-section-head h2.sg-section-title { margin: 0; font-family: var(--c2l-font-mono); font-size: var(--c2l-fs-h2); font-weight: var(--c2l-fw-semibold); line-height: 1.25; color: var(--c2l-primary); letter-spacing: -.01em; overflow-wrap: anywhere; }
.c2l .sg-section-head h2.sg-section-title.is-prose { font-family: var(--c2l-font-sans); font-weight: var(--c2l-fw-bold); }
.c2l .sg-code-badge { font-family: var(--c2l-font-mono); font-size: 13px; font-weight: var(--c2l-fw-semibold); background: var(--c2l-primary); color: var(--c2l-fg-on-primary); padding: 3px var(--c2l-space-sm); border-radius: var(--c2l-radius-sm); }
.c2l .sg-code-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.c2l .sg-section-source, .c2l .sg-section-meta { font-family: var(--c2l-font-mono); font-size: 13px; color: var(--c2l-fg-3); }
.c2l .sg-h { font-size: var(--c2l-fs-h4); font-weight: var(--c2l-fw-bold); margin: var(--c2l-space-2xl) 0 var(--c2l-space-md); color: var(--c2l-fg-1); }
.c2l sg-when, .c2l sg-events, .c2l sg-a11y, .c2l sg-adopters { display: block; max-width: 80ch; color: var(--c2l-fg-2); }

/* The lead row (sgSection.js): the first demo beside the section's prose,
   its code pane across both columns underneath. The demo element is
   display: contents here so its label, live stage and code pane are grid
   items of the row. */
.c2l .sg-lead {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "label docs" "live docs" "code code";
    column-gap: var(--c2l-space-2xl);
    margin-bottom: var(--c2l-space-lg);
}
.c2l .sg-lead.is-solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "live" "code"; }
.c2l .sg-lead > sg-demo.sg-demo { display: contents; }
.c2l .sg-lead > sg-demo > .sg-demo-label { grid-area: label; border: 1px solid var(--c2l-border-strong); border-bottom-color: var(--c2l-border); border-radius: var(--c2l-radius-md) var(--c2l-radius-md) 0 0; }
.c2l .sg-lead > sg-demo > .sg-demo-live { grid-area: live; align-self: start; border: 1px solid var(--c2l-border-strong); border-top: 0; border-radius: 0 0 var(--c2l-radius-md) var(--c2l-radius-md); overflow-x: clip; overflow-y: visible; }
.c2l .sg-lead > sg-demo > .sg-demo-live:first-child { border-top: 1px solid var(--c2l-border-strong); border-radius: var(--c2l-radius-md); }
.c2l .sg-lead > sg-demo > .sg-demo-code { grid-area: code; margin-top: var(--c2l-space-lg); border: 1px solid var(--c2l-border-strong); border-radius: var(--c2l-radius-md); }
.c2l .sg-lead > .sg-docs { grid-area: docs; align-self: start; min-width: 0; }
.c2l .sg-docs sg-when { max-width: none; }
/* Inline code in the documentation prose: brand plum on its soft wash instead
   of Bootstrap's pink (#c7254e), which turned every long paragraph into a
   field of red chips. 12.6:1. */
.c2l .sg-main :is(sg-when, sg-events, sg-a11y, sg-adopters, sg-settings, .sg-page-lead, .sg-demo-live > p) code {
    color: var(--c2l-primary-darker);
    background: var(--c2l-primary-bg-soft);
    padding: 1px 4px;
    border-radius: var(--c2l-radius-xs);
}
.c2l sg-when > p:last-child { margin-bottom: 0; }

/* Events, accessibility and adopters, side by side under the settings. */
.c2l .sg-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 0 40px; }
.c2l .sg-note { min-width: 0; }
.c2l .sg-note sg-events, .c2l .sg-note sg-a11y, .c2l .sg-note sg-adopters { max-width: none; }
/* Inline <code> in the prose slots is almost always a path or a dotted
   identifier: one unbreakable "word" with no space in it. The slots above are
   plain blocks with no overflow of their own, so such a word sets the block's
   min-content width, the grid track grows to it, and the PAGE scrolls - the
   overflow the charts mobile spec asserts against. `overflow-wrap: anywhere`
   (not `break-word`: only `anywhere` also reduces min-content, which is what
   the grid track and the auto table layout below actually consume) lets the
   token break.
   Deliberately NOT scoped to the media query below, and that is a trade, not
   a freebie. Single-column is not the only width that overflows: with the
   rule behind the breakpoint, StyleGuideModals still measures 946 at a 901px
   viewport, because the 72ch prose column is narrower than that page's
   longest adopter path at every width. The price is that the same two paths -
   618px, the only tokens on any docs page wider than the 561px column at
   1440 - now wrap onto a second line at desktop instead of spilling 57px past
   the column into the gutter. Measured, not assumed: toggling this rule off
   in the live page and diffing every element's box at 1440 moves 4 boxes on
   Modals (those two paths), 0 on Timelines, and 31 by 1-2px on Charts, whose
   options tables sit inside sg-events so their <code> cells are in scope too.
   Nothing else at desktop moves.
   document.body.scrollWidth at 390x844, 2026-09-22, before -> after:
   Charts 480 -> 390 (widest offender
   <code>Coach2Lead.Web/Areas/AICMS/Views/Dashboard/Compliance.cshtml</code>
   in sg-adopters, 424px wide), Modals 674 -> 390 (an Areas/AICMS/Angular/...
   controller path, 618px), Timelines 480 -> 390 (a Views/DesignDirective/...
   template path, 424px). The settings tables were NOT the cause on any of the
   three: sg-settings already scrolls them (see its rule below). */
.c2l sg-when code, .c2l sg-events code, .c2l sg-a11y code, .c2l sg-adopters code { overflow-wrap: anywhere; }
/* A demo card must let its own pop-ups OUT. Both of the module's absolutely
   positioned overlays are taller than the card that hosts them - CP-7's
   .c2l-eselect-panel (position: absolute under .c2l-eselect's relative root)
   and D-1's uib-datepicker-popup inside a Bootstrap .input-group - and the
   `overflow: hidden` this rule used to carry cut both off. Measured in the
   live page at 1440x900 on 2026-09-22: the CP-7 panel overflowed its card by
   140px and the D-1 calendar by 97px, and an elementFromPoint hit test on the
   bottom edge of each returned something other than the pop-up.
   `overflow-x: clip` rather than dropping overflow from the card altogether:
   clip is NOT a scroll container, so content it clips still does not
   contribute to an ancestor's scrollable overflow, and the 390px page-width
   guarantee the charts mobile spec asserts (and the 13-page sweep re-checks)
   survives untouched - dropping overflow would have surrendered it for every
   live demo on every page. Clipping one axis while the other stays visible is
   a legal computed pair: the coercion rule (a visible axis becomes auto) only
   fires when the OTHER axis is scroll/hidden/auto, and `clip` is none of those.
   One side effect, disclosed: unlike hidden, clip does not establish a block
   formatting context, so the card no longer contains floats or blocks margin
   collapsing on its own. Nothing relies on either - the 1px border already
   separates the card's margins from its children's, and every column on the
   docs pages sits inside a self-clearing Bootstrap .row.
   What it costs is the rounded clip, because a corner needs BOTH axes to clip:
   the label strip's and the code pane's square background corners would poke
   out of the card's radius. The two rules below round them explicitly instead.
   They are position-based, not keyed to .sg-demo-label/.sg-demo-code, because
   sgDemo.js appends the label only when the label attribute is set and the
   code pane only when the demo has markup - whichever child is first or last
   is the one that has to carry the corner. .sg-demo-code additionally clips,
   so pre.sg-code's own square background follows the bottom radius; nothing
   absolutely positioned lives inside the code pane, so that is free. */
.c2l .sg-demo { display: block; border: 1px solid var(--c2l-border-strong); border-radius: var(--c2l-radius-md); margin: var(--c2l-space-xl) 0; overflow-x: clip; overflow-y: visible; }
.c2l .sg-demo > :first-child { border-top-left-radius: calc(var(--c2l-radius-md) - 1px); border-top-right-radius: calc(var(--c2l-radius-md) - 1px); }
.c2l .sg-demo > :last-child { border-bottom-left-radius: calc(var(--c2l-radius-md) - 1px); border-bottom-right-radius: calc(var(--c2l-radius-md) - 1px); }
.c2l .sg-demo-label { font-size: 13px; font-weight: var(--c2l-fw-semibold); color: var(--c2l-fg-2); padding: var(--c2l-space-sm) var(--c2l-space-lg); background: var(--c2l-surface); border-bottom: 1px solid var(--c2l-border); }
/* The live card is the recessed plane the nested-specimen rules above gave
   section bodies: a demo reads as an object ON something. It is the only
   non-white plane on a style-guide page, and it holds specimens, not prose. */
.c2l .sg-demo-live { padding: var(--c2l-space-xl); background: var(--c2l-surface-2); }
.c2l .sg-demo-live c2l-panel { display: block; margin-bottom: var(--c2l-space-lg); }
.c2l .sg-demo-live c2l-panel:last-child, .c2l .sg-demo-live .row > [class^="col-"] > c2l-panel:last-child { margin-bottom: 0; }
.c2l .sg-demo-live c2l-panel > .c2l-panel-chip:not(.c2l-panel-tint) { background: var(--c2l-surface); }
.c2l .sg-demo-code { border-top: 1px solid var(--c2l-border-strong); overflow: hidden; }
.c2l .sg-demo-bar { display: flex; align-items: stretch; background: var(--c2l-surface-footer); border-bottom: 1px solid var(--c2l-border); }
.c2l .sg-demo-tabs { display: flex; gap: 0; }
.c2l .sg-demo-tab { border: 0; background: transparent; padding: var(--c2l-space-sm) var(--c2l-space-lg); font-size: 13px; color: var(--c2l-fg-2); cursor: pointer; }
.c2l .sg-demo-tab:hover { color: var(--c2l-fg-1); }
.c2l .sg-demo-tab.is-active { color: var(--c2l-primary); font-weight: var(--c2l-fw-semibold); background: var(--c2l-surface); box-shadow: inset 0 -2px 0 var(--c2l-primary); }
.c2l .sg-demo-copy { margin-left: auto; border: 0; background: transparent; padding: var(--c2l-space-sm) var(--c2l-space-lg); font-size: 13px; color: var(--c2l-fg-2); cursor: pointer; }
.c2l .sg-demo-copy:hover { color: var(--c2l-primary); }
.c2l .sg-demo-copy .fa { margin-right: 4px; }
.c2l pre.sg-code { margin: 0; padding: var(--c2l-space-lg); background: var(--c2l-surface); border: 0; border-radius: 0; font-family: var(--c2l-font-mono); font-size: 13px; line-height: 1.55; color: var(--c2l-fg-1); overflow-x: auto; max-width: 100%; max-height: 480px; overflow-y: auto; }
.c2l pre.sg-code > code { font-size: inherit; background: transparent; padding: 0; color: inherit; }
.c2l pre.sg-code[hidden] { display: none; }
.c2l .sg-tok-tag { color: var(--c2l-primary); }
.c2l .sg-tok-attr { color: var(--c2l-secondary-deep); }
.c2l .sg-tok-str { color: var(--c2l-green-deep); }
.c2l .sg-tok-kw { color: var(--c2l-purple); font-weight: var(--c2l-fw-semibold); }
.c2l .sg-tok-num { color: var(--c2l-orange-deep); }
.c2l .sg-tok-cmt { color: var(--c2l-fg-4); font-style: italic; }
/* The element wraps the table; scrolling inside it keeps a 21-row table with
   nowrap name cells from widening the page at 390px (the charts mobile spec).
   Those cells are nowrap at desktop only - the media query below lets them
   wrap - but the containment this rule provides is what keeps the page narrow
   and is unchanged either way. */
.c2l sg-settings { display: block; overflow-x: auto; max-width: 100%; }
.c2l table.sg-settings-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--c2l-fg-2); }
.c2l table.sg-settings-table th, .c2l table.sg-settings-table td { text-align: left; vertical-align: top; padding: var(--c2l-space-xs) var(--c2l-space-sm); border-bottom: 1px solid var(--c2l-border); }
.c2l table.sg-settings-table th { font-size: var(--c2l-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--c2l-fg-3); }
.c2l .sg-setting-name, .c2l .sg-setting-binding { font-family: var(--c2l-font-mono); white-space: nowrap; }
.c2l .sg-settings-none { color: var(--c2l-fg-3); font-style: italic; }
/* The index page's A-Z directive list. Two columns so 47 entries read as one
   block rather than a full screen of scrolling; break-inside keeps an entry
   whole across the column boundary. */
.c2l .sg-directive-index { columns: 3 320px; column-gap: 40px; list-style: none; padding: 0; margin: 0; color: var(--c2l-fg-3); }
.c2l .sg-directive-index li { break-inside: avoid; margin-bottom: var(--c2l-space-sm); line-height: 1.4; }
.c2l .sg-directive-index a code { font-size: 13px; color: var(--c2l-primary); background: transparent; padding: 0; }
@media (max-width: 1280px) {
    .c2l .sg-lead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "live" "docs" "code"; grid-template-rows: none; }
    .c2l .sg-lead > .sg-docs { margin-top: var(--c2l-space-lg); }
}
@media (max-width: 900px) {
    /* minmax(0, 1fr), not bare 1fr: mirrors the desktop content-column guard above.
       Without it, CSS Grid's default automatic-minimum-size behavior lets an
       unwrappable descendant (the charts page's ng-non-bindable <pre> code
       samples inside a Bootstrap .row/.col-md-6) inflate this single track to
       its min-content width instead of shrinking to the viewport - the exact
       390px-vs-944px overflow the mobile Playwright spec below guards against.
       Verified empirically 2026-09-21: bare 1fr -> document.body.scrollWidth
       944 at a 390px viewport on /DesignDirective/StyleGuideCharts; minmax(0, 1fr) -> 390. */
    .sg-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "nav" "main"; }
    .c2l .sg-header { position: static; gap: var(--c2l-space-md); padding: 0 var(--c2l-space-lg); }
    .c2l .sg-header-home { width: auto; }
    .c2l .sg-header-product, .c2l .sg-header-source { display: none; }
    .c2l .sg-nav { position: static; height: auto; max-height: 50vh; border-right: 0; border-bottom: 1px solid var(--c2l-border); }
    .c2l .sg-main { padding: var(--c2l-space-xl) var(--c2l-space-lg) var(--c2l-space-2xl); }
    /* A .sg-settings-table is contained by <sg-settings>'s own overflow-x
       (above) - but only when it sits there. The Charts page authors a second,
       hand-written one inside <sg-events> to document each chart's options
       object, and that slot is a plain block: nothing scrolls it, so the
       table's min-content becomes the page's. Auto table layout sums its
       columns' min-content widths, and a nowrap Attribute cell plus an
       unbreakable token in a Default or Description cell is enough - measured
       404px at a 390px viewport on 2026-09-22. Let both wrap here, at mobile
       widths only: the desktop table keeps its single-line attribute names and
       its nowrap binding column. */
    .c2l table.sg-settings-table th, .c2l table.sg-settings-table td { overflow-wrap: anywhere; }
    .c2l .sg-setting-name, .c2l .sg-setting-binding { white-space: normal; }
    /* Two columns of directive names do not fit a single-column page: each
       one becomes half a phone wide and the longest names wrap mid-entry. */
    .c2l .sg-directive-index { columns: 1; }
}

/* Catalog link cards (main /DesignDirective/StyleGuide index) */
.c2l-styleguide-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--c2l-space-xl);
}
.c2l-styleguide-catalog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    overflow: hidden;
    background: var(--c2l-surface);
    box-shadow: var(--c2l-shadow-sm);
    color: var(--c2l-fg-3);
    transition: box-shadow var(--c2l-dur-base) var(--c2l-ease-out-quart),
                transform var(--c2l-dur-base) var(--c2l-ease-out-quart),
                border-color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                background-color var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}
.c2l-styleguide-catalog-card:hover,
.c2l-styleguide-catalog-card:focus {
    border-color: var(--c2l-secondary);
    background: var(--c2l-secondary-tint);
    box-shadow: var(--c2l-shadow-card);
    transform: translateY(-2px);
    color: var(--c2l-fg-3);
    text-decoration: none;
}
.c2l-styleguide-catalog-card .cover {
    height: 96px;
    overflow: hidden;
    background: var(--c2l-surface-2);
    border-bottom: 1px solid var(--c2l-border);
}
.c2l-styleguide-catalog-card .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
/* Authored SVG covers are drawn to the card's aspect ratio, so they stretch
   to fill rather than being cropped like the screenshot PNGs. */
.c2l-styleguide-catalog-card.cv-forms .cover img,
.c2l-styleguide-catalog-card.cv-panels .cover img,
.c2l-styleguide-catalog-card.cv-tabs .cover img,
.c2l-styleguide-catalog-card.cv-wizards .cover img,
.c2l-styleguide-catalog-card.cv-modals .cover img,
.c2l-styleguide-catalog-card.cv-timelines .cover img {
    object-fit: fill;
    object-position: center;
}
.c2l-styleguide-catalog-card .body {
    padding: var(--c2l-space-md) var(--c2l-space-lg) var(--c2l-space-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.c2l-styleguide-catalog-card h3 {
    margin: 0;
    font-size: var(--c2l-fs-md);
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-primary);
}
.c2l-styleguide-catalog-card .desc {
    font-size: var(--c2l-fs-base);
    color: var(--c2l-fg-3);
}
/* --c2l-secondary-deep, not --c2l-secondary: the brand teal is 2.6:1 on
   white, too faint for 12px text. */
.c2l-styleguide-catalog-card .code {
    font-family: var(--c2l-font-mono);
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-secondary-deep);
}
/* Categories with no cover art yet show their icon on the primary wash. */
.c2l-styleguide-catalog-card.cv-icon .cover { display: flex; align-items: center; justify-content: center; background: var(--c2l-primary-bg-soft); }
.c2l-styleguide-catalog-card.cv-icon .cover .fa { font-size: 44px; color: var(--c2l-primary); opacity: .55; }
@media (max-width: 640px) {
    .c2l-styleguide-catalog { grid-template-columns: 1fr; }
}

/* Design system tokens gallery (main /DesignDirective/StyleGuide index) -
   mostly display-only preview cards for the foundational tokens shown in
   design-mirror-final:docs/design/index.html's "Design system tokens" section. A handful have
   a real equivalent in this app's own style guide (date picker, panels,
   entity selects, checkbox/switch, dropdown, tabs) - those render as
   <a class="c2l-styleguide-token-card is-linked"> and get the hover
   affordance below; the rest render as plain <div>s with no hover, so it's
   visually clear which cards go somewhere and which are reference-only. */
.c2l-styleguide-token-group { margin-bottom: var(--c2l-space-2xl); }
.c2l-styleguide-token-group:last-child { margin-bottom: 0; }
.c2l-styleguide-token-group .gh {
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-bold);
    letter-spacing: .12em;
    color: var(--c2l-fg-muted);
    text-transform: uppercase;
    margin-bottom: var(--c2l-space-md);
    display: flex;
    align-items: center;
    gap: var(--c2l-space-sm);
}
.c2l-styleguide-token-group .gh::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c2l-border);
}
/* Token cards at ~175% of their original size. Six fixed columns made each
   card about 235px wide with a 64px cover - too small to actually read the
   thumbnail, which is the whole point of the card. Switched from a fixed
   column count to a min-width track so the count falls out of the viewport
   (4 columns on a typical 1500px body, 3 when narrower) instead of being
   pinned at six, and the cover grew 64px -> 112px to match. */
.c2l-styleguide-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--c2l-space-md);
}
.c2l-styleguide-token-card {
    display: block;
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    overflow: hidden;
    background: var(--c2l-surface);
    color: var(--c2l-fg-3);
}
a.c2l-styleguide-token-card.is-linked {
    transition: box-shadow var(--c2l-dur-base) var(--c2l-ease-out-quart),
                transform var(--c2l-dur-base) var(--c2l-ease-out-quart),
                border-color var(--c2l-dur-fast) var(--c2l-ease-out-quart),
                background-color var(--c2l-dur-fast) var(--c2l-ease-out-quart);
}
a.c2l-styleguide-token-card.is-linked:hover,
a.c2l-styleguide-token-card.is-linked:focus {
    border-color: var(--c2l-secondary);
    background: var(--c2l-secondary-tint);
    box-shadow: var(--c2l-shadow-card);
    transform: translateY(-2px);
    color: var(--c2l-fg-3);
    text-decoration: none;
}
a.c2l-styleguide-token-card.is-linked .body h4::after {
    content: " \2192";
    color: var(--c2l-secondary);
}
.c2l-styleguide-token-card .cover {
    height: 112px;
    background: var(--c2l-surface);
    overflow: hidden;
}
.c2l-styleguide-token-card .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.c2l-styleguide-token-card .body {
    padding: 6px var(--c2l-space-sm) 8px;
}
.c2l-styleguide-token-card h4 {
    margin: 0;
    font-size: var(--c2l-fs-base);
    font-weight: var(--c2l-fw-bold);
    color: var(--c2l-primary);
    letter-spacing: .01em;
}
/* The auto-fill track above already collapses the count on its own; the
   narrow-viewport floor just stops a 340px card overflowing a phone. */
@media (max-width: 420px) {
    .c2l-styleguide-token-grid { grid-template-columns: 1fr; }
}

/* Token pages (/DesignDirective/Token*). Style-guide chrome only - layout for
   displaying token values, never new token values. Every color, radius,
   spacing and shadow below resolves through an existing --c2l-* custom
   property. */
.c2l-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--c2l-space-md);
}

.c2l-token-chip {
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    overflow: hidden;
    background: var(--c2l-surface);
}

.c2l-token-chip .sw {
    height: 64px;
    border-bottom: 1px solid var(--c2l-border);
}

.c2l-token-chip code {
    display: block;
    padding: var(--c2l-space-sm);
    font-family: var(--c2l-font-mono);
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-2);
    background: none;
    word-break: break-all;
}

.c2l-token-row {
    display: flex;
    align-items: center;
    gap: var(--c2l-space-md);
    padding: var(--c2l-space-sm) 0;
    border-bottom: 1px solid var(--c2l-border);
}

.c2l-token-row code {
    flex: 0 0 240px;
    font-family: var(--c2l-font-mono);
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-2);
    background: none;
}

/* A bare .sw also appears inside .c2l-token-row (single-swatch rows on the
   semantic, impersonation and sidebar pages), where its size and color come
   from an inline style. Give it the shared border treatment so it matches the
   chips. */
.c2l-token-row .sw {
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
}

.c2l-token-note {
    margin-top: var(--c2l-space-md);
    color: var(--c2l-fg-3);
    font-size: var(--c2l-fs-sm);
}

/* =========================================================
   CP-10, CP-11, CP-12, CP-13, CP-14 FILTER INPUT
   ========================================================= */

.c2l-filter-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--c2l-border-strong);
    border-radius: var(--c2l-radius-md);
    overflow: hidden;
    background: var(--c2l-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.c2l-filter-row:focus-within {
    border-color: var(--c2l-primary);
    box-shadow: 0 0 0 2px var(--c2l-primary-tint-border);
}

.ng-invalid.ng-touched > .c2l-filter-row {
    border-color: var(--c2l-danger-accent);
}

.c2l-filter-negate,
.c2l-filter-case,
.c2l-filter-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    background: var(--c2l-surface-2);
    transition: background 0.15s, color 0.15s;
}

.c2l-filter-negate { width: 36px; border-right: 1px solid var(--c2l-border); }
.c2l-filter-case { width: 36px; border-left: 1px solid var(--c2l-border); }
.c2l-filter-clear { width: 32px; border-left: 1px solid var(--c2l-border); color: var(--c2l-fg-muted); background: transparent; }

.c2l-filter-negate-icon,
.c2l-filter-case-icon {
    font-size: var(--c2l-fs-base);
    font-weight: 700;
    color: var(--c2l-fg-muted);
    line-height: 1;
    font-family: var(--c2l-font-mono);
}

.c2l-filter-negate:hover,
.c2l-filter-case:hover:not(.is-disabled) { background: var(--c2l-primary-tint); }
.c2l-filter-clear:hover { color: var(--c2l-danger-accent); background: var(--c2l-primary-tint); }

.c2l-filter-negate.active { background: var(--c2l-danger-accent); }
.c2l-filter-negate.active .c2l-filter-negate-icon { color: var(--c2l-fg-on-primary); }
.c2l-filter-case.active { background: var(--c2l-primary); }
.c2l-filter-case.active .c2l-filter-case-icon { color: var(--c2l-fg-on-primary); }
.c2l-filter-case.is-disabled { cursor: not-allowed; opacity: 0.5; }

.c2l-filter-operator { flex-shrink: 0; position: relative; display: flex; }
.c2l-filter-operator select {
    appearance: none;
    background: var(--c2l-surface-2);
    border: none;
    border-right: 1px solid var(--c2l-border);
    padding: var(--c2l-space-sm) var(--c2l-space-lg) var(--c2l-space-sm) var(--c2l-space-sm);
    font-size: var(--c2l-fs-sm);
    color: var(--c2l-fg-3);
    cursor: pointer;
    outline: none;
    min-width: 110px;
}
.c2l-filter-operator select:disabled { cursor: not-allowed; opacity: 0.6; }

/* Uniform control height (opt-in wrapper). Filter panels mix Bootstrap form controls
   (30px as input-sm), entity select triggers, the filter row above (padding-driven) and
   native selects; side by side they read as misaligned. Put .c2l-uniform-controls on the
   grid or form that holds them and every single-line control takes --c2l-control-h.
   Multi-chip selects still grow past it (min-height), by design. */
.c2l .c2l-uniform-controls .input-group .form-control,
.c2l .c2l-uniform-controls .input-group-addon,
.c2l .c2l-uniform-controls select.form-control {
    height: var(--c2l-control-h);
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--c2l-fs-sm);
    line-height: calc(var(--c2l-control-h) - 2px);
}
.c2l .c2l-uniform-controls .c2l-eselect-trigger {
    min-height: var(--c2l-control-h);
    padding-top: 0;
    padding-bottom: 0;
}
.c2l .c2l-uniform-controls .c2l-filter-row { height: var(--c2l-control-h); }
.c2l .c2l-uniform-controls .c2l-filter-input input,
.c2l .c2l-uniform-controls .c2l-filter-range input,
.c2l .c2l-uniform-controls .c2l-filter-operator select {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--c2l-fs-sm);
}

/* Entity operator controls are opt-in; keep the existing predicate wire format. */
.c2l .c2l-filter-row--entity-operator { overflow: visible; }
.c2l .c2l-filter-operator-static {
    display: flex;
    align-items: center;
    padding: var(--c2l-space-sm);
    border-right: 1px solid var(--c2l-border);
    background: var(--c2l-surface-2);
    color: var(--c2l-fg-3);
    font-size: var(--c2l-fs-sm);
}
.c2l .c2l-filter-row--entity-operator .c2l-filter-operator > c2l-entity-single-select {
    display: block;
    min-width: 110px;
}
.c2l .c2l-filter-row--entity-operator .c2l-filter-operator .c2l-eselect-trigger {
    min-height: 36px;
    border: 0;
    border-right: 1px solid var(--c2l-border);
    border-radius: 0;
    background: var(--c2l-surface-2);
    font-size: var(--c2l-fs-sm);
}
.c2l .c2l-filter-row--entity-operator > :first-child { border-radius: var(--c2l-radius-md) 0 0 var(--c2l-radius-md); }
.c2l .c2l-filter-row--entity-operator > :last-child { border-radius: 0 var(--c2l-radius-md) var(--c2l-radius-md) 0; }

.c2l-filter-input { flex: 1; min-width: 0; display: flex; }
.c2l-filter-input input {
    width: 100%;
    border: none;
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    font-size: var(--c2l-fs-base);
    outline: none;
    background: transparent;
    color: var(--c2l-fg-1);
}
.c2l-filter-input input::placeholder { color: var(--c2l-fg-muted); }
.c2l-filter-input input:disabled { opacity: 0.5; cursor: not-allowed; }

.c2l-filter-chips {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--c2l-space-xs);
    padding: var(--c2l-space-xs) var(--c2l-space-sm);
}
.c2l-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--c2l-space-xs);
    background: var(--c2l-primary-tint);
    border: 1px solid var(--c2l-primary-tint-border);
    border-radius: var(--c2l-radius-pill);
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-primary);
}
.c2l-filter-chip-remove {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: var(--c2l-fs-sm);
    line-height: 1;
}
.c2l-filter-chip-draft {
    flex: 1;
    min-width: 80px;
    border: none;
    outline: none;
    font-size: var(--c2l-fs-base);
    background: transparent;
}

.c2l-filter-range {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.c2l-filter-range input[type="number"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 8px;
    height: 100%;
    color: var(--c2l-fg);
}

.c2l-filter-range input[type="number"]:disabled { opacity: 0.5; cursor: not-allowed; }
.c2l-filter-range input[type="number"]::placeholder { color: var(--c2l-fg-muted); }

.c2l-filter-range-sep {
    flex: 0 0 auto;
    padding: 0 4px;
    color: var(--c2l-fg-muted);
    user-select: none;
}

.c2l-filter-enum-single,
.c2l-filter-enum-multi {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 8px;
    color: var(--c2l-fg);
}

.c2l-filter-enum-multi { padding: 4px 8px; }

.c2l-filter-enum-single:disabled,
.c2l-filter-enum-multi:disabled { opacity: 0.5; cursor: not-allowed; }

.c2l-filter-row.is-disabled { opacity: 0.5; }
.c2l-filter-row.is-disabled .c2l-filter-negate,
.c2l-filter-row.is-disabled .c2l-filter-case,
.c2l-filter-row.is-disabled .c2l-filter-clear { cursor: not-allowed; }

.c2l-filter-row.is-readonly .c2l-filter-negate,
.c2l-filter-row.is-readonly .c2l-filter-case,
.c2l-filter-row.is-readonly .c2l-filter-clear { cursor: default; }

.c2l-filter-expression {
    margin-top: var(--c2l-space-xs);
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-muted);
    font-family: var(--c2l-font-mono);
}

/* Style-guide-only wrapper (TokenComponentsFilterInput.cshtml) - one heading +
   filter row per demoed type. Not part of the shipped filter chrome above. */
.c2l-demo-row { margin-bottom: var(--c2l-space-lg); }
.c2l-demo-row:last-child { margin-bottom: 0; }

/* ---------- Species treatments - AICMS VersionDetail checkbox field
   vocabulary (item 2 spec, 2026-08-14) ----------
   Layered around the existing .c2l-field-* directives by aicmsScalarField's
   wrapper (AicmsScalarField.cshtml) - never restyles a directive's own
   template, only the surrounding row. A field def carrying no `species`
   member gets none of these classes and renders byte-identically to before. */

/* Gate/checklist question rows: label left, control right - a denser
   variant of the S-1 stacked layout for a page that is mostly yes/no
   questions. Targets c2lFieldYesNo's own root class from the outside,
   matching the "consumer decorates, directive template stays untouched"
   rule the rest of this file already follows for .c2l-field-*. */
.aicms-sp-gate .c2l-field-yes-no {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--c2l-space-md);
    padding: var(--c2l-space-sm) 0;
    border-bottom: 1px solid var(--c2l-border);
    margin-bottom: 0;
}

.aicms-sp-gate .c2l-field-yes-no .control-label {
    margin-bottom: 0;
}

/* Attestation sign-off surface: a faint panel-chip-like tone so a
   checklist's sign-off items read as a distinct surface from the plain
   question rows above them, without introducing a new token. */
.aicms-sp-attestation {
    background: var(--c2l-surface-2);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    padding: var(--c2l-space-sm) var(--c2l-space-md);
    margin-bottom: var(--c2l-space-md);
}

.aicms-sp-attestation .c2l-field-yes-no {
    margin-bottom: 0;
}

/* Absorbed stamp date, rendered inside its attestation's own sign-off row
   (see AicmsScalarField.cshtml's ng-if="vm.field.species === 'attestation'
   && vm.field.stampDateKey" block) - never as its own top-level field. */
.aicms-sp-signoff-stamp {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: var(--c2l-space-xs);
}

.aicms-sp-signoff-stamp .aicms-sp-stamp-label {
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-regular);
    color: var(--c2l-fg-4);
    white-space: nowrap;
}

.aicms-sp-signoff-stamp .c2l-field {
    margin-bottom: 0;
}

/* Disclosure indent: a dependent field (field.disclosureOf set) gets a left
   indent and a hairline rail so it reads as belonging to its gate question
   above it - the same "rail" vocabulary as .c2l-panel-rail, reused here at
   field scale rather than panel scale. */
.aicms-sp-disclosure {
    margin-left: 24px;
    border-left: 2px solid var(--c2l-border-strong);
    padding-left: var(--c2l-space-md);
}

/* Checklist runs (Task 4): several species: 'checklist' checkbox defs sharing one
   field.runKey render as a heading + progress count (shown once, on the run's
   first member - AicmsScalarField.cshtml's ng-if="vm.field.runFirst") followed
   by a compact question row per member - tighter vertical rhythm than the
   .aicms-sp-gate row above, since a run can hold six-plus items back to back.
   Targets c2lFieldYesNo's own root class from the outside only; the tri-state
   "Unknown" segmented control (spec 3.3) is untouched. */
.aicms-sp-checklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--c2l-space-md);
    padding-top: var(--c2l-space-sm);
    font-weight: var(--c2l-fw-semibold);
    color: var(--c2l-fg-1);
}

.aicms-sp-checklist-count {
    font-size: var(--c2l-fs-xs);
    font-weight: var(--c2l-fw-regular);
    color: var(--c2l-fg-muted);
    white-space: nowrap;
}

.aicms-sp-checklist-row .c2l-field-yes-no {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--c2l-space-md);
    padding: var(--c2l-space-xs) 0;
    border-bottom: 1px solid var(--c2l-border);
    margin-bottom: 0;
}

.aicms-sp-checklist-row .c2l-field-yes-no .control-label {
    margin-bottom: 0;
    font-weight: var(--c2l-fw-regular);
}
.c2l-demo-row h4 { margin: 0 0 var(--c2l-space-xs); }

/* Nullable boolean filter toggle. Consumers provide the visible field caption;
   `label` names this compact Yes/No group for assistive technology. */
.c2l .c2l-boolean-toggle {
    display: inline-flex;
    height: 35px;
    border: 1px solid var(--c2l-border-strong);
    border-radius: var(--c2l-radius-sm);
    overflow: hidden;
    background: var(--c2l-surface);
}
.c2l .c2l-boolean-toggle-option {
    min-width: 46px;
    height: 100%;
    padding: 6px 12px;
    border: 0;
    border-right: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
    color: var(--c2l-fg-3);
    font: inherit;
    line-height: 20px;
}
.c2l .c2l-boolean-toggle-option:last-child { border-right: 0; }
.c2l .c2l-boolean-toggle-option:not(.is-selected):hover:not([aria-disabled="true"]) { color: var(--c2l-primary); background: var(--c2l-primary-bg-soft); }
.c2l .c2l-boolean-toggle-option.is-selected { color: var(--c2l-fg-on-primary); background: var(--c2l-primary); }
.c2l .c2l-boolean-toggle-option:focus { outline: 2px solid var(--c2l-primary) !important; outline-offset: -3px; position: relative; z-index: 1; }
.c2l .c2l-boolean-toggle-option.is-selected:focus { outline-color: var(--c2l-fg-on-primary) !important; }
.c2l .c2l-boolean-toggle.is-disabled { opacity: .6; }
.c2l .c2l-boolean-toggle.is-readonly { background: var(--c2l-surface-2); }
.c2l .c2l-boolean-toggle.is-readonly .c2l-boolean-toggle-option { color: var(--c2l-fg-muted); background: var(--c2l-surface-2); cursor: default; }
.c2l .c2l-boolean-toggle.is-readonly .c2l-boolean-toggle-option.is-selected { color: var(--c2l-primary); background: var(--c2l-primary-bg-soft); font-weight: var(--c2l-fw-semibold); }
.c2l .c2l-boolean-toggle.is-readonly .c2l-boolean-toggle-option:focus { outline-color: var(--c2l-primary) !important; }
.c2l .c2l-boolean-toggle-option:disabled { cursor: not-allowed; }

/* CP-22 slider select (c2lSliderSelect; c2lFilterSlider composes it). One model, two renderers:
   `segments` for short scales, `track` for longer ones. Height follows --c2l-control-h so it sits
   in the same row as every other filter control. The stop medallion reuses .c2l-eselect-ico, so the
   colour classes the entity pickers already map (text-*, vv-text-*) work here unchanged. */
.c2l .c2l-slider { display: block; min-width: 0; }
.c2l .c2l-slider-segments {
    display: flex;
    width: 100%;
    height: var(--c2l-control-h);
    border: 1px solid var(--c2l-border-strong);
    border-radius: var(--c2l-radius-sm);
    overflow: hidden;
    background: var(--c2l-surface);
}
.c2l .c2l-slider-seg {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 4px;
    border: 0;
    border-right: 1px solid var(--c2l-border);
    background: var(--c2l-surface);
    color: var(--c2l-fg-3);
    font: inherit;
    line-height: 1;
}
.c2l .c2l-slider-seg:last-child { border-right: 0; }
.c2l .c2l-slider-num { font-weight: var(--c2l-fw-semibold); font-variant-numeric: tabular-nums; }
.c2l .c2l-slider-seg:not(.is-selected):hover:not([aria-disabled="true"]) { color: var(--c2l-primary); background: var(--c2l-primary-bg-soft); }
.c2l .c2l-slider-seg.is-in-range { color: var(--c2l-primary); background: var(--c2l-primary-bg-soft); }
.c2l .c2l-slider-seg.is-selected { color: var(--c2l-fg-on-primary); background: var(--c2l-primary); }
.c2l .c2l-slider-seg:focus { outline: 2px solid var(--c2l-primary) !important; outline-offset: -3px; position: relative; z-index: 1; }
.c2l .c2l-slider-seg.is-selected:focus { outline-color: var(--c2l-fg-on-primary) !important; }
.c2l .c2l-slider-seg:disabled { cursor: not-allowed; }
.c2l .c2l-slider-seg .c2l-slider-ico { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; font-size: 11px; }
.c2l .c2l-slider-seg.is-selected .c2l-slider-ico { background: var(--c2l-surface); }

.c2l .c2l-slider-track { padding: 0 10px; }
.c2l .c2l-slider-hit { position: relative; height: var(--c2l-control-h); cursor: pointer; touch-action: none; }
.c2l .c2l-slider-rail {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--c2l-border-strong);
}
.c2l .c2l-slider-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--c2l-primary); }
.c2l .c2l-slider-handle {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid var(--c2l-primary);
    border-radius: 50%;
    background: var(--c2l-surface);
    box-shadow: var(--c2l-shadow-md);
    cursor: grab;
}
.c2l .c2l-slider-handle.is-dragging { cursor: grabbing; }
.c2l .c2l-slider-handle.is-unset { border-color: var(--c2l-border-strong); }
.c2l .c2l-slider-handle:focus { outline: 2px solid var(--c2l-primary) !important; outline-offset: 2px; }
.c2l .c2l-slider-ends {
    display: flex;
    justify-content: space-between;
    margin-top: -4px;
    color: var(--c2l-fg-4);
    font-size: var(--c2l-fs-xs);
    font-variant-numeric: tabular-nums;
}

.c2l .c2l-slider-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    margin-top: 4px;
    color: var(--c2l-fg-4);
    font-size: var(--c2l-fs-sm);
}
.c2l .c2l-slider-caption-num { color: var(--c2l-fg-3); font-weight: var(--c2l-fw-semibold); font-variant-numeric: tabular-nums; }
.c2l .c2l-slider.is-empty .c2l-slider-caption-num { font-weight: var(--c2l-fw-regular); color: var(--c2l-fg-4); }
.c2l .c2l-slider-clear { margin-left: auto; padding: 0 4px; border: 0; background: transparent; color: var(--c2l-fg-4); line-height: 1; }
.c2l .c2l-slider-clear:hover { color: var(--c2l-danger-accent); }

/* The filter adapter keeps the control the same height as every other filter: the caption moves up
   onto the label line, right-aligned, instead of adding a row underneath that would push the
   labels of its neighbours out of line. */
.c2l .c2l-filter-slider { position: relative; }
.c2l .c2l-filter-slider .control-label { margin-bottom: 5px; }
.c2l .c2l-filter-slider .c2l-slider-caption { position: absolute; top: 0; right: 0; min-height: 0; margin: 0; line-height: inherit; }

.c2l .c2l-slider.is-disabled { opacity: .6; }
.c2l .c2l-slider.is-readonly .c2l-slider-segments { background: var(--c2l-surface-2); }
.c2l .c2l-slider.is-readonly .c2l-slider-seg { color: var(--c2l-fg-muted); background: var(--c2l-surface-2); cursor: default; }
.c2l .c2l-slider.is-readonly .c2l-slider-seg.is-in-range,
.c2l .c2l-slider.is-readonly .c2l-slider-seg.is-selected { color: var(--c2l-primary); background: var(--c2l-primary-bg-soft); font-weight: var(--c2l-fw-semibold); }
.c2l .c2l-slider.is-readonly .c2l-slider-hit,
.c2l .c2l-slider.is-readonly .c2l-slider-handle,
.c2l .c2l-slider.is-disabled .c2l-slider-hit,
.c2l .c2l-slider.is-disabled .c2l-slider-handle { cursor: default; }


/* CP-23 table (c2lTable). A small client-side table whose rows and columns are data in one model. It
   reuses the data grid's pager, sort button, icon button and empty-cell atoms (.c2l-data-grid-*), so
   the two tables page, sort and empty the same way; everything else is under .c2l-tbl. */
.c2l .c2l-tbl { display: block; min-width: 0; }
/* Stacked tables read as sub-sections: space and a hairline above each table that follows another
   table or a note. c2l-table is an inline element, so the space goes on its block .c2l-tbl. */
.c2l c2l-table + c2l-table > .c2l-tbl,
.c2l .c2l-alert + c2l-table > .c2l-tbl {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c2l-border);
}
.c2l c2l-table + .c2l-alert { margin-top: 12px; }
.c2l .c2l-tbl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--c2l-space-sm) var(--c2l-space-md);
    margin-bottom: var(--c2l-space-sm);
}
.c2l .c2l-tbl-heading { display: flex; align-items: center; gap: var(--c2l-space-sm); min-width: 0; }
.c2l .c2l-tbl-title { margin: 0; }
.c2l .c2l-tbl-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--c2l-space-xs); }
.c2l .c2l-tbl-actions { display: inline-flex; align-items: center; gap: var(--c2l-space-xs); }
.c2l .c2l-tbl-actions:empty { display: none; }
.c2l .c2l-tbl-search { position: relative; min-width: 220px; }
.c2l .c2l-tbl-search > .fa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--c2l-fg-4); pointer-events: none; }
.c2l .c2l-tbl-search .form-control { height: 32px; padding-left: 30px; }
.c2l .c2l-tbl button:focus,
.c2l .c2l-tbl input:focus { outline: 2px solid var(--c2l-primary) !important; outline-offset: 2px; }
.c2l .c2l-tbl-table { width: 100%; margin-bottom: 0; }
.c2l .c2l-tbl-table > thead > tr > th { white-space: nowrap; }
.c2l .c2l-tbl-table td.text-right { font-variant-numeric: tabular-nums; }
.c2l .c2l-tbl-grip-col,
.c2l .c2l-tbl-select-col,
.c2l .c2l-tbl-actions-col { width: 1%; white-space: nowrap; }
.c2l .c2l-tbl-grip { display: inline-block; padding: 0 var(--c2l-space-xs); color: var(--c2l-fg-4); cursor: grab; }
.c2l .c2l-tbl-grip.is-disabled { opacity: .35; cursor: not-allowed; }
.c2l .c2l-tbl-table > tbody > tr.is-dragging { opacity: .5; }
.c2l .c2l-tbl-table > tbody > tr.is-drop-before > td { box-shadow: inset 0 2px 0 var(--c2l-primary); }
.c2l .c2l-tbl-table > tbody > tr.is-drop-after > td { box-shadow: inset 0 -2px 0 var(--c2l-primary); }
.c2l .c2l-tbl-table > tbody > tr.is-selected > td { background: var(--c2l-primary-bg-soft); }
.c2l .c2l-tbl.is-clickable > .c2l-tbl-shell tbody tr,
.c2l .c2l-tbl.is-clickable tbody tr { cursor: pointer; }
.c2l .c2l-tbl.is-clickable tbody tr:hover > td { background: var(--c2l-primary-bg-soft); }
.c2l .c2l-tbl.is-clickable tbody tr:focus { outline: 2px solid var(--c2l-primary); outline-offset: -2px; }
.c2l .c2l-tbl-totals > td { border-top: 2px solid var(--c2l-border-strong); font-weight: var(--c2l-fw-semibold); font-variant-numeric: tabular-nums; }
.c2l .c2l-tbl-empty { padding: var(--c2l-space-lg); color: var(--c2l-fg-muted); text-align: center; }
.c2l .c2l-tbl-empty-icon { display: block; margin-bottom: var(--c2l-space-xs); }
.c2l .c2l-tbl-range { color: var(--c2l-fg-muted); font-size: var(--c2l-fs-sm); }
.c2l .c2l-tbl-sort { text-transform: inherit; letter-spacing: inherit; }
.c2l .c2l-tbl-table > tbody > tr.c2l-tbl-detail > td { padding: var(--c2l-space-sm) var(--c2l-space-md); background: var(--c2l-surface-2); }
.dropdown-menu .c2l-tbl-danger { color: var(--c2l-danger-accent); }

/* CP-16 data grid. Keep every rule under the component root: the grid is shared
   by independently migrated areas and must not grow another global button system. */
.c2l .c2l-data-grid { display: block; min-width: 0; }
/* Predicate editors are taller than the 35px standalone form controls. */
.c2l .c2l-data-grid-filters .c2l-boolean-toggle { height: 38px; }
.c2l .c2l-data-grid-header,
.c2l .c2l-data-grid-toolbar,
.c2l .c2l-data-grid-pager,
.c2l .c2l-data-grid-page-nav,
.c2l .c2l-data-grid-page-size-control {
    display: flex;
    align-items: center;
}
.c2l .c2l-data-grid-header {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--c2l-space-sm) var(--c2l-space-md);
    margin-bottom: var(--c2l-space-sm);
}
.c2l .c2l-data-grid-toolbar {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--c2l-space-xs);
}
.c2l .c2l-data-grid-counts { display: inline-flex; flex-wrap: wrap; gap: var(--c2l-space-sm); color: var(--c2l-fg-muted); font-size: var(--c2l-fs-sm); }
.c2l .c2l-data-grid-count-total { color: var(--c2l-fg-2); font-weight: var(--c2l-fw-semibold); }
.c2l .c2l-data-grid-search { min-width: 220px; }
.c2l .c2l-data-grid-search .form-control { height: 32px; }
.c2l .c2l-data-grid-action { display: inline-flex; align-items: center; gap: var(--c2l-space-xs); }
.c2l .c2l-data-grid-icon-btn { min-width: 30px; padding-left: var(--c2l-space-xs); padding-right: var(--c2l-space-xs); }
.c2l .c2l-data-grid-table-shell { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c2l .c2l-data-grid-table { width: 100%; min-width: 640px; }
.c2l .c2l-data-grid-table > thead > tr > th,
.c2l .c2l-data-grid-table > thead > tr > td { white-space: nowrap; }
.c2l .c2l-data-grid-sort-button { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; }
.c2l .c2l-data-grid button:focus,
.c2l .c2l-data-grid input:focus,
.c2l .c2l-data-grid select:focus { outline: 2px solid var(--c2l-primary) !important; outline-offset: 2px; }
/* Grid filter popovers live inside a horizontally scrolling table shell. Keep
   them in flow here so overflow-y cannot clip them on short or empty grids. */
.c2l .c2l-data-grid-filters .c2l-eselect-panel,
.c2l .c2l-data-grid-filters .c2l-date-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}
.c2l .c2l-data-grid-empty { text-align: center; color: var(--c2l-fg-muted); padding: var(--c2l-space-lg); }
.c2l .c2l-data-grid-pager { justify-content: space-between; flex-wrap: wrap; gap: var(--c2l-space-sm); margin-top: var(--c2l-space-sm); }
.c2l .c2l-data-grid-page-nav { flex-wrap: wrap; gap: var(--c2l-space-xs); }
.c2l .c2l-data-grid-pager-pages { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.c2l .c2l-data-grid-page-nav .active { background: var(--c2l-primary); border-color: var(--c2l-primary); color: var(--c2l-fg-on-primary); }
.c2l .c2l-data-grid-page-size-control { gap: var(--c2l-space-xs); }
.c2l .c2l-data-grid-page-size-control label,
.c2l .c2l-data-grid-page-size-control > span { margin: 0; color: var(--c2l-fg-muted); font-size: var(--c2l-fs-sm); font-weight: var(--c2l-fw-regular); white-space: nowrap; }
.c2l .c2l-data-grid-page-size { width: auto; min-width: 72px; }
.c2l .c2l-data-grid-page-size-selector { display: block; min-width: 80px; }
.c2l .c2l-data-grid.is-busy { opacity: 0.72; }
@media (max-width: 767px) {
    .c2l .c2l-data-grid-summary,
    .c2l .c2l-data-grid-toolbar,
    .c2l .c2l-data-grid-search { width: 100%; }
    .c2l .c2l-data-grid-toolbar { justify-content: flex-start; }
    .c2l .c2l-data-grid-pager { align-items: flex-start; flex-direction: column; }
}

/* c2lChartTooltip (Areas/Surveys/Angular/design/charts/c2lChartTooltip.js) -
   a plain positioned div, not the legacy d3.tip used by the Angle admin
   theme charts. `position: fixed` matches the factory's use of
   event.clientX/clientY (viewport-relative, not document-relative) for
   placement. Hidden by default via opacity/visibility rather than
   display:none, so a transition (should one be added later) has something
   to animate; pointer-events: none keeps the tip from ever intercepting the
   mousemove/mouseleave events driving it. */
.c2l-chart-tip {
    position: fixed;
    z-index: 1050;
    background-color: var(--c2l-surface);
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-sm);
    box-shadow: var(--c2l-shadow-dropdown);
    font-size: var(--c2l-fs-sm);
    padding: var(--c2l-space-xs) var(--c2l-space-sm);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
}

.c2l-chart-tip.is-visible {
    opacity: 1;
    visibility: visible;
}

.c2l-chart-tip .is-muted {
    color: var(--c2l-fg-muted);
}

.c2l-chart-tip .is-strong {
    font-weight: var(--c2l-fw-semibold);
}

/* CP-17 (bar chart). C2lBarChartController (Areas/Surveys/Angular/design/
   charts/C2lBarChartController.js) - axis/legend chrome for the
   coach2lead.design chart surface. Axis domain/tick lines and tick text use
   the same neutral
   tokens as every other chrome line in the module (--c2l-border /
   --c2l-fg-muted) rather than d3-axis's "currentColor" presentation-attribute
   default, which would otherwise just inherit whatever text color happens to
   surround the chart - a CSS rule here beats a presentation attribute, so
   this is enough to override it without touching the controller's own attr()
   calls. Bar/legend-swatch fill is deliberately NOT styled here - the
   controller sets `fill` directly via attr() from C2lBarChartOptions#getColor,
   and no CSS selector could out-specificity that inline attribute even if one
   were written. */
/* c2lBarChart (Areas/Surveys/Angular/design/charts/c2lBarChart.js) renders
   with no template/templateUrl - it draws straight into $element[0] - so the
   directive's own host element (the custom `<c2l-bar-chart>` tag) is never
   given any layout box by the browser's default UA stylesheet: an unknown
   custom element defaults to `display: inline`, which reports a permanent
   `clientWidth`/`clientHeight` of 0 for an element with no inline content.
   C2lChartControllerBase#canDraw() refuses to draw into a zero-width
   container (by design - it is not safe to measure an unlaid-out element),
   so without this rule the chart never renders in a real browser: a
   deadlock jsdom's tests cannot see, since jsdom performs no real layout at
   all (see the Task 5/7 harness's documented jsdom limits) - this was only
   caught by Task 11's live Playwright verification. The bare `.c2l-chart`
   selector below targets the host element ITSELF (the directive's
   `$postLink` adds this class to its own `$element` before ever attaching
   or measuring - see c2lBarChart.js), so this fix now covers every chart
   directive built from this template automatically; a `.c2l-chart svg.surface`
   descendant selector alone would NOT fix the host's own zero-clientWidth
   problem, since it only reaches the svg nested inside, never the host tag -
   both rules stay listed together so the svg itself also renders as a block
   box instead of an inline one. */
.c2l-chart,
.c2l-chart svg.surface {
    display: block;
    max-width: 100%;
}

.c2l-chart .axis-x .domain,
.c2l-chart .axis-y .domain,
.c2l-chart .axis-x .tick line,
.c2l-chart .axis-y .tick line {
    stroke: var(--c2l-border);
}

.c2l-chart .axis-x text,
.c2l-chart .axis-y text {
    fill: var(--c2l-fg-muted);
}

.c2l-chart .legend text {
    font-size: var(--c2l-fs-sm);
    fill: var(--c2l-fg-muted);
}

/* CP-17 drill-down (Task 14). C2lBarChartController.js's onUpdate() now wires role="button"/
   tabindex/aria-label/keydown on `rect.bar` exclusively when a `select` handler is bound - the
   same Global Constraint scope fence CP-18/CP-19/CP-20 already follow (see those rules below).
   `rect.bar` predates that requirement (CP-17 shipped before any dashboard wired drill-down to
   it - see C2lBarChartController.js's class doc comment), so this is the first CSS for it. Same
   house `:focus-visible` ring as `path.arc[role="button"]:focus-visible` below
   (--c2l-secondary), via `outline` since an SVG rect has no useful native focus rectangle across
   browsers anyway. */
.c2l-chart rect.bar[role="button"] {
    cursor: pointer;
}

.c2l-chart rect.bar[role="button"]:focus-visible {
    outline: 2px solid var(--c2l-secondary);
    outline-offset: 2px;
}

/* CP-18 (doughnut/pie chart). C2lDoughnutChartController (Areas/Surveys/Angular/
   design/charts/C2lDoughnutChartController.js) - the second chart type built on
   C2lChartControllerBase/C2lChartOptions. Scoped to `path.arc[role="button"]`
   only - the controller sets `role="button"` exclusively on arcs that have a
   bound `select` handler (its Global Constraint scope fence: only marks this
   item wires to drill-down are keyboard-operable), so a chart rendered with no
   select handler shows no pointer/focus affordance on marks that are not
   actually clickable. The `:focus-visible` ring uses the same house pattern as
   `.c2l-edit-row:focus-visible`/`.c2l-tag:focus-visible` (--c2l-secondary),
   via `outline` rather than `box-shadow` because the ring must trace the
   arc's own path, not a rectangular box - an SVG path has no useful native
   focus rectangle across browsers anyway. */
.c2l-chart path.arc[role="button"] {
    cursor: pointer;
}

.c2l-chart path.arc[role="button"]:focus-visible {
    outline: 2px solid var(--c2l-secondary);
    outline-offset: 2px;
}

/* CP-19 (fixed-grid heatmap). C2lHeatmapChartController (Areas/Surveys/Angular/
   design/charts/C2lHeatmapChartController.js) - the third chart type built on
   C2lChartControllerBase/C2lChartOptions. Scoped to `rect.cell[role="button"]`
   only - the controller sets `role="button"` exclusively on cells that both have a
   bound `select` handler AND actual model data (a zero-count cell never becomes
   keyboard-operable, even when the chart as a whole wires drill-down - there is
   nothing meaningful to drill into for an empty cell). The `:focus-visible` ring
   uses the same house pattern as `.c2l-chart path.arc[role="button"]:focus-visible`
   above (--c2l-secondary), via `outline` since an SVG rect has no useful native
   focus rectangle across browsers anyway. */
.c2l-chart rect.cell[role="button"] {
    cursor: pointer;
}

.c2l-chart rect.cell[role="button"]:focus-visible {
    outline: 2px solid var(--c2l-secondary);
    outline-offset: 2px;
}

/* CP-20 (single-series line chart). C2lLineChartController (Areas/Surveys/Angular/
   design/charts/C2lLineChartController.js) - the fourth chart type built on
   C2lChartControllerBase/C2lChartOptions. `path.line` is the one series stroke, never
   itself a `role="button"` target (there is nothing at a single point on the path to
   name in an aria-label) - only the per-row `circle.point` marks are interactive.
   Scoped to `circle.point[role="button"]` only - the controller sets `role="button"`
   exclusively on points that have a bound `select` handler; UNLIKE CP-19's rule, a
   zero-value point here is NOT excluded, since Incident Trend's whole point is that an
   empty month is still a valid, real drill-down target. The `:focus-visible` ring uses
   the same house pattern as `.c2l-chart rect.cell[role="button"]:focus-visible` above
   (--c2l-secondary), via `outline` since an SVG circle has no useful native focus
   rectangle across browsers anyway. */
.c2l-chart path.line {
    fill: none;
    stroke: var(--c2l-chart-series-1);
    stroke-width: 2px;
}

.c2l-chart circle.point[role="button"] {
    cursor: pointer;
}

.c2l-chart circle.point[role="button"]:focus-visible {
    outline: 2px solid var(--c2l-secondary);
    outline-offset: 2px;
}

/* Field headings retain the default inline flow; editors may align their references. */
.c2l .c2l-field-heading, .c2l .c2l-field-references { display: contents; }

/* Shared default: detached filters keep editors outside table cells. */
.c2l .c2l-data-grid-filter-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--c2l-space-sm);
    margin-bottom: var(--c2l-space-md);
}

.c2l .c2l-data-grid-filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--c2l-space-lg);
    padding: var(--c2l-space-lg);
    margin: var(--c2l-space-md) 0;
    border: 1px solid var(--c2l-border);
    border-radius: var(--c2l-radius-md);
    background: var(--c2l-surface-2);
}
.c2l .c2l-data-grid-filter-panel .control-label {
    display: block;
    margin-bottom: var(--c2l-space-xs);
}

/* Shared field footer: workflow guidance left, optional character count right. */
.c2l .c2l-field-footer {
    display: flex;
    align-items: baseline;
    gap: var(--c2l-space-md);
    font-size: var(--c2l-fs-xs);
    color: var(--c2l-fg-muted);
}
.c2l .c2l-field-footer > .c2l-field-guidance { margin: var(--c2l-space-xs) 0 0; min-width: 0; }
.c2l .c2l-field-footer > .c2l-field-maxlength { margin: var(--c2l-space-xs) 0 0 auto; flex-shrink: 0; white-space: nowrap; }

/* Entity select field wrappers (c2l-field-entity-select / c2l-field-entity-multiple-select).
   They own the label, badges, guidance and error text around the bare c2l-entity-*-select.
   Never give these wrappers position or overflow: the bare .c2l-eselect root is the anchor of
   its absolutely positioned popup panel. */
.c2l c2l-field-entity-select,
.c2l c2l-field-entity-multiple-select { display: block; min-width: 0; }
.c2l .c2l-field-entity-select .control-label,
.c2l .c2l-field-entity-multiple-select .control-label { display: inline-block; margin-bottom: var(--c2l-space-xs); }
.c2l .c2l-field-entity-select.is-invalid .control-label,
.c2l .c2l-field-entity-multiple-select.is-invalid .control-label { color: var(--c2l-danger-accent); }
.c2l .c2l-field-footer > .c2l-field-error { margin: var(--c2l-space-xs) 0 0; color: var(--c2l-danger-accent); min-width: 0; }

/* Editor boolean questions: choices follow the question, never the far page edge. */
.c2l .c2l-field-yes-no.c2l-field--question {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    justify-content: start;
    align-items: center;
    column-gap: var(--c2l-space-lg);
    row-gap: var(--c2l-space-xs);
}
.c2l .c2l-field.c2l-field--question > .c2l-field-heading {
    display: flex; align-items: baseline; gap: var(--c2l-space-md); flex-wrap: nowrap;
    max-width: 60ch; margin-bottom: 0;
}
.c2l .c2l-field.c2l-field--question > .c2l-field-heading > label { flex: 1 1 auto; min-width: 0; }
.c2l .c2l-field--question .c2l-field-references { display: flex; flex-wrap: wrap; gap: var(--c2l-space-xs); }
.c2l .c2l-field--question > .c2l-field-heading .control-label { margin-bottom: 0; }
.c2l .c2l-field--question > .c2l-field-tristate,
.c2l .c2l-field--question > .c2l-field-static { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
.c2l .c2l-field--question > .c2l-field-footer,
.c2l .c2l-field--question > .c2l-field-caption { grid-column: 1; }
@media (max-width: 640px) {
    .c2l .c2l-field-yes-no.c2l-field--question { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .c2l .c2l-field--question > .c2l-field-tristate,
    .c2l .c2l-field--question > .c2l-field-static { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* DT-1: keep a local date/time popover usable in narrow rails and dialogs. */
.c2l .c2l-datetime .c2l-date-panel { max-width: calc(100vw - 32px); }
.c2l .c2l-datetime.is-readonly .c2l-date-trigger,
.c2l .c2l-datetime.is-readonly .c2l-date-trigger-input { cursor: default; }
.c2l .c2l-datetime-zone { color: var(--c2l-fg-muted); font-size: 12px; margin: 8px 0; }
.c2l .c2l-datetime-error { max-width: 350px; margin: 8px 0; }
.c2l .c2l-datetime .c2l-timepad-commit { margin-top: 8px; }
.c2l .c2l-datetime-clear { margin-right: auto; }
@media (max-width: 480px) {
    .c2l .c2l-datetime-row { grid-template-columns: 1fr; }
    .c2l .c2l-datetime-divider { display: none; }
    .c2l .c2l-datetime .c2l-timepad { padding: 8px 4px 0; }
    .c2l .c2l-datetime .c2l-timepad-steps { justify-content: center; }
}

/*
 * c2l-print.css - opt-in print layer of the Coach2Lead design system.
 *
 * Inert unless used: rules target .c2l-print-* components or body.c2l-print-mode only, so no
 * existing page (legacy areas included) prints differently. A page opts in by rendering the
 * components and adding c2l-print-mode to <body> while it is shown. See DESIGN.md "Print".
 * Units: pt/mm for print, never the screen px scale. No background fills in print.
 */
:root {
  --c2l-print-font: var(--c2l-font-sans);
  --c2l-print-fg: var(--c2l-fg-1);
  --c2l-print-fg-muted: var(--c2l-fg-muted);
  --c2l-print-accent: var(--c2l-primary);
  --c2l-print-rule: #bfc4c7;
  --c2l-print-fs-body: 10pt;
  --c2l-print-fs-small: 8.5pt;
  --c2l-print-fs-table: 9pt;
  --c2l-print-fs-h1: 16pt;
  --c2l-print-fs-h2: 13pt;
  --c2l-print-fs-h3: 11pt;
  --c2l-print-tier-high: var(--c2l-orange-deep);
  --c2l-print-tier-limited: var(--c2l-secondary-deep);
  --c2l-print-tier-minimal: var(--c2l-green-deep);
  --c2l-print-tier-prohibited: var(--c2l-red-deep);
  --c2l-print-tier-none: var(--c2l-fg-muted);
  --c2l-print-stage-design: var(--c2l-blue-light);
  --c2l-print-stage-development: var(--c2l-blue-dark);
  --c2l-print-stage-testing: var(--c2l-purple);
  --c2l-print-stage-deployed: var(--c2l-primary-darker);
  --c2l-print-stage-decommissioned: var(--c2l-fg-3);
  --c2l-print-stage-none: var(--c2l-fg-muted);
}

/* ---- Screen: the sheet reads as an A4 preview ---- */
.c2l-print-sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 16px auto;
  padding: 18mm 16mm 20mm;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
  color: var(--c2l-print-fg);
  font-family: var(--c2l-print-font);
  font-size: var(--c2l-print-fs-body);
  line-height: 1.4;
}
.c2l-print-toolbar { display: flex; justify-content: flex-end; gap: 8px; width: 210mm; margin: 16px auto 0; }
.c2l-print-header { border-bottom: 1.5pt solid var(--c2l-print-accent); padding-bottom: 8pt; margin-bottom: 12pt; }
.c2l-print-header h1 { font-size: var(--c2l-print-fs-h1); margin: 0 0 2pt; color: var(--c2l-print-accent); }
.c2l-print-header .c2l-print-subtitle { font-size: var(--c2l-print-fs-small); color: var(--c2l-print-fg-muted); }
.c2l-print-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4pt 12pt; margin-top: 8pt; }
.c2l-print-facts dt { font-size: var(--c2l-print-fs-small); color: var(--c2l-print-fg-muted); text-transform: uppercase; letter-spacing: .03em; }
.c2l-print-facts dd { margin: 0 0 4pt; }
.c2l-print-section { margin-top: 12pt; }
.c2l-print-section > h2 { font-size: var(--c2l-print-fs-h2); color: var(--c2l-print-accent); border-bottom: .5pt solid var(--c2l-print-rule); padding-bottom: 2pt; margin: 0 0 6pt; }
.c2l-print-item > h3 { font-size: var(--c2l-print-fs-h3); margin: 8pt 0 4pt; }
.c2l-print-dl { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 3pt 10pt; margin: 0; }
.c2l-print-dl dt { color: var(--c2l-print-fg-muted); }
.c2l-print-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.c2l-print-text { white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.c2l-print-cite { color: var(--c2l-print-fg-muted); font-size: var(--c2l-print-fs-small); margin-left: 3pt; }
.c2l-print-missing { color: var(--c2l-print-fg-muted); font-size: var(--c2l-print-fs-small); font-style: italic; margin-top: 4pt; }
.c2l-print-table { width: 100%; border-collapse: collapse; font-size: var(--c2l-print-fs-table); margin: 2pt 0 6pt; table-layout: fixed; }
.c2l-print-table th { text-align: left; border-bottom: .75pt solid var(--c2l-print-fg); padding: 2pt 4pt; }
.c2l-print-table td { border-bottom: .5pt solid var(--c2l-print-rule); padding: 2pt 4pt; vertical-align: top; overflow-wrap: anywhere; }
.c2l-print-chip { display: inline-block; padding: 1pt 6pt; border-radius: 8pt; color: #fff; font-size: var(--c2l-print-fs-small); font-weight: 600; }
.c2l-print-chip--high { background: var(--c2l-print-tier-high); }
.c2l-print-chip--limited { background: var(--c2l-print-tier-limited); }
.c2l-print-chip--minimal { background: var(--c2l-print-tier-minimal); }
.c2l-print-chip--prohibited { background: var(--c2l-print-tier-prohibited); }
.c2l-print-chip--none { background: var(--c2l-print-tier-none); }
.c2l-print-chip--stage-design { background: var(--c2l-print-stage-design); }
.c2l-print-chip--stage-development { background: var(--c2l-print-stage-development); }
.c2l-print-chip--stage-testing { background: var(--c2l-print-stage-testing); }
.c2l-print-chip--stage-deployed { background: var(--c2l-print-stage-deployed); }
.c2l-print-chip--stage-decommissioned { background: var(--c2l-print-stage-decommissioned); }
.c2l-print-chip--stage-none { background: var(--c2l-print-stage-none); }

/* ---- Print ---- */
/* A NAMED page, used only by body.c2l-print-mode below. An unnamed @page would apply to every page
   that loads the design bundle (the version editor included) and break the opt-in contract. */
@page c2l-print {
  size: A4 portrait;
  margin: 18mm 16mm 20mm;
  @bottom-left { content: string(c2l-print-title); font-size: 8pt; color: #646c70; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 8pt; color: #646c70; }
}

@media print {
  /* The named page goes on body, not on the sheet: switching from the default page to a named
     one on an element inside the document forces a page break before it, which printed a blank
     first page. On body the whole document starts on the named page. Removing c2l-print-mode
     removes it again, so no element uses the named page outside print mode. */
  body.c2l-print-mode { page: c2l-print; }
  /* The app's toastr notifications (angular-toastr containerId 'toast-container', e.g. the SignalR
     "Connected" toast) are fixed-position and would repeat on every printed page. */
  body.c2l-print-mode #toast-container,
  body.c2l-print-mode .topnavbar-wrapper,
  body.c2l-print-mode .aside,
  body.c2l-print-mode .offsidebar,
  body.c2l-print-mode footer,
  body.c2l-print-mode .c2l-print-toolbar { display: none !important; }
  body.c2l-print-mode .wrapper > section,
  body.c2l-print-mode .content-wrapper { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.c2l-print-mode { background: #fff !important; }
  .c2l-print-sheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .c2l-print-header h1 { string-set: c2l-print-title content(); }
  .c2l-print-section > h2,
  .c2l-print-item > h3 { break-after: avoid; }
  .c2l-print-dl dt,
  .c2l-print-dl dd,
  .c2l-print-table tr { break-inside: avoid; }
  .c2l-print-table thead { display: table-header-group; }
  .c2l-print-chip { background: none !important; border: 1pt solid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .c2l-print-chip--high { color: var(--c2l-print-tier-high); border-color: var(--c2l-print-tier-high); }
  .c2l-print-chip--limited { color: var(--c2l-print-tier-limited); border-color: var(--c2l-print-tier-limited); }
  .c2l-print-chip--minimal { color: var(--c2l-print-tier-minimal); border-color: var(--c2l-print-tier-minimal); }
  .c2l-print-chip--prohibited { color: var(--c2l-print-tier-prohibited); border-color: var(--c2l-print-tier-prohibited); }
  .c2l-print-chip--none { color: var(--c2l-print-tier-none); border-color: var(--c2l-print-tier-none); }
  .c2l-print-chip--stage-design { color: var(--c2l-print-stage-design); border-color: var(--c2l-print-stage-design); }
  .c2l-print-chip--stage-development { color: var(--c2l-print-stage-development); border-color: var(--c2l-print-stage-development); }
  .c2l-print-chip--stage-testing { color: var(--c2l-print-stage-testing); border-color: var(--c2l-print-stage-testing); }
  .c2l-print-chip--stage-deployed { color: var(--c2l-print-stage-deployed); border-color: var(--c2l-print-stage-deployed); }
  .c2l-print-chip--stage-decommissioned { color: var(--c2l-print-stage-decommissioned); border-color: var(--c2l-print-stage-decommissioned); }
  .c2l-print-chip--stage-none { color: var(--c2l-print-stage-none); border-color: var(--c2l-print-stage-none); }
}