/* ==========================================================================
   Beta Sigma Pilot — Child 4 (Shared Modal Chrome) scoped stylesheet
   ==========================================================================
   Governance:
     - docs/frontend/FROZEN_MIGRATION_PLAN.md §10.1 + §16  (Child 4 scope,
       owner-approved; presentation-only, flag-gated, reversible).
     - docs/frontend/CONVENTIONS.md  (§3 consume semantic tokens, §4 dark
       default, §10 no legacy-CSS cleanup).

   FLAG
     BS_PILOT_MODAL_CHROME  ->  PILOT_MODAL_CHROME (layouts/pilot_flags.py).
     Default OFF. When ON, layouts/main_layout.py `_home_modals_bs(...)` tags
     the seven top-level Layer-A modals (modal-1..modal-5, modal-plans,
     modal-admin) with the marker class `.bs-modal-pilot` (which dbc places
     on the `.modal-dialog` container). With the flag OFF no element carries
     the marker, so this file has ZERO effect on the legacy modal tree.

   SCOPE CONTRACT
     - EVERY selector is nested beneath `.bs-modal-pilot`. No bare/global
       selector (`.modal`, `.modal-dialog`, `.modal-content`, `.modal-body`,
       `.modal-backdrop`). The legacy global rules in assets/custom.css are
       left byte-unchanged for rollback.
     - Values come only from the semantic tokens in assets/tokens.css. No
       token value is defined or redefined here. No url(). No @import.
     - Layer-B feature-owned sub-modals (AI report / glossary / player-card /
       e-card / standalone `#glossary-modal`) never carry `.bs-modal-pilot`,
       so they are untouched.

   STATUS — C4-S3: Layer-A modal SURFACE / FRAME ONLY.
     Applies the owner-approved flat Beta Sigma elevated surface (no
     atgpopup.png texture), a DS border, a DS radius and a DS elevation to
     the pilot Layer-A `.modal-content` / `.modal-body`. Nothing else:
     no backdrop, no `.modal-dialog` dimensions, no header, no close
     control, no padding / overflow / scroll change, no motion, no z-index,
     no @media. Those are later Child 4 steps (§16).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer-A pilot modal frame
   -------------------------------------------------------------------------- */
/* The legacy rules in assets/custom.css declare `.modal-content` and
   `.modal-body` `background-image` / `border` / `border-radius` /
   `box-shadow` with `!important`. To override them ONLY for the flag-ON
   Layer-A modals, the scoped rules below also carry `!important`: at equal
   importance the higher specificity then decides
   (`.bs-modal-pilot .modal-content` = 0,2,0  vs  `.modal-content` = 0,1,0),
   so the pilot rule wins regardless of stylesheet load order. Every
   `!important` here is confined to the `.bs-modal-pilot` descendant scope —
   no global rule is added, and the legacy cascade is unchanged when the
   flag is OFF. */

.bs-modal-pilot .modal-content {
  /* flat Beta Sigma elevated surface — replaces the atgpopup.png texture */
  background-color: var(--bs-color-surface-elevated) !important;
  background-image: none !important;
  /* DS §10.1 — radius-lg is the token for "modal" (legacy forced 0) */
  border-radius: var(--bs-radius-lg) !important;
  /* DS §10.2 — 1px border on an elevated surface (legacy used a flat grey
     rgba(128,128,128,.3)); token is theme-aware */
  border: 1px solid var(--bs-color-border-strong) !important;
  /* DS §10.2 elevation — same geometry the owner-approved Login card uses
     in assets/mm_pilot.css (`.bs-pilot__card`), driven by the theme-aware
     --bs-color-shadow token (subtle in light, present in dark; the dark
     lift is carried primarily by the surface-elevated colour per §10.2) */
  box-shadow: 0 10px 30px var(--bs-color-shadow) !important;
}

