/* The "shared with me" shelf, mounted by every variant (web/core/shared.mjs builds it).
   Self-contained like auth.css, and for the same reason: three pages mount this and they do
   not agree on what a `button` or an `ol` looks like, so it brings its own.
   Same six colours as everything else - dark, one accent, no second one. */
.shelf { margin-top: 2.5rem; }
/* Self-contained means this too: the module hides itself with `node.hidden`, and not
   every page that mounts it carries the [hidden] rule of its own. */
.shelf[hidden] { display: none; }
.shelf .head {
  display: flex; gap: .75rem; align-items: baseline;
  border-bottom: 1px solid var(--line); padding-bottom: .6rem;
}
/* Sentence case, not tracked-out caps - web/core/tokens.css says why. */
.shelf h3 { font-size: 13px; color: var(--dim); font-weight: 600; margin: 0; }
.shelf .count { margin-left: auto; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.shelf ol { list-style: none; margin: 0; padding: 0; }
.shelf li {
  border-bottom: 1px solid var(--line); padding: .7rem 0;
  display: flex; gap: .75rem; align-items: baseline;
}
/* The row is the same shape as a queue row minus one thing: there is no state chip, because
   your state on someone else's item does not exist yet (docs/decisions.md 08). */
.shelf .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf .title a { color: inherit; text-decoration: none; }
.shelf .title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.shelf .meta { color: var(--dim); font-size: 12px; white-space: nowrap; text-decoration: none; }
.shelf a.meta:hover { color: var(--text); }
.shelf button {
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: .1rem .4rem; font: inherit; font-size: 12px; color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.shelf button:hover { border-color: var(--accent); }
.shelf .say { color: var(--dim); font-size: 13px; margin: .6rem 0 0; }
.shelf .say:empty { display: none; }
/* The inbox (web/core/inbox.mjs) is the same shelf with two differences: it sits ABOVE the
   queue, and a row may carry the sender's note on a line of its own. */
.inbox { margin: 1.5rem 0 1rem; }
.inbox li { flex-wrap: wrap; }
.inbox .from { color: var(--text); }
.inbox button.drop { color: var(--dim); }
.inbox .why {
  flex-basis: 100%; margin: .15rem 0 0 calc(1.9rem + .75rem); color: var(--dim); font-size: 13px;
  border-left: 2px solid var(--line); padding-left: .6rem;
}
/* The phone. A shelf row carries a title, a sender, a host and up to two buttons, and on one
   390px line the title lost: it was squeezed to "H." while the controls kept their width. The
   title takes the first line whole and everything else wraps under it, starting where the title
   starts. The host goes, because on a phone the sender and the actions are what a row is for. */
@media (max-width: 52rem) {
  .shelf li { flex-wrap: wrap; row-gap: .35rem; }
  .shelf .title { flex: 1 1 calc(100% - 1.9rem - .75rem); white-space: normal; }
  .shelf .title + * { margin-left: calc(1.9rem + .75rem); }
  .inbox .from ~ .meta { display: none; }
  .shelf button { margin-left: auto; }
  .shelf button + button { margin-left: 0; }
}