/* ============================================================================
   MySubShare — Responsive fix (v13.9.2)
   Loaded last on portal pages. Undoes the layout bugs visible on phones
   and laptops: 100vw full-bleed clipping, a 640px desktop lock, a
   nowrap nav carousel that hides Wallet / Referrals, and banners that
   sit in grid columns beside each other instead of stacking.
   ============================================================================ */

html.ms-sv,
body.ms-sv {
  overflow-x: hidden;
  max-width: 100%;
}

body.ms-sv #totp-subscription-portal,
body.ms-sv .totp-subscription-portal {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow-x: visible !important;
}

/* The inner shell was locked at 640px at every breakpoint. */
body.ms-sv .totp-subscription-portal {
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
}

/* --------------------------------------------------------------------------
   Header — always a stacked banner, never a row that clips "Manage…"
   -------------------------------------------------------------------------- */
body.ms-sv .portal-header,
#totp-subscription-portal .portal-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
  box-sizing: border-box !important;
}
body.ms-sv .portal-header h2,
body.ms-sv .portal-header p,
#totp-subscription-portal .portal-header h2,
#totp-subscription-portal .portal-header p {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: center !important;
  margin-inline: 0 !important;
}
body.ms-sv .portal-header-logo,
#totp-subscription-portal .portal-header-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto 12px !important;
  text-align: center !important;
}
body.ms-sv .portal-header-logo img,
body.ms-sv .portal-header-logo img.ms-brand-logo,
#totp-subscription-portal .portal-header-logo img,
#totp-subscription-portal .ms-brand-logo {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  height: 48px !important;
  width: auto !important;
  max-width: min(180px, 56vw) !important;
  object-fit: contain !important;
  object-position: center center !important;
  float: none !important;
}

/* --------------------------------------------------------------------------
   Top nav — wrap on every screen. A horizontal carousel plus
   overflow-x:hidden on the parent is what clipped "Wallet".
   -------------------------------------------------------------------------- */
body.ms-sv .portal-navigation,
#totp-subscription-portal .portal-navigation {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.ms-sv .portal-navigation .nav-btn,
#totp-subscription-portal .nav-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  font-size: 13px !important;
  padding: 11px 10px !important;
}
body.ms-sv .portal-navigation .nav-btn.logout-btn,
#totp-subscription-portal .nav-btn.logout-btn {
  grid-column: 1 / -1 !important;
}

@media (min-width: 760px) {
  body.ms-sv .portal-navigation,
  #totp-subscription-portal .portal-navigation {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  body.ms-sv .portal-navigation .nav-btn,
  #totp-subscription-portal .nav-btn {
    width: auto !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }
}

/* --------------------------------------------------------------------------
   WhatsApp + Anike banners — full width, text wraps, no side-by-side
   -------------------------------------------------------------------------- */
body.ms-sv .whatsapp-channel-banner,
body.ms-sv .whatsapp-channel-banner-inline,
body.ms-sv .anike-help-banner,
#totp-subscription-portal .whatsapp-channel-banner,
#totp-subscription-portal .whatsapp-channel-banner-inline,
#totp-subscription-portal .anike-help-banner {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
}
body.ms-sv .whatsapp-channel-btn,
body.ms-sv .whatsapp-channel-btn-small {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
body.ms-sv .wa-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
}

/* Hide the duplicate header WhatsApp strip once the inline one is on screen */
body.ms-sv .totp-subscription-portal:has(.whatsapp-channel-banner-inline) > .whatsapp-channel-banner,
#totp-subscription-portal .totp-subscription-portal:has(.whatsapp-channel-banner-inline) > .whatsapp-channel-banner {
  display: none !important;
}

body.ms-sv .anike-help-banner {
  flex-wrap: wrap !important;
  align-items: center !important;
  position: relative !important;
}
body.ms-sv .anike-banner-text {
  flex: 1 1 160px !important;
  min-width: 0 !important;
}
body.ms-sv .anike-banner-cta {
  flex: 1 1 auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   Subscriptions view — stack chrome (heading, wallet, banners) and only
   let seat cards share a row on laptop+.
   -------------------------------------------------------------------------- */
body.ms-sv .subscriptions-list,
#totp-subscription-portal .subscriptions-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
body.ms-sv .subscriptions-list > *,
#totp-subscription-portal .subscriptions-list > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-column: auto !important;
}

