.focus { max-width: 760px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s6); }
.focus__crumb { margin: 0 0 var(--s3); font-family: var(--display); letter-spacing: 0.12em; font-size: 0.8rem; }

/* On the permalink the image is shown whole; only the feed crops to 16:9. */
.focus__post .post__media { aspect-ratio: auto; }
.focus__post .post__image { height: auto; object-fit: contain; }
.focus__post .post__media::after { content: none; }
/* This is the page the feed's clamped card sends you to, so nothing is cut off here. */
.focus__post .post__body { display: block; overflow: visible; }

.post__open { display: block; color: inherit; }
.post__open:hover { text-decoration: none; }

.post__embed {
  position: relative;
  margin-top: var(--s3);
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ink);
  background: #000;
}
.post__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The still, standing in for the player until someone asks for it. */
.post__embed-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  display: block;
}
.post__embed-thumb {
  width: 100%;
  height: 100%;
  /* hqdefault is 4:3 with the video letterboxed inside it, so cover crops the bars
     away rather than showing black edges on a 16:9 card. */
  object-fit: cover;
  display: block;
}
.post__embed-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  pointer-events: none;
}
.post__embed-badge svg { width: 100%; height: auto; display: block; }
.post__embed-badge-bg { fill: #1a1a1a; opacity: 0.85; transition: fill var(--fast) linear, opacity var(--fast) linear; }
.post__embed-badge-arrow { fill: #fff; }
.post__embed-play:hover .post__embed-badge-bg,
.post__embed-play:focus-visible .post__embed-badge-bg { fill: var(--accent); opacity: 1; }
.post__embed-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid #2b2b2b;
}
.actions__counts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  font-family: var(--display);
  margin-right: auto;
}
.actions__count-item { display: inline-flex; align-items: baseline; gap: 3px; }
.actions__count-sep { font-size: 0.62rem; color: var(--paper-dim); }
/* The number is what a glance is meant to land on. It reads brighter and bigger than
   the site's usual dim meta text, and the word beside it drops down to that dim
   register instead; the count matters, "LIKES" is just there to say of what. */
.actions__count {
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.actions__count-label {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
}

.action-btn {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  color: var(--paper);
  background: none;
  border: 1px solid var(--paper-dim);
  cursor: pointer;
  transition: color var(--fast) linear, border-color var(--fast) linear, transform var(--fast) var(--ease-slam);
}
/* Hover brightens; the accent is reserved for "you have already done this".
   They used to be the same colour, and the pointer is still sitting on the button
   the moment you press it; so un-reposting looked like nothing had happened until
   you moved the mouse away. Two states that mean different things cannot look the
   same at the one moment you are looking hardest. */
.action-btn:hover { color: var(--paper); border-color: var(--paper); transform: translateY(-2px); text-decoration: none; }
/* Lit, not filled. A solid accent block in a row of outlined buttons reads as an
   alert rather than as "you already did this"; on a red-accent wall a reposted
   post looked like an error state. The filled glyph carries the meaning with it. */
.action-btn.is-on { color: var(--accent); border-color: var(--accent); background: none; }
.action-btn.is-on:hover { color: var(--accent); border-color: var(--accent); }

.action-btn,
.action-more__item { display: inline-flex; align-items: center; gap: 6px; }

/* The icon is the button; the word appears when you point at it.
 *
 * The label stays in the markup rather than becoming a title or an aria-label, so it
 * is still the button's accessible name, still read out, and still there when the
 * stylesheet is not. A native tooltip would wait a second and could not be styled to
 * match anything here.
 *
 * What went wrong the first time was size, not the idea: each button sized itself to
 * its own hidden label, so five boxes came out five different widths and the row read
 * as a mistake. They are one fixed square now; see below. Inside the "..." panel the
 * labels are the whole point, so none of this applies there. */
.actions > form > .action-btn,
.actions > .action-btn,
.actions > .action-share > .action-btn,
.actions > .action-more > .action-btn {
  position: relative;
  /* One size for all five, set here rather than left to each label's width. The
     dots sit inside a <details> of their own, so they need naming separately or
     they keep their old padding and come out shorter than the rest. */
  width: 38px;
  height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  gap: 0;
}

.actions > form > .action-btn > span,
.actions > .action-btn > span,
.actions > .action-share > .action-btn > span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 3px 8px;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--on-accent);
  background: var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fast) linear, transform var(--fast) var(--ease-slam);
}
.actions > form > .action-btn:hover > span,
.actions > form > .action-btn:focus-visible > span,
.actions > .action-btn:hover > span,
.actions > .action-btn:focus-visible > span,
.actions > .action-share > .action-btn:hover > span,
.actions > .action-share > .action-btn:focus-visible > span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* One icon size across the row, including the dots; they were a pixel bigger than
   the rest and it showed once the boxes matched. */
