/* ─────────────────────────────────────────────────────────────────────────────
   CSEAR members surface — our own additions.

   Kept in a separate file from the four Webflow export stylesheets so a fresh
   export can be dropped in without clobbering anything written here. Loaded
   last, and only from app/members/layout.tsx — nothing on this surface reaches
   the admin portal's Tailwind, and nothing here should reach the admin portal.
   ───────────────────────────────────────────────────────────────────────────── */

/* Hamburger open state.

   In the source these three bars were animated into a cross by a Webflow
   interaction, i.e. by webflow.js — which this surface does not load. Without
   some open-state affordance the button gives no sign the panel is open, so the
   same transform is done in CSS off the .w--open class React already sets.

   Geometry matches the export: three 24x2 bars, the middle one with 6px margins,
   so the outer bars sit 8px either side of centre and travel that far to meet. */
.navbar4_menu-button .menu-icon4_line-top-2,
.navbar4_menu-button .menu-icon4_line-middle-2,
.navbar4_menu-button .menu-icon4_line-bottom-2 {
  transition: transform .3s ease, opacity .2s ease, background-color .3s ease;
}

/* Open, the bars sit on the menu panel rather than the blue navbar, and the
   panel is pale (--color-scheme-1--dropdpwn-menu, #e4eafa). White on that is
   1.2:1 — the cross was effectively invisible. Brand blue gives 4.86:1, well
   past the 3:1 WCAG 1.4.11 asks of a graphical control, and matches what the
   design already does on this panel colour: the conf-nav arrow is #2E55E9 on
   the same background. (--color-scheme-1--site-black is the stronger option at
   12.9:1 if this ever needs to shout louder.) */
.navbar4_menu-button.w--open .menu-icon4_line-top-2,
.navbar4_menu-button.w--open .menu-icon4_line-bottom-2,
.navbar4_menu-button.w--open .menu-icon4_line-middle-2,
.navbar4_menu-button.w--open .menu-icon4_line-middle-base-2 {
  background-color: var(--color-scheme-1--blue);
}

.navbar4_menu-button.w--open .menu-icon4_line-top-2 {
  transform: translateY(8px) rotate(45deg);
}

.navbar4_menu-button.w--open .menu-icon4_line-middle-2 {
  opacity: 0;
}

.navbar4_menu-button.w--open .menu-icon4_line-bottom-2 {
  transform: translateY(-8px) rotate(-45deg);
}

/* The menu button sits above the panel it opens, so it stays clickable to close
   it — .navbar4_menu is absolutely positioned within the same navbar. */
.navbar4_menu-button {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .navbar4_menu-button .menu-icon4_line-top-2,
  .navbar4_menu-button .menu-icon4_line-middle-2,
  .navbar4_menu-button .menu-icon4_line-bottom-2 {
    transition: none;
  }
}

/* Resources grid: the separator spans both columns.

   .resources-grid is a two-column grid (.33fr 1fr) holding, in order: an empty
   spacer, the heading, a full-width rule, then the nav and the contents. Webflow
   makes that rule span both columns with a generated node id — one per page,
   three in total, all saying exactly the same thing:

     #w-node-ed10ca82-…-89bf4147 { grid-area: span 1 / span 2 / span 1 / span 2 }

   The conversion dropped the ids, so the rule occupied a single cell and
   everything after it shifted by one: the nav landed beside the separator and
   the contents dropped into the narrow left column. That is the whole layout
   fault.

   Done by class rather than by restoring three opaque ids, because one shared
   React component renders all three pages and the rules are identical. The
   sibling id on .resources-header is a no-op — span 1 / span 1 is what a grid
   item does anyway — so it is not reproduced.

   Scoped to .resources-grid: .horizontal-sep is also used outside it. */
.resources-grid > .horizontal-sep {
  grid-column: span 2;
}

/* Submit-papers: the row arrow sits centred against the right edge.

   .paper-select-grid is three columns (3fr 1fr auto) — title, status button,
   arrow. The source places that arrow with a generated node id:

     #w-node-d8cd8af8-…-869f3029 { place-self: center end }

   Without it the image falls back to stretch/start, so the arrow sits at the top
   of its cell rather than centred beside the status button. Less dramatic than
   the resources grid, which is why it reads as slightly off rather than broken.

   By class again: one React component renders every row, and the id would have
   to be repeated per row, which is invalid HTML.

   Peer review has the identical arrangement — .peer-select-grid, same
   3fr 1fr auto, same arrow, two more dropped ids saying the same thing — so it
   is covered by the same rule. Direct children only: .paper-title-container
   holds its own icon, which should stay where it is. */
.paper-select-grid > img,
.peer-select-grid > img {
  place-self: center end;
}