/*
 * The feed's own layer on top of the design system (tokens.css, bundle.css): how
 * the screens fit together, the player's prompts drawn as the system's prompt card,
 * and the parts the system has not drawn yet (stamp cards, a tag's code). Every
 * value is a token; nothing here invents a colour.
 */

[hidden] {
  display: none !important;
}

html {
  height: 100%;
  background: var(--canvas);
}

.mg-offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mg-skip {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  z-index: 30;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--canvas);
  font: 600 14px/18px var(--font-sans);
  text-decoration: none;
}

.mg-skip:focus {
  top: var(--space-2);
}

/* ---- screens: a bar, and what scrolls under it ------------------------------------ */
.mg-screen {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.mg-screen > .mg-topbar,
.mg-screen > .mg-searchbar {
  position: relative;
  z-index: 2;
}

/* a page bar has a hairline once there is something under it to scroll */
.mg-screen.is-page > .mg-topbar,
.mg-screen.is-page > .mg-searchbar {
  box-shadow: 0 1px 0 var(--line);
}

.mg-pagebody {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* pages read as a column on wide screens; only the feed spreads out */
.mg-column {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.mg-center {
  display: grid;
  align-content: center;
  min-height: 100%;
}

.mg-topbar-title:empty {
  visibility: hidden;
}

/* ---- the feed ------------------------------------------------------------------ */
.mg-feed > .mg-welcome,
.mg-feed > .mg-feedstate {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.mg-feedstate {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  height: 100%;
}

/* The post's own picture shows at once; the M is written under it until it arrives. */
.mg-frame > .mg-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* what the player puts in the frame: the post, and nothing of the page's */
.mg-frame > .mgp {
  display: block;
}

.mgp-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mgp-poster,
.mgp-frame,
.mgp-touch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mgp-poster {
  object-fit: cover;
}

.mgp-frame {
  pointer-events: none;
}

.mgp-touch {
  cursor: pointer;
}

.mg-item:not([data-current]) .mgp-touch {
  pointer-events: none;
}

/* the caption says who paid, where it can be read */
.mgp-paid {
  display: none;
}

/* one thing at a time in the meta: its words, What it is (About), or Mediagram asking */
.mg-item.is-about > .mg-meta,
.mg-item.is-talking > .mg-meta,
.mg-item.is-talking > .mg-about,
.mg-item:not(.is-about) > .mg-about {
  display: none;
}

.mg-item[data-asking] .mg-said > .mg-caption,
.mg-item[data-asking] .mg-meta > .mg-actions,
.mg-item[data-asking] .mg-said > .mg-hold,
.mg-item[data-asking] .mg-said > .mg-callout {
  display: none;
}

.mg-about {
  min-width: 0;
}

@container (min-width: 960px) {
  .mg-item > .mg-about {
    align-self: end;
  }
}

/* ---- the player's prompts, drawn as the system's prompt card ------------------------ */
.mg-cue {
  min-width: 0;
}

.mgp-bar {
  display: grid;
  gap: var(--space-3);
}

.mgp-bar-text {
  margin: 0;
  color: var(--ink);
  font: 600 17px/23px var(--font-sans);
  text-wrap: pretty;
}

.mgp-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mgp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 600 14px/18px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

.mgp-button:hover {
  background: var(--surface-strong);
}

.mgp-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.mgp-button-primary {
  border-color: transparent;
  background: var(--brand);
  color: var(--on-brand);
}

.mgp-button-primary:hover {
  background: var(--brand-pressed);
}

/* a way out must never pass for one of the answers */
.mgp-button-quiet {
  border-color: transparent;
  padding: 0 var(--space-2);
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mgp-button-quiet:hover {
  background: transparent;
  color: var(--ink);
}

/* ---- with a mouse: two step buttons beside the feed, never on the post ------------- */
.mg-steps {
  position: fixed;
  top: 50%;
  right: var(--space-4);
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  .mg-steps {
    display: flex;
  }
}

.mg-steps .mg-icon-btn {
  border: 1.5px solid var(--line-strong);
  background: var(--canvas);
}

.mg-steps .mg-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---- toasts: at the foot, and beside the post on wide screens ---------------------- */
.mg-toasts {
  position: fixed;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 20;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  max-width: calc(100vw - 2 * var(--space-4));
  transform: translateX(-50%);
  pointer-events: none;
}

.mg-toasts .mg-toast {
  pointer-events: auto;
}

@media (min-width: 960px) {
  .mg-toasts {
    right: var(--space-6);
    left: auto;
    justify-items: end;
    transform: none;
  }
}

/* ---- forms ------------------------------------------------------------------------- */
.mg-field-box > select.mg-field-input {
  appearance: none;
  cursor: pointer;
}

.mg-field-box > .mg-icon {
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
}

.mg-stack {
  display: grid;
  gap: var(--space-3);
}

.mg-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mg-who-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.mg-more {
  justify-self: center;
  margin: var(--space-2) 0 var(--space-4);
}

/* a whole page that is one message: signing in, a reward used, a report sent */
.mg-screen .mg-empty {
  box-sizing: border-box;
}

/* ---- stamp cards ------------------------------------------------------------------- */
.mg-cards {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-loyalty {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.mg-loyalty-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.mg-loyalty-head > .mg-avatar {
  flex: none;
}

.mg-loyalty-id {
  display: grid;
  min-width: 0;
}

.mg-loyalty-name {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 600 15px/21px var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-loyalty-brand {
  margin: 0;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
}

.mg-loyalty-reward {
  margin: 0;
  color: var(--ink);
  font: 400 15px/21px var(--font-sans);
}

.mg-loyalty-reward strong {
  font-weight: 600;
}

.mg-loyalty-count {
  margin: 0;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* one round per stamp: filled and ticked once it is yours, so it never rests on colour */
.mg-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-stamp {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--on-brand);
}

.mg-stamp.is-on {
  border-color: var(--brand-ink);
  background: var(--brand-ink);
  color: var(--canvas);
}

.mg-stamp .mg-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.mg-stamp:not(.is-on) .mg-icon {
  display: none;
}

.mg-ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  list-style: none;
}

.mg-ways li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mg-ways .mg-icon {
  width: 16px;
  height: 16px;
}

.mg-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-ink);
  font: 600 14px/18px var(--font-sans);
}

.mg-ready .mg-icon {
  width: 18px;
  height: 18px;
}

/* the till: a reward, used, shown to whoever is serving */
.mg-used .mg-empty-icon {
  width: 72px;
  height: 72px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.mg-used .mg-empty-icon .mg-icon {
  width: 36px;
  height: 36px;
}

.mg-used-time {
  margin: 0;
  color: var(--ink);
  font: 750 28px/34px var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- a brand's tags: the link, its QR code, and NFC -------------------------------- */
.mg-tags {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-tag {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.mg-tag-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.mg-tag-label {
  margin: 0;
  color: var(--ink);
  font: 600 15px/21px var(--font-sans);
}

.mg-tag-uses {
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.mg-tag-link {
  overflow-wrap: anywhere;
  color: var(--ink-muted);
  font: 400 12px/16px var(--font-mono);
}

/* A QR code is read by a camera: always dark on white, whatever the theme. */
.mg-qr {
  display: block;
  box-sizing: border-box;
  width: 208px;
  height: 208px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--line);
}

.mg-stat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  color: var(--ink-muted);
  font: 500 14px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.mg-stat strong {
  color: var(--ink);
  font-weight: 700;
}

.mg-code {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink);
  font: 400 13px/18px var(--font-mono);
}

/* ---- small additions the views lean on ------------------------------------------- */
.mg-feedview {
  min-height: 0;
  height: 100%;
}

.mg-screen.is-bare {
  grid-template-rows: minmax(0, 1fr);
}

.mg-time.mg-wrap {
  white-space: normal;
}

.mg-page.mg-tight {
  gap: var(--space-2);
}

a.mg-loyalty-head {
  color: inherit;
  text-decoration: none;
}

a.mg-loyalty-head:hover .mg-loyalty-name {
  text-decoration: underline;
}

a.mg-loyalty-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.mg-filecard > .mg-avatar {
  justify-self: center;
}

.mg-section > h3.mg-section-title {
  margin-top: var(--space-2);
}

/* a small button set straight into a grid keeps its own width instead of stretching */
.mg-said > .mg-btn,
.mg-stack > .mg-btn-sm,
.mg-loyalty > .mg-btn,
.mg-tag > .mg-btn,
.mg-page > .mg-btn-sm {
  justify-self: start;
}

/* who and what they said: one block in the meta */
.mg-said {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* ---- Post a file: the post on phones of several shapes, and the guide --------------------- */
.mg-phones {
  display: grid;
  gap: var(--space-3);
}

.mg-phones-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  overflow-x: auto;
  padding: 3px 3px var(--space-1);
}

.mg-phone {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
  width: 112px;
  margin: 0;
}

.mg-phone figcaption {
  color: var(--ink-muted);
  font: 500 12px/16px var(--font-sans);
}

.mg-phone-screen,
.mg-guide {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 0 0 3px var(--ink);
}

.mg-guide {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--line);
}

.mg-phone-screen > img,
.mg-guide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mg-phone-screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.mg-phone-words {
  position: absolute;
  z-index: 1;
  left: 4cqw;
  right: 20cqw;
  bottom: 5cqw;
  display: grid;
  gap: 2.5cqw;
}

.mg-phone-avatar {
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: #f2762e;
}

.mg-phone-line {
  height: 2.6cqw;
  border-radius: 2cqw;
  background: rgba(255, 255, 255, 0.85);
}

.mg-phone-line.is-short {
  width: 60%;
  background: rgba(255, 255, 255, 0.6);
}

.mg-phone-rail {
  position: absolute;
  z-index: 1;
  right: 3cqw;
  bottom: 5cqw;
  display: grid;
  gap: 4cqw;
  color: #fff;
}

.mg-phone-rail .mg-icon {
  width: 8.6cqw;
  height: 8.6cqw;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.mg-guide-seen {
  position: absolute;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.mg-guide-covered {
  position: absolute;
  background: repeating-linear-gradient(45deg, rgba(91, 79, 233, 0.5) 0 4px, rgba(91, 79, 233, 0.2) 4px 8px);
}

.mg-phones-warn-title {
  margin: 0;
  color: var(--ink);
  font: 700 14px/20px var(--font-sans);
}

.mg-phones-warnings {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font: 400 13px/18px var(--font-sans);
}

.mg-phones-warnings li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2);
}

.mg-phones-warnings .mg-icon {
  width: 18px;
  height: 18px;
  color: var(--danger);
}

/* ---- About this post: a list of checks, each behind its Lucide icon in a round badge ---- */
.mg-about-title {
  margin: 0;
  color: var(--ink);
  font: 700 17px/24px var(--font-sans);
}

.mg-about-list li {
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  padding: 8px 0;
  border-top: 0;
}

.mg-about-badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.mg-about-list .mg-about-badge .mg-icon {
  width: 18px;
  height: 18px;
  margin: 0;
  color: inherit;
}

.mg-about-text b {
  font-weight: 700;
}

/* ---- phones: the post covers the screen, and the page's words and buttons sit over it --------
   As on TikTok, the post covers the screen: whatever does not fit is trimmed off its sides (a
   tall phone) or its top and bottom (a phone with its browser bars). The words take the screen's
   bottom fifth and the buttons its right 16% from 60% down. core/src/safezone.js works out, for a
   post's shape, what every phone in this range shows and where these can lie over it; the player
   keeps touches there for the page, the checker warns creators, and Post a file shows the post on
   several phones. The range is the feed's own shape, at most 7 wide to 10 tall
   (PHONE_SCREENS.widest) and tall enough for the buttons. Any other screen (a tablet, a short or
   wide window) shows the post whole, as a card, with the words below. About opens over the bottom
   of the post on a small vignette; comments and a question bring back the stacked layout. */
.mg-feed {
  container-type: size;
}

@container (max-width: 959px) and (max-aspect-ratio: 7 / 10) and (min-height: 600px) {
  .mg-item:not(.is-talking, [data-asking]) {
    position: relative;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    max-width: none;
    padding: 0;
    background: #000;
  }

  .mg-item:not(.is-talking, [data-asking]) > .mg-stage {
    position: relative;
    display: block;
    overflow: hidden;
  }

  /* centred on the screen, so a post wider (or taller) than the phone is trimmed evenly on both
     sides: grid centring would pin an overflowing post to the left and trim only the right */
  .mg-item:not(.is-talking, [data-asking]) .mg-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: max(100cqw, 100cqh * var(--w) / var(--h));
    border-radius: 0;
    box-shadow: none;
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) > .mg-meta {
    position: absolute;
    inset: 0;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) 16%;
    grid-template-rows: 60% 20% 20%;
    gap: 0;
    color: #fff;
    pointer-events: none;
  }

  /* a shade under the words, in the bottom fifth only */
  .mg-item:not(.is-about, .is-talking, [data-asking]) > .mg-meta::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-said {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    align-content: end;
    gap: var(--space-1);
    max-height: 100%;
    overflow: hidden;
    padding: 0 var(--space-2) var(--space-3) var(--space-4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }

  /* the full caption would climb out of the bottom fifth: here it stays two lines */
  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-said > .mg-btn {
    display: none;
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-actions {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: end;
    justify-self: center;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-bottom: var(--space-3);
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) > .mg-meta a,
  .mg-item:not(.is-about, .is-talking, [data-asking]) > .mg-meta button {
    pointer-events: auto;
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-caption,
  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-handle {
    color: #fff;
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-time,
  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-hold {
    color: rgba(255, 255, 255, 0.78);
  }

  /* the rail: TikTok-sized, a 34px icon over its count */
  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-action,
  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-weight {
    flex-direction: column;
    gap: 3px;
    width: 56px;
    height: auto;
    min-height: 56px;
    margin: 0;
    padding: 6px 0;
    border-radius: var(--radius-md);
    color: #fff;
    font: 600 13px/16px var(--font-sans);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-action .mg-icon,
  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-weight .mg-icon {
    width: 34px;
    height: 34px;
    stroke-width: 2;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-weight .mg-icon {
    width: 30px;
    height: 30px;
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-action:hover,
  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-weight:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-action[aria-pressed="true"] {
    color: #8f88f4;
  }

  .mg-item:not(.is-about, .is-talking, [data-asking]) .mg-action[aria-pressed="true"] .mg-count {
    color: #fff;
  }

  /* About: over the bottom of the post; the post stays full screen. The panel carries its own
     dark backdrop, near solid under every line so it reads over any post, light ones too, with
     a short fade above its title into the post. */

  .mg-item.is-about:not(.is-talking, [data-asking]) > .mg-about {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    max-height: 66%;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: var(--space-2);
    padding: 48px var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(12, 11, 12, 0.94) 0%, rgba(12, 11, 12, 0.9) calc(100% - 48px), rgba(12, 11, 12, 0) 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .mg-item.is-about:not(.is-talking, [data-asking]) .mg-about-title,
  .mg-item.is-about:not(.is-talking, [data-asking]) .mg-about-head .mg-icon-btn {
    color: #fff;
  }

  .mg-item.is-about:not(.is-talking, [data-asking]) .mg-about-badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  .mg-item.is-about:not(.is-talking, [data-asking]) .mg-about .mg-time,
  .mg-item.is-about:not(.is-talking, [data-asking]) .mg-about .mg-id,
  .mg-item.is-about:not(.is-talking, [data-asking]) .mg-about .mg-section-note {
    color: rgba(255, 255, 255, 0.72);
  }

  .mg-item.is-about:not(.is-talking, [data-asking]) .mg-about .mg-link {
    color: #fff;
  }
}