.actions .action-icon { width: 17px; height: 17px; }

/* Outlines, not solids; the row would read as a toolbar of stickers otherwise, and
   these sit inside a card that is already dense. currentColor is the whole point:
   one icon serves the resting, hover and lit states. */
.action-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The dots are the one mark that reads wrong as an outline. */
.action-icon--more { fill: currentColor; stroke: none; }
/* A liked post fills its heart and a reposted one fills its arrowheads. Nothing else
   about the glyph changes, so the row does not jump. */
.action-btn.is-on .action-icon--like,
.action-btn.is-on .action-icon--repost,
.action-more__item.is-on .action-icon--save { fill: currentColor; }


/* Everything that is not a first reach: saving, copying the link out of the site. */
.action-more { position: relative; }
.action-more > summary { list-style: none; cursor: pointer; }
.action-more > summary::-webkit-details-marker { display: none; }
.action-more__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: var(--s1);
  background: var(--ink-soft);
  border: var(--edge);
  border-top: 5px solid var(--accent);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
}
.action-more__item {
  width: 100%;
  padding: var(--s1) var(--s2);
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-align: left;
  color: var(--paper);
  background: none;
  border: 0;
  cursor: pointer;
}
.action-more__item:hover,
.action-more__item:focus-visible { color: var(--accent); background: rgba(255, 255, 255, 0.05); }
.action-more__item.is-on { color: var(--accent); }
.action-more__panel form { margin: 0; }

@media (hover: none) {
  /* Nothing to hover with, so the tooltip would only ever appear stuck open after a
     tap. The icons carry it. */
  .actions > form > .action-btn > span,
  .actions > .action-btn > span,
  .actions > .action-share > .action-btn > span { display: none; }
}

@media (max-width: 560px) {
  /* The counts take their own line so the five buttons keep theirs. Sharing one row,
     the last two wrapped underneath and the row read as two broken halves. */
  .actions__counts { flex: 0 0 100%; margin-right: 0; }
  .actions { justify-content: space-between; }
}

.action-share { position: relative; }
.action-share > summary { list-style: none; }
.action-share > summary::-webkit-details-marker { display: none; }
.action-share__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 280px;
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--ink-soft);
  border: var(--edge);
  border-top: 5px solid var(--accent);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
  animation: slam 200ms var(--ease-slam) both;
}
.action-share__panel label {
  display: grid;
  gap: var(--s1);
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--paper-dim);
}
.action-share__panel input, .action-share__panel select {
  font: inherit;
  font-size: 0.85rem;
  padding: var(--s1) var(--s2);
  color: var(--paper);
  background: #000;
  border: 1px solid var(--paper-dim);
}
.action-share__panel .btn { transform: none; font-size: 0.78rem; }

.shared-source {
  margin: var(--s3) 0 0;
  padding: var(--s3);
  border-left: 4px solid var(--paper-dim);
  background: #0c0c0c;
  font-size: 0.92rem;
}
.shared-source__label {
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--paper-dim);
}
.shared-source img { max-width: 100%; margin-top: var(--s2); border: 2px solid var(--ink); }

.comment-form { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); margin-bottom: var(--s3); }
.comment-form textarea {
  font: inherit;
  padding: var(--s2);
  color: var(--paper);
  background: #000;
  border: 2px solid var(--paper-dim);
  resize: vertical;
}
.comment-form textarea:focus { border-color: var(--accent); outline: none; }

.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.comment {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2);
  background: var(--ink-soft);
  border-left: 3px solid var(--paper-dim);
}
.comment__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  background: var(--accent);
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
  overflow: hidden;
}
.comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment__body { display: grid; gap: 2px; min-width: 0; }
.comment__who { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--accent); }
.comment__text { line-height: 1.5; overflow-wrap: anywhere; }
.comment__time { font-size: 0.66rem; color: var(--paper-dim); }

/* ---- replies ----

   One level, indented once. The replies list is a full-width row of the comment
   it belongs to rather than another column, so a long thread on a phone keeps
   the same text width as the comment above it instead of narrowing with depth. */
.comment { flex-wrap: wrap; }
/* Indented with padding, not margin: the list is a full-width row of the comment it
   belongs to, and a left margin on top of that 100% pushed the replies; and the
   controls in their corner; out past the card's right edge. */
.comments--replies {
  flex: 0 0 100%;
  margin: var(--s2) 0 0;
  padding-left: var(--s4);
  border-left: 1px solid var(--paper-dim);
}
.comment--reply { background: none; border-left: 3px solid var(--accent); }
/* Named, not nested: a reply to a reply sits at this same level and says who it
   answered, which is the whole reason the parent is stored as it happened. */
.comment__answering {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--paper-dim);
}
/* ---- the corner ----

   REPLY and the dots, top right, both opening a panel anchored to the same edge.
   They are the only controls on a comment, and keeping them in one corner is what
   lets the comment itself read as text. */
