/* ---------------------------------------------------------------------------
   Mana Labs — shared styles
   Tokens and the splash lockup come from the original index.html verbatim;
   everything from "Site chrome" down is new and used by the blog.
   --------------------------------------------------------------------------- */

/* --- Source Sans 3, self-hosted ---------------------------------------------
   Downloaded from Google Fonts (v19 woff2) so the site carries no third-party
   requests and works offline. SIL Open Font License — see fonts/LICENSE.md.
   Only the weights the stylesheet actually uses are here: 400, 600, 700, plus
   400 italic for blockquotes. unicode-range means a browser fetches latin-ext
   only when the page contains characters that need it.
   --------------------------------------------------------------------------- */

/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-sans-3-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-sans-3-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/source-sans-3-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/source-sans-3-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper:       #f6f4f0;
  --paper-2:     #e9e6e0;
  --mana-blue:   #1a5a87;
  --labs-slate:  #223a4b;
  --tagline:     #3d4d5a;
  --rule:        #8c9aa5;
  --flask-line:  #1c4f6e;
  --stand:       #24384a;

  --ink:         #1e2a35;
  --ink-soft:    #4a5a68;
  --link:        #17608f;
  --link-hover:  #0f4a70;
  --card:        #fbfaf7;
  --card-edge:   #ddd8cf;
  --code-bg:     #eceae4;

  --measure:     34rem;
  --wide:        60rem;
  --font: "Source Sans 3", "Source Sans Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  /* Short pages: without min-height the body stops at its content and the
     canvas shows through below it. Fixed attachment keeps the gradient sized
     to the viewport, so every page gets the same wash regardless of length. */
  min-height: 100vh;
  background: radial-gradient(120% 90% at 50% 22%, var(--paper) 0%, var(--paper-2) 100%);
  background-attachment: fixed;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

/* --- Splash ---------------------------------------------------------------
   Scoped to body.splash so the blog can use normal document flow. */

html:has(body.splash), body.splash { height: 100%; }

body.splash {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin 6vmin;
}

.logo {
  width: min(560px, 100%);
  text-align: center;
}

