/* Audited mobile-only overrides for the 2018 annual report (876) and
   long-form trader profile (881). Loaded after their historical styles. */

@media (max-width: 1199px) {
  :where(.legacy-mobile-special-876, .legacy-mobile-special-881),
  :where(.legacy-mobile-special-876, .legacy-mobile-special-881) * {
    box-sizing: border-box !important;
  }

  body:has(
      .legacy-mobile-special-document[data-special-experience="standard"]
    ) {
    padding-bottom: calc(
      var(--fx-mobile-nav-height) + env(safe-area-inset-bottom)
    ) !important;
  }

  body:has(
      .legacy-mobile-special-document[data-special-experience="standard"]
    )
    .fx-mobile-header,
  body:has(
      .legacy-mobile-special-document[data-special-experience="standard"]
    )
    .fx-mobile-bottom-nav {
    display: grid !important;
  }

  .legacy-mobile-special-876,
  .legacy-mobile-special-881 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  .legacy-mobile-special-876 > div:first-of-type,
  .legacy-mobile-special-881 > div:first-of-type {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 876 */
  .legacy-mobile-special-876 :is(img, canvas, svg) {
    max-width: 100% !important;
  }

  .legacy-mobile-special-876 .main {
    width: min(100%, 720px);
    margin-right: auto;
    margin-left: auto;
    padding-right: clamp(16px, 4.5vw, 32px) !important;
    padding-left: clamp(16px, 4.5vw, 32px) !important;
  }

  .legacy-mobile-special-876 .banner {
    width: 100% !important;
    min-height: 0 !important;
    padding: clamp(64px, 14vw, 108px) 0 clamp(42px, 9vw, 72px) !important;
    overflow: hidden;
    background-position: center top;
  }

  .legacy-mobile-special-876 .banner .head-title,
  .legacy-mobile-special-876 .banner .result {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin-right: auto;
    margin-left: auto;
  }

  .legacy-mobile-special-876 .banner .result {
    margin-top: clamp(78px, 19vw, 145px) !important;
  }

  .legacy-mobile-special-876 .banner .shadow {
    width: clamp(64px, 17vw, 118px) !important;
    height: auto !important;
  }

  .legacy-mobile-special-876 .section {
    width: 100% !important;
    margin-top: -1px !important;
    padding: clamp(42px, 8vw, 72px) 0 clamp(46px, 9vw, 78px) !important;
    overflow: hidden;
    background-position: center top;
  }

  .legacy-mobile-special-876 .section .title {
    display: block;
    width: min(100%, 600px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto;
    object-fit: contain;
  }

  .legacy-mobile-special-876 .section :is(.details, .statistic) {
    color: #fff;
    font-size: clamp(15px, 2.35vw, 18px) !important;
    line-height: 1.75 !important;
    overflow-wrap: anywhere;
  }

  .legacy-mobile-special-876 .section .details-box {
    display: block !important;
    width: min(100%, 640px);
    margin: clamp(26px, 6vw, 46px) auto !important;
  }

  .legacy-mobile-special-876 .section .liner-text {
    display: block;
    width: min(100%, 690px) !important;
    height: auto !important;
    margin: clamp(34px, 7vw, 58px) auto 0 !important;
  }

  .legacy-mobile-special-876 .exposure-annual .chart img {
    display: block;
    width: min(100%, 680px) !important;
    height: auto !important;
    margin: 0 auto;
  }

  .legacy-mobile-special-876 .complaint-annual .details {
    width: min(100%, 650px);
    margin: clamp(26px, 6vw, 46px) auto !important;
  }

  .legacy-mobile-special-876 .complaint-annual .chart {
    padding: 0 clamp(18px, 8vw, 72px) !important;
  }

  .legacy-mobile-special-876 .complaint-annual .chart img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto;
  }

  .legacy-mobile-special-876 .complaint-annual .shadow {
    top: clamp(118px, 28vw, 196px) !important;
    width: clamp(74px, 18vw, 136px) !important;
    height: auto !important;
  }

  .legacy-mobile-special-876 .consult-annual .rada-chart {
    width: min(100%, 680px);
    margin: clamp(30px, 7vw, 54px) auto 0 !important;
    padding: 0 !important;
  }

  .legacy-mobile-special-876 .consult-annual .chart-content {
    width: 100% !important;
    height: clamp(320px, 86vw, 560px) !important;
    min-height: 320px;
    overflow: hidden;
  }

  .legacy-mobile-special-876 .consult-annual .info {
    width: min(100%, 680px);
    margin: clamp(34px, 8vw, 64px) auto 0 !important;
  }

  .legacy-mobile-special-876 .consult-annual .info .left {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .legacy-mobile-special-876 .consult-annual .info .right {
    display: block;
    width: min(100%, 520px) !important;
    height: auto !important;
    margin: clamp(28px, 7vw, 52px) auto 0 !important;
    padding: 0 !important;
  }

  .legacy-mobile-special-876 .false-annual {
    padding-bottom: clamp(72px, 14vw, 112px) !important;
  }

  .legacy-mobile-special-876 .false-annual .statistic,
  .legacy-mobile-special-876 .false-annual > .main > .details {
    width: min(100%, 650px);
    margin: clamp(26px, 6vw, 48px) auto 0 !important;
    padding: 0 !important;
  }

  .legacy-mobile-special-876 .false-annual :is(.map, .chart) {
    display: block;
    width: min(100%, 690px) !important;
    height: auto !important;
    margin: clamp(30px, 7vw, 56px) auto 0 !important;
  }

  .legacy-mobile-special-876 .summary {
    width: min(100%, 670px);
    margin: clamp(36px, 8vw, 64px) auto 0 !important;
  }

  .legacy-mobile-special-876 .summary .circle-title {
    display: block;
    width: clamp(132px, 30vw, 205px) !important;
    height: auto !important;
    margin: 0 auto;
  }

  .legacy-mobile-special-876 .summary .details {
    width: 100%;
    margin-top: 16px !important;
    padding: 0 !important;
    text-indent: 2em !important;
  }

  .legacy-mobile-special-876 .summary .scan {
    width: clamp(180px, 46vw, 230px) !important;
    margin-top: clamp(38px, 8vw, 64px) !important;
  }

  .legacy-mobile-special-876 .summary .scan p {
    margin-top: 10px !important;
    font-size: clamp(14px, 2.2vw, 17px) !important;
    line-height: 1.5 !important;
  }

  /* 881 */
  .legacy-mobile-special-881 .mobile_box {
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: clamp(48px, 10vw, 76px) !important;
    background-size: 100% auto !important;
  }

  .legacy-mobile-special-881 .banner,
  .legacy-mobile-special-881 .banner img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .legacy-mobile-special-881 .character_file {
    width: min(calc(100% - 18px), 720px) !important;
    padding: clamp(24px, 5vw, 38px) clamp(18px, 5vw, 42px) !important;
  }

  .legacy-mobile-special-881 .character_file .cahracter_file_title {
    display: flex;
    width: clamp(110px, 28vw, 156px) !important;
    min-height: 44px;
    height: auto !important;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2.8vw, 22px) !important;
    line-height: 1.35 !important;
  }

  .legacy-mobile-special-881 .character_file_list {
    width: min(100%, 620px) !important;
    margin-top: 14px !important;
  }

  .legacy-mobile-special-881 .character_file_item {
    font-size: clamp(14px, 2.1vw, 17px) !important;
    line-height: 1.65 !important;
  }

  .legacy-mobile-special-881 .character_desc {
    width: min(calc(100% - 28px), 700px) !important;
    margin: clamp(22px, 5vw, 38px) auto !important;
    color: #fff5e2 !important;
    font-size: clamp(15px, 2.25vw, 18px) !important;
    line-height: 1.75 !important;
    overflow-wrap: anywhere;
  }

  .legacy-mobile-special-881 .mobile_box > .doushen_img {
    width: min(76%, 520px) !important;
    margin: 0 auto;
  }

  .legacy-mobile-special-881 .mobile_box > .doushen_img > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .legacy-mobile-special-881 .story_chunk {
    width: 100% !important;
    margin-top: clamp(42px, 9vw, 72px) !important;
  }

  .legacy-mobile-special-881 .story_title {
    display: flex;
    width: min(calc(100% - 28px), 640px) !important;
    min-height: 44px;
    height: auto !important;
    padding: 8px 22px;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2.9vw, 24px) !important;
    line-height: 1.4 !important;
  }

  .legacy-mobile-special-881 .story_desc {
    width: min(calc(100% - 28px), 700px) !important;
    margin-top: clamp(24px, 5vw, 38px) !important;
  }

  .legacy-mobile-special-881 .story_desc p {
    color: #fff5e2 !important;
    font-size: clamp(15px, 2.25vw, 18px) !important;
    line-height: 1.8 !important;
    overflow-wrap: anywhere;
  }

  .legacy-mobile-special-881 .story_desc p + p {
    margin-top: 10px !important;
  }

  .legacy-mobile-special-881 .story_img {
    width: min(calc(100% - 14px), 730px) !important;
    margin-top: clamp(24px, 5vw, 38px) !important;
    padding: clamp(10px, 2.5vw, 18px) !important;
  }

  .legacy-mobile-special-881 .story_img img {
    display: block;
    width: 100% !important;
    height: auto !important;
    cursor: zoom-in;
    touch-action: manipulation;
  }

  .legacy-mobile-special-881 .code {
    display: grid;
    width: min(calc(100% - 32px), 430px) !important;
    margin-top: clamp(48px, 10vw, 76px) !important;
    grid-template-columns: clamp(96px, 26vw, 120px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .legacy-mobile-special-881 .code .code_img,
  .legacy-mobile-special-881 .code .text_list {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .legacy-mobile-special-881 .code .code_img img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .legacy-mobile-special-881 .code .text_item {
    font-size: clamp(14px, 2.15vw, 16px) !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
  }

  .legacy-mobile-special-881 img[data-preview-src] {
    border-radius: 2px;
  }

  .legacy-mobile-special-881 img[data-preview-src]:focus-visible {
    outline: 3px solid #64e4dc;
    outline-offset: 4px;
  }

  body[data-special-preview="881"] {
    overflow: hidden !important;
  }

  body[data-special-preview="881"] .mui-preview-image {
    z-index: 3000 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--audited-special-viewport-height, 100dvh) !important;
    min-height: 100svh;
    padding: 0 !important;
    overscroll-behavior: contain;
  }

  body[data-special-preview="881"] .mui-preview-header {
    top: max(8px, env(safe-area-inset-top)) !important;
    height: 44px !important;
    line-height: 44px !important;
    pointer-events: none;
  }

  body[data-special-preview="881"] .mui-preview-image .mui-slider-group,
  body[data-special-preview="881"] .mui-preview-image .mui-slider-item,
  body[data-special-preview="881"] .mui-preview-image .mui-zoom-wrapper,
  body[data-special-preview="881"] .mui-preview-image .mui-zoom-scroller {
    height: 100% !important;
    min-height: 100% !important;
  }

  body[data-special-preview="881"] .mui-preview-image .mui-zoom {
    max-width: 100vw !important;
    max-height: 100dvh !important;
    object-fit: contain;
  }

  .special-881-preview-close {
    position: fixed;
    z-index: 3010;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 50%;
    background: rgb(0 0 0 / 58%);
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
    backdrop-filter: blur(8px);
  }

  .special-881-preview-close svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: none !important;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-width: 2;
  }

  .special-881-preview-close:focus-visible {
    outline: 3px solid #64e4dc;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-mobile-special-876 *,
  .legacy-mobile-special-881 *,
  body[data-special-preview="881"] .mui-preview-image * {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}