/* New posts while the page is open: the notice at the head of the home page's feed.
 *
 * Hand-written, like _cookies.css and _links.css. Jack, 15 October 2026: "it should also auto add more, eg same way
 * twitter does, a thing comes up saying there more posts available". The markup is
 * resources/js/components/design/new-posts-notice.tsx; the asking is lib/use-new-posts.ts. Register row "New posts
 * while the page is open", docs/DESIGN-SYSTEM.md section 12.
 *
 * Every class is npn- prefixed (checked against every sheet and component on 15 October: npn appears nowhere else).
 * It does not wear .btn: the house button's rule is 50px tall with its label centred, and a half-overridden button wins
 * the other half. These are the house button's own values, written out whole, at 44 tall, with the arrow kept in place
 * on the hover's wipe as well as at rest so the words do not move when the fill comes in.
 *
 *   .npn-at   a mark at the head of the feed, nothing to see: the page watches it to know the reader is at the top
 *   .npn      the holder, no height, held 14px under the bar while the feed is on screen (sticky in #hm-feed, so it
 *             leaves with the feed's end and never sits over the footer); z-index 60, under the bar, the menu, the
 *             cookie notice (70) and the basket, as the notices register asks
 *   .npn-go   the one control. Shell ground, a 1px tweed line, tweed words in Jost, an arrow up; the tweed wipes in from
 *             the left on hover with the words turning shell along its edge (the Museum Ordrupgaard mechanism).
 *             Placed by the page on the centre of the feed's own column (left: in px, set from the posts' column);
 *             50% until it has been measured
 */
.npn-at{display:block;height:0;margin:0;padding:0}
.npn{position:sticky;top:calc(var(--bar,76px) + 14px);z-index:60;height:0;margin:0;padding:0;pointer-events:none}
.npn-go{
  position:absolute;top:0;left:50%;translate:-50% 0;pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;box-sizing:border-box;
  height:44px;min-height:44px;margin:0;padding:0 20px 0 18px;
  border:1px solid var(--tweed);border-radius:0;background:var(--shell);color:var(--tweed);
  font-family:var(--sans);font-weight:400;font-size:14.5px;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;
  box-shadow:0 12px 28px rgba(65,64,66,.26);text-decoration:none;cursor:pointer;
  animation:npn-in .5s var(--ease) both}
.npn-go svg{display:block;flex:none;width:11px;height:13px}
.npn-go::after{
  content:attr(data-label);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:flex-start;padding:0 20px 0 39px;
  background:var(--tweed) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M5.5 12.5V1.2M1 5.6l4.5-4.5L10 5.6' fill='none' stroke='%23F9F5EE' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat 18px 50% / 11px 13px;
  color:var(--shell);clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease);pointer-events:none}
.npn-go:hover::after{clip-path:inset(0 -1% 0 0)}
.npn-go:focus-visible{outline:2px solid var(--august);outline-offset:3px}
@keyframes npn-in{from{opacity:0;transform:translateY(-8px)}}

/* Every effect stops, not slows */
@media (prefers-reduced-motion:reduce){
  .npn-go{animation:none}
  .npn-go::after{transition:none}
}