/* The share row, and the feeds index.

   A separate file because six agents were editing site.css at once and a
   merge conflict in a stylesheet is a site that renders wrong rather than a
   site that fails loudly. Tokens are site.css's; nothing new is declared. */

/* ── the share row ────────────────────────────────────────────────────────
   A rule, the word, the address, and one button. No network buttons — see
   the comment at the top of templates/_share.html for why, which is a court
   ruling rather than a preference. */

.share{
  margin:calc(var(--u)*8) 0 0;
  padding-top:calc(var(--u)*2);
  border-top:1px solid var(--hair);
  display:flex; align-items:baseline; gap:calc(var(--u)*2);
  flex-wrap:wrap;
  font-size:var(--t-cap);
}
.share-label{
  color:var(--mute);
  text-transform:uppercase; letter-spacing:.08em;
}
/* The address is the product here, so it is set as text rather than hidden
   behind a word — somebody reading this off a screen to somebody else needs
   to be able to read it. It breaks anywhere rather than forcing the page
   sideways on a phone. */
.share-url{
  color:var(--grey); text-decoration:none;
  overflow-wrap:anywhere;
  border-bottom:1px solid var(--hair);
  transition:color .18s ease, border-color .18s ease;
}
.share-url:hover{color:var(--ink); border-color:var(--ink)}

.share-copy, .share-feed{
  font:inherit; font-size:var(--t-cap);
  background:none; color:var(--grey);
  border:1px solid var(--hair); padding:3px 10px;
  cursor:pointer; text-decoration:none;
  transition:color .18s ease, border-color .18s ease;
}
.share-copy:hover, .share-feed:hover{color:var(--ink); border-color:var(--ink)}
.share-copy[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .share-url, .share-copy, .share-feed{transition:none}
}

/* ── the feeds index ──────────────────────────────────────────────────────
   Eight hundred rows want to be scannable, not decorated. Two columns of
   fixed measure and one long left column, collapsing to a single deliberate
   column below 640px. */

.feednote{
  border-left:3px solid var(--link);
  padding:0 0 0 calc(var(--u)*3);
  margin:calc(var(--u)*4) 0 calc(var(--u)*7);
  max-width:60ch;
}
.feednote h2{margin-top:0}
.feednote p{color:var(--grey); font-size:var(--t-small)}
.feednote p b{color:var(--ink); font-weight:600}

.feedlist{list-style:none; margin:0 0 calc(var(--u)*5); padding:0}
.feedlist li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 7ch;
  gap:calc(var(--u)*2);
  align-items:baseline;
  padding:calc(var(--u)*1.25) 0;
  border-bottom:1px solid var(--hair);
}
.feedlist li > a:first-child{color:var(--ink); text-decoration:none}
.feedlist li > a:first-child:hover{text-decoration:underline; text-underline-offset:3px}
.feedlist .fd{
  color:var(--link); text-decoration:none; font-size:var(--t-cap);
  text-transform:uppercase; letter-spacing:.08em;
}
.feedlist .fd:hover{text-decoration:underline; text-underline-offset:3px}
.feedlist .dim{color:var(--mute); font-size:var(--t-cap); text-align:right}

@media (max-width:640px){
  .feedlist li{grid-template-columns:1fr auto; row-gap:2px}
  .feedlist .dim{grid-column:1; text-align:left}
  .share{gap:var(--u)}
}