body.ms-sv .wallet-balance-widget,
#totp-subscription-portal .wallet-balance-widget {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.ms-sv .wbw-amount {
  font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
}

@media (min-width: 760px) {
  body.ms-sv .wallet-balance-widget,
  #totp-subscription-portal .wallet-balance-widget {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "label cta" "amount cta";
    align-items: center !important;
  }
  body.ms-sv .wbw-label  { grid-area: label; }
  body.ms-sv .wbw-amount { grid-area: amount; }
  body.ms-sv .wbw-cta    { grid-area: cta; }
}

@media (min-width: 900px) {
  body.ms-sv .subscriptions-list,
  #totp-subscription-portal .subscriptions-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
  }
  body.ms-sv .subscriptions-list > :not(.ms-seat),
  #totp-subscription-portal .subscriptions-list > :not(.ms-seat) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

@media (min-width: 1280px) {
  body.ms-sv .totp-subscription-portal {
    max-width: 1240px !important;
  }
}

/* --------------------------------------------------------------------------
   Auth forms — never fight jQuery hide() with display:grid
   -------------------------------------------------------------------------- */
body.ms-sv .totp-subscription-portal.is-member .login-form,
body.ms-sv .totp-subscription-portal.is-member .forgot-form,
body.ms-sv .totp-subscription-portal.is-member .register-form,
#totp-subscription-portal .totp-subscription-portal.is-member .login-form,
#totp-subscription-portal .totp-subscription-portal.is-member .forgot-form,
#totp-subscription-portal .totp-subscription-portal.is-member .register-form {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Phone: room for the tab bar + floating WhatsApp / Anike
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  body.ms-sv .totp-subscription-portal {
    padding-inline: 14px !important;
    padding-bottom: 28px !important;
    max-width: 100% !important;
  }
  body.ms-sv #totp-subscription-portal .portal-content {
    padding-bottom: 108px !important;
  }

  /* Inline Anike card is redundant — the floating Ask Anike button already exists. */
  body.ms-sv .anike-help-banner,
  #totp-subscription-portal .anike-help-banner {
    display: none !important;
  }

  /* Keep Ask Anike above the tab bar, left side, so it does not cover content. */
  body.ms-sv #totp-chatbot-root,
  body.ms-sv #totp-chatbot-launcher {
    left: 12px !important;
    right: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 60 !important;
  }

  /* Hide every common floating WhatsApp bubble on portal pages.
     The green channel banner is already on the page. */
  body.ms-sv .totp-wa-float,
  body.ms-sv .totp-whatsapp-float,
  body.ms-sv .wa-float,
  body.ms-sv .wa-float-btn,
  body.ms-sv .whatsapp-float,
  body.ms-sv .floating-whatsapp,
  body.ms-sv #joinchat,
  body.ms-sv .joinchat,
  body.ms-sv [id*="whatsapp-float"],
  body.ms-sv a[href*="wa.me"][style*="position: fixed"],
  body.ms-sv a[href*="wa.me"].floating,
  body.ms-sv a[href*="whatsapp"][class*="float"] {
    display: none !important;
  }
}

