/* SlopScupper — old.reddit density, warm paper, one accent (slop orange), goo green for the pig's dinner. */
:root {
  /* retro pig: pink + brown. */
  --bg: #fdf6f7; --fg: #2a1a14; --muted: #7a6560; --line: #ecd9dc; --panel: #f9e9ec; --panel-2: #f3dde2;
  --accent: #e8669a; --accent-2: #c94a7c; --goo: #8a5a30; --goo-2: #5c3a1c;
  --up: #e8669a; --down: #7a6cd6; --link: #8a4a2a; --visited: #a06a9a;
  --chip: #f3dde2; --chip-fg: #5c3a3a; --warn: #fbe9c8; --bad: #f9d0d4; --ok: #dff0d2;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: verdana, "Segoe UI", arial, helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1210; --fg: #f3e6e8; --muted: #a58f90; --line: #352626; --panel: #241818; --panel-2: #2d1e1f;
    --accent: #ff8fb5; --accent-2: #ffb0c9; --goo: #c99a63; --goo-2: #a3703f;
    --up: #ff8fb5; --down: #9d93ff; --link: #e6b08a; --visited: #d1a3c6;
    --chip: #2f2122; --chip-fg: #e2cfd2; --warn: #3f2e14; --bad: #452022; --ok: #1e3320;
  }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.55 var(--sans); }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: var(--visited); }
