/* Willy Web · home activity feed ("Lately"). Platinum window, 1px lines, 8px grid.
   Greyscale; Wall and Build photos keep their colour (only photos are colour). Rendered by js/feed.js; the rows are the
   shared list cards from /css/items.css (loaded before this file). */
.feed { padding: 32px 16px 40px; background: var(--floor); }
.floor + .feed { padding-top: 0; }
.feed[hidden] { display: none; }
.feed__win {
  max-width: 640px; margin: 0 auto;
  background: #f7f7f7; border: 1px solid var(--ink); border-radius: 0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .14);
}
/* title bar: striped, title centred on its own grey plate */
.feed__head {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 24px; padding: 0 8px; margin: 0;
  background: var(--face); border-bottom: 1px solid var(--ink);
  font: 700 16px/24px var(--font-ui); letter-spacing: .01em;
}
.feed__head::before, .feed__head::after {
  content: ""; flex: 1; height: 11px;
  background: repeating-linear-gradient(to bottom, var(--ink-2) 0 1px, transparent 1px 2px);
  opacity: .55;
}
.feed__name { padding: 0 8px; }

/* the rows are the shared list cards (/css/items.css .ui-cards / .ui-card, Reads' "Reading now" size), one column at
   every width. Only feed extras live here: photo count badge, Preview stamp, press feedback. */
.feed__list.ui-cards { padding: 10px; grid-template-columns: minmax(0, 1fr); }
.feed__item { min-width: 0; }
.feed__item[hidden] { display: none; }
.feed__link { position: relative; height: 100%; -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.feed__count {
  position: absolute; right: 3px; bottom: 3px; z-index: 2;
  min-width: 16px; height: 16px; padding: 0 3px;
  font: 400 8px/14px var(--font-px); text-align: center;
  color: var(--hi); background: var(--ink); border: 1px solid var(--hi);
}
.feed__thumb--art img { object-fit: cover; object-position: 50% 50%; }
.feed__thumb.ui-colour img { filter: none; }
.feed__time { font-variant-numeric: tabular-nums; }
.feed__cta { display: block; margin-top: 3px; font: 600 12.5px/1.2 var(--font-body); color: var(--ink); }
a.feed__link:hover .feed__cta { text-decoration: underline; }
.feed__link:active .feed__cta { color: var(--hi); }
.feed__stamp {
  position: absolute; right: 8px; top: 8px;
  padding: 0 4px; height: 14px; font: 400 8px/12px var(--font-px); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); background: #fff; border: 1px dashed var(--ink);
}
.feed__link:active { background: var(--ink); border-color: var(--ink); color: var(--hi); transform: translateY(1px); }
.feed__link:active .ui-card__a { color: #dedede; }
.feed__link:active .ui-cover { border-color: var(--hi); }
.feed__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.feed__item.is-in { animation: feed-drop .42s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0ms) both; }
@keyframes feed-drop { from { opacity: 0; transform: translateY(-12px); } }

.feed__foot { display: flex; justify-content: center; padding: 0 8px 8px; }
.feed__foot[hidden] { display: none; }
.feed__more { min-height: 32px; min-width: 96px; padding: 4px 16px; border-width: 1px; border-radius: 6px; font-size: 16px; }
.feed__list + .feed__foot { padding-top: 0; }

@media (max-width: 360px) { .feed { padding-left: 8px; padding-right: 8px; } }
.is-preview .ui-pill { margin-right: 64px; }