.logo .mark {
  display: block;
  width: 44%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.wordmark {
  margin: 0.35em 0 0;
  font-size: clamp(2.6rem, 11vw, 5.5rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.wordmark .mana {
  color: var(--mana-blue);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wordmark .labs {
  color: var(--labs-slate);
  font-weight: 700;
}

.rule {
  width: 100%;
  height: 1px;
  margin: 0.55em 0 0.5em;
  background: var(--rule);
  opacity: 0.65;
}

.tagline {
  margin: 0;
  color: var(--tagline);
  font-size: clamp(0.95rem, 3.4vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* Splash nav: pinned to the top-left corner.
   It has to be out of flow — body.splash is the flex container that centres
   the lockup, so a second in-flow child would push the logo off-centre.
   The offsets repeat body.splash's padding on purpose: an absolutely
   positioned box is placed against the containing block's *padding box*,
   which starts at the border edge, so top/left 0 would sit flush in the
   corner rather than inside the padding. */
.splash-nav {
  position: absolute;
  top: 4vmin;
  left: 6vmin;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  font-size: 1.05rem;
}

.splash-nav a {
  color: var(--mana-blue);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.splash-nav a:hover,
.splash-nav a:focus-visible { border-bottom-color: var(--mana-blue); }

/* Company details, bottom-right. Out of flow for the same reason as the nav:
   body.splash centres the lockup, and an in-flow sibling would shift it. */
.splash-foot {
  position: absolute;
  bottom: 4vmin;
  right: 6vmin;
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* --- Site chrome ----------------------------------------------------------
   Sticky footer: on a short page the footer sits at the bottom of the
   viewport rather than halfway up it. The splash centres its own content,
   so it opts out. */

body:not(.splash) {
  display: flex;
  flex-direction: column;
}

/* width: 100% is required — `margin: 0 auto` on a flex item cancels the
   default cross-axis stretch, which would shrink these to content width. */
body:not(.splash) .page { flex: 1 0 auto; width: 100%; }
body:not(.splash) .site-foot { margin-top: auto; width: 100%; }

.page {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.4rem 0 1.2rem;
  border-bottom: 1px solid var(--card-edge);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}

.masthead__mark { width: 38px; height: auto; display: block; }

.masthead__name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--labs-slate);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.masthead__name .mana { color: var(--mana-blue); font-weight: 600; }

.masthead nav {
  display: flex;
  gap: 1.25rem;
  font-size: 1rem;
}

.masthead nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.masthead nav a:hover,
.masthead nav a:focus-visible { color: var(--mana-blue); }
.masthead nav a[aria-current="page"] {
  color: var(--mana-blue);
  border-bottom-color: var(--mana-blue);
}

.site-foot {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  border-top: 1px solid var(--card-edge);
  color: var(--ink-soft);
  font-size: 0.92rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-foot a { color: var(--link); }

/* --- Blog index ----------------------------------------------------------- */

.blog-head { margin-bottom: 2rem; }

.blog-head h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.1;
  color: var(--labs-slate);
}

.blog-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: var(--measure);
}

.filters {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.search {
  position: relative;
  flex: 1 1 15rem;
  max-width: 22rem;
}

.search input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.55rem 0.8rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 7px;
}

.search input:focus-visible {
  outline: 2px solid var(--mana-blue);
  outline-offset: 1px;
  border-color: var(--mana-blue);
}

/* htmx 4 adds .htmx-request to whatever hx-indicator points at. */
.search__spinner.htmx-request { opacity: 1; }

.search__spinner {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  translate: 0 -50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--card-edge);
  border-top-color: var(--mana-blue);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 120ms ease;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .search__spinner { animation: none; }
}

.tag-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--link);
  text-decoration: none;
  padding: 0.25rem 0.66rem;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 999px;
}

.tag:hover, .tag:focus-visible { border-color: var(--mana-blue); color: var(--link-hover); }

.tag[aria-current="true"] {
  background: var(--mana-blue);
  border-color: var(--mana-blue);
  color: #fff;
}

.tag__count { opacity: 0.6; font-weight: 400; }

/* --- Post cards ----------------------------------------------------------- */

.post-list { display: grid; gap: 1.1rem; }

.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
  transition: border-color 140ms ease, transform 140ms ease;
}

.card:hover { border-color: #c9c2b6; }

.card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  line-height: 1.25;
}

.card h2 a { color: var(--labs-slate); text-decoration: none; }
.card h2 a:hover, .card h2 a:focus-visible { color: var(--mana-blue); }

.card p { margin: 0 0 0.8rem; color: var(--ink-soft); line-height: 1.6; }

.meta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.meta .dot { opacity: 0.45; }

.empty {
  background: var(--card);
  border: 1px dashed var(--card-edge);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
}

.empty p { margin: 0 0 0.75rem; }

.load-more {
  display: inline-block;
  justify-self: center;
  margin: 0.5rem auto 0;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--link);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
}

.load-more:hover, .load-more:focus-visible {
  border-color: var(--mana-blue);
  color: var(--link-hover);
}

/* The button is its own indicator: dim it rather than swapping its text. */
.load-more.htmx-request { opacity: 0.55; pointer-events: none; }

/* --- Single post ---------------------------------------------------------- */

.post { max-width: var(--measure); margin: 0 auto; }

.post__head { margin-bottom: 2rem; }

.post__head h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  line-height: 1.15;
  color: var(--labs-slate);
}

.post__cover {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 0 0 2rem;
  border: 1px solid var(--card-edge);
}

.prose { font-size: 1.09rem; line-height: 1.72; }

.prose > * + * { margin-top: 1.15em; }

.prose h2, .prose h3, .prose h4 {
  color: var(--labs-slate);
  line-height: 1.25;
  margin-top: 2em;
  margin-bottom: 0.4em;
}

.prose h2 { font-size: 1.55rem; }
.prose h3 { font-size: 1.28rem; }

.prose a { color: var(--link); text-underline-offset: 2px; }
.prose a:hover { color: var(--link-hover); }

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--card-edge);
}

.prose blockquote {
  margin-inline: 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--mana-blue);
  color: var(--ink-soft);
  font-style: italic;
}

.prose code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.14em 0.4em;
  border-radius: 5px;
}

.prose pre {
  background: #1e2a35;
  color: #e8f1f7;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  overflow-x: auto;
}

.prose pre code { background: none; padding: 0; font-size: 0.88rem; color: inherit; }

.prose table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.prose th, .prose td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--card-edge); }
.prose th { color: var(--labs-slate); }

.prose hr { border: 0; border-top: 1px solid var(--card-edge); margin: 2.5em 0; }