.bs-modal-pilot .modal-body {
  /* expose the same flat elevated surface — remove the legacy texture */
  background-color: var(--bs-color-surface-elevated) !important;
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   Layer-A pilot close control (C4-S4) — icon-only Icon Button
   -------------------------------------------------------------------------- */
/* The conflicting presentational inline styles (backgroundColor / color /
   border / fontFamily / fontSize / borderRadius / fontWeight) are removed from
   the seven pilot close buttons in layouts/main_layout.py
   `_home_modals_bs(...)`, and `.bs-modal-pilot__close` is a brand-new class, so
   these rules need no `!important`: `.bs-modal-pilot .bs-modal-pilot__close`
   (0,2,0) already outranks Bootstrap's `.btn` / `.btn-sm` (0,1,0). Position and
   z-index are left on the element unchanged — the shared header in a later
   Child 4 step will own final placement (§16). The visible child is only the
   decorative `×` glyph; the accessible name is a Bootstrap `.visually-hidden`
   text span (no custom visually-hidden CSS is added). `padding: 0` here is
   close-control-only and required for the owner-approved 40 px square. */
.bs-modal-pilot .bs-modal-pilot__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  background-color: transparent;
  color: var(--bs-color-text-secondary);
  border: 1px solid var(--bs-color-border);
  border-radius: var(--bs-radius-sm);
  font-family: var(--bs-font-body);
  font-size: 20px;
  line-height: 1;
}

.bs-modal-pilot .bs-modal-pilot__close:hover {
  background-color: var(--bs-color-surface-elevated);
  color: var(--bs-color-text-primary);
  border-color: var(--bs-color-border-strong);
}

.bs-modal-pilot .bs-modal-pilot__close:active {
  background-color: var(--bs-color-surface);
}

.bs-modal-pilot .bs-modal-pilot__close:focus-visible {
  outline: 2px solid var(--bs-color-accent);
  outline-offset: 2px;
  box-shadow: none; /* replace Bootstrap's .btn focus ring with the DS outline */
}

/* Owner-approved mobile interactive target >= 44x44px (project breakpoint
   768px). Scoped to the pilot close control only — nothing else in the modal
   shell changes here. */
@media (max-width: 768px) {
  .bs-modal-pilot .bs-modal-pilot__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Layer-A pilot shared header (C4-S5) — title left, close right, no divider
   -------------------------------------------------------------------------- */
/* `_home_modals_bs(...)` prepends `div.bs-modal-pilot__header` as the first
   child inside each Layer-A ModalBody, containing `div.bs-modal-pilot__title`
   and the relocated pilot close button (its legacy absolute positioning was
   dropped in Python). This layout row mirrors the owner-approved
   `.bs-pilot__topbar` (assets/mm_pilot.css): flex, vertically centred, 56 px
   band, horizontal gutter from `--bs-space-5`. No border-bottom / separator,
   no dimension / scroll / motion / z-index rule. Brand-new classes, so no
   `!important` is needed. */
.bs-modal-pilot .bs-modal-pilot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bs-space-4);
  min-height: 56px;
  padding: 0 var(--bs-space-5);
  /* C4-S8: the header is a flex child of `.modal-content`, a sibling of
     `.modal-body`. It is fixed chrome — never grows, never shrinks, never
     scrolls. No position:sticky/fixed and no z-index: staying out of the
     scroll region is purely structural. */
  flex: 0 0 auto;
}

/* Title typography reuses the exact treatment of the owner-approved
   `.bs-pilot__nav-card-label` (assets/mm_pilot.css): display family, weight
   700, 20 px, primary text colour — the nearest already-approved heading
   value; no new type scale is introduced. */
.bs-modal-pilot .bs-modal-pilot__title {
  min-width: 0;
  font-family: var(--bs-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--bs-color-text-primary);
}

/* --------------------------------------------------------------------------
   Layer-A pilot responsive frame (C4-S6) — desktop sizing + mobile fullscreen
   -------------------------------------------------------------------------- */
/* dbc places `class_name` ("bs-modal-pilot") on the `.modal-dialog` element and
   the modal `id` ("#modal-1" ... "#modal-admin") on its `.modal` ancestor
   (verified against the rendered Bootstrap 5 structure and the existing
   `z_modal*_fix.css` selectors). React-Bootstrap renders every `dbc.Modal`
   through a portal to `<body>`, so Layer-A and Layer-B modals are DOM
   *siblings*, never nested — `.bs-modal-pilot` can only ever match a Layer-A
   dialog, and its descendants are only that modal's own `.modal-content` /
   `.modal-body`. No Layer-B geometry is affected. No global `.modal-*` rule is
   added; the legacy `custom.css` / `z_modal*_fix.css` geometry is left intact
   for rollback. C4-S6 sets only frame geometry (width / max-width / height /
   min-height / margin / border-radius) — no padding, overflow, scroll,
   safe-area, backdrop, motion or z-index. */

