/* =============================================================
   OPENING SCREENS LOCK: frozen geometry for the gate and the welcome
   Spec: docs/OPENING-SCREENS-LOCK.md (v1.1, owner-approved)
   =============================================================

   Loaded LAST, after every tenant stylesheet, so it is the final word on the
   two opening screens. Tenant input arrives only as the custom properties in
   <style id="aios-opening-tokens">, never as tenant rules.

   Geometry note. The bulk of the gate and welcome geometry already lives in
   engine/app/styles.css and the plate.js chrome layer, and that combination is
   exactly what produces the approved reference reference. Restating those hundreds
   of constants here would create a second source of truth that could silently
   drift from the first, so this file deliberately does NOT redeclare them. What
   it does instead:

     1. Removes the ONE source of geometric non-determinism (the greeting).
     2. Bars the client chrome the spec forbids on both screens.
     3. Maps the tenant's colour, font and variant tokens onto the frozen frame.

   Per-tenant overrides of the locked selectors were removed from the tenant
   shells in the same change, so there is nothing left to out-specify. */

:root {
  --tenant-logo-scale: 1;
}

/* ---- 1. The greeting: the only element whose content could move the page ----

   Measured on the live reference reference, unscaled, at 1440x900:

     greeting 2 lines  ->  76.78px  ->  #welcomeFit natural 607px  -> fit scale 0.995058
     greeting 3 lines  -> 115.17px  ->  #welcomeFit natural 646px  -> fit scale 0.934985

   fitWelcomeScreen() in init.js scales the whole welcome block by
   avail/natural, so a greeting that wrapped to a third line shrank the orb, the
   starter grid and all six cards. The greeting is drawn at random from the
   tenant's persona pool, so an unchanged build rendered two different
   geometries: a 60px swing on grid width and 31px on orb position.

   The owner froze the two-line state. This box therefore has a FIXED height of
   exactly two lines, so #welcomeFit's natural height is always 607px and the
   fit scale is always 0.995058 at the reference viewport, whichever greeting is
   drawn. The greeting pools and the random selection are untouched.

   Width is 1120px, matching the composer, because at 820px six greetings across
   three tenants wrapped to a third line. Every greeting in all twelve tenant
   pools was measured at 1120px and all sixty-nine fit two lines, so the clamp
   below is a geometric guarantee that never truncates live copy. */
#welcomeFit #welcomeHeader,
#welcomeFit .aios-welcome,
#welcomeFit .discovery-welcome {
  width: 1120px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  height: 76.8px;          /* 2 lines x 38.4px line-height */
  min-height: 76.8px;
  max-height: 76.8px;
  font-size: 30px;
  line-height: 38.4px;
  /* Weight is a TENANT value, not geometry. Forcing 700 here flattened each
     tenant's own typography: gallea and allmax set 400 on the greeting and the
     starter titles, choice, metalworks and tompkins set 800. At 400 against 700
     a display face like elza reads as a completely different typeface, which is
     what made the fleet look standardized. Weight does not affect the locked
     line-height, so leaving it to the tenant is geometry safe. */
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-wrap: balance;
}

/* ---- 1b. The freeze is a DESKTOP freeze, and says so below 768px ----

   What the block above buys is a deterministic fit scale: fitWelcomeScreen()
   scales #welcomeFit by avail/natural, so a greeting that wrapped to a third
   line moved the orb and the starter grid. Fixing the box to two lines at
   1120px removes that.

   fitWelcomeScreen() returns early below MOBILE_BREAKPOINT (init.js:52): on a
   phone the welcome block flows and scrolls natively and is never scaled. So on
   a phone the freeze buys NOTHING, and it costs the screen its greeting: a
   1120px box in a 390px viewport, with centred text, puts the words at x=576 or
   x=592 depending on the tenant's gutter, so 186px or more clear of the right
   edge. Measured on all five tenants in reports/f1-task7/, before: the greeting
   was off screen at 390 on every one of them, and on screen at 1440 on all of
   them, which is why only the phone reports carried it.

   Below 768px the box therefore flows: the tenant's copy sets the height and the
   column sets the width. The two-line clamp is dropped with it, because at
   phone type size the greeting legitimately runs to three lines and clamping it
   would truncate live brand copy, which is the one thing the note above promises
   never to do. Desktop geometry is untouched: this whole block is inside the
   phone media query and the reference viewport never enters it. */