/* Seat actions stay tappable and unclipped */
body.ms-sv .ms-seat-acts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}
@media (max-width: 460px) {
  body.ms-sv .ms-seat-acts {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Duplicate orange “Login Details / Request OTP / My Referrals / username”
   bar from unified-navigation.js. The portal already has its own nav and
   the phone tab bar, so this block is just a second header.
   -------------------------------------------------------------------------- */
body.ms-sv .totp-unified-nav {
  display: none !important;
}

/* Seat cards: overflow:hidden was slicing EXPIRED / ACTIVE and end dates */
body.ms-sv .ms-seat,
#totp-subscription-portal .ms-seat {
  overflow: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.ms-sv .ms-seat-top,
#totp-subscription-portal .ms-seat-top {
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 14px !important;
}
body.ms-sv .ms-chip,
#totp-subscription-portal .ms-chip {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  margin-left: auto;
}
body.ms-sv .ms-meter-row,
#totp-subscription-portal .ms-meter-row {
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
}
body.ms-sv .ms-meter-date,
#totp-subscription-portal .ms-meter-date {
  white-space: nowrap !important;
  flex: 0 0 auto;
}
body.ms-sv .sub-details,
body.ms-sv .sub-details * {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* ============================================================================
   v13.8.9 — SHARED PORTAL SHELL
   ----------------------------------------------------------------------------
   Every rule above this point targets .totp-subscription-portal, so the careful
   centring, gutter and tab-bar clearance built in v13.8.6 only ever applied to
   the Home page. The other four tabs each shipped their own wrapper with its own
   width and, in three cases, no horizontal padding at all:

     Home     .totp-subscription-portal  1120px   14px gutter
     Vault    .credentials-container     none     14px gutter
     Wallet   .kw-wallet                  940px   0  gutter
     Refer    .kr-wrap                    980px   0  gutter
     Profile  .ms-profile                 720px   4px gutter
     Account  .totp-my-account            980px   20px gutter

   So content sat flush against the glass on Wallet, Refer and Profile, and the
   content column jumped width on every tab change. One shell now governs all
   six: same gutter, same centring, same clearance under the tab bar. Widths
   collapse to two tiers because a settings form and a card grid genuinely want
   different measures — everything else is identical.
   ============================================================================ */

body.ms-sv{
  --ms-gutter:16px;
  --ms-shell:1120px;        /* card grids and data views */
  --ms-shell-form:760px;    /* forms — long lines are hard to scan */
  --ms-tabbar-clear:104px;  /* tab bar + the floating Ask Anike button */
}

body.ms-sv .totp-subscription-portal,
body.ms-sv .credentials-container,
body.ms-sv .kw-wallet,
body.ms-sv .kr-wrap{
  width:100% !important;
  max-width:var(--ms-shell) !important;
  margin-inline:auto !important;
  padding-inline:var(--ms-gutter) !important;
  box-sizing:border-box !important;
}

body.ms-sv .ms-profile,
body.ms-sv .totp-my-account{
  width:100% !important;
  max-width:var(--ms-shell-form) !important;
  margin-inline:auto !important;
  padding-inline:var(--ms-gutter) !important;
  box-sizing:border-box !important;
}

/* Nothing inside a shell may push past it — long account numbers and emails
   were the usual culprit, and an overflowing child re-introduces the sideways
   scroll the gutter is there to prevent. */
body.ms-sv .credentials-container > *,
body.ms-sv .kw-wallet > *,
body.ms-sv .kr-wrap > *,
body.ms-sv .ms-profile > *,
body.ms-sv .totp-my-account > *{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* --------------------------------------------------------------- Phones --- */
@media (max-width:820px){

  body.ms-sv{ --ms-gutter:14px; }

  body.ms-sv .totp-subscription-portal,
  body.ms-sv .credentials-container,
  body.ms-sv .kw-wallet,
  body.ms-sv .kr-wrap,
  body.ms-sv .ms-profile,
  body.ms-sv .totp-my-account{
    max-width:100% !important;
    padding-inline:var(--ms-gutter) !important;
  }

  /* Clearance for the fixed tab bar AND the Ask Anike bubble that floats above
     it. body already carries 74px; these wrappers set their own bottom padding
     (64px / 80px / 40px) which was short enough to leave the last card or the
     Sign out button sitting under one or the other. */
  body.ms-sv .totp-subscription-portal,
  body.ms-sv .credentials-container,
  body.ms-sv .kw-wallet,
  body.ms-sv .kr-wrap,
  body.ms-sv .ms-profile,
  body.ms-sv .totp-my-account{
    padding-bottom:calc(var(--ms-tabbar-clear) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The wallet card's own 30px inset on top of the shell gutter left very
     little room for the balance figure on a 360px screen. */
  body.ms-sv .kw-card{ padding:24px 20px 22px !important; }
  body.ms-sv .kw-panel{ padding:20px 16px !important; }
  body.ms-sv .ms-profile .ms-card{ padding:18px 16px !important; }
  body.ms-sv .ms-profile-head{ padding:18px 16px !important; }

  /* Four wallet actions across a phone gives ~70px per tile, which clips the
     labels. Two rows of two reads properly. */
  body.ms-sv .kw-actions{
    grid-template-columns:repeat(2,1fr) !important;
    gap:6px !important;
  }
}

@media (max-width:420px){
  body.ms-sv{ --ms-gutter:12px; }
  /* Profile's auto-fit grid has a 200px floor, so at 360px minus gutters it
     was still trying to sit two fields side by side. */
  body.ms-sv .ms-profile .ms-grid{ grid-template-columns:1fr !important; }
}

/* --------------------------------------------------------------------------
   v13.8.9 — de-duplicate clearance and gutters now the shell owns both.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  /* The shell already reserves room for the tab bar; the older 108px on
     .portal-content would stack on top of it and leave a dead half-screen
     of scroll under the last card on Home. */
  body.ms-sv #totp-subscription-portal .portal-content{
    padding-bottom:0 !important;
  }

  /* .ks-pay-wrap sits inside the shell, so its own 14px gutter doubled up
     and squeezed the bank details card. Let the shell provide the gutter. */
  body.ms-sv .ks-pay-wrap{
    padding-left:0 !important;
    padding-right:0 !important;
    max-width:100% !important;
  }
}

/* ============================================================================
   v13.9.0 — RESTORE THE VIEWPORT CLAMP, COLLAPSE THE DOUBLE SHELL
   ----------------------------------------------------------------------------
   The dashboard still ran off the right edge after v13.8.9 because the gutters
   were never the problem. Two things were wrong underneath them.

   1. There are TWO portal wrappers, not one. The shortcode emits
        <div id="totp-subscription-portal">
      and subscription-portal.js builds
        <div class="totp-subscription-portal">
      inside it. Both match the portal width and padding rules, so every gutter
      was being applied twice — measured at ~34px on a 440px screen once
      .portal-content's own padding was added on top.

   2. portal-theme.css deliberately clamped the outer div with
        max-inline-size: min(100%, 100vw)
      and subscription-portal.css clipped it with overflow-x:hidden. Both were
      guards against a theme container wider than the viewport — the comment in
      portal-theme.css describes this exact symptom. v13.8.6 then set
        max-width: 100% !important;  overflow-x: visible !important;
      on the same element, and !important beat both. With the clamp gone the
      portal sized to a too-wide parent, and with the clip gone nothing stopped
      it leaving the screen.

   So: the outer div becomes a bare pass-through that can never exceed the
   viewport, and the inner div becomes the one and only shell.
   ============================================================================ */

body.ms-sv #totp-subscription-portal{
  display:block !important;
  width:100% !important;
  /* min() is the point of this rule — 100% alone follows a too-wide parent.
     Safe at every width and the only part of the old block that was. */
  max-width:min(100%, 100vw) !important;
  box-sizing:border-box !important;
}

/* v13.9.1: stripping the outer div's padding, background and radius, and
   clipping it, is only wanted where the two nested wrappers actually double up
   — phones. Doing it on desktop flattened a card the theme and portal-theme.css
   had deliberately styled, which is half of "PC is looking worse". */
@media (max-width:820px){
  body.ms-sv #totp-subscription-portal{
    margin-inline:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    /* Safe here because border-radius is forced to 0 on the same element, so
       the clip box is a plain rectangle. Never apply clip to an element whose
       corners are rounded by someone else. */
    overflow-x:clip !important;
  }
}

