/* Additions to the design system, kept separate so modern.css stays exactly as
   the design tool produced it and the delta is always visible.
   Everything here exists because the mockups used flat colour blocks as
   thumbnail stand-ins and never had to render a real image. */

/* .thumb is a 16:9 overflow:hidden box with a background colour. It has no rule
   for an actual <img> child, so without this the image renders at its intrinsic
   size and blows out of the card. The background stays visible as the
   placeholder for the 3.9% of stashes that have no processed thumbnail. */
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Every card carries a .t1–.t8 tint now, so a card with no usable image is a
   deliberate colour block rather than a grey hole — including the ones whose
   third-party host has quietly stopped serving, which nothing on the server can
   know about. A broken <img alt=""> paints nothing, so the tile shows through
   and the fallback covers both cases without having to tell them apart.

   Mixed back toward the surface because the design's raw tints were stand-ins
   in a mockup where they WERE the artwork. Here they sit under the 96% of cards
   that do load, and at full strength every grid flashes a paintbox while images
   arrive. At 42% they read as a placeholder that happens to have a colour.
   Browsers without color-mix keep the solid tint from modern.css — a plainer
   fallback, not a broken one. */
.thumb.t1 { background: color-mix(in srgb, var(--t1) 42%, var(--surface-2)) }
.thumb.t2 { background: color-mix(in srgb, var(--t2) 42%, var(--surface-2)) }
.thumb.t3 { background: color-mix(in srgb, var(--t3) 42%, var(--surface-2)) }
.thumb.t4 { background: color-mix(in srgb, var(--t4) 42%, var(--surface-2)) }
.thumb.t5 { background: color-mix(in srgb, var(--t5) 42%, var(--surface-2)) }
.thumb.t6 { background: color-mix(in srgb, var(--t6) 42%, var(--surface-2)) }
.thumb.t7 { background: color-mix(in srgb, var(--t7) 42%, var(--surface-2)) }
.thumb.t8 { background: color-mix(in srgb, var(--t8) 42%, var(--surface-2)) }

/* The mockup's cards were <a> wrapping <span>s with no image, so the anchor
   never needed this. */
.card {
  text-decoration: none;
  color: inherit;
}

/* Long single-token titles (slugs, run-on caps) would otherwise widen the grid
   column past its track. */
.card-title,
.card-sub,
.card-by {
  overflow-wrap: anywhere;
}

.card-by {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The design marked the ads row with an inline style. Same result, but as a
   class so the one place that decides "is this host ad-bearing" stays in Go
   (domain.HostTier) rather than being half-expressed in markup. */
.prow .v-warn {
  color: var(--warn);
}

/* Reference IDs are readable_id slugs — long, hyphenated, and they would
   otherwise push the 344px sidebar wider than its track. */
.prow .v {
  overflow-wrap: anywhere;
}

/* The poster behind the click-to-load play button. The mockup's .player had a
   flat background, so there was never an image to place. */
.player-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dimmed so the play button and the destination line stay legible over
     arbitrary photography. */
  filter: brightness(0.45);
}

/* Optional free-text description. 55% of stashes have none, so this often
   isn't rendered at all.

   Padded on both sides, not just the top. With `12px 0 0` the tag row sat
   flush against the last line of prose — and a wrapped paragraph running
   straight into a row of pills reads as one block rather than two things.
   .taglist carries only 4px of its own, which is the gap between its rows
   rather than a gap above it. */
.watch-desc {
  padding: 12px 0 16px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-line;
}