@media (max-width: 767px) {
  #welcomeFit #welcomeHeader,
  #welcomeFit .aios-welcome,
  #welcomeFit .discovery-welcome {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    /* Type on the phone belongs to the mobile sheet, not to the desktop
       reference constants. This restates what the phone already renders (the
       plate.js phase 6 rule, which carries !important and therefore still
       governs where plate.js is loaded) so that dropping the 30px/38.4px
       constants cannot leave a tenant on desktop type at phone width. */
    font-size: clamp(16px, 4.4vw, 18px);
    line-height: 1.4;
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
  }
}

/* ---- 2. Client chrome is barred on both opening screens ----
   The gate is a standalone screen: no client header, no client footer, never
   in-flow inside the client site. The welcome carries the AiOS topbar and
   nothing else: "no client navbar, ever".

   Nine of the twelve tenants shipped a client <nav> into the AiOS screen. This
   rule is tenant-agnostic on purpose: it bars ANY nav that is not the shared
   topbar, so a tenant cannot reintroduce one under a new class name. The nav
   nodes are hidden rather than removed because plate.js reads .navbar
   .navbar-link to build the side panel and the mobile gateway. */
body nav:not(.aios-topbar):not(.side-panel-nav) {
  display: none !important;
}
body:not(.aios-active) [data-aios-site-footer] {
  display: none !important;
}

/* The topbar itself only ever shows inside AiOS, never over the gate. */
body:not(.aios-active) .aios-topbar { display: none !important; }

/* ---- 2b. The gate logo slot ----
   Spec: "centred, fixed-height box with max width; every logo fits regardless of
   aspect ratio."

   The slot was the only shrinkable flex item in the gate stack, so it collapsed
   to each logo's INTRINSIC height and dragged the whole column with it:
   tompkins' mark is 228x40 so its slot rendered 40px against the reference 42px,
   marycroft's rendered 23.22px, and allmax and gallea rendered 0. Every element
   below then shifted, which is why one small logo produced eleven geometry
   deltas. Frozen here so the mark's own dimensions can never move the gate. */
/* The gate block takes its NATURAL height instead of being sized to the centring
   container. It was being constrained to exactly the viewport minus its margins
   (898px in a 950px window), while its real content ran to 976px, so the
   attribution overflowed the box and #toggleScreen's overflow:hidden clipped it
   off the bottom edge. That is what read as the gate being pushed downward.
   With a natural height, fitGateScreen scales the block so it always fits and
   stays centred. */
#toggleScreen .toggle-screen {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  /* Symmetric vertical padding. The shell shipped 68px top against 36px bottom,
     so even though the BLOCK was centred, the CONTENT inside it sat low: the gap
     above the logo measured roughly twice the gap below the attribution. That
     asymmetry is what read as the gate being pushed toward the bottom. Equal
     padding puts the content on the optical centre. */
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

#toggleScreen .toggle-logo {
  /* The SLOT is a fixed box so the gate column never moves, whatever mark sits
     in it. The mark inside is sized by fitBrandLogos() in init.js, which
     normalizes optical area rather than height. */
  flex: 0 0 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
#toggleScreen .toggle-logo img,
#toggleScreen .toggle-logo svg {
  /* Deliberately no max-height/max-width here: those caps are what produced the
     three-to-one width spread between a compact mark and a long wordmark. The
     area normalizer sets an explicit width and height per mark instead. */
  object-fit: contain;
  /* The gate ground is light neutral. Several tenants ship a white-knockout
     filter for their dark client navbar and paint that same node into this
     slot, which rendered the brand mark invisible here. */
  filter: none !important;
}

/* Topbar mark: same treatment, smaller target, in a fixed slot so the 72px
   topbar height never moves. */
.aios-topbar .navbar-logo {
  height: 42px;
  display: inline-flex;
  align-items: center;
}
.aios-topbar .navbar-logo img,
.aios-topbar .navbar-logo svg {
  object-fit: contain;
}

/* Partner mark sitting beside the tenant wordmark in the topbar, where the lock
   relocates it from the retired client navbar. */
.aios-topbar-brand { gap: 14px; }
.aios-topbar-brand .navbar-ibm {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
  opacity: 0.92;
}

/* ---- 3. Tenant tokens onto the frozen frame ----
   deepAnchor paints the gate cards and the gate headline. It is always a deep
   brand colour: the v1.1 amendment bars high-saturation brand colours from card
   fill and reserves them for actions and accents. */
#toggleScreen .toggle-card {
  background: var(--lock-anchor, var(--aios-blue)) !important;
}
#toggleScreen .toggle-headline {
  color: var(--lock-anchor, var(--aios-blue)) !important;
}