/* The inner div is the shell. It alone carries the measure and the gutter. */
body.ms-sv .totp-subscription-portal{
  width:100% !important;
  max-width:min(var(--ms-shell), 100%) !important;
  margin-inline:auto !important;
  padding-inline:var(--ms-gutter) !important;
  box-sizing:border-box !important;
}

/* .portal-content sits inside the shell, so its own 16-30px padding was the
   third helping. The shell provides the gutter; this provides the rhythm. */
@media (max-width:820px){
body.ms-sv #totp-subscription-portal .portal-content{
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:100% !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
}

/* v13.9.1 — this block caused the desktop regression; see the note below.
   A theme wrapper wider than the screen still needs clamping on phones, but
   the previous version did three things it should not have:

     overflow-x: clip    Made every ancestor clip its children to its own
                         rounded box. Any theme that rounds its content wrapper
                         suddenly cropped the page to that shape — widest in the
                         middle, domed at the top, arced at the bottom corners.
                         That is exactly the orange dome over the header and the
                         curved bite out of the first subscription card.
     .wp-site-blocks     In block themes that wrapper contains the header AND
                         the footer, so clipping it took the footer menu with it.
     unscoped            It applied at every width. Phones needed it; desktop,
                         where theme wrappers are widest and most decorated, did
                         not — hence "mobile is fine but PC is looking worse".

   Clamping the width is the part that was actually needed, so that is all this
   does now, and only where the overflow was reported. Nothing clips, nothing
   touches site chrome, and desktop keeps the theme's own layout. */