/* DESKTOP — modal-1..5 and modal-admin already render as large ~92vw
   analytical surfaces via the id-less `.modal-dialog` rule in custom.css, which
   satisfies the frozen "large near-full-screen" contract, so no override is
   added for them. modal-plans is the only one that needs correcting: its
   `size="lg"` intent is currently flattened to 92vw by that global `!important`
   rule, so this scoped rule restores a smaller centred dialog capped at the DS
   value (DS §23 "Modal — Desktop: centralizado, max 720px"). `#modal-plans` +
   the `.modal-dialog.bs-modal-pilot` compound + `!important` outrank the id-less
   `!important` global. */
#modal-plans .modal-dialog.bs-modal-pilot {
  max-width: 720px !important;
  width: 100% !important;
}

/* MOBILE (project breakpoint 768px) — all seven Layer-A modals become
   full-screen surfaces: full viewport width/height, no dialog margin, square
   corners. Selectors carry `#modal-N` + `.modal-dialog.bs-modal-pilot`
   (specificity 1,2,0 / 1,3,0) to outrank the id-scoped `z_modal*_fix.css` /
   `z_plans_modal_fix.css` mobile rules (1,1,0). Dynamic viewport unit `dvh`
   (already used by z_modal*_fix.css) with a `vh` fallback. No bottom-sheet, no
   snap points, no drag handle. overflow / scroll and safe-area are untouched
   here — deferred to their own steps. */
@media (max-width: 768px) {
  #modal-1 .modal-dialog.bs-modal-pilot,
  #modal-2 .modal-dialog.bs-modal-pilot,
  #modal-3 .modal-dialog.bs-modal-pilot,
  #modal-4 .modal-dialog.bs-modal-pilot,
  #modal-5 .modal-dialog.bs-modal-pilot,
  #modal-plans .modal-dialog.bs-modal-pilot,
  #modal-admin .modal-dialog.bs-modal-pilot {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    /* max-height override is the symmetric counterpart of the allowed
       max-width:none — it is required because the legacy z_modal*_fix.css /
       z_plans_modal_fix.css / custom.css mobile rules cap the dialog at
       calc(100dvh - 14..34px), which would defeat the frozen "fill viewport"
       contract. */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }

  #modal-1 .modal-dialog.bs-modal-pilot .modal-content,
  #modal-2 .modal-dialog.bs-modal-pilot .modal-content,
  #modal-3 .modal-dialog.bs-modal-pilot .modal-content,
  #modal-4 .modal-dialog.bs-modal-pilot .modal-content,
  #modal-5 .modal-dialog.bs-modal-pilot .modal-content,
  #modal-plans .modal-dialog.bs-modal-pilot .modal-content,
  #modal-admin .modal-dialog.bs-modal-pilot .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Layer-A pilot fixed header + scroll region (C4-S8)
   -------------------------------------------------------------------------- */
/* `_home_modals_bs(...)` puts `.bs-modal-pilot__header` as a sibling of
   `.modal-body` inside `.modal-content`. This makes `.modal-content` a vertical
   flex column: the header is fixed chrome (`flex: 0 0 auto`, above) and
   `.modal-body` is the single shell-owned scroll region below it.

   Bootstrap 5's `.modal-content` is already `display:flex; flex-direction:column`
   and nothing in the legacy CSS overrides it; this rule restates it explicitly
   and scoped, so the pilot layout does not depend on that default. No global
   `.modal-content` rule is added and the C4-S3 surface rule is untouched.
   Layer-B modals portal separately, so `.bs-modal-pilot .modal-content` can
   never match a Layer-B content element. */
.bs-modal-pilot .modal-content {
  display: flex;
  flex-direction: column;
}

/* modal-1..5 + modal-plans: `.modal-body` is the shell-owned vertical scroll
   viewport. `#modal-N` + `.modal-dialog.bs-modal-pilot` (specificity 1,2,0)
   outranks the id-scoped legacy `z_modal*_fix.css` / `z_plans_modal_fix.css` /
   `custom.css` `.modal-body` overflow rules (0,1,0 desktop, 1,1,0 mobile).
   `flex: 1 1 auto` + `min-height: 0` lets the body fill the space left by the
   fixed header and, crucially, shrink below its content height so the legacy
   mobile `height: calc(100% - 54px)` on `#modal-4`/`#modal-5 .modal-body` is
   absorbed by flex-shrink rather than fought (no `height` override needed).
   Feature-owned inner scroll containers inside the body are left untouched. */