/* accent drives the actions: send button, welcome icons and titles. */
.aios-dock .input-send,
#sendButton {
  background: var(--lock-accent, var(--aios-blue)) !important;
}
.aios-dock .input-mic,
#micButton {
  color: var(--lock-accent, var(--aios-blue)) !important;
}
/* Icons carry the accent. TEXT DOES NOT.
   Owner review: setting headline and card titles in the brand colour reads as
   overwhelming once it is the entirety of the copy, and the screen already
   carries the accent in the orb, the icon tiles, the mic and the send button.
   The welcome screen's text is therefore ink, not brand. The gate is unchanged:
   its headline stays on the deep anchor per the spec's soft-fixed list. */
#welcomeActions .welcome-action-icon {
  color: var(--lock-accent, var(--aios-blue)) !important;
  background: none !important;
}
#welcomeActions .welcome-action-icon:has(img) {
  background: none !important;
}
#welcomeActions .welcome-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
#welcomeFit #welcomeHeader,
#welcomeFit .aios-welcome,
#welcomeFit .discovery-welcome,
#welcomeActions .welcome-action-title {
  color: var(--lock-ink, #1A1A1A) !important;
}

/* Font: DELIBERATELY NOT SET HERE.

   An earlier pass applied a single --lock-font to the headline, the greeting and
   the card text. That out-specified each tenant's own display-face rule and
   silently restyled brand type: rosehaven's gate headline and greeting dropped
   from DomaineDisplay, its serif display face, to DM Sans, and allmax's gate
   headline dropped from elza to Montserrat.

   Tenant type is a brand value, not a geometry constant (CLAUDE.md rule 11:
   standardization applies to structure, sizing and behaviour, never to a
   tenant's colours, brand fonts or logo). The frames in this file are sized to
   the fleet maximum, so they already absorb the metric differences between
   faces. Each tenant's own font cascade governs, exactly as it did before the
   lock. The fontFamily value in opening.tokens.json is retained as a record of
   what each tenant declares; it is not applied. */

/* ---- 4. Gate control variants: exactly two families, nothing else ----
   Variant A (the reference reference): rounded white language pill, Choose buttons
   transparent with a white outline. This is the engine default, restated here
   so the two variants read as one contract. */
html[data-gate-variant="A"] #toggleScreen .toggle-language-button {
  background: #fff;
  color: var(--lock-anchor, var(--aios-blue));
  border: none;
  border-radius: var(--radius-sm, 6px);
}
html[data-gate-variant="A"] #toggleScreen .toggle-card-button {
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: var(--radius-sm, 6px);
}
html[data-gate-variant="A"] #toggleScreen .toggle-card-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Control geometry is locked independently of the font token. Both controls size
   to their line box, so a tenant whose face has taller metrics rendered a 49px
   Choose button and a 42px language pill against the reference 47px and 40px,
   which pushed its whole card 4px taller. Frozen at the reference. */
#toggleScreen .toggle-card-button {
  height: 47px;
  min-height: 47px;
  max-height: 47px;
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#toggleScreen .toggle-language-button {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding-block: 0;
}

/* Variant B (the Choice treatment): squared white language box with dark text
   and a deep border, Choose buttons solid in the accent colour. */
html[data-gate-variant="B"] #toggleScreen .toggle-language-button {
  background: #FFFFFF;
  color: #121B22;
  border: 1.5px solid var(--lock-anchor, #2B2E31);
  border-radius: 6px;
}
html[data-gate-variant="B"] #toggleScreen .toggle-card-button {
  background: var(--lock-accent, #E60F00);
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
}
html[data-gate-variant="B"] #toggleScreen .toggle-card-button:hover {
  filter: brightness(0.86);
}

/* Card body copy on the deep fill, per the spec's Choice evidence block. */
#toggleScreen .toggle-card-body {
  color: rgba(255, 255, 255, 0.92);
}
html[data-gate-variant="B"] #toggleScreen .toggle-card-body {
  color: rgba(255, 255, 255, 0.82);
}
#toggleScreen .toggle-card-title {
  text-transform: uppercase;
}

/* The title zone is exactly TWO lines on BOTH cards, always.

   Owner requirement: the body copy must start on the same line in the left and
   the right card, so the pair reads as one enterprise unit rather than two
   independently flowing boxes.

   The shared shell ships card 2's title with a hard line break after the first
   word ("Browse<br>Traditional Website"), which comes through the i18n string as
   a newline. That forced break is what pushed the title to a third line on
   wide-font tenants and got the word WEBSITE clipped. Suppressing the <br> lets
   the title wrap naturally and balance across the reserved two lines, so no
   tenant copy is changed and none is truncated. */
