/* Fold 8 unfolded (wide 4:3). Uses mal-phone anti-clip, then opens the width. */
html.mal-fold,
html.mal-fold body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

html.mal-fold .hero-root,
html.mal-fold .hero-stage,
html.mal-fold #root {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

html.mal-fold .hero-menu-layer {
  position: fixed !important;
  display: grid !important;
  align-content: start !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 10px !important;
  inset: 0 !important;
  padding:
    calc(48px + env(safe-area-inset-top, 0px))
    12px
    calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.mal-fold.mal-fold-wide .hero-menu-layer {
  grid-template-columns: 1fr 1fr 1fr !important;
}
html.mal-fold.mal-fold-tall .hero-menu-layer {
  grid-template-columns: 1fr 1fr !important;
}
html.mal-fold .hero-menu-layer:has(.hero-portal-orb) {
  grid-template-columns: 1fr 1fr !important;
  align-content: center !important;
  justify-items: center !important;
}

html.mal-fold .mal-dday,
html.mal-fold .hero-cal,
html.mal-fold .hero-cal-soon,
html.mal-fold .hero-menu-card.is-realty,
html.mal-fold .mal-realty-stage {
  display: none !important;
}

html.mal-fold .hero-menu-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  opacity: 1 !important;
  animation: none !important;
  aspect-ratio: 16 / 10;
  height: auto !important;
  border-radius: 12px !important;
}

html.mal-fold .hero-menu-pipe,
html.mal-fold .hero-menu-pipe-realty,
html.mal-fold .hero-menu-pipe-realty-glow,
html.mal-fold .hero-dial-arc,
html.mal-fold .hero-dial-arc-glow,
html.mal-fold .hero-dial-ticks,
html.mal-fold .hero-dial-hub,
html.mal-fold .hero-hub-aura,
html.mal-fold .hero-hub-ring,
html.mal-fold .hero-hub-bloom,
html.mal-fold .hero-dial-pipe-g,
html.mal-fold .hero-wifi-g {
  display: none !important;
}

html.mal-fold .hero-portal-orb {
  display: flex !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(132px, 28vw) !important;
  height: min(132px, 28vw) !important;
  opacity: 1 !important;
  animation: none !important;
  align-items: center;
  justify-content: center;
  margin: 8px auto 28px !important;
}
html.mal-fold .hero-portal-orb-caption {
  left: 50% !important;
  top: calc(100% + 6px) !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  white-space: nowrap;
}
html.mal-fold .hero-portal-orb-label { font-size: 12px !important; }
html.mal-fold .hero-portal-orb-sub { font-size: 10px !important; }

html.mal-fold .menu-panel-root,
html.mal-fold .menu-panel-root.is-fixed-viewport {
  padding: 0 !important;
  inset: 0 !important;
  place-items: stretch !important;
}
html.mal-fold .menu-panel-card,
html.mal-fold .menu-panel-root.is-fixed-viewport .menu-panel-card,
html.mal-fold .menu-panel-root[data-width="1200"].is-fixed-viewport .menu-panel-card,
html.mal-fold .menu-panel-root[data-width="1520"].is-fixed-viewport .menu-panel-card,
html.mal-fold .menu-panel-root[data-width="1360"].is-fixed-viewport .menu-panel-card {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  overflow: auto !important;
}
html.mal-fold .menu-panel-body,
html.mal-fold .menu-panel-root.is-fixed-viewport .menu-panel-body {
  overflow: auto !important;
  min-height: 0 !important;
}

html.mal-fold .stock-slide,
html.mal-fold .mal-assets.solution,
html.mal-fold .talon-main {
  overflow: auto !important;
  height: auto !important;
  max-height: none !important;
}

html.mal-fold .plan-stage {
  pointer-events: auto !important;
  overflow: hidden !important;
}
html.mal-fold .plan {
  justify-content: flex-start !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  height: 100% !important;
  max-height: 100dvh !important;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    12px
    calc(64px + env(safe-area-inset-bottom, 0px))
    12px !important;
}
html.mal-fold .plan-board {
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}
html.mal-fold .plan-row-top,
html.mal-fold .plan-row-bot,
html.mal-fold .plan-liq {
  grid-template-columns: 1fr !important;
}
html.mal-fold.mal-fold-wide .plan-row-top {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
}
html.mal-fold .plan-hero-foot {
  grid-template-columns: 1fr 1fr 1fr !important;
}
html.mal-fold .plan-hero-div { display: none !important; }

