/* Protected label bands for the Journal's compact mobile card graphics. */
@media (max-width: 720px) {
  .feed-visual-label {
    z-index: 6;
    top: 9px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 4px 6px;
    color: #234b61;
    border: 1px solid rgba(108, 145, 164, .3);
    background: rgba(251, 254, 253, .94);
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Edition 15: place the phase field entirely in the lower-right art area. */
  .feed-visual--phase .feed-visual-label { color: #cbe3e8; border-color: rgba(191, 225, 232, .28); background: rgba(8, 39, 61, .91); }
  .feed-visual--phase .feed-visual-mark { top: 32px; right: 20px; bottom: auto; left: auto; width: 110px; height: 39px; }
  .feed-visual--phase .feed-visual-mark::before { left: -34px; width: 24px; }
  .feed-visual--phase .feed-visual-mark::after { right: -32px; width: 24px; }
  .feed-visual--phase .feed-visual-mark i:nth-child(1) { width: 10px; height: 10px; }
  .feed-visual--phase .feed-visual-mark i:nth-child(2) { width: 7px; height: 7px; }
  .feed-visual--phase .feed-visual-mark i:nth-child(3) { width: 9px; height: 9px; }
  .feed-visual--phase .feed-visual-mark i:nth-child(4) { width: 7px; height: 7px; }

  /* Edition 12: a top label strip and a simplified micelle test motif below it. */
  .feed-visual--micellization .feed-visual-mark { top: 31px; right: 11px; bottom: auto; left: auto; width: 126px; height: 45px; }
  .feed-visual--micellization .feed-visual-mark::before { right: 12px; bottom: 1px; width: 34px; height: 34px; border-width: 6px; box-shadow: 0 0 0 6px rgba(112, 207, 93, .08); }
  .feed-visual--micellization .feed-visual-mark::after { display: none; }
  .feed-visual--micellization .feed-visual-mark i:nth-child(1) { right: 55px; bottom: 6px; width: 17px; height: 17px; box-shadow: 0 0 0 4px rgba(232, 135, 71, .1); }
  .feed-visual--micellization .feed-visual-mark i:nth-child(2) { right: 32px; bottom: 28px; width: 8px; height: 8px; }
  .feed-visual--micellization .feed-visual-mark i:nth-child(3) { right: 5px; bottom: 19px; width: 8px; height: 8px; }
  .feed-visual--micellization .feed-visual-mark i:nth-child(4) { right: 71px; bottom: 28px; width: 8px; height: 8px; }
  .feed-visual--micellization .feed-visual-mark i:nth-child(5),
  .feed-visual--micellization .feed-visual-mark i:nth-child(6) { display: none; }

  /* Edition 10: replace the congested card motif with two separated carrier signals. */
  .feed-visual--carrier .feed-visual-label { color: #d2e5ea; border-color: rgba(191, 225, 232, .26); background: rgba(8, 39, 61, .91); }
  .feed-visual--carrier .feed-visual-mark { top: 31px; right: 12px; bottom: auto; left: auto; width: 138px; height: 44px; }
  .feed-visual--carrier .feed-visual-mark i { position: absolute; margin: 0; transform: none; }
  .feed-visual--carrier .feed-visual-mark i:nth-child(1) { left: 10px; top: 10px; width: 25px; height: 25px; box-shadow: 0 0 0 7px rgba(232, 135, 71, .1); }
  .feed-visual--carrier .feed-visual-mark i:nth-child(2) { left: 34px; top: 0; width: 9px; height: 9px; background: var(--journal-green); box-shadow: 0 0 0 3px rgba(112, 207, 93, .09); }
  .feed-visual--carrier .feed-visual-mark i:nth-child(3) { left: 41px; top: 27px; width: 9px; height: 9px; background: var(--journal-green); box-shadow: 0 0 0 3px rgba(112, 207, 93, .09); }
  .feed-visual--carrier .feed-visual-mark i:nth-child(4) { left: 0; top: 27px; width: 9px; height: 9px; background: var(--journal-green); box-shadow: 0 0 0 3px rgba(112, 207, 93, .09); }
  .feed-visual--carrier .feed-visual-mark i:nth-child(5) { left: 95px; top: 10px; width: 24px; height: 24px; background: radial-gradient(circle at 35% 30%, #a6dce9, #5b9ec6 78%); box-shadow: 0 0 0 7px rgba(92, 168, 221, .11); }
  .feed-visual--carrier .feed-visual-mark i:nth-child(6) { left: 88px; top: 3px; width: 38px; height: 38px; border: 3px solid #9de08d; background: transparent; box-shadow: none; }
}