/* Opt-in directory presentation only. Tool editors and artwork are unaffected. */
body[data-channel-card-ui] main [data-channel-card] {
  border: 1px solid #a9afb7;
  box-shadow: 0 4px 12px rgba(35, 43, 47, .08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body[data-channel-card-ui] main [data-channel-tone="1"] { --channel-card-tint: #f7e3e8; }
body[data-channel-card-ui] main [data-channel-tone="2"] { --channel-card-tint: #e2efdf; }
body[data-channel-card-ui] main [data-channel-tone="3"] { --channel-card-tint: #fbe4d5; }
body[data-channel-card-ui] main [data-channel-tone="4"] { --channel-card-tint: #e1eafb; }
body[data-channel-card-ui] main [data-channel-tone="5"] { --channel-card-tint: #fbf0ce; }
body[data-channel-card-ui] main [data-channel-tone="6"] { --channel-card-tint: #eae1f3; }
body[data-channel-card-ui] main [data-channel-tone="7"] { --channel-card-tint: #dcf0e9; }
body[data-channel-card-ui] main [data-channel-tone="8"] { --channel-card-tint: #f4dfd8; }
body[data-channel-card-ui] main [data-channel-tone="9"] { --channel-card-tint: #deeff5; }
body[data-channel-card-ui] main [data-channel-tone="10"] { --channel-card-tint: #f3e3ef; }
body[data-channel-card-ui] main [data-channel-tone="11"] { --channel-card-tint: #edf0d6; }
body[data-channel-card-ui] main [data-channel-tone="12"] { --channel-card-tint: #eee4d8; }
body[data-channel-card-ui] main [data-channel-card][data-channel-tone] [data-channel-art],
body[data-channel-card-ui] main [data-channel-card="plain"][data-channel-tone] {
  background: var(--channel-card-tint);
}
/* A visible pastel mat also works for photos that previously filled the card. */
body[data-channel-card-ui] main [data-channel-card] [data-channel-art] {
  box-sizing: border-box;
  padding: 12px;
}
body[data-channel-card-ui] main [data-channel-card] [data-channel-art] img {
  border-radius: 8px;
}
body[data-channel-card-ui] main [data-channel-card]:focus-visible {
  outline: 3px solid #2867d8;
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  body[data-channel-card-ui] main [data-channel-card]:hover {
    border-color: #a5adb6;
    box-shadow: 0 0 16px 3px rgba(60, 64, 67, .2), 0 7px 12px -4px rgba(60, 64, 67, .24);
    transform: translateY(-3px) scale(1.015);
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-channel-card-ui] main [data-channel-card] { transition: none; }
  body[data-channel-card-ui] main [data-channel-card]:hover { transform: none; }
}