code, pre { font-family: var(--mono); font-size: 12px; }
code { background: var(--panel-2); padding: 0 3px; border-radius: 3px; }
pre { background: var(--panel); border: 1px solid var(--line); padding: 8px 10px; overflow-x: auto; border-radius: 4px; } pre code { background: none; padding: 0; }
img { max-width: 100%; }
h2 { font-size: 18px; } h3 { font-size: 14px; margin: 14px 0 6px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .inline { display: inline; }
button.link { background: none; border: 0; color: var(--link); cursor: pointer; padding: 0; font: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 8px 14px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; }
.wrap.narrow { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
@media (max-width: 880px) { .wrap { grid-template-columns: minmax(0, 1fr); } .rail { order: 2; } }

/* tag bar (subreddit bar) */
.tagbar { display: flex; gap: 14px; overflow-x: auto; white-space: nowrap; padding: 5px 14px; font-size: 11px; text-transform: lowercase; background: var(--panel-2); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tagbar a { color: var(--muted); } .tagbar a.on { color: var(--accent); font-weight: bold; } .tagbar .more { margin-left: auto; color: var(--link); padding-left: 12px; }

/* top bar */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 6px 14px; background: var(--panel); border-bottom: 2px solid var(--accent); }
.wordmark { display: inline-flex; align-items: center; gap: 6px; color: var(--fg) !important; } .wordmark .mark { width: 28px; height: 28px; border-radius: 6px; }
.wordmark-svg { height: 26px; width: auto; display: block; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; } .tabs a { text-transform: lowercase; padding: 3px 7px; color: var(--muted); border-bottom: 2px solid transparent; } .tabs a.on { color: var(--accent); font-weight: bold; border-bottom-color: var(--accent); }
.onphone { display: none; }
.search { display: flex; gap: 4px; flex: 1; min-width: 220px; } .search input { flex: 1; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--fg); font: inherit; }
.search button, .btn, form.owner button, .commentform button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--accent-2); background: var(--accent); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.15); border-radius: 4px; cursor: pointer; font: inherit; font-weight: bold; }
.btn.secondary, form.owner button.secondary { background: var(--panel); color: var(--fg); border-color: var(--line); font-weight: normal; }
.btn[disabled], form.owner button[disabled] { opacity: .5; cursor: not-allowed; }
.who { display: flex; gap: 10px; align-items: center; margin-left: auto; } .avatar { width: 18px; height: 18px; border-radius: 3px; vertical-align: middle; }
.who .mod { color: var(--accent); font-weight: bold; }
.login { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--goo-2); color: #fff !important; border-radius: 5px; font-weight: bold; border: 1px solid var(--fg); white-space: nowrap; }
.login:hover { text-decoration: none; background: var(--accent); border-color: var(--accent-2); color: #fff !important; }
.login { border-color: var(--goo-2); }
.login svg { width: 16px; height: 16px; fill: currentColor; }

/* hero + strip */
.hero { display: flex; gap: 18px; align-items: center; padding: 10px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.hero-pig { width: 150px; height: 150px; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.hero h1 { margin: 0; font-size: 24px; font-family: var(--serif); letter-spacing: -.3px; } .hero p { margin: 6px 0 0; color: var(--muted); font-size: 13px; } .hero em { color: var(--accent-2); font-family: var(--serif); font-size: 15px; }
@media (prefers-color-scheme: dark) { .hero em { color: var(--accent); } }
.manifesto { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 8px 12px; margin: 8px 0; border-radius: 0 4px 4px 0; }
.rail .box.manifesto { border-left: 4px solid var(--accent); border-radius: 0 4px 4px 0; } .rail .box.manifesto p { margin: 0; color: var(--muted); }
/* Slop of the Day. Three columns — stamp, the winner, the score — and the winner's own column stacks its
   label, title and tagline so none of them has to share a line and get squeezed to one word per row. */
.strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; background: var(--panel-2); border: 1px solid var(--line); padding: 8px 14px; margin: 8px 0; border-radius: 4px; }
.strip-stamp { height: 48px; width: auto; color: var(--accent-2); }
.stripmain { min-width: 0; }
.striplabel { font-weight: bold; color: var(--accent-2); text-transform: uppercase; letter-spacing: .5px; font-size: 11px; line-height: 1.4; }
.striptitle { font-family: var(--serif); font-size: 16px; line-height: 1.3; }
.striptag { font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stripscore { display: grid; justify-items: center; align-content: center; padding-left: 14px; border-left: 1px solid var(--line); color: var(--fg) !important; }
.stripscore:hover { text-decoration: none; } .stripscore strong { font-size: 18px; color: var(--accent-2); line-height: 1.1; }
.stripscore span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* feed rows */
.feed { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 44px 70px minmax(0, 1fr); grid-template-areas: "vote thumb main" "vote thumb acts"; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; }
.row .votebox { grid-area: vote; } .row .thumbwrap { grid-area: thumb; } .row .rowmain { grid-area: main; } .row .actions { grid-area: acts; }
.votebox { display: flex; flex-direction: column; align-items: center; gap: 0; }
.votebox button { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 4px 6px; line-height: 0; border-radius: 5px; }
.votebox button:hover { background: var(--panel-2); }
.votebox .caret { width: 16px; height: 16px; display: block; }
.votebox button.on.up, .votebox button.up:hover { color: var(--up); } .votebox button.on.down, .votebox button.down:hover { color: var(--down); }
.votebox .score { font-weight: bold; font-size: 13px; } .votebox.off button { opacity: .3; cursor: not-allowed; }
.votebox .crowd { font-size: 10px; color: var(--muted); white-space: nowrap; } .votebox.anon button { opacity: .55; }
.modcard { border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; margin: 8px 0; background: var(--panel); } .modcard .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .modcard blockquote { margin: 4px 0; padding-left: 8px; border-left: 2px solid var(--line); }
.thumb { width: 70px; height: 70px; object-fit: cover; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); display: block; }
.thumb.blank { display: grid; place-items: center; color: var(--muted); font-size: 22px; }
.row .byline { color: var(--muted); font-size: 12px; } .row .byline a { color: var(--muted); font-weight: 600; }
.byline-avatar { width: 16px; height: 16px; border-radius: 50%; vertical-align: -4px; margin-right: 2px; }
.row .title { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 1px 0; } .row .title a { color: var(--fg); } .row .title a:visited { color: var(--visited); }
.row .tagline { margin: 2px 0; }
.row .repolink { font-size: 12px; margin: 1px 0; } .row .repolink a { color: var(--link); display: inline-flex; align-items: center; gap: 4px; }
.row .meta { color: var(--muted); font-size: 12px; } .row .meta a { color: var(--muted); }
.langdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 3px; vertical-align: middle; }
.icon { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.row .actions, .cactions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 3px; }
.act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 600; background: none; border: 0; cursor: pointer; line-height: 1.4; }
.act:hover { background: var(--panel-2); color: var(--fg); text-decoration: none; }
.act .caret { width: 13px; height: 13px; } .act .flag-icon, details.reportform summary .flag-icon { width: 13px; height: 13px; } .act.off { cursor: default; } .act.off:hover { background: none; color: var(--muted); }
.cvote { display: inline-flex; gap: 2px; } .cvote .act:hover { color: var(--up); }
.chips { display: inline; } .chip { display: inline-block; background: var(--chip); color: var(--chip-fg); border-radius: 3px; padding: 1px 6px; font-size: 11px; margin: 1px 2px 1px 0; line-height: 17px; }
.chip.warn { background: var(--warn); } .chip.bad { background: var(--bad); } .chip.ok { background: var(--ok); } .chip.unrec { border: 1px dashed var(--muted); }
.chip.tier { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.report { color: var(--muted); opacity: .75; } .report:hover { opacity: 1; } .flag-icon { width: 10px; height: 10px; vertical-align: -1px; }
details.reportform { display: inline; } details.reportform summary { display: inline; cursor: pointer; list-style: none; } details.reportform form { display: inline-flex; gap: 4px; margin-left: 6px; }
.pager { padding: 10px 0; display: flex; gap: 12px; }
.ownerline { margin-top: 4px; display: flex; gap: 8px; align-items: center; font-size: 11px; } .btn.small { padding: 2px 8px; font-size: 11px; }
.empty { padding: 26px; text-align: center; color: var(--muted); font-style: italic; font-family: var(--serif); font-size: 14px; }

/* Touch targets. Scoped to coarse pointers so a mouse keeps the dense list: 44px rows everywhere would cost
   about a third of the feed's rows-per-screen, and that density is the point of a leaderboard. */
@media (pointer: coarse) {
  .act, .votebox button, .tabs a, .pager a, .who a, details.reportform summary, .readmebox > summary { min-height: 44px; }
  .act, .tabs a, .pager a, details.reportform summary, .readmebox > summary { display: inline-flex; align-items: center; gap: 6px; }
  .votebox button { min-width: 44px; display: grid; place-items: center; }
  .rail ul li { padding: 3px 0; } .foot a { display: inline-block; padding: 4px 0; }
}

/* Desktop folds the byline onto the title's line to buy back the row height the action bar costs.
   Phones keep it stacked above the title, where there is no room to share a line anyway.
   Scoped to .feed so the repo page's own .rowmain header is untouched. */
@media (min-width: 601px) {
  .feed .row .rowmain { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .feed .row .rowmain > * { flex-basis: 100%; }
  .feed .row .title, .feed .row .byline { flex-basis: auto; }
  .feed .row .title { order: -1; }
  .feed .row .byline::before { content: "·"; margin-right: 6px; }
}

/* capacity box (queue + stats) */
.capacity { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; margin: 8px 0; font-size: 12px; }
.capacity.free { border-left: 4px solid var(--goo); } .capacity.paid { border-left: 4px solid var(--accent); }
.capacity .label { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.capacity p { grid-column: 1 / -1; margin: 4px 0 0; }
.capacity.crawler { border-left: 4px solid var(--link); } .capacity.crawler .countdown { font-variant-numeric: tabular-nums; }

/* Owner box: the README badge, the one thing we most want an owner to take away from this page. */
.badgebox { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 4px; padding: 8px 12px; margin: 8px 0; }
.badgebox .label { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.badgebox .badge-preview { display: block; margin: 6px 0; }
.badgebox .badge-copy { display: flex; gap: 6px; align-items: stretch; }
.badgebox .badge-copy input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11px; padding: 4px 6px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 3px; }
.badgebox .badge-copy button { flex: 0 0 auto; }
.badgebox p { margin: 6px 0 0; }

/* rail */
.rail { font-size: 12px; } .rail .box { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; }
.rail h3 { margin: 0 0 6px; font-size: 13px; } .rail ul { padding-left: 18px; margin: 4px 0; } .rail pre { margin: 6px 0; font-size: 11px; }
.rail .mascot { text-align: center; margin: -4px 0 2px; } .rail figure.mascot { margin: -4px 0 6px; padding: 0; }
.rail figcaption { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--muted); margin-top: -6px; } .mascot-img { display: inline-block; filter: drop-shadow(0 5px 8px rgba(0,0,0,.18)); } svg.mascot-img { overflow: visible; }
.steps { list-style: none; padding: 0; margin: 6px 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; margin: 6px 0; counter-increment: step; }
.steps li::before { content: none; } .step-icon { width: 28px; height: 28px; color: var(--accent-2); }
@media (prefers-color-scheme: dark) { .step-icon { color: var(--accent); } }
.stats td { padding: 1px 8px 1px 0; } .stats td:last-child { text-align: right; font-weight: bold; }

/* repo page */
.repo h1 { margin: 6px 0 2px; font-size: 20px; font-family: var(--serif); } .repo .sub { color: var(--muted); margin-bottom: 8px; }
.repo .status { padding: 8px 12px; border-radius: 4px; margin: 8px 0; } .status.rejected { background: var(--bad); } .status.listed { background: var(--ok); } .status.queued { background: var(--warn); } .status.delisted { background: var(--panel); }
.about { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px; margin: 8px 0; }
.about dl, dl.about { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; } .about dt { color: var(--muted); } .about dd { margin: 0; }
.gallery { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0; } .gallery img { height: 160px; border-radius: 4px; border: 1px solid var(--line); }
.body { border-top: 1px solid var(--line); padding-top: 8px; }
.openbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; font-size: 12px; }
.btn.open { padding: 6px 14px; font-size: 14px; text-decoration: none; display: inline-block; }
.readmebox > summary { cursor: pointer; font-weight: bold; font-size: 13px; padding: 2px 0; } .readmebox > summary .muted { font-weight: normal; font-size: 12px; }
.readmebox .readme { max-height: 55vh; overflow: auto; margin-top: 6px; }
.verdict { padding: 8px 12px; border-radius: 4px; margin: 8px 0; } .verdict details { margin-top: 4px; }
.scanreport { font-size: 12px; } .scanreport li { margin: 2px 0; } .gate-ok { color: #2e8b57; } .gate-bad { color: #c0392b; }
.disclosures { margin: 6px 0; }
.owner { border: 1px solid var(--accent); border-radius: 4px; padding: 8px 12px; margin: 8px 0; background: var(--panel); }
.owner h3 { margin: 0 0 4px; } .owner form { display: inline; margin-right: 6px; }
.stamp-svg { color: var(--accent-2); }

/* comments */
.comments { margin-top: 12px; } .comment { padding: 6px 0 6px 10px; border-left: 2px solid var(--line); margin: 6px 0; }
.comment .meta { color: var(--muted); font-size: 11px; } .comment .maker { color: var(--accent); font-weight: bold; } .comment.pinned { border-left-color: var(--accent); background: var(--panel); }
.comment .cbody p { margin: 4px 0; } .commentform textarea { width: 100%; min-height: 70px; font: inherit; padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--fg); }
.replies { margin-left: 16px; }

/* tables */
table.list { border-collapse: collapse; width: 100%; font-size: 12px; } table.list th, table.list td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); } table.list th { color: var(--muted); font-weight: normal; }