@media (max-width:820px){
  body.ms-sv main,
  body.ms-sv article,
  body.ms-sv .site-main,
  body.ms-sv .content-area,
  body.ms-sv .entry-content,
  body.ms-sv .page-content,
  body.ms-sv .wp-block-post-content{
    max-width:min(100%, 100vw) !important;
    margin-inline:auto !important;
    padding-inline:0 !important;
    box-sizing:border-box !important;
  }
}

/* Nothing in the portal may set its own width in a way that beats the clamp. */
body.ms-sv #totp-subscription-portal .whatsapp-channel-banner,
body.ms-sv #totp-subscription-portal .whatsapp-channel-banner-inline,
body.ms-sv #totp-subscription-portal .portal-header,
body.ms-sv #totp-subscription-portal .portal-navigation,
body.ms-sv #totp-subscription-portal .portal-messages,
body.ms-sv #totp-subscription-portal .ms-seat{
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* ============================================================================
   v13.9.2 — LONG DESCRIPTIONS MUST WRAP
   ----------------------------------------------------------------------------
   Two places showed one long unwrapped line clipped at the card edge: the
   Plan Details box on Add New Subscription, and the password / OTP notices on
   a dashboard card. Measured on the reported screenshot, the notice text runs
   to exactly the card's right edge and stops — clipped, not wrapped.

   .sub-details already carried `overflow-wrap: anywhere`, which did nothing,
   because overflow-wrap only chooses WHERE to break a line that is allowed to
   break at all. `white-space: nowrap` or `pre` forbids the break outright and
   wins regardless. So the wrapping mode itself has to be set, not just the
   break opportunity.

   No plugin rule sets nowrap on an ancestor of these elements, so it is
   arriving either from the active theme or, for Plan Details, from the plan
   description itself — that field is admin-entered HTML stored in the database
   and rendered raw, so it can carry its own inline styles and its own <table>
   or <nobr>. Since neither source can be corrected from a stylesheet, this
   sets the wrapping mode explicitly and with enough weight to beat both an
   inherited value and an inline style attribute.
   ============================================================================ */

body.ms-sv .sub-details,
body.ms-sv .sub-details *,
body.ms-sv .desc-body,
body.ms-sv .desc-body *,
body.ms-sv .plan-description-box,
body.ms-sv .plan-description-box *,
body.ms-sv .expired-note,
body.ms-sv .cancelled-note,
body.ms-sv .paused-note,
#totp-subscription-portal .sub-details,
#totp-subscription-portal .sub-details *,
#totp-subscription-portal .desc-body,
#totp-subscription-portal .desc-body *{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  max-width:100% !important;
}

/* A description pasted from a document often arrives wrapped in a table, which
   soft-vault.css deliberately sets to nowrap so wide data tables can scroll.
   That is right for a data table and wrong for a paragraph, so inside a plan
   description the table is allowed to behave like flowing text. */
body.ms-sv .desc-body table,
body.ms-sv .desc-body td,
body.ms-sv .desc-body th,
body.ms-sv .plan-description-box table,
body.ms-sv .plan-description-box td,
body.ms-sv .plan-description-box th{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow-x:visible !important;
}

/* <nobr> and the deprecated nowrap attribute, both of which turn up in pasted
   markup and neither of which any stylesheet above accounts for. */
body.ms-sv .desc-body nobr,
body.ms-sv .sub-details nobr,
body.ms-sv [nowrap]{
  white-space:normal !important;
}

/* ============================================================================
   v13.9.4 — WRAP TEXT EVERYWHERE, THEN PUT BACK THE FEW THAT MUST NOT
   ----------------------------------------------------------------------------
   v13.9.2 fixed this per element — .sub-details, .desc-body — and the next
   screen with long text broke the same way, this time the payment success
   message. That is three different elements on three different pages, none of
   which has a nowrap rule anywhere in the plugin's nine stylesheets. I checked.

   white-space inherits, so a single declaration on an ancestor outside the
   plugin — the theme's body or content wrapper — explains all three at once and
   will keep producing new cases as screens are added. Chasing them one at a
   time is not a fix, so this resets the wrapping mode across the portal and
   then re-asserts nowrap on the handful of elements that genuinely need it.

   Specificity is deliberate: the reset is (0,1,1) and every restore is (0,2,0),
   so each restore outranks the reset without needing !important to fight it.
   ============================================================================ */

