/* Host-side fixes for the reused portal bundles (no visual change; loaded after the bundle CSS).
   1. main.route-fade animates to `transform:none` with fill-mode `both`; Chrome then keeps an
      identity transform matrix on <main>, which makes it the containing block for every
      position:fixed descendant — the Student-detail drawer (and any modal rendered inside
      <main>) was clipped to the content area instead of the viewport. `backwards` keeps the
      entrance animation identical and drops the transform once it finishes. */
.route-fade { animation-fill-mode: backwards; }

/* 2. Notifications dropdown: .notif-item is a grid whose single column grows to the nowrap
      title's full width (grid items default to min-width:auto), so long titles push the list
      wider than the 360px panel → horizontal scrollbar and clipped text. Letting the column
      and its rows shrink restores the designed ellipsis. */
.notif-item { grid-template-columns: minmax(0, 1fr); }
.notif-item > * { min-width: 0; }
.notif-list { overflow-x: hidden; }

/* 3. `.card + .card { margin-top: 1rem }` is meant for stacked cards but also fires on the
      second card of a side-by-side .grid (cols-2/cols-3), so the right-hand card sits 16px
      lower than its neighbour (Overview: Certification journey vs Recent activity). Grid
      gaps already space siblings; inside a grid the margin is dropped. */
.grid > .card + .card { margin-top: 0; }