Share the tip card shell and the leave-type swatch styles

TipCardShell replaces the tip-card markup that PlanWarningCard,
SurplusAdviceTip and VacationRescueTip each copied from TipCard. The
vacation/sjukpenning/lägsta fills and cap marks move to .leave-swatch--*
in primitives.css; the calendar band, year rows and help popover keep
only their size, position and deliberate overrides.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/styles/components.css

@@ -199,27 +199,30 @@
   flex-shrink: 0;
 }
 
+/* Fill/hatch/outline is the shared `.leave-swatch--*` recipe from
+ * primitives.css (added alongside these classes in YearRows.tsx); this file
+ * keeps only what's genuinely different at this swatch's small size.
+ *
+ * Vacation's bar uses a distinct, more saturated fill
+ * (--c-leave-vacation-bar) than the calendar band/help-popover sample —
+ * needed for contrast at 14px/8px. Overrides `.leave-swatch--vacation`'s
+ * background-color: same specificity, later in the cascade (components.css
+ * loads after primitives.css). */
 .year-rows__swatch--vacation,
 .year-row__band--vacation {
   background-color: var(--c-leave-vacation-bar);
 }
 
-.year-rows__swatch--sjukpenning,
-.year-row__band--sjukpenning {
-  background-color: var(--c-leave-sjukpenning);
-}
-
-/* Lägsta is a white fill told apart by a 1px dark outline and a hatch, not
- * a hue (see the --c-leave-* tokens). */
+/* Lägsta's hatch is finer here (3px/4px stops) than the calendar band/
+ * help-popover's 4px/5px, for the same reason. Overrides
+ * `.leave-swatch--lagsta`'s background-image the same way. */
 .year-rows__swatch--lagsta,
 .year-row__band--lagsta {
-  background-color: var(--c-leave-lagsta);
   background-image: repeating-linear-gradient(
     135deg,
     transparent 0 3px,
     var(--c-leave-lagsta-hatch) 3px 4px
   );
-  box-shadow: inset 0 0 0 1px var(--c-leave-lagsta-outline);
 }
 
 .year-row__summary {