/* Phone feed switcher (v1): on the feed the MODE! wordmark in the header becomes Instagram's
   home menu — tap it and a small frosted card drops down with For You / Following. Desktop
   keeps the wordmark link and the tab row; on phone the tab row is removed. The trigger only
   exists on feed routes for signed-in members, so guests and every other page are untouched.
   New filename because hCDN pins CSS for a week and ignores query strings. */

.mtv-feedswitch { display: none; }

@media (max-width: 820px) {
  /* On the feed the wordmark is the trigger, so the plain home link steps aside. */
  .mtv-header .mtv-logo--feed { display: none; }

  .mtv-header .mtv-feedswitch {
    display: block;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 60;
  }

  .mtv-feedswitch__trigger {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 40px;
    margin: 0;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: var(--mtv-navy);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mtv-feedswitch__trigger::-webkit-details-marker { display: none; }
  .mtv-feedswitch__trigger:focus-visible {
    outline: 2px solid var(--mtv-magenta);
    outline-offset: 4px;
    border-radius: 10px;
  }

  /* The wordmark typesets itself only at <=640px today; the trigger needs the same lockup
     across the whole phone range, so restate it with higher specificity. */
  .mtv-header .mtv-feedswitch__trigger .mtv-mobile-wordmark {
    display: inline;
    font-family: "MODE Wordmark", var(--mtv-font-ui);
    font-style: normal;
    font-weight: 800;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--mtv-navy);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    white-space: nowrap;
  }

  .mtv-header .mtv-feedswitch__trigger .mtv-wordmark__bang {
    color: var(--mtv-magenta);
    letter-spacing: 0;
    margin-left: .09em;
  }

  .mtv-feedswitch__chev {
    width: 13px;
    height: 13px;
    margin: 3px 0 0 2px;
    transition: transform .18s ease;
  }

  .mtv-feedswitch[open] .mtv-feedswitch__chev { transform: rotate(180deg); }

  .mtv-feedswitch__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(266px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 18px 48px rgba(16, 47, 75, .22), 0 2px 8px rgba(16, 47, 75, .08);
    animation: mtv-feedswitch-in .14s ease-out;
  }

  .mtv-feedswitch__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    color: rgba(16, 47, 75, .8);
    font: 600 15.5px/1.2 var(--mtv-font-ui);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mtv-feedswitch__item:active { background: rgba(0, 69, 116, .07); }
  .mtv-feedswitch__item.is-active { color: var(--mtv-navy); font-weight: 800; }
  .mtv-feedswitch__icon { display: inline-flex; flex: 0 0 auto; }
  .mtv-feedswitch__label { min-width: 0; }
  .mtv-feedswitch__check { margin-left: auto; flex: 0 0 auto; color: var(--mtv-magenta); }

  @media (hover: hover) {
    .mtv-feedswitch__item:hover { background: rgba(0, 69, 116, .06); }
  }

  /* The tab row is exactly what this menu replaces on phone. */
  .mtv-feed__center > .mtv-tabs { display: none; }

  :root[data-theme="dark"] .mtv-header .mtv-feedswitch__trigger,
  :root[data-theme="dark"] .mtv-header .mtv-feedswitch__trigger .mtv-mobile-wordmark { color: #fff; }
  :root[data-theme="dark"] .mtv-header .mtv-feedswitch__trigger .mtv-wordmark__bang { color: var(--dk-pink-text, #FF87AC); }
  :root[data-theme="dark"] .mtv-feedswitch__menu {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(14, 22, 32, .9);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  }
  :root[data-theme="dark"] .mtv-feedswitch__item { color: rgba(255, 255, 255, .78); }
  :root[data-theme="dark"] .mtv-feedswitch__item:active,
  :root[data-theme="dark"] .mtv-feedswitch__item:hover { background: rgba(255, 255, 255, .08); }
  :root[data-theme="dark"] .mtv-feedswitch__item.is-active { color: #fff; }
  :root[data-theme="dark"] .mtv-feedswitch__check { color: var(--dk-pink-text, #FF87AC); }

  @keyframes mtv-feedswitch-in {
    from { opacity: 0; transform: translate(-50%, -4px) scale(.985); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mtv-feedswitch__menu { animation: none; }
    .mtv-feedswitch__chev { transition: none; }
  }
}