#modal-1 .modal-dialog.bs-modal-pilot .modal-body,
#modal-2 .modal-dialog.bs-modal-pilot .modal-body,
#modal-3 .modal-dialog.bs-modal-pilot .modal-body,
#modal-4 .modal-dialog.bs-modal-pilot .modal-body,
#modal-5 .modal-dialog.bs-modal-pilot .modal-body,
#modal-plans .modal-dialog.bs-modal-pilot .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* modal-admin exception: the header is still lifted out of `.modal-body`, but
   `.modal-body` must NOT become a second vertical scroll viewport — the admin
   feature wrapper (`maxHeight: calc(100vh - 120px); overflowY: auto`, owned by
   callback_admin_panel.py) stays the scroll owner. `.modal-body` only takes the
   remaining flex space; its legacy `overflow: hidden` / `overflow-y: hidden`
   stays in force, so no new scroll region is created. */
#modal-admin .modal-dialog.bs-modal-pilot .modal-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Layer-A pilot mobile safe-area (C4-S9)
   -------------------------------------------------------------------------- */
/* Full-screen mobile modals sit edge-to-edge (C4-S6: margin 0 / 100dvh), and
   C4-S6 also removed the per-modal `env(...)` geometry that
   z_plans_modal_fix.css used to give #modal-plans. C4-S9 restores safe-area
   awareness on the pilot chrome only:
     - the fixed shared header owns the TOP inset;
     - the shell scroll region (`.modal-body` for modal-1..5 + modal-plans,
       per C4-S8) owns the BOTTOM inset.
   Spacing only — no C4-S6 geometry and no C4-S8 scroll-architecture change.
   modal-admin's `.modal-body` is not the scroll owner, so it takes the top
   inset (via the shared header) but no bottom rule — its feature wrapper
   owns that. `env(safe-area-inset-*, 0px)` resolves to 0 on non-notched /
   portrait devices, so the zero-inset render matches C4-S8 apart from the
   intentional DS bottom gutter. Left/right insets are 0 in the DS-assumed
   portrait orientation (Design System §23.1) and are not handled here. */