body.ms-sv *{
  white-space:normal !important;
}

/* Restores — things that must stay on one line or they look broken.
   Navigation and chips: a wrapped pill is taller than its row and breaks the
   grid; these are all short by design and cannot overflow a phone. */
body.ms-sv .nav-btn,
body.ms-sv .ms-chip,
body.ms-sv .status-badge,
body.ms-sv .subscribed-badge,
body.ms-sv .ms-act,
body.ms-sv .ms-meter-date,
body.ms-sv .ms-tab-lbl,
body.ms-sv .anike-banner-cta,
body.ms-sv .ks-method-tab,
body.ms-sv .ks-bank-pill,
body.ms-sv .kw-nav-link,
body.ms-sv .kw-ref-btn,
body.ms-sv .kw-txn-date,
body.ms-sv .kw-txn-amt,
body.ms-sv .kr-nav-link,
body.ms-sv .kr-copy-btn,
body.ms-sv .kr-share-btn,
body.ms-sv .ref-copy-btn,
body.ms-sv .ref-lb-refs,
body.ms-sv .ref-lb-earn,
body.ms-sv .wbw-cta{
  white-space:nowrap !important;
}

/* Wide data tables still scroll sideways rather than crushing their columns,
   which is what soft-vault.css intended — but only real tables, never a
   paragraph that happened to be pasted inside one (see v13.9.2). */
body.ms-sv .kw-table td,
body.ms-sv .kw-table th,
body.ms-sv .ref-table td,
body.ms-sv .ref-table th{
  white-space:nowrap !important;
}

/* ============================================================================
   v13.9.5 — MAKE THE PHONE LAYOUT INDEPENDENT OF THE THEME'S CONTENT WIDTH
   ----------------------------------------------------------------------------
   Measured on the reported screenshot: viewport 440px, content column 330px
   wide sitting at an 11px left gutter with 99px of dead space on its right.
   Not centred, and narrower than the screen.

   The shell already sets margin-inline:auto, so it would centre correctly
   inside a full-width parent. It is not centred, which means the parent is not
   full width — an ancestor is about 341px and left-aligned, and the shell is
   faithfully filling it. v13.9.1 removed those ancestors' horizontal padding
   but never released their WIDTH, so a theme content measure (a
   `max-width: 20rem`-style constraint, a constrained block layout, a narrow
   wrapper) still governs the whole portal.

   On a phone the portal is the page, so on portal pages only, and only below
   the tab-bar breakpoint, the content wrappers give up their measure. Every
   ancestor then resolves to the body width, the shell fills the screen, and its
   own gutter does the centring. Desktop is untouched, so the theme keeps its
   layout everywhere it matters.
   ============================================================================ */

@media (max-width:820px){
  body.ms-sv main,
  body.ms-sv article,
  body.ms-sv .site-main,
  body.ms-sv .content-area,
  body.ms-sv .entry-content,
  body.ms-sv .page-content,
  body.ms-sv .wp-block-post-content,
  body.ms-sv .wp-block-group,
  body.ms-sv .wp-block-group__inner-container{
    width:auto !important;        /* block default: fill the parent */
    max-width:none !important;    /* release the theme's content measure */
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    float:none !important;
    box-sizing:border-box !important;
  }

  /* The portal's own two wrappers then span the screen, and the inner shell's
     gutter is the only horizontal inset — so the column is centred by
     construction rather than by inheriting someone else's centring. */
  body.ms-sv #totp-subscription-portal{
    width:auto !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.ms-sv .totp-subscription-portal{
    width:auto !important;
    max-width:none !important;
    margin-inline:auto !important;
    padding-inline:var(--ms-gutter) !important;
  }
}

