/* ======================================================================
   Maritime Passport — Partner Portal OVERLAY layer (MAR-816).

   Surfaces that float above the page: today the native <dialog> modal
   primitive. This is the designated growth point for drawer, popover and
   toast work — deliberately its own file so overlay tickets and form
   tickets never contend for one sheet (the ticket's hard constraint).

   Tokens come from portal.css, linked ahead of this file.

   * a NEW overlay family gets its own portal.<family>.css, linked from
     partner/_head.html — it does not grow this file (MAR-816).
   ====================================================================== */

/* ── modal dialog primitive (MAR-727, promoted from portal.team.css when
      MAR-674 gave the invitations screen a second modal; MAR-782 makes it
      the portal's canonical Figma 0.1 modal — bulk invite and API keys
      will reuse it). Native <dialog> + showModal(): the dialog itself is
      the card — white surface, --mp-card-radius, the one permitted shadow
      (a modal genuinely floats; panels stay flat) — over an ink scrim on
      the beige ground. The dialog carries no padding: the interior card
      body supplies it (the panel body from portal.primitives.css, or the
      confirm panel directly below), so a click landing on the dialog element
      itself can only be the backdrop.
      (Dotted class names stay out of this comment on purpose —
      test_no_class_is_defined_in_two_files reads comments too.) ── */
.pp-modal { border:0; padding:0; background:var(--bg-surface); overflow:visible;
  border-radius:var(--mp-card-radius); box-shadow:var(--pp-float-shadow);
  max-width:720px; width:calc(100% - 32px); }
.pp-modal::backdrop { background:var(--pp-scrim); }
/* no-JS fallback: server-rendered open without showModal() renders in flow */
.pp-modal[open]:not(:modal) { position:static; margin:22px auto 0; }

/* ── the modal scrolls on a short viewport (MAR-1818). The UA sheet gives a
      modal dialog BOTH a max-height (`calc(100% - 6px - 2em)`) and
      `overflow:auto`. The rule above overrides the width but not the height,
      and overrides overflow to visible — so the height cap survived and the
      scroll container did not: on a viewport shorter than the content the
      surface stopped at the cap, the rest painted OUTSIDE the box onto the
      scrim and past the viewport bottom, and the actions row was out of
      reach. Measured `clientHeight 546` against `scrollHeight 627`, with
      scrolling pinned at 0 — the other 81 pixels were painted, just painted
      outside the surface and then clipped by the viewport rather than hidden
      by the card.

      Overflow stays visible on the dialog element deliberately: this file is
      the growth point for drawer, popover and toast work, and nothing inside
      any of the five dialogs needs to ESCAPE its card today. Two things in
      there are out of flow and neither wants out: the team invite dialog's
      role cards hide their radio input with `position:absolute; opacity:0;
      pointer-events:none`, and the visually-hidden spans behind that dialog's
      capability matrix clip themselves to a pixel on purpose (both in the
      team screen sheet). Instead the dialog becomes a column bounded by the
      UA's own max-height and its single interior body becomes the scroller.
      A taller modal scrolls; a short one is inert.

      Two things here are load-bearing and silent when broken.

      Scoping to `:modal` is the first. An author `display` beats the UA's
      `dialog:not([open]) { display:none }` on ORIGIN, not specificity, so the
      unscoped form gives a CLOSED dialog a computed display of flex and a
      visible box — and two pages render their confirmation closed and open it
      from script, so those confirmations would sit on the page permanently.
      Same origin trap the panel body carries in the primitives sheet
      (MAR-976). `:modal` over `[open]` because the bug exists only in modal
      mode: an open non-modal dialog measures `max-height: none`.

      `min-height:0` is the second: a column item defaults to `min-height:auto`
      and will not shrink below its content, so the body never scrolls without
      it and the whole rule is inert.

      The child selector is `> *` and not the interior body's own class,
      because the five dialogs carry TWO different body classes — the general
      card body from the primitives sheet, and the confirm panel defined below
      in this file — so no class-named selector reaches all five, and the first
      of those two is owned elsewhere: a dotted name in a SELECTOR claims
      ownership of that class, and claiming one another sheet already owns
      fails the split test. `> *` claims nothing, and it is safe because all
      five dialogs have exactly one element child. (Comments are exempt from
      that rule — the split test strips them before it reads ownership, which
      is why the prose above is free to describe the team screen's rules. The
      note in the block above this one predates that strip and is stale.) ── */
.pp-modal:modal { display:flex; flex-direction:column; }
.pp-modal:modal > * { overflow:auto; min-height:0; }

/* ── confirm panel (MAR-674, MOVED here from the invitations screen sheet by
      MAR-1366 when the API-keys revoke confirmation became its second
      consumer — and that page declares no screen sheet, so a rule left in a
      per-screen file would simply not load there). The narrow variant of the
      modal above plus its interior body: the dialog is the surface, so this
      is layout only — padding and stack, no surface of its own. A move and
      never a copy; the split test allows exactly one owner per class. ── */
.pp-confirm { max-width:480px; }
.pp-confirm__panel { padding:20px; display:flex; flex-direction:column; gap:12px; }
.pp-confirm__t { margin:0; font-size:19px; font-weight:600; letter-spacing:-.02em; }
.pp-confirm__target { margin:0; font-family:var(--mono); font-size:13px; color:var(--ink-2); }
/* The panel is a gapped flex column and nothing in this portal resets the UA's
   `p { margin:1em 0 }`, so a bare paragraph in here doubles its own spacing.
   Element selector on purpose: the classes those paragraphs carry — the help
   text and the note primitive — live in other sheets, and naming them here
   would define them twice (the split test's one-owner rule). The invitations
   screen wrote `style="margin:0"` per paragraph instead; this makes that
   inline reset unnecessary for both consumers, and is inert there since the
   value is the same. */
.pp-confirm__panel > p { margin:0; }