.post-nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-edge);
  font-size: 0.97rem;
  flex-wrap: wrap;
}

.post-nav a { color: var(--link); text-decoration: none; font-weight: 600; max-width: 18rem; }
.post-nav a:hover { color: var(--link-hover); }
.post-nav span { display: block; font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }

.draft-flag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a4b00;
  background: #ffe9c7;
  border: 1px solid #e8c48a;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 34rem) {
  .masthead { gap: 0.6rem; }
  .masthead__name { font-size: 1.15rem; }
  .masthead nav { gap: 0.9rem; font-size: 0.95rem; width: 100%; }
  .card { padding: 1.15rem 1.15rem; }
  .filters { gap: 0.75rem; }
  .search { max-width: none; }
}

.filter-tags { margin-bottom: 1.75rem; }

/* --- Comments -------------------------------------------------------------- */

.comments {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--card-edge);
}

.comments__heading {
  margin: 0 0 1.5rem;
  font-size: 1.3rem;
  color: var(--labs-slate);
}

.comment-thread { margin-bottom: 1.5rem; }
.comment-thread__reply { margin-left: 2.6rem; margin-top: 1rem; }

.comment {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.comment--pending { opacity: 0.75; }
.comment--removed { opacity: 0.6; font-style: italic; }

.comment__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--code-bg);
  display: grid;
  place-items: center;
}

.comment__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.comment__initials {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mana-blue);
  letter-spacing: 0.02em;
}

.comment__body { flex: 1 1 auto; min-width: 0; }

.comment__meta {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.comment__author { font-weight: 700; color: var(--labs-slate); }
.comment__time { color: var(--ink-soft); text-decoration: none; }
.comment__time:hover { color: var(--mana-blue); }

.comment__flag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.comment__flag--pending { color: #8a4b00; background: #ffe9c7; border-radius: 999px; padding: 0.05rem 0.5rem; }
.comment__flag--rejected { color: #8a1f1f; background: #ffd9d9; border-radius: 999px; padding: 0.05rem 0.5rem; }

.comment__text { font-size: 1rem; line-height: 1.6; }
.comment__text > *:first-child { margin-top: 0; }
.comment__text > * + * { margin-top: 0.8em; }

.comment__reply-to { font-size: 0.88rem; color: var(--ink-soft); }
.comment__reply-to a { color: var(--link); text-decoration: none; }

.comment__actions {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-top: 0.45rem;
  flex-wrap: wrap;
}

.comment__owner-actions { display: flex; gap: 0.9rem; margin: 0; }

.comment__action {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.comment__action:hover { color: var(--link-hover); text-decoration: underline; }
.comment__action--danger { color: #9b2c2c; }

/* --- Write box ------------------------------------------------------------- */

.comment-form { margin-top: 1.25rem; }

.comment-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 9px;
  resize: vertical;
}

.comment-form textarea:focus-visible {
  outline: 2px solid var(--mana-blue);
  outline-offset: 1px;
  border-color: var(--mana-blue);
}

.comment-form__foot {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.comment-form__hint { font-size: 0.84rem; color: var(--ink-soft); }
.comment-form__buttons { display: flex; gap: 1rem; align-items: center; }
.comment-form__cancel { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.comment-form__cancel:hover { color: var(--mana-blue); }

.comment-form__error {
  margin: 0 0 0.6rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.93rem;
  color: #8a1f1f;
  background: #ffe6e6;
  border: 1px solid #f0bcbc;
  border-radius: 8px;
}

/* --- Sign-in prompt and state --------------------------------------------- */

.comments__signin {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
}

.comments__signin p { margin: 0 0 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.comments__providers { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.comments__smallprint { font-size: 0.84rem; color: var(--ink-soft); margin: 0 !important; }
.comments__smallprint a { color: var(--link); }

.comments__empty, .comments__closed { color: var(--ink-soft); }

.comments__signedin {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.comments__signout { margin: 0; }

.comments__signout button {
  font: inherit;
  font-size: 0.88rem;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.comment-removed { color: var(--ink-soft); }

/* --- Moderation page ------------------------------------------------------- */

.moderate-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}

.moderate-card__meta, .moderate-card__post {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.moderate-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

@media (max-width: 34rem) {
  .comment-thread__reply { margin-left: 1.1rem; }
}

.queue__count { color: var(--ink-soft); }

.comments__queue-link {
  float: right;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.comments__queue-link:hover { text-decoration: underline; }