.comment__tools {
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s1);
  flex: 0 0 auto;
}
.comment-menu { position: relative; }
.comment-menu > summary { list-style: none; cursor: pointer; }
.comment-menu > summary::-webkit-details-marker { display: none; }
.comment-menu__trigger {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--paper-dim);
  border: 1px solid transparent;
}
.comment-menu__trigger:hover,
.comment-menu[open] > .comment-menu__trigger { color: var(--accent); border-color: var(--accent); }
/* The dots need the taller line box, or they sit a pixel above REPLY beside them. */
.comment-menu__trigger--dots { font-size: 0.9rem; line-height: 0.9; padding: 3px 6px; }

.comment-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: grid;
  gap: var(--s1);
  width: max-content;
  min-width: 200px;
  max-width: min(320px, 78vw);
  padding: var(--s2);
  background: var(--ink-soft);
  border: var(--edge);
  border-top: 5px solid var(--accent);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
}
.comment-menu__panel form { margin: 0; display: grid; gap: var(--s1); }
.comment-menu__item {
  width: 100%;
  padding: var(--s1) var(--s2);
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-align: left;
  color: var(--paper);
  background: none;
  border: 0;
  cursor: pointer;
}
.comment-menu__item:hover,
.comment-menu__item:focus-visible { color: var(--accent); background: rgba(255, 255, 255, 0.05); }
.comment-menu__item--danger:hover { color: var(--accent-sentai); }
.comment-menu__label {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--paper-dim);
}
.comment-menu__report { padding-top: var(--s1); border-top: 1px solid #2b2b2b; }
.comment-menu__report input[type="text"] {
  width: 100%;
  padding: var(--s1);
  font: inherit;
  font-size: 0.82rem;
  color: var(--paper);
  background: var(--ink);
  border: var(--edge);
}
.comment-menu__report input[type="text"]:focus { border-color: var(--accent); outline: none; }

/* The reply box is the one panel that wants width for its own sake. */
.comment-menu--reply .comment-menu__panel { min-width: min(320px, 78vw); }
.comment-form--reply { margin: 0; }

/* Quoted original inside a share. */
.shared-source__label a { color: var(--accent); }
.shared-source__body { margin: 0 0 var(--s2); line-height: 1.5; overflow-wrap: anywhere; }
.shared-source__media { display: block; margin-bottom: var(--s2); }
.shared-source__media img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border: 2px solid var(--ink);
}
.shared-source__link {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}
.shared-source--gone {
  font-size: 0.82rem;
  color: var(--paper-dim);
  font-style: italic;
  border-left-color: var(--paper-dim);
}

/* Phones: the share panel opens in place rather than hanging off the button.
   Anchored, it sat at -32..273; a third of it off the left edge, with the
   division picker unreachable. See the matching note in wall.css. */
@media (max-width: 640px) {
  .action-share[open] { flex: 1 0 100%; }
  .action-share__panel {
    position: static;
    width: auto;
    margin-top: var(--s2);
    box-shadow: none;
    transform: none;
    animation-name: panel-rise;
  }
}

/* Touch targets. LIKE / COMMENT / SHARE were 22px tall; fine for a cursor,
   below the ~40px a fingertip can hit reliably. Only padding changes, so the
   buttons keep their look. */
@media (pointer: coarse) {
  .action-btn { padding: 9px 14px; }
  .linkish { padding: 8px 0; }
  .shared-source__link { display: inline-block; padding: 8px 0; }
  /* Lives here rather than in wall.css: post cards also appear on profiles, which
     do not load the wall stylesheet. */
  .post__open { display: inline-block; padding: 8px 0; }
  .actions { gap: var(--s2) var(--s3); }
}

/* ---- a post that was passed along ----

   Marked at the top, before the post is read. The quoted original further down was
   the only sign before, and by then a reader had already taken the caption for the
   post itself. */
.post__repost-mark {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--s2);
  padding-bottom: var(--s2);
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  border-bottom: 1px solid #2b2b2b;
}
.post__repost-mark .action-icon { width: 15px; height: 15px; fill: currentColor; }
/* The caption belongs to the person who passed it along, not to the post being
   quoted, so it reads as theirs rather than as the body of the thing below it. */
.post__body--caption { font-size: 0.95rem; }

/* The one control in the row that is a sentence rather than an icon. Held to the
   same square as the rest it clipped its own label. */
.actions > .action-btn--wide {
  width: auto;
  height: auto;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
}

/* The second destination in the share panel, explaining itself before the button
   that does it. Unstyled it read as a stray line of body text between two buttons. */
.action-share__where {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--paper-dim);
}
.action-share__where strong { color: var(--paper); font-family: var(--display); letter-spacing: 0.06em; }