/* ============================================================================
   MEMBERSHIP FLOW BUTTONS -- the phone size of the two exits that every page of
   the membership application ends with. Leo B. 09/17/2026.

   WHAT WAS WRONG. At 320px the Back / Next pair on
   Views\Membership\TempMembershipApplication.cshtml drew about 245px wide and
   50px tall, offset right of centre, with the two buttons at different widths
   from each other. Four rules composed that and NONE of them had a phone band:

       Css\TempStyleSheet.css:471   .button-online-PMES
           height:50px; line-height:48px; padding:0 45px -- 90px of fixed
           horizontal padding at every viewport, phone included.
       Content\bootstrap.min.css    .btn { white-space: nowrap }
           never restated, so BACK TO HOME PAGE cannot wrap and the width is
           forced to the whole label plus that 90px.
       the same rule as the first   letter-spacing: 2px
           roughly 34px of pure tracking on a 17-character uppercase label.
       the same rule as the first   margin-left: 15px
           gutter for the side-by-side desktop pair. Stacked inside a centred
           wrapper it is just an offset, and it is the ragged right shift the
           defect report showed.

   TempStyleSheet.css does carry a phone band -- it sizes .detail-container,
   .paragraph-container, .panel-container, .captcha-container-b and .Online-PMES
   at 767.99 -- and the buttons were simply never added to it.

   A HALF-FIX ALREADY EXISTED, AND IT MADE THE FLOW INCONSISTENT BY ELEMENT KIND.
   Css\responsive.css:562, inside @media (max-width: 767px):

       a.button { font-size:11px; height:40px; line-height:40px; padding:0 18px }

   It matches ANCHORS only. Approved, Assessment, Deposited, Pending and
   Disapproved render their exit as <a class="button btn button-online-PMES"> and
   were shrunk by it; TempMembershipApplication, TempPMES, TempAccepted,
   TempPayment and TempUpload render <input> or <button> and got nothing at all.
   The same label came out two different sizes on consecutive pages of one flow.
   That rule is also 40px -- under the 44px touch minimum this portal adopted on
   09/17/2026 -- and 767px is not one of the four agreed breakpoints. Neither is
   reported, because responsive.css is on Tier 1's legacy-stylesheet list.

   It is NOT edited. responsive.css is the template's own sheet and a.button also
   reaches pages outside this flow. The rules below out-rank it instead.

   WHY A NEW FILE, rather than any of the four obvious homes:

       Css\TempStyleSheet.css      legacy-exempt, so nothing written there is
                                   checked by the 44px or breakpoint guards -- and
                                   a bare .button-online-PMES at (0,1,0) LOSES to
                                   a.button at (0,1,1), silently, on the five
                                   anchor pages.
       Css\portal-forms.css        says in its own header that it only spaces the
                                   buttons and touches neither side's styling.
       Css\coop-theme-buttons.css  colour, and a byte-identical twin of the
                                   AdminPortal copy -- geometry there would drag
                                   the back office in.
       Css\responsive-safety.css   the same twin problem, which is the whole
                                   reason Css\responsive-compat.css exists.

   This file follows responsive-compat.css: a member-only mobile override in its
   own file with the reasoning in the header. It is NOT on the legacy list, so the
   44px touch-target guard, the breakpoint vocabulary, the same-pixel band check
   and the flexbox-gap ban all cover it from the day it was written.

   SPECIFICITY. Every selector carries :root -- the idiom Css\coop-theme-buttons.css
   explains at length. :root .button-online-PMES is (0,2,0), which clears both
   a.button (0,1,1) and body-linked TempStyleSheet.css (0,1,0) without depending on
   load order. 74 views in this tree link a stylesheet from the BODY, so "this file
   is linked last" is not a fact anything here may rest on.

   The .active pair is listed separately and that is not redundancy.
   Css\style.css:1107 gives .button.active margin-right:15px at (0,2,0), and
   Views\Membership\DataPrivacy.cshtml links style.css from the BODY. A bare
   :root .button would tie with it on that page and lose on order, keeping a right
   margin it must not have. (0,3,0) settles it everywhere.

   767.98 AND NOT 767.99. The containers these buttons sit inside flip at 767.99 in
   TempStyleSheet.css, so the two edges differ by 0.01px and a viewport at 767.985
   would draw desktop buttons in a phone-width pane. 767.98 is the agreed number and
   the guard enforces it; the seam is unreachable in practice, and normalising
   TempStyleSheet.css as a whole is its own change, already listed in
   docs\responsive-inventory.md.

   NO FLEXBOX gap ANYWHERE. Safari shipped it in 14.1 desktop / 14.5 on iOS and this
   portal's floor is iOS 12, so the spacing below is margin.

   DESKTOP IS UNTOUCHED AT EVERY WIDTH. Everything is inside the phone band, so
   768px and up renders exactly what it rendered before this file existed. That is
   the standing constraint on this work, recorded in responsive-compat.css, not a
   coincidence.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* THE TWO FLOW EXITS, full width and stacked.

       HEIGHT AND LINE-HEIGHT BOTH HAVE TO GO, not one of them. The moment
       white-space:normal lets a label wrap, a fixed 50px pill with a two-line
       label spills its text outside its own rounded border -- so dropping nowrap
       on its own looks worse than the oversized button did. height:auto plus
       min-height plus a unitless line-height is the trio that moves together.

       min-height:48px, not 44. 44 is the floor and a floor is not a target; 48px
       leaves a wrapped label room without the pill growing unevenly against its
       neighbour, and it is what the one existing 44px note in this tree
       (Css\loan-result.css) settled on for the same reason.

       margin-left:0 is the fix for the off-centre stack, and margin-right:0 is
       what the .active selectors above are here for.

       box-sizing is restated rather than inherited. Both Bootstraps on this layout
       set it globally, but width:100% beside 16px of padding is only safe while it
       is border-box, and it is the one declaration here that would fail invisibly
       if a later sheet ever reset it.

       font-size:16px, AND 16 IS THE ONLY VALUE THAT WORKS. Measured at 320px, this
       one class rendered at THREE different sizes depending on the element it was
       written on:

           <input>   16px   Css\responsive-safety.css raises every input at phone
                            width so iOS does not zoom the page on focus. That
                            selector is (0,2,1) and beats everything here.
           <button>  13px   .button / .button-online-PMES, nothing else matching.
           <a>       11px   Css\responsive.css:562 a.button, the legacy half-fix.

       All three are live in this flow -- TempAccepted stacks an <input> Back above
       a <button> Next, and Approved's only exit is an <a>. It never looked like a
       defect while the buttons were also different widths and sat side by side. Now
       that they are the same shape, the type size is the ONLY thing separating two
       adjacent controls, and a 16px label above a 13px one reads as a mistake.

       It cannot be equalised downwards. Anything below 16 would have to out-rank
       responsive-safety.css to reach the <input>, and out-ranking it is exactly how
       the iOS zoom trap it prevents comes back. So the value is its value, and the
       other two rise to meet it. */
    :root .button,
    :root .button.active,
    :root .button-online-PMES,
    :root .button-online-PMES.active {
        display: block;
        width: 100%;
        box-sizing: border-box;

        height: auto;
        min-height: 48px;
        line-height: 1.35;
        padding: 13px 16px;

        white-space: normal;
        font-size: 16px;
        letter-spacing: 1px;

        margin-left: 0;
        margin-right: 0;
        margin-bottom: 12px;
    }
}