/* Standalone pages with no design reference of their own (404, error). */
.pagepad {
  padding: 48px 22px 80px;
  max-width: 620px;
}
.pagepad h1 {
  font-size: 28px;
  letter-spacing: -0.022em;
}
.lede {
  padding: 10px 0 22px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Image stashes. The design only ever mocked up video, so .player has no
   still-image counterpart. Images are 12,745 records (nearly all Reddit) and
   need no facade: there is no iframe and nothing to popunder.
   max-height keeps a tall portrait shot from pushing the record panel and the
   related grid entirely below the fold. */
.imgview {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  justify-content: center;
}
.imgview img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── the tag row, collapsed ─────────────────────────────────────
   Not in the mockup: it renders 24 pills flat because it never had to show a
   record with 59 of them. The median stash carries 6 tags and the 90th
   percentile carries 37, so the page has to hold both without the long case
   burying the description and the related grid under four rows of pills.

   A checkbox and a label rather than script — there is no JS on this site.
   Every tag is in the DOM whether or not it is visible, which is the point:
   they are internal links to the tag pages, and dropping them server-side
   would drop this record's contribution to the link graph. display:none is
   still crawled and still followed. */
.taglist-cut a.pill:nth-of-type(n+11),
.taglist-cut span.pill:nth-of-type(n+11) { display: none }

.taglist-cut #more-tags:checked ~ a.pill,
.taglist-cut #more-tags:checked ~ span.pill { display: inline-flex }

/* The label is the toggle, so it has to look and behave like the pills it sits
   among — including a focus ring, since the checkbox itself is visually
   hidden and the label is what a keyboard lands on. */
.tag-more { cursor: pointer; user-select: none }
.taglist-cut .tag-more-out { display: none }
.taglist-cut #more-tags:checked ~ .tag-more .tag-more-in { display: none }
.taglist-cut #more-tags:checked ~ .tag-more .tag-more-out { display: inline }
.taglist-cut #more-tags:focus-visible ~ .tag-more { outline: 2px solid var(--accent); outline-offset: 2px }

/* ── the like button, made real ─────────────────────────────────
   .watch-acts is a flex row and its children are the buttons. Wrapping one in
   a <form> — which it needs, because this works without JavaScript — would
   otherwise put a block-level box between the row and its item, and the button
   stops being sized by the row. display:contents removes the form from the box
   tree while leaving it in the DOM, so the markup gains a form and the layout
   gains nothing. */
.watch-acts form { display: contents }

/* The signed-out and no-write-connection variants are an <a> and a <span>, not
   buttons. .btn already sets inline-flex; these only need the text not to look
   like a link. */
.watch-acts a.btn { text-decoration: none }
.watch-acts span.btn { cursor: default }

/* ── profile: the gap when the tab bar is absent ─────────────────
   The tab row usually separates the stats line from the grid. It is not always
   there: a profile whose owner has no collections, likes, followers or
   following renders a single Stashed pill, and one with none of those and no
   stashes renders the empty state directly under the numbers. Adjacency does
   the work — when .ctrl is between them these do not match. */
.stats + .grid,
.stats + .pempty { padding-top: 18px }

/* An inert pill. Collections has 1,339 real rows behind it and no page to
   show them on yet, so the count is stated and the pill does not pretend to
   be a link — .pill is styled for both an <a> and a <span>. */
.ctrl .pill.off { opacity: .45; cursor: default }
.ctrl .pill.off:hover { background: var(--surface-2); color: var(--text-2) }

/* A people list with no rank column.
   .prow2 is a four-column grid — rank, avatar, name, numbers — because the
   design's Stashers page IS a ranking, most prolific first. A follower list is
   in follow order, where a leading number reads as a position someone holds.
   Drop the column rather than render a meaningless one. */
.people-nr .prow2 { grid-template-columns: 40px minmax(0, 1fr) auto }

/* Cover tiles hold real images.
   The design's .ct is `display:block` and nothing more, because in the mockup
   each tile is an empty span with a background colour. A real <img> in a grid
   cell keeps its intrinsic aspect ratio and leaves the rest of the cell empty,
   which is what a one-item collection looked like: a picture on the left and a
   grey gap on the right. */
img.ct { width: 100%; height: 100%; object-fit: cover }

/* Breathing room above a control row that follows copy.
   .ctrl is `padding:0 14px 16px` — no top padding at all, because on the index
   it sits under .sec, which brings its own. Everywhere it follows body text
   the design adds `style="padding-top:18px"` inline, on five of its twelve
   uses. Same 18px, as a rule rather than an attribute, for the two places this
   site has: the collections intro and the profile stats line. */
.intro + .ctrl,
.stats + .ctrl { padding-top: 18px }

/* And below it. .intro carries no bottom padding — on the tag page it is
   always followed by .rel or another .intro, both of which bring their own,
   so the gap never had to exist until a page put copy directly above a grid.
   Collections is the first. */
.intro + .colls,
.intro + .grid { padding-top: 16px }

/* The community banner used to be styled here — a .cbanner strip, then a
   .chero with its own padding and a vertical scrim. Both are gone: the design
   now ships .pro-ban and .cban in modern-community.css, behind the header
   rather than above it, with one angled gradient instead of my two stacked
   ones. Its own comment explains why mine washed out: "Two overlapping
   gradients at ~.5 each composite to ~.75 everywhere ... the banner was
   technically present and visually gone." */

/* Tiles in a Following row hold real images.
   .prow-cov styles `span:not(.av)` — in the design each tile is an empty span
   with a background colour. A real <img> in that 38px box has no sizing at
   all and renders at its intrinsic width, which came out as a thin vertical
   strip. Same shape of bug as the collection cover tiles. */
.prow-cov img { display: block; width: 100%; height: 100%; object-fit: cover }

/* The paste step has one column.
   .add is a two-column grid above 1000px, which is right once there is a draft
   to put beside the link — but on the first step there is nothing for the
   second column and the form sat in half a screen of empty space. */
.add-solo { grid-template-columns: minmax(0, 1fr) !important; max-width: 720px }


/* ── controls that are not buttons ─────────────────────────────────────────
   .btn and .pill set no cursor: both rely on <button> and <a href> having one
   natively. Every no-JS control on this site is a <label> or a <summary>
   instead — Share, Report, "Show all", the tag list's "+N more", and the bell
   — and neither element has one, so each looked inert on hover.

   Site-wide rather than per page, because the bell is chrome: it renders on
   every signed-in page, and the sheet these rules started in is loaded by one. */
label.btn,summary.btn,label.pill,summary.pill{cursor:pointer}
summary.btn,summary.pill{list-style:none}
summary.btn::-webkit-details-marker,
summary.pill::-webkit-details-marker{display:none}

/* The bell's <details> wrapper.
   
   display:contents, so the summary itself is what sits in .top-acts' flex row
   — a <details> is display:block and would otherwise break that row.
   
   Deliberately NOT position:relative. .notif is positioned at right:14px,
   top:58px, which are coordinates against the page rather than against the
   bell; giving this wrapper a position would anchor the panel to the icon and
   put it off-screen. */
.bell-wrap{display:contents}

/* ── /following covers ─────────────────────────────────────────────────────
   .fol-cov is a 42x42 2x2 grid in the design — four tiles of a collection's
   contents. domain.Subscription carries ONE cover, not four, so this port puts
   a single <img> in it, which the grid dutifully placed in cell one at its
   natural size: a thumbnail in the corner of an empty box.

   Spanning both tracks makes the one image the whole tile. The alternative is
   four covers per subscription, which is four more rows per subscription in a
   query that already runs three unions — worth it only if the mosaic turns out
   to be worth it. */
.fol-cov img{
  grid-column:1/-1;grid-row:1/-1;
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ── a .sec whose count line is allowed to wrap ────────────────────────────
   .sec p is white-space:nowrap, which is right for the lines it was written
   for — "1–60 of 1,339" reads badly broken across two rows. /following's line
   names three kinds rather than two, and a nowrap item in a space-between flex
   row cannot shrink: it pushed the whole header past the right edge of the
   viewport, further out than the cards below it.

   Opt-in rather than changing .sec, because every other page using it has a
   line short enough that nowrap is doing useful work. */
.sec-wrap p{white-space:normal;text-align:right;min-width:0}

/* The account menu is a <details>, so its trigger is a <summary> where the
   design has a <button> — same treatment the bell and the rest need. */
summary.acct-btn{cursor:pointer;list-style:none}
summary.acct-btn::-webkit-details-marker{display:none}
/* Sign out is a POST, so it is a <button> in a form where the design's other
   items are anchors. .acct-grp styles `a`; this gives the button the same row. */
.acct-grp form{display:block}
.acct-grp button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 13px;font-size:13.5px;font-weight:600;
  color:var(--text-2);background:none;cursor:pointer;text-align:left;
}
.acct-grp button:hover{background:var(--surface-2);color:var(--text)}

/* The stasher block on a record is a link now — provenance is this site's
   differentiator, and the person's page was reachable from every record card
   in the archive except the record itself. .uploader is a flex row; the
   anchor takes the avatar and the name and leaves the button beside it. */
.uploader-id{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.uploader-id:hover strong{color:var(--accent)}

/* One presence dot, not two.
   modern.css draws both: a dot on the avatar (.pro-av::after) and another
   before the words (.stats .live::before). Together they say the same thing
   twice, six inches apart. The avatar one stays — it sits on the thing it is
   about, and it reads at a glance without the sentence. */
.stats .live::before{display:none}

/* A notification row is a form-button, not a link: one press has to mark it
   read as well as go there, and a link can only do the second without script.
   These rules make the button read as the text it replaced. */
.nrow-go{display:inline}
.nrow-go button{
  display:inline;padding:0;background:none;text-align:left;
  font:inherit;color:inherit;cursor:pointer;
}
.nrow-go button:hover{text-decoration:underline}

/* ── Deleting your own comment ─────────────────────────────────────────────
   A checkbox and a label, like every other no-JS control here. The checkbox is
   .sr (off-screen, still focusable) and the label is the button, so the confirm
   opens with a click or with the keyboard and needs no script.

   The id carries the comment's uuid, so each row gets its own toggle. Sharing
   one id across rows would open every confirm at once, which on a delete is
   worse than an ordinary bug. */
.cmt-acts input[type="checkbox"] ~ .cmt-del { display: none }
.cmt-acts input[type="checkbox"]:checked ~ .cmt-del { display: block }
/* The checkbox is visually hidden, so the label is what a keyboard lands on and
   the only thing that can show a focus ring. */
.cmt-acts input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cmt-del {
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.cmt-del p {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-2);
}
.cmt-del-acts { display: flex; align-items: center; gap: 8px; padding-top: 11px }
/* The form wraps only the destructive button; display:contents keeps it out of
   the flex row's box tree so both controls size as siblings. Same trick as
   .watch-acts form. */
.cmt-del-acts form { display: contents }

/* YOU, beside STASHED IT. .op is the design's badge; this is the quieter
   variant, because whose comment it is orients you and does not claim
   authority the way "stashed it" does. */
.op-you { background: var(--surface-3); color: var(--text-2) }

/* ── Who's here, named ─────────────────────────────────────────────────────
   The design's 8 Aug revision replaced the avatar row with named rows, so
   .who-row and .who-more in modern-rail.css no longer have anything to style.
   These are the rows that replaced them: avatar, name, and a sub-line saying
   whether you follow them and how much they have kept.

   Deliberately close to .rank in modern-rail.css rather than reusing it: a rank
   carries a position number in a fixed first column and these do not, and
   bending .rank around a missing column would leave every ranking on the site
   depending on how this module happens to be built. */
.who-p {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.who-p .av { width: 34px; height: 34px; font-size: 13px; flex: none }
.who-b { min-width: 0 }
.who-b strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-p:hover .who-b strong { color: var(--accent) }
.who-b span {
  display: block;
  padding-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
}
.who-b b { color: var(--text-2); font-weight: 700 }

/* The summary lines under the named rows. A rule above the first, because the
   named rows are people and these are counts, and running them together reads
   as a fourth person whose name is a number. */
.who-rest {
  padding-top: 9px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-3);
}
.who-p + .who-rest {
  margin-top: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.who-rest b { color: var(--text-2); font-weight: 700 }

/* The activity feed's mini card holds a real image.
   Fourth time: .thumb, img.ct, .prow-cov img and now .mini-thumb all needed
   this, because every one of them is an empty span with a background colour in
   the mockup and none of them ever had to render a photograph. An <img> with no
   sizing takes its intrinsic width and blows out of the 150px tile.

   Tints mixed toward the surface for the same reason as .thumb: the raw values
   are artwork in a mockup, and here they sit under images that mostly load. */
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.mini-thumb.t1 { background: color-mix(in srgb, var(--t1) 42%, var(--surface-2)) }
.mini-thumb.t2 { background: color-mix(in srgb, var(--t2) 42%, var(--surface-2)) }
.mini-thumb.t3 { background: color-mix(in srgb, var(--t3) 42%, var(--surface-2)) }
.mini-thumb.t4 { background: color-mix(in srgb, var(--t4) 42%, var(--surface-2)) }
.mini-thumb.t5 { background: color-mix(in srgb, var(--t5) 42%, var(--surface-2)) }
.mini-thumb.t6 { background: color-mix(in srgb, var(--t6) 42%, var(--surface-2)) }
.mini-thumb.t7 { background: color-mix(in srgb, var(--t7) 42%, var(--surface-2)) }
.mini-thumb.t8 { background: color-mix(in srgb, var(--t8) 42%, var(--surface-2)) }

/* The activity feed's filter row is links, not the design's <button>s, so the
   pills need the anchor treatment .pill assumes a <button> brings. */
.filters .pill { text-decoration: none }

/* The avatar on an activity row links to the person. .av is styled for a span. */
.act-head a.av { text-decoration: none }

/* The composer, collapsed until it is clicked.
   modern-watch.css asks for exactly this — "collapsed until focus — the
   composer is the whole component on a page with no thread, and a 300px card
   asking for nothing is furniture" — but expresses it as `.cmp.open`, a class
   its own mockup carries statically and no script in the design ever adds.
   :focus-within IS that condition, so this needs no JavaScript.

   The rules are duplicated from `.cmp.open` rather than the markup carrying the
   class, because the class would mean permanently open.

   THE SEPARATE :has RULE IS NOT A DUPLICATE, and must not be merged into the
   selector list above it. Two reasons, and both matter:

   1. It keeps the composer open once there is text in it. Without it, typing
      and then clicking away collapses the box and takes the Post button with
      it — the text is still there and the way to submit it is gone.
   2. A selector list is invalidated ENTIRELY by one selector a browser does not
      understand. Comma-joining :has() with :focus-within would mean a browser
      without :has() dropping the focus rule too, and that rule is the only
      thing that reveals the Post button at all. Kept apart, an old browser
      loses the convenience and keeps the feature. */
.cmp:focus-within { padding: 13px }
.cmp:focus-within textarea { min-height: 52px; padding: 8px 0 0 }
.cmp:focus-within .cmp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

/* Depends on the textarea having a placeholder, which it does. */
.cmp:has(textarea:not(:placeholder-shown)) { padding: 13px }
.cmp:has(textarea:not(:placeholder-shown)) textarea { min-height: 52px; padding: 8px 0 0 }
.cmp:has(textarea:not(:placeholder-shown)) .cmp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

/* Why a comment was refused, carried back on the redirect.
   The design has no such element because its composer validates as you type,
   which needs script. Here the server is the only thing that can say no, so it
   has to be able to say it after the fact. Warm rather than red: the common
   causes are an empty box and a rate limit, neither of which is an error the
   commenter made in any meaningful sense. */
.cmp-note{
  margin-bottom:11px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--surface);color:var(--warn);
  font-size:13.5px;font-weight:600;line-height:1.5;
}

/* A button that states what you are, and on hover or focus what pressing it
   does. Used where the resting label is a status rather than an instruction —
   "Joined" reads as a fact, and a fact that silently means "leave" is an
   unsigned click.

   Both labels are in the DOM, so a screen reader hears "Joined Leave" and a
   keyboard user gets the swap from :focus-visible rather than only a mouse. */
.btn-swap .swap-do{display:none}
.btn-swap:hover .swap-is,
.btn-swap:focus-visible .swap-is{display:none}
.btn-swap:hover .swap-do,
.btn-swap:focus-visible .swap-do{display:inline}
.btn-swap:hover,.btn-swap:focus-visible{background:var(--surface-3)}

/* Avatars that are photographs rather than letters.
   
   The design system has no object-fit anywhere, because in the mockup every
   avatar is a coloured <span> with a letter in it. 913 profiles have a real
   picture, and dropped into the same circle without this an image that is not
   perfectly square is squashed rather than cropped — a face stretched sideways
   in an 18px circle. Same trap .ct hit on the collection covers.

   Scoped to img so the letter tiles are untouched: .av and .pro-av are grid
   containers centring a character, and object-fit means nothing there.

   PUSH THIS UPSTREAM. It is the design's own gap, not this port's, and the
   third rule in here now waiting to be absorbed. */
/* The photo sits ON the letter, in the same grid cell, so a dead image
   degrades to the letter tile rather than to a hole. .av and .pro-av are
   already `display:grid; place-items:center`, so both children land in cell
   1/1 and the image covers the letter completely when it loads. */
.av > i,
.pro-av > i{grid-area:1/1;font-style:normal}
.av > img,
.pro-av > img{
  grid-area:1/1;
  /* place-self:stretch, and it is doing the work rather than width/height.
     The containers are `place-items:center`, so a grid item defaults to being
     sized by its content — and `height:100%` against an auto-sized row has no
     definite value to resolve against, so the browser falls back to the
     image's intrinsic aspect ratio. A 28px stack avatar came out 28x44 and
     spilled out of its circle. Stretching the item to the area first gives
     the percentages something real to be a percentage OF. */
  place-self:stretch;
  /* NO width/height here, and that is the fix rather than an omission.
     `align-self:stretch` only applies when the cross size is `auto`, so
     `height:100%` silently CANCELS the stretch — and then resolves against an
     auto-sized row that has no definite height, falling back to the image's
     intrinsic ratio. The computed style read `align-self: stretch` and
     `height: 59.83px` at the same time, on a 38px circle. */
  min-width:0;min-height:0;
  border-radius:50%;object-fit:cover;display:block;
}

/* An avatar that is also a link. The design has the anchor BE the .av, which
   the layered photo markup cannot do — the component owns that element now, so
   the link wraps it. Without this the anchor adds its own line box and the
   circle sits on a baseline instead of centred in the row. */
.av-a{display:inline-flex;flex:none}

/* The gap under the related-tags rail.
   
   In the reference, .rel is followed by the Newest / Hot / Most liked control,
   which carries style="padding-top:18px" and is what separates the chips from
   the grid. Those pills are deliberately not built — only the created_at feed
   has a measured query shape, and two pills that silently serve Newest would
   be worse than none — so the element that supplied the spacing is absent and
   the chips sit flush on the first row of thumbnails.
   
   Restored on the adjacency rather than as padding on .rel itself, so it is
   exactly the deviation it compensates for: the day the sort control lands,
   this rule stops matching and can be deleted. .pempty for the same reason on
   a tag with nothing in it. */
.rel + .grid,
.rel + .pempty{margin-top:18px}

/* The review queue's thumbnail. Small on purpose: it is there to answer "is
   this what the report says it is", not to be looked at. Fixed box with
   object-fit so a portrait still and a 16:9 frame occupy the same row height,
   because a queue whose rows change height is one you cannot scan. */
.qthumb{
  width:64px;height:40px;flex:none;border-radius:var(--r-sm);
  object-fit:cover;display:block;background:var(--surface-2);
}

/* The queue's two decisions, side by side rather than stacked. Each is its own
   <form> because a form post is the only thing that works with no script, and
   a form is block-level by default — which put Keep above Remove and made
   every row half again as tall. */
.tbl .act form{display:inline-block;margin-left:6px}

/* The thumbnail slot is reserved even when there is no image, so every title
   starts at the same x. A column whose left edge moves per row is one you
   cannot scan, and this is the column a moderator reads first. Same reasoning
   as the .t1-.t8 tints on the public grid: the absence should look intentional
   rather than like a layout fault. */
.qthumb-none{
  width:64px;height:40px;flex:none;border-radius:var(--r-sm);
  background:var(--surface-2);display:block;
}

/* A second labelled row inside the share popover. `.pop-body p` carries only
   padding-bottom, so a label following a row sits flush against it.
   Written as an adjacency rather than padding on `.pop-row`, so it stops
   matching the day the design absorbs a multi-row popover of its own — the
   same shape as the `.rel + .grid` rule above. */
.pop-row + p{padding-top:11px}

/* An accent button inside .alt renders its label invisible.

   modern.css     .btn-accent { color: var(--accent-ink) }   (0,1,0)
   modern-auth.css .alt a     { color: var(--accent)     }   (0,1,1)

   `.alt a` out-specifies the button, so the label is painted accent pink on
   an accent-pink background: a large blank pill. It affects the two terminal
   success screens, "Password changed" and the confirmation one, which are
   exactly the pages nobody looks at twice — and the invisible control is the
   only way onward from either.

   Third instance of this specificity shape in the design's sheets, after
   `.pro-bio a.bio-add` painting the bio nudge pink and `.lnk` in the bell
   panel. The fix is the same one modern.css already uses there: name the
   class as well as the element, (0,2,1) over (0,1,1).

   The design's gap rather than this port's — push it upstream. */
.alt a.btn-accent{color:var(--accent-ink)}