@media (max-width: 768px) {
  /* TOP — additive protective space ABOVE the existing 56px header band.
     Same selector/specificity as the C4-S5 header rule but later in the
     file, so it wins for `padding-top` only; the horizontal
     `var(--bs-space-5)` gutter, `padding-bottom: 0`, `flex: 0 0 auto`, the
     title layout and the 44x44 close target are all unchanged. */
  .bs-modal-pilot .bs-modal-pilot__header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* BOTTOM — breathing room at the end of the shell scroll region: a
     DS-token gutter (`--bs-space-3` = 12px, the token
     `mm_pilot.css .bs-pilot__footer` already uses for bottom safe-area)
     plus the device bottom inset. Only `padding-bottom` is set — top and
     left/right keep their legacy values. `!important` + specificity 1,2,0
     defeat the global `.modal-body { padding: 0 !important }` and the
     `z_modal4/5` `.modal-body { padding: 10px 0 14px 0 !important }`. */
  #modal-1 .modal-dialog.bs-modal-pilot .modal-body,
  #modal-2 .modal-dialog.bs-modal-pilot .modal-body,
  #modal-3 .modal-dialog.bs-modal-pilot .modal-body,
  #modal-4 .modal-dialog.bs-modal-pilot .modal-body,
  #modal-5 .modal-dialog.bs-modal-pilot .modal-body,
  #modal-plans .modal-dialog.bs-modal-pilot .modal-body {
    padding-bottom: calc(var(--bs-space-3) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --------------------------------------------------------------------------
   Layer-A pilot modal entrance / exit motion (C4-S10)
   -------------------------------------------------------------------------- */
/* Owner-frozen entrance: scale(.96 -> 1) + fade, 220 ms ease-out, identical on
   desktop and mobile. Implemented purely on Bootstrap 5.3.3's existing modal
   state classes — no @keyframes, no JS, no dbc `fade` prop change, no new
   markup.

   Class placement (dbc 1.6.0 / Bootstrap 5.3.3, verified against the CDN CSS
   and the dbc JS bundle): `bs-modal-pilot` is on `.modal-dialog`; the `.modal`
   element carries `.fade` and, while open, `.show`. Opacity is owned by
   `.modal.fade` (`transition: opacity .15s linear`); the transform is owned by
   `.modal.fade .modal-dialog` (`transition: transform .3s ease-out; transform:
   translate(0,-50px)`), reset by `.modal.show .modal-dialog { transform:
   none }`. The `.modal` element is reached pilot-scoped via
   `:has(.modal-dialog.bs-modal-pilot)` — `:has()` is already used by
   z_modal3_fix.css so it is within the project's CSS baseline; where a browser
   lacks `:has()` the opacity simply keeps Bootstrap's own fade (graceful).

   Tokens: `--bs-motion-normal` (220 ms — the owner's explicit resolution of the
   Design System §19 220/360 ms ambiguity) and `--bs-ease-out`
   (cubic-bezier(0,0,.2,1)). Layer-B modal dialogs never carry `.bs-modal-pilot`
   and portal to `<body>` as siblings, so none of these selectors can match a
   Layer-B modal. No z-index / geometry / scroll / safe-area / backdrop change.
   Specificity: every pilot selector is 0,4,0 and outranks the Bootstrap
   defaults (`.fade` 0,1,0; `.modal.fade .modal-dialog` and
   `.modal.show .modal-dialog` 0,3,0) — no `!important` needed. */

/* opacity — synchronise Bootstrap's `.fade` (0.15 s linear) to the frozen
   220 ms ease-out so the fade and the scale read as one entrance. */
.modal.fade:has(.modal-dialog.bs-modal-pilot) {
  transition: opacity var(--bs-motion-normal) var(--bs-ease-out);
}

/* transform — replace Bootstrap's default `translate(0, -50px)` slide with the
   frozen `scale(.96)`. No translate / rotation / bounce / overshoot. */
.modal.fade .modal-dialog.bs-modal-pilot {
  transition: transform var(--bs-motion-normal) var(--bs-ease-out);
  transform: scale(0.96);
}

/* shown — must follow the entering rule (equal specificity) so the dialog
   settles at scale(1); Bootstrap's own `.modal.show .modal-dialog { transform:
   none }` is 0,3,0 and would otherwise lose to the 0,4,0 entering rule while
   `.fade` is still present. Close reverses this naturally: removing `.show`
   re-applies `scale(.96)` and the same 220 ms ease-out transition runs
   scale(1 -> .96) + fade-out — no separate exit design. */
.modal.show .modal-dialog.bs-modal-pilot {
  transform: scale(1);
}

/* Reduced motion — no scale, no fade transition; final state is scale(1) at
   full opacity with no displacement. Bootstrap already sets `transition: none`
   on `.fade` and on `.modal.fade .modal-dialog` under this query but does NOT
   reset the transform, so these scoped rules force `transform: none` on both
   the hidden and the shown state — the pilot dialog is never left at
   scale(.96) or translated. */
@media (prefers-reduced-motion: reduce) {
  .modal.fade:has(.modal-dialog.bs-modal-pilot) {
    transition: none;
  }
  .modal.fade .modal-dialog.bs-modal-pilot,
  .modal.show .modal-dialog.bs-modal-pilot {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Layer-A pilot backdrop (C4-S12)
   -------------------------------------------------------------------------- */
/* `_home_modals_bs(...)` sets `backdrop="static"` (outside click no longer
   dismisses; the dimmed backdrop stays) and
   `backdrop_class_name="bs-modal-pilot__backdrop"` on the seven Layer-A pilot
   modals. dbc/React-Bootstrap render that class directly on the
   `.modal-backdrop` div, so this rule is Layer-A-only — no `:has()`, no sibling
   selector, no JS. Layer-B backdrops never carry `.bs-modal-pilot__backdrop`
   and keep the Bootstrap default.

   Bootstrap dims with `background-color: var(--bs-backdrop-bg /* #000 */)` at
   element `opacity: var(--bs-backdrop-opacity /* 0.5 */)` (0 while `.fade`,
   0.5 while `.show`). The Beta Sigma Design System overlay token
   `--bs-color-overlay` (DS §10.2 "Overlay | Modal | navy sobre color-overlay")
   is an rgba value meant to be rendered at its own alpha — dark
   `rgba(6,11,24,.72)`, light `rgba(15,34,72,.5)`. Multiplying it by Bootstrap's
   0.5 element-opacity would halve the intended dimming, so this rule also
   scopes `--bs-backdrop-opacity: 1` to the pilot backdrop: Bootstrap's
   `.fade -> opacity 0`, `.show -> opacity var(--bs-backdrop-opacity) = 1`
   mechanism is preserved (the fade still runs 0 -> 1), and the token's own
   alpha is what actually dims. Specificity 0,2,0 beats the Bootstrap
   `.modal-backdrop` 0,1,0 — no `!important`. No backdrop-filter, no z-index,
   no geometry. */
.modal-backdrop.bs-modal-pilot__backdrop {
  background-color: var(--bs-color-overlay);
  --bs-backdrop-opacity: 1;
  /* synchronise the backdrop dim with the C4-S10 modal scale/fade (220ms
     ease-out) so they read as one entrance; scoped to the pilot backdrop
     only — Bootstrap's shared `.fade { transition: opacity .15s linear }` is
     left global/unchanged. */
  transition: opacity var(--bs-motion-normal) var(--bs-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.bs-modal-pilot__backdrop {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Layer-A pilot mobile close-control + modal-plans padding fix (C4-S14)
   -------------------------------------------------------------------------- */
/* C4-S13 integration audit finding F-1: on mobile the pre-existing legacy
   id-scoped rules `#modal-1 #close-1` (assets/z_modal1_fix.css),
   `#modal-2 #close-2` (assets/z_modal2_fix.css) and `#modal-plans #close-plans`
   (assets/z_plans_modal_fix.css) — specificity (2,0,0), every declaration
   `!important` — outrank the C4-S4 pilot close-control rules
   `.bs-modal-pilot .bs-modal-pilot__close` (0,2,0). With the Child 4 flag ON
   the close control has moved into the shared flex header, but those legacy
   rules still force `position: absolute; top/right; width: auto;
   max-width: fit-content; padding: 3px 10px; font-size: 11px` on it, pulling
   it out of header flow and shrinking it below the frozen >=44x44px mobile
   target (FROZEN_MIGRATION_PLAN.md §16.2 #3 / §16.7).

   modal-3 / modal-4 / modal-5 / modal-admin have NO id-scoped close rule, so
   the C4-S4 pilot rules already win there — they are deliberately not listed
   below.

   The legacy stylesheets are NOT edited. Instead the pilot close control is
   re-selected here as `#modal-N #close-N.bs-modal-pilot__close` — specificity
   (2,1,0), which beats the legacy (2,0,0). Because every legacy declaration is
   `!important`, each pilot property that must defeat a legacy `!important`
   declaration also carries `!important` (position, top, right, width,
   min-width, max-width, padding, font-size); the remaining geometry
   (height / min-height) is not contested by the legacy rule and is restated
   without `!important` only so this block asserts the full frozen close-control
   geometry in one place. The C4-S4 visual treatment (transparent background,
   DS border, `--bs-color-text-secondary`, hover / active / focus-visible,
   `×` glyph + `.visually-hidden` label, font-family / weight / line-height /
   cursor / transition) is untouched — those live on the lower-specificity
   `.bs-modal-pilot .bs-modal-pilot__close` rules and are not overridden here.
   No margin, no transform. */
@media (max-width: 768px) {
  #modal-1 #close-1.bs-modal-pilot__close,
  #modal-2 #close-2.bs-modal-pilot__close,
  #modal-plans #close-plans.bs-modal-pilot__close {
    /* undo the legacy absolute corner-pin — back into shared-header flex flow */
    position: static !important;
    top: auto !important;
    right: auto !important;
    /* restore the owner-approved >=44x44px mobile interactive target */
    width: 44px !important;
    min-width: 44px !important;
    max-width: none !important;
    height: 44px;
    min-height: 44px;
    /* undo legacy `padding: 3px 10px` / `font-size: 11px` */
    padding: 0 !important;
    font-size: 20px !important;
  }

  /* F-3: `#modal-plans .modal-body { padding-top: 46px !important }`
     (assets/z_plans_modal_fix.css, specificity 1,1,0) reserved space for the
     OLD absolutely-positioned close-plans button, which C4-S5 moved into the
     shared header. In pilot mode that reservation is orphaned dead space at
     the top of the scroll region. Neutralise ONLY `padding-top`, pilot-scoped
     (`#modal-plans .modal-dialog.bs-modal-pilot .modal-body` = 1,2,0, beats the
     legacy 1,1,0; `!important` needed to defeat the legacy `!important`).
     `padding-bottom` is deliberately NOT set here — the C4-S9 mobile
     safe-area rule owns it and must stay intact. */
  #modal-plans .modal-dialog.bs-modal-pilot .modal-body {
    padding-top: 0 !important;
  }
}