/* Footer. Sticky, because the feed scrolls for ever (infinite scroll in layout.tsx) and the bottom of the
   document is a place nobody ever reaches. position: sticky, not fixed: it still takes its own space at the
   true end of the page, so it never covers the last row. The links sit on one line that scrolls sideways
   rather than wrapping, so the bar's height never changes. */
.foot { position: sticky; bottom: 0; z-index: 4; text-align: center; color: var(--muted); font-size: 11px; padding: 7px 12px; background: var(--panel); border-top: 1px solid var(--line); margin-top: 20px; }
.foot p { margin: 3px 0; } .foot strong { font-family: var(--serif); font-size: 13px; color: var(--fg); margin-right: 10px; }
.footlinks { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.footlinks::-webkit-scrollbar { display: none; }
/* A short window (phone in landscape, a split screen) has no room to give away: let it scroll off. */
@media (max-height: 520px) { .foot { position: static; } }
/* On a phone the bar is one scrollable line of links: the motto and the note would cost three of them. */
@media (max-width: 600px) { .foot strong, .foot p.muted { display: none; } .foot { padding: 4px 10px; text-align: left; } }
.notice { background: var(--warn); border: 1px solid var(--line); padding: 6px 10px; border-radius: 4px; margin: 6px 0; }

/* mobile */
code { overflow-wrap: anywhere; }
table.list { display: block; overflow-x: auto; white-space: nowrap; }
@media (max-width: 600px) {
  body { font-size: 14px; }
  .wrap { padding: 6px 10px; gap: 14px; }
  /* Header: two short rows and then the feed. A phone screen is mostly chrome otherwise, and the first row
     of slop is the thing people came for — everything below earns its pixels or moves somewhere else. */
  .top { padding: 5px 10px; gap: 4px 8px; }
  .wordmark-svg { height: 22px; }
  .who { margin-left: auto; gap: 8px; } .who a { font-size: 12px; } .login { padding: 5px 10px; font-size: 12px; }
  .who .ondesk { display: none; }                 /* "my repos" moves into the tab bar */
  .onphone { display: inline-flex; align-items: center; gap: 4px; }
  .who .mag { color: var(--muted); padding: 0 2px; } .who .mag .icon { width: 20px; height: 20px; display: block; }
  .tabs { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; -webkit-overflow-scrolling: touch; }
  .tabs a { padding: 4px 8px; white-space: nowrap; font-size: 13px; }
  /* The search box costs a whole row for something nobody does on arrival: the magnifier tab opens /search,
     which is the one page that keeps the box. */
  .top .search { display: none; }
  .top.searching .search { display: flex; order: 4; width: 100%; min-width: 0; }
  .search input { font-size: 16px; padding: 6px 8px; } .search button { padding: 6px 12px; }
  .tagbar { font-size: 11px; gap: 10px; padding: 4px 10px; }
  /* Hero: the wordmark two rows up already says all of this. The h1 stays for anything that reads rather
     than looks, with no pixels to its name. */
  .hero { display: block; padding: 0; margin: 0; border: 0; }
  .hero-pig, .hero p { display: none; }
  .hero h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .manifesto { font-size: 12px; padding: 6px 10px; }
  /* Sort chips that only repeat the tab bar (the home feed) go; on a bucket or a user they are the only sort. */
  .sortbar.dup { display: none; }
  /* Slop of the Day on one line: stamp, label, winner. The tagline and the score are a tap away on its page. */
  .strip { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 5px 10px; margin: 6px 0; }
  .strip-stamp { height: 24px; }
  .stripmain { display: flex; align-items: baseline; gap: 6px; }
  .striplabel { font-size: 10px; letter-spacing: .3px; white-space: nowrap; }
  .striplabel .muted, .striptag, .stripscore { display: none; }   /* the date, tagline and score live on its page */
  .striptitle::before { content: "· "; color: var(--muted); }
  .striptitle { font-size: 14px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* feed rows become cards: thumb beside the title, vote pill and actions along the bottom */
  .feed { display: block; }
  .row {
    grid-template-columns: auto minmax(0, 1fr) 76px;
    grid-template-areas: "main main thumb" "vote acts acts";
    gap: 10px; padding: 12px; margin: 0 0 10px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  }
  .row .thumb, .row .thumbwrap { display: block; width: 76px; height: 76px; }
  .row .title { font-size: 17px; line-height: 1.3; } .row .repolink { font-size: 12px; }
  .row .tagline { font-size: 14px; margin: 4px 0; } .row .meta { font-size: 12px; line-height: 1.8; }
  .row .votebox { flex-direction: row; align-items: center; gap: 2px; align-self: center; justify-self: start;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 4px; }
  .row .votebox .crowd { display: none; }
  .row .actions { align-self: center; justify-content: flex-end; }
  .empty, .pager { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
  .pager { padding: 10px 12px; justify-content: space-between; }
  /* repo page */
  .repo h1 { font-size: 20px; }
  .repo .row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "vote"; gap: 10px; padding: 0; margin: 0; background: none; border: 0; }
  .repo .row .thumbwrap { display: none; }
  .repo .row .votebox { flex-direction: row; align-items: center; justify-self: start; gap: 2px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; }
  .openbar { display: grid; gap: 8px; } .openbar .btn.open { width: 100%; } .openbar > .muted { font-size: 12px; }
  .owner form { display: block; margin: 6px 0; } .owner form button { width: 100%; }
  .about dl { grid-template-columns: 1fr; } .about dt { margin-top: 4px; }
  .gallery img { height: 120px; }
  .commentform textarea { font-size: 16px; }
  .comment { padding-left: 8px; } .replies { margin-left: 8px; }
  /* rail below the feed, single column, no giant pig */
  .rail { order: 2; } .rail .mascot img { width: 120px; height: 120px; }
  .rail pre { font-size: 11px; }
  .capacity { grid-template-columns: 1fr; }
  .modcard .actions form button { margin: 2px 0; }
  .foot { font-size: 11px; }
}
.owner form.owner { border: 0; padding: 0; background: none; margin: 0 6px 6px 0; display: inline; }
@media (max-width: 600px) { .owner form.owner { display: block; margin: 6px 0; } }

/* orphanage landing page */
.orphanage .est { margin: 0 0 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.orphanage h2 { font-family: var(--serif); font-size: 20px; margin: 22px 0 6px; }
.orphanage .intake { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 8px 0; }
.orphanage .ward { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; font-size: 13px; }
.orphanage .ward strong { font-family: var(--serif); font-size: 15px; display: block; margin-bottom: 4px; }
.orphanage .ward p { margin: 0; color: var(--muted); }
.orphanage .rules { padding-left: 18px; } .orphanage .rules li { margin: 6px 0; }
.orphanage .faq { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0; font-size: 13px; }
.orphanage .faq dt { font-weight: bold; font-family: var(--serif); } .orphanage .faq dd { margin: 0; color: var(--muted); }
.orphanage .inline-stamp { width: 44px; height: 44px; vertical-align: middle; }
.orphanage .doorstep { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 12px 16px 6px; margin: 22px 0 12px; }
.orphanage .doorstep h2 { margin-top: 4px; }
@media (max-width: 600px) { .orphanage .faq { grid-template-columns: 1fr; } .orphanage .faq dt { margin-top: 6px; } }

/* truffle trawl: the claim box on listings the owner never submitted */
.owner.claim ul { margin: 4px 0 6px 18px; padding: 0; }
.owner .notice pre { background: var(--panel); padding: 6px 8px; overflow-x: auto; font-size: 11px; margin: 6px 0 0; white-space: pre; }

/* the balcony — four critics in a box seat, and what they shouted down at the stage (/balcony) */
.boxseats { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px 16px; margin: 10px 0 18px;
  padding: 10px 12px 12px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 4px; }
.boxseats .seat { font-size: 12px; }
.boxseats .seat.on { background: var(--panel-2); border-radius: 4px; padding: 6px 8px; margin: -6px -8px; }
.boxseats .seatname { font-family: var(--serif); font-size: 15px; }
.boxseats .tally { margin: 2px 0 0; } .boxseats .tally strong { font-variant-numeric: tabular-nums; }
.boxseats .rubric { margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.boxseats .seat.on .rubric { -webkit-line-clamp: 99; }

.heckles { list-style: none; margin: 8px 0 0; padding: 0; }
.heckle { padding: 8px 10px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--line); }
.heckle.up { border-left-color: var(--up); } .heckle.pass { border-left-color: var(--goo); }
.heckleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12px; }
.heckleline .heckler { font-family: var(--serif); font-size: 14px; }
.heckleline .verdict { color: var(--muted); } .heckle.up .heckleline .verdict { color: var(--up); }
.heckleline .when { margin-left: auto; white-space: nowrap; }
.quip { margin: 4px 0 0; font-family: var(--serif); font-size: 14px; font-style: italic; }
.quip::before { content: "\201C"; } .quip::after { content: "\201D"; }
.quip.muted { font-size: 12px; } .quip.muted::before, .quip.muted::after { content: ""; }
@media (max-width: 600px) { .heckleline .when { margin-left: 0; width: 100%; } }