/* /flux — old-school Twitter pastiche, BBS-nick voices, text-only.
   Same panel grammar as /roll, narrower column, no images. */

.flux-page > main { padding-top: 2.6em; }

.flux {
  max-width: 540px;
  margin: 0.6em auto 4em;
  padding: 0 0.8em;
}

/* ----------------------------------------------------------------------- */
/* profile header (only rendered when ?user= is set) */

.flux__hdr {
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 0.8em;
  margin-bottom: 0.8em;
}
.flux__hdr-top {
  display: flex;
  align-items: center;
  gap: 1em;
}
.flux__avatar {
  width: 80px;
  height: 80px;
  border: 2px solid #000;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 3px 3px 0 #000;
  flex-shrink: 0;
}
.flux__avatar svg { display: block; width: 100%; height: 100%; }
.flux__name {
  margin: 0.5em 0 0;
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 0.04em;
  word-break: break-word;
  text-align: left;
  border-bottom: 0;
  line-height: 1.1;
}
.flux__name::before,
.flux__name::after { content: none; }
.flux__name b { font-weight: normal; opacity: 0.55; margin-right: 0.15em; }
.flux__tag {
  margin: 0.15em 0 0;
  font-size: 0.85em;
  opacity: 0.7;
}
.flux__counts {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.8em;
  letter-spacing: 0.04em;
  min-width: 0;
}
.flux__counts li {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.flux__counts li::before { content: none; }
.flux__counts b {
  font-weight: normal;
  font-size: 1.25em;
  margin: 0;
}
.flux__counts span {
  margin: 0;
  font-size: 0.7em;
  opacity: 0.7;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .flux__avatar { width: 64px; height: 64px; }
  .flux__name { font-size: 1.2em; }
  .flux__counts b { font-size: 1.1em; }
}

/* ----------------------------------------------------------------------- */
/* feed */

.flux__feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.flux__feed li { padding: 0; }
.flux__feed li::before { content: none; }
.flux__feed-sentinel { height: 1px; }

/* ----------------------------------------------------------------------- */
/* post — pure text card with poster avatar on the left. CSS grid: avatar
   spans rows 1..3, with head / body / actions stacking in column 2.
   No image, no separate caption section. */

.post {
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6em;
  row-gap: 0.15em;
  padding: 0.55em 0.7em 0.5em;
}
.post__avatar {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 40px;
  height: 40px;
  border: 2px solid #000;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  align-self: start;
  flex-shrink: 0;
}
.post__avatar svg { display: block; width: 100%; height: 100%; }

.post__head {
  grid-column: 2;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  min-width: 0;
}
.post__head a, .post__head a:visited { color: #000; text-decoration: none; }
.post__head a:hover { background: #000; color: #fff; }
.post__head-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}
.post__head-when {
  margin-left: auto;
  opacity: 0.6;
  font-size: 0.85em;
  white-space: nowrap;
}

.post__body {
  grid-column: 2;
  font-size: 1em;
  line-height: 1.3;
  word-break: break-word;
  margin: 0.05em 0 0.15em;
}

.flux__mention,
a.flux__mention,
a.flux__mention:visited {
  color: #1a8a3a;
  font-weight: bold;
  text-decoration: none;
}
a.flux__mention:hover,
a.flux__mention:focus-visible {
  background: #1a8a3a;
  color: #fff;
  outline: none;
}

.post__actions {
  grid-column: 2;
  display: flex;
  gap: 0.9em;
  font-size: 0.9em;
  letter-spacing: 0.03em;
  margin-top: 0.15em;
}
.post__actions a, .post__actions a:visited { color: #000; text-decoration: none; }
.post__actions a:hover { background: #000; color: #fff; }
.post__actions .post__act { color: #000; opacity: 0.7; cursor: default; }
.post__actions .post__act-glyph {
  margin-right: 0.2em;
  /* Hint platforms toward text-presentation of the unicode action glyphs so
     they don't render as colour emoji on iOS / Android. */
  font-variant-emoji: text;
}

@media (max-width: 480px) {
  .post { padding: 0.45em 0.55em; column-gap: 0.45em; }
  .post__avatar { width: 32px; height: 32px; }
}

/* ----------------------------------------------------------------------- */
/* shared modal + btn — copied verbatim from /roll so flux loads
   independently of /roll's stylesheet. If a third modal consumer appears,
   promote .modal* to /style.css. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.modal__win {
  position: relative;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
  min-width: 18em;
  max-width: 26em;
  margin: 1em;
}
.modal__h {
  background: #000;
  color: #fff;
  padding: 0.2em 0.6em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95em;
}
.modal__body { padding: 0.7em 0.8em; }
.modal__msg { margin: 0 0 0.8em; font-size: 1em; line-height: 1.3; }
.modal__actions { display: flex; justify-content: flex-end; }

.btn-inv,
.btn-inv:visited {
  display: inline-block;
  padding: 0.05em 0.7em;
  background: #000;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.04em;
  font: inherit;
  border: 2px solid #000;
  cursor: pointer;
  margin-right: 0.4em;
}
.btn-inv:hover { background: #00c800; color: #000; }

.modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
}
.modal__list li::before { content: none; }
.modal__row { padding: 0; }
.modal__row + .modal__row { border-top: 1px solid #000; }
.modal__row-link {
  display: flex;
  gap: 0.6em;
  align-items: center;
  padding: 0.4em 0.7em;
  color: #000;
  text-decoration: none;
}
.modal__row-link:hover { background: #00c800; color: #000; }
.modal__row-av {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  image-rendering: pixelated;
  display: block;
}
.modal__row-av svg { display: block; width: 100%; height: 100%; }
.modal__row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.modal__row-name {
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal__row-sub {
  font-size: 0.85em;
  opacity: 0.75;
  overflow-wrap: anywhere;
}
.modal__list-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 0.7em;
  border-top: 2px solid #000;
}

/* unified flux modal — post on top, then likes section, then replies. */
.modal__win--flux { max-width: 30em; width: 30em; }
@media (max-width: 480px) {
  .modal__win--flux { width: auto; max-width: calc(100vw - 2em); }
}
.modal__body--flux {
  padding: 0;
  max-height: 80vh;
  overflow-y: auto;
}
.modal__post-host .post {
  border: 0;
  box-shadow: none;
  border-bottom: 2px solid #000;
}
.modal__post-host .post__body { cursor: default; }
.modal__section { border-top: 2px solid #000; }
.modal__section:first-of-type { border-top: 0; }
.modal__section-h {
  background: #000;
  color: #fff;
  padding: 0.15em 0.6em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85em;
}
.modal__list--replies { max-height: none; }
.modal__list--replies .modal__row-sub { white-space: normal; opacity: 0.95; }