html.mal-fold .menu-panel-root:has(.mal-quotes-host:not([hidden])) .menu-panel-card,
html.mal-fold .menu-panel-root:has(.mal-quotes-host:not([hidden])) .menu-panel-body,
html.mal-fold .menu-panel-root:has(.mal-quotes-host:not([hidden])) .dash-quotes {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
html.mal-fold .mal-quotes-host,
html.mal-fold .menu-panel-root > .mal-quotes-host,
html.mal-fold .dash-quotes > .mal-quotes-host {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
html.mal-fold .mq-frame {
  flex: 1 1 auto !important;
  min-height: 220px !important;
  height: auto !important;
  max-height: none !important;
}

html.mal-fold .stock-tiles {
  --watch-cols: 2 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html.mal-fold.mal-fold-wide .stock-tiles {
  --watch-cols: 4 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.mal-fold .plan-hold-grid {
  grid-template-columns: 1fr 1fr !important;
}
html.mal-fold.mal-fold-wide .plan-hold-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.mal-fold .portal-summary,
html.mal-fold .portal-summary.portal-total {
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  max-width: none !important;
  top: calc(46px + env(safe-area-inset-top, 0px)) !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
}
html.mal-fold .portal-total .portal-summary-body {
  overflow: auto !important;
  min-height: 0 !important;
}
html.mal-fold .portal-total .portal-summary-hero-metric {
  min-height: 64px !important;
  padding: 10px 12px 8px !important;
  margin-bottom: 6px !important;
}
html.mal-fold .portal-total .portal-summary-hero-metric .v {
  font-size: clamp(28px, 5vw, 40px) !important;
}
html.mal-fold .portal-total-list {
  flex: 0 0 auto !important;
}
html.mal-fold .portal-total-row,
html.mal-fold .portal-total-row[class*="gate"] {
  display: flex !important;
}

html.mal-fold .ls-namecard {
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
}

html.mal-fold .mal-realty-stage {
  inset: 46px 0 54px !important;
  border-radius: 0 !important;
}

html.mal-fold .hero-ls-stage,
html.mal-fold .hero-ls-stage:not(.is-embed),
html.mal-fold .mal-ls-signals {
  inset: 46px 10px 56px !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  grid-template-columns: 1fr 1fr !important;
  overflow: auto !important;
}
html.mal-fold.mal-fold-tall .hero-ls-stage,
html.mal-fold.mal-fold-tall .hero-ls-stage:not(.is-embed) {
  grid-template-columns: 1fr !important;
}

html.mal-fold .gate-content {
  justify-content: center !important;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 12px 12px !important;
  overflow: auto !important;
  max-height: 100dvh !important;
}
html.mal-fold .gate-panel,
html.mal-fold .gate-card {
  width: min(420px, 100%) !important;
  max-height: calc(100dvh - 24px) !important;
}
html.mal-fold.mal-fold-wide .gate-panel {
  width: min(520px, 92vw) !important;
}

html.mal-fold .menu-panel-root[data-width="1200"].is-fixed-viewport {
  padding: 0 !important;
  place-items: stretch !important;
}
html.mal-fold .menu-panel-root[data-width="1200"].is-fixed-viewport .menu-panel-card {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: auto !important;
  padding:
    max(8px, env(safe-area-inset-top, 0px))
    10px
    calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
html.mal-fold .menu-panel-root[data-width="1200"] .talon,
html.mal-fold .menu-panel-root[data-width="1200"] .talon-main,
html.mal-fold .talon-col,
html.mal-fold .talon-trade,
html.mal-fold .talon-auto,
html.mal-fold .mal-my-auto,
html.mal-fold .mal-my-auto-card.is-cal {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
html.mal-fold .talon-main {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
}
html.mal-fold .talon-plan-weights,
html.mal-fold .talon-plan.is-krlev .talon-plan-weights {
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html.mal-fold.mal-fold-wide .talon-plan-weights {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
html.mal-fold .talon-plan-weights > button {
  min-height: 88px !important;
  height: auto !important;
}
html.mal-fold .mal-my-auto-card.is-locked,
html.mal-fold .mal-my-auto-note {
  display: none !important;
}
html.mal-fold.mal-fold-wide .mal-my-auto-card.is-year {
  display: none !important;
}
html.mal-fold .talon-trade:not(.is-selling) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}
html.mal-fold #mal-dca-store {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding: 8px 0 0 !important;
  transform: none !important;
  z-index: 1 !important;
}