#toggleScreen .toggle-card-title br { display: none; }
/* The element directly under the title starts at the same y on BOTH cards: the
   persona line on the AiOS card, the body on the traditional card. Their default
   margins differed by 6px, which broke the alignment the two-line title exists to
   create. */
#toggleScreen .toggle-card-title { margin-bottom: 18px; }
#toggleScreen .toggle-card-persona,
#toggleScreen .toggle-card-body { margin-top: 0; }
#toggleScreen .toggle-card-title {
  height: 62.4px;          /* 2 lines x 31.2px */
  min-height: 62.4px;
  max-height: 62.4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-wrap: balance;
}

/* Card pair: equal widths and heights, fixed gap, radius, padding.

   Gate cards were content sized and ranged 353px to 426px across the fleet.
   An earlier pass clamped each internal zone to a fixed line count, but that
   cascades: every tenant whose font is wider than the reference Inter pushes a
   different zone onto an extra line, so the frame had to grow again for the
   title, then the body, then the persona line, and each growth truncated
   somebody's copy.

   The card is therefore frozen as ONE box and its internal zones flow
   naturally. The language control and the Choose button are already bottom
   anchored by margin-top:auto, so what the lock actually needs holds: equal card
   size, equal control geometry, and buttons aligned on both cards. Nothing is
   clamped, so no tenant's copy is ellipsed.

   426px covers the widest-font tenant measured across the fleet. Tenants whose
   copy is shorter simply carry more space above the controls. */
#toggleScreen .toggle-cards { align-items: stretch; }
#toggleScreen .toggle-card {
  height: 426px;
  min-height: 426px;
  max-height: 426px;
  overflow: hidden;
}

/* Control geometry is locked independently of the font token. Both controls size
   to their line box, so a tenant whose face has taller metrics rendered a 49px
   Choose button and a 42px language pill against the reference 47px and 40px,
   which pushed its whole card 4px taller. Frozen at the reference. */
#toggleScreen .toggle-card-button {
  height: 47px;
  min-height: 47px;
  max-height: 47px;
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#toggleScreen .toggle-language-button {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding-block: 0;
}

/* Variant B (the Choice treatment): squared white language box with dark text
   and a deep border, Choose buttons solid in the accent colour. */
html[data-gate-variant="B"] #toggleScreen .toggle-language-button {
  background: #FFFFFF;
  color: #121B22;
  border: 1.5px solid var(--lock-anchor, #2B2E31);
  border-radius: 6px;
}
html[data-gate-variant="B"] #toggleScreen .toggle-card-button {
  background: var(--lock-accent, #E60F00);
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
}
html[data-gate-variant="B"] #toggleScreen .toggle-card-button:hover {
  filter: brightness(0.86);
}

/* Card body copy on the deep fill, per the spec's Choice evidence block. */
#toggleScreen .toggle-card-body {
  color: rgba(255, 255, 255, 0.92);
}
html[data-gate-variant="B"] #toggleScreen .toggle-card-body {
  color: rgba(255, 255, 255, 0.82);
}
#toggleScreen .toggle-card-title {
  text-transform: uppercase;
  font-weight: 800;
}

/* The card's internal zones flow naturally inside the frozen box above. They
   are deliberately NOT clamped to fixed line counts. An earlier pass did clamp
   them, and every tenant whose font is wider than the reference Inter then lost
   copy: marycroft's second card read "BROWSE TRADITIONAL..." with the word
   WEBSITE cut off, because "Traditional Website" measures 319.5px in Futura
   against 306.4px in Inter. Geometry passed while the words were missing, which
   is exactly the failure a pixel review catches and a DOM check does not. */

/* ---- 5. Starter grid: white fill, neutral border, no coloured outlines ----
   Several tenants had recoloured the card outline to their brand. The spec
   locks the frame: white fill, subtle neutral border and shadow. */
#welcomeActions .welcome-action {
  background: #fff;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 14px;
}

