Stop upcoming lesson rows rendering on top of each other

The panel's row and its two columns are divs with explicit flex rules, but
the text itself still sits in inline elements. A theme is free to take those
out of normal flow, and when it does the date and time land on the lesson
title and the status pill lands on the Cancel button. Pin position, float
and margin on the leaf elements at the same id-level specificity the rest of
the panel already uses, so a theme rule cannot lift them out of the column.

The rows behind "Show all" had the same shape of problem from the other
direction: `[hidden]` is only a UA-stylesheet rule, so the `div {
display: block }` reset that many themes still ship outranks it and the
collapsed rows render anyway. An author `!important` is the only way to win
that particular cascade.

Verified with a headless-browser harness rendering the exact markup
booking.js emits against twelve theme CSS patterns at two widths: before,
five patterns overlapped text or revealed the hidden rows; after, all pass.

Closes #149

Co-Authored-By: Claude Opus 5 <[email protected]>

.claude/settings.local.json

@@ -5,7 +5,8 @@
       "Bash(composer lint *)",
       "Bash(tea actions:*)",
       "Bash(tea issue *)",
-      "Bash(tea label *)"
+      "Bash(tea label *)",
+      "Bash(composer cs *)"
     ]
   }
 }