/* ============================================================================
   v14.1.0 — RELEASE THE ANCESTOR BY SHAPE, NOT BY NAME
   ----------------------------------------------------------------------------
   The block above lists the wrappers a theme is *likely* to constrain with:
   main, article, .entry-content, .wp-block-group and so on. That list has been
   extended four times, and the dashboard is still landing at roughly 338px
   wide against a 440px viewport with the dead space all on the right — the
   same measurement v13.9.5 was written against. Guessing a fifth name is not a
   strategy; whatever is holding the width on this theme is not in the list and
   there is no reason to think the next guess would be.

   So stop naming them. `:has()` selects an element by what it contains, which
   means "every ancestor of the portal" can be written directly, and the rule
   keeps working if the theme changes or the page is rebuilt in a different
   block structure.

   Two deliberate exclusions, both recorded from a previous regression: the
   site-level shells (.wp-site-blocks, #page, .site) and the header/footer
   landmarks are ancestors of the portal too, and releasing THEIR padding drags
   the site header and footer out of layout. They keep their measure; only the
   wrappers between them and the portal give theirs up.

   Phone only, portal pages only. Desktop is untouched.
   ============================================================================ */

@media (max-width:820px){
  body.ms-sv *:has(#totp-subscription-portal),
  body.ms-sv *:has(.totp-credentials-page),
  body.ms-sv *:has(.kw-wallet),
  body.ms-sv *:has(.kr-wrap){
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    float:none !important;
    box-sizing:border-box !important;
  }

  /* The structural shells keep their layout — pulling these apart is what
     broke the header and footer the last time this was attempted. */
  body.ms-sv .wp-site-blocks:has(#totp-subscription-portal),
  body.ms-sv #page:has(#totp-subscription-portal),
  body.ms-sv .site:has(#totp-subscription-portal),
  body.ms-sv header:has(#totp-subscription-portal),
  body.ms-sv footer:has(#totp-subscription-portal),
  body.ms-sv .wp-site-blocks:has(.kw-wallet),
  body.ms-sv #page:has(.kw-wallet),
  body.ms-sv .site:has(.kw-wallet),
  body.ms-sv .wp-site-blocks:has(.kr-wrap),
  body.ms-sv #page:has(.kr-wrap),
  body.ms-sv .site:has(.kr-wrap),
  body.ms-sv .wp-site-blocks:has(.totp-credentials-page),
  body.ms-sv #page:has(.totp-credentials-page),
  body.ms-sv .site:has(.totp-credentials-page){
    width:auto !important;
    max-width:none !important;
    padding-left:revert !important;
    padding-right:revert !important;
  }

  /* Nothing above may leave the page wider than the screen: a single
     overflowing descendant is enough to make everything look off-centre,
     because the viewport then scrolls sideways. Clip is NOT used here — on a
     rounded theme wrapper it clips to the corner radius and eats content,
     which is the v13.8.x regression. */
  body.ms-sv{
    overflow-x:hidden !important;
    max-width:100vw !important;
  }
}

/* ============================================================================
   v14.7.0 — CENTRING, SETTLED BY SPECIFICITY RATHER THAN BY ORDER

   The portal is rendered as <div id="totp-subscription-portal"> with the
   themed shell inside it. The block at the top of this file lists BOTH the id
   and the class in one selector and zeroes their horizontal margins; the
   centring rule that follows it only names the class. For the class that is a
   later, equal-specificity declaration and centring wins — but for anything
   carrying the id, the id selector is more specific and margin-left:0 wins
   outright, pinning the column to the left however wide the screen is.

   Guessing at ancestor names was abandoned in v14.1.0 for the same reason this
   keeps recurring: the fix has to be unconditional. This block names the id and
   the class together at the end of the file, so it is both the most specific
   and the last word.
   ============================================================================ */

body.ms-sv #totp-subscription-portal,
body.ms-sv .totp-subscription-portal,
body.ms-sv #totp-subscription-portal > .totp-subscription-portal {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  float: none !important;
  inset-inline: auto !important;
}

/* The shell keeps its measure; the outer host stays full width so the shell
   has room to centre inside it. */
body.ms-sv #totp-subscription-portal {
  width: 100% !important;
  max-width: 100% !important;
}

body.ms-sv .totp-subscription-portal {
  max-width: 1120px !important;
  padding-inline: 16px !important;
}

/* Anything the theme centres with text-align must not drag the column with it,
   and a stray transform on an ancestor would re-offset it. */
body.ms-sv #totp-subscription-portal,
body.ms-sv .totp-subscription-portal {
  transform: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}