/* Fixed card size. Starter cards were content sized, so they ranged 170px to
   212px across the fleet and even differed row to row inside one tenant. That
   moved the grid height, which moved #welcomeFit's natural height, which moved
   the fit scale, which moved every element on the screen.

   212px is the tallest card any tenant renders (tompkins' sixth card, whose
   description runs to 128 characters). An earlier pass froze this at the reference
   reference 186.5px, which held the reference build steady but clipped that
   card's sentence at "...a premier supplier of". Sizing the frame to the fleet
   maximum instead means no tenant loses a word.

   The cost is that #welcomeFit's natural height rises to 658px against 604px
   available, so the whole welcome block scales to 0.918 rather than 0.995. That
   applies uniformly to all twelve, so the lock holds, but it is the single
   largest visual change in this mission and is called out in the report. */
#welcomeActions .welcome-action {
  height: 212px;
  min-height: 212px;
  max-height: 212px;
  overflow: hidden;
}

/* Phone: the 212px frame is the desktop welcomeFit lock. On a 390-wide
   canvas it makes three 212px rows, so only four starters fit and the
   titles sit in the leftover empty space instead of on one shared line.
   Release the frame. Plate.js and m2 size the compact tiles. */
@media (max-width: 767px) {
  #welcomeActions .welcome-action {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

/* ---- 6. The gate never carries a photo backdrop ----
   One tenant had grown a full-bleed image behind the gate. LOCKED: light
   neutral background, no photo backdrops. */
#toggleScreen::before,
#toggleScreen::after {
  background-image: none !important;
  content: none !important;
}
#toggleScreen {
  background-image: none !important;
  background-color: var(--bg-tint, #F8F9FB);
}

/* Stacked mobile Toggle gate. Shared structure, tenant tokens. Replaces C1.
   Phone and compact only. Desktop, laptop, and tablet keep the card pair. */
#toggleScreen.hidden {
  display: none !important;
}

@media (max-width: 639px) {
  body:not(.aios-variant-m2) #toggleScreen:not(.hidden) {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100dvh !important;
    padding: 16px 16px 18px !important;
    overflow: auto !important;
    background-color: var(--bg-tint, #F5F5F5) !important;
    box-sizing: border-box !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 4px 0 8px !important;
    min-height: calc(100dvh - 34px) !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo,
  body:not(.aios-variant-m2) #toggleScreen .toggle-headline,
  body:not(.aios-variant-m2) #toggleScreen .toggle-subhead,
  body:not(.aios-variant-m2) #toggleScreen .toggle-cards,
  body:not(.aios-variant-m2) #toggleScreen .toggle-poweredby,
  body:not(.aios-variant-m2) #toggleScreen .aios-attribution {
    display: block !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo {
    display: inline-flex !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    max-height: 56px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo img,
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo svg {
    max-height: 52px !important;
    width: auto !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-headline {
    display: block !important;
    text-align: center !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-subhead {
    display: block !important;
    text-align: center !important;
    font-size: 14px !important;
    margin: 0 0 16px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-cards {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 20px 18px 16px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-title,
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-persona,
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-body {
    display: block !important;
    text-align: center !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-title {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-persona {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-body {
    margin-bottom: 12px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-language-picker {
    display: flex !important;
    justify-content: center !important;
    margin: 8px auto 0 !important;
    position: relative !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-language-button {
    background: #fff !important;
    color: var(--lock-anchor, var(--ink, #1a1a1a)) !important;
    min-width: min(220px, 100%) !important;
    justify-content: space-between !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-button {
    margin-top: auto !important;
    width: 100% !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-poweredby,
  body:not(.aios-variant-m2) #toggleScreen .aios-attribution {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 16px !important;
    flex: 0 0 auto !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .aios-attribution-marks {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-dontask,
  body:not(.aios-variant-m2) #toggleScreen .toggle-settings-note,
  body:not(.aios-variant-m2) #toggleScreen .m-gateway {
    display: none !important;
  }
}

@media (max-width: 359px) {
  body:not(.aios-variant-m2) #toggleScreen:not(.hidden) {
    padding: 8px 10px 10px !important;
    overflow: auto !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-screen {
    min-height: calc(100dvh - 20px) !important;
    padding: 0 !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo {
    margin-bottom: 6px !important;
    max-height: 40px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo img,
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo svg {
    max-height: 38px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-headline {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-subhead {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-cards {
    gap: 8px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card {
    padding: 10px 10px 8px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-title {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-persona,
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-body {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-language-button {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-button {
    padding: 8px 12px !important;
    margin-top: auto !important;
    font-size: 12px !important;
  }
  body:not(.aios-variant-m2) #toggleScreen .toggle-poweredby,
  body:not(.aios-variant-m2) #toggleScreen .aios-attribution {
    margin-top: 8px !important;
  }
}