/* The member gate's own sheet (docs/ARCHITECTURE.md §4, Members and the
   gate; DESIGN.md §13). Neutral by construction: system colors carry the
   scheme, the theme's tokens carry the identity (Site::GateHelper#gate_style
   writes them after this file), and every class is stable — a theme's own
   assets/gate.css, linked last, restyles any of it. */

html {
  --gate-accent: #171717;
  --gate-on-accent: #fff;
  --gate-body-font: system-ui, sans-serif;
  --gate-heading-font: inherit;
  --gate-radius: 12px;
  --gate-ink: CanvasText;
  --gate-paper: Canvas;
  --gate-line: color-mix(in srgb, CanvasText 13%, transparent);
  --gate-line-strong: color-mix(in srgb, CanvasText 26%, transparent);
  --gate-mute: color-mix(in srgb, CanvasText 60%, transparent);
  --gate-wash: color-mix(in srgb, CanvasText 4%, Canvas);
  --gate-ring: color-mix(in srgb, var(--gate-accent) 22%, transparent);
  --gate-danger: light-dark(#b42318, #f97066);
  /* The page sits a step below the card in light and the card a step
     above the page in dark, so the card always reads as the thing lifted. */
  --gate-ground: light-dark(color-mix(in srgb, CanvasText 4%, Canvas), Canvas);
  --gate-card: light-dark(Canvas, color-mix(in srgb, CanvasText 5%, Canvas));
  --gate-card-radius: max(1rem, calc(var(--gate-radius) + 6px));
  color-scheme: light;
}

body.pixel-gate {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: clamp(1rem, 6vh, 4rem) 1rem 1.5rem;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 1.5rem;
  background: var(--gate-ground);
  color: var(--gate-ink);
  font-family: var(--gate-body-font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.pixel-gate *,
body.pixel-gate *::before,
body.pixel-gate *::after { box-sizing: border-box; }

.pixel-gate-card {
  width: min(100%, 30rem);
  display: grid;
  gap: 1.25rem;
  padding: 2.25rem 2rem 2rem;
  background: var(--gate-card);
  border: 1px solid var(--gate-line);
  border-radius: var(--gate-card-radius);
  box-shadow: 0 1px 2px color-mix(in srgb, CanvasText 4%, transparent), 0 12px 32px -12px color-mix(in srgb, CanvasText 12%, transparent);
}

/* Inside the overlay the dialog is the card: no second frame inside it.
   The page stacks from the top (gate.js is told its height), clear of the
   close button. */
body.pixel-gate-embedded {
  min-height: 0;
  padding: 2.25rem 1.75rem 1.25rem;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 1.25rem;
  background: var(--gate-card);
}

body.pixel-gate-embedded .pixel-gate-card {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

@media (max-width: 30rem) {
  body.pixel-gate:not(.pixel-gate-embedded) { padding-top: 1rem; }
  body.pixel-gate:not(.pixel-gate-embedded) .pixel-gate-card { padding: 1.75rem 1.25rem 1.5rem; }
}

/* The publication: its icon, else its initial on the accent, and its
   name — the card's first line, as on the reader's code mail. */
.pixel-gate-site {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  color: var(--gate-ink);
  text-decoration: none;
}

.pixel-gate-mark {
  width: 3rem;
  height: 3rem;
  border-radius: min(0.875rem, var(--gate-radius));
  object-fit: cover;
}

.pixel-gate-initial {
  display: grid;
  place-items: center;
  background: var(--gate-accent);
  color: var(--gate-on-accent);
  font-family: var(--gate-heading-font);
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1;
}

.pixel-gate-site-name {
  font-family: var(--gate-heading-font);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--gate-mute);
}

a.pixel-gate-site:hover .pixel-gate-site-name { color: var(--gate-ink); }

a.pixel-gate-site:focus-visible {
  outline: 2px solid var(--gate-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.pixel-gate-head {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  text-align: center;
}

.pixel-gate-title {
  margin: 0;
  font-family: var(--gate-heading-font);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pixel-gate-lede,
.pixel-gate-aside {
  margin: 0;
  color: var(--gate-mute);
  text-wrap: pretty;
}

.pixel-gate-lede { font-size: 0.9375rem; }

.pixel-gate-aside { font-size: 0.875rem; }

.pixel-gate-lede strong {
  color: var(--gate-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* A mark above a result's title: the check of a plan taken, the turn of
   a page that waits. */
.pixel-gate-badge,
.pixel-gate-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  border-radius: 999px;
}

.pixel-gate-badge {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--gate-accent) 14%, transparent);
  color: var(--gate-accent);
  font-size: 1.125rem;
  font-weight: 700;
}

.pixel-gate-spinner {
  border: 3px solid var(--gate-line);
  border-top-color: var(--gate-accent);
  animation: pixel-gate-spin 0.8s linear infinite;
}

@keyframes pixel-gate-spin { to { transform: rotate(1turn); } }

.pixel-gate-form {
  display: grid;
  gap: 1rem;
}

.pixel-gate-field {
  display: grid;
  gap: 0.375rem;
}

.pixel-gate-label {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--gate-ink);
}

.pixel-gate-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pixel-gate-input {
  font: inherit;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--gate-line-strong);
  border-radius: var(--gate-radius);
  background: var(--gate-paper);
  color: var(--gate-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pixel-gate-input::placeholder { color: color-mix(in srgb, CanvasText 38%, transparent); }

.pixel-gate-input:hover { border-color: color-mix(in srgb, CanvasText 40%, transparent); }

.pixel-gate-input:focus,
.pixel-gate-input:focus-visible {
  outline: none;
  border-color: var(--gate-accent);
  box-shadow: 0 0 0 3px var(--gate-ring);
}

/* A code reads as digits, not a word: tabular, spaced, centred, the
   trailing letter-space balanced by the left padding. */
.pixel-gate-code {
  min-height: 3.75rem;
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: calc(0.875rem + 0.5em);
}

.pixel-gate-code::placeholder { letter-spacing: 0.5em; }

.pixel-gate-row {
  display: flex;
  gap: 0.5rem;
}

.pixel-gate-row .pixel-gate-input { flex: 1; min-width: 0; }

.pixel-gate-row .pixel-gate-button { flex: none; padding-inline: 1.125rem; }

.pixel-gate-button {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 2.875rem;
  padding: 0.6875rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--gate-radius);
  background: var(--gate-accent);
  color: var(--gate-on-accent);
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

a.pixel-gate-button {
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}

.pixel-gate-button:hover { filter: brightness(1.08); }

.pixel-gate-button:active { filter: brightness(0.94); }

.pixel-gate-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gate-ring);
}

.pixel-gate-button-quiet {
  background: var(--gate-paper);
  color: var(--gate-ink);
  border-color: var(--gate-line-strong);
}

.pixel-gate-button-quiet:hover {
  filter: none;
  background: var(--gate-wash);
}

.pixel-gate-error,
.pixel-gate-notice {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: var(--gate-radius);
  font-size: 0.875rem;
}

.pixel-gate-error {
  color: var(--gate-danger);
  background: color-mix(in srgb, var(--gate-danger) 9%, transparent);
}

.pixel-gate-notice {
  background: var(--gate-wash);
  border: 1px solid var(--gate-line);
  text-align: center;
}

/* Facts read as rows under hairlines: the name on the left, muted, the
   value on the right. */
.pixel-gate-facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  font-size: 0.9375rem;
}

.pixel-gate-facts dt,
.pixel-gate-facts dd {
  padding: 0.75rem 0;
  border-top: 1px solid var(--gate-line);
}

.pixel-gate-facts dt { color: var(--gate-mute); padding-right: 1.25rem; }

.pixel-gate-facts dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

.pixel-gate-section {
  display: grid;
  gap: 1rem;
}

.pixel-gate-section-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gate-mute);
}

/* The account (2026-10-08): who reads at the top, then cards of rows —
   the details, the membership — each row a label, its value, and a verb
   where there is one; the name opens in place (a <details>). */
.pixel-gate-profile {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.pixel-gate-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gate-accent) 14%, transparent);
  color: var(--gate-accent);
  font-family: var(--gate-heading-font);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1;
}

.pixel-gate-profile-text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.pixel-gate-profile-name {
  margin: 0;
  font-family: var(--gate-heading-font);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.pixel-gate-profile-email {
  color: var(--gate-mute);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.pixel-gate-list {
  margin: 0;
  border: 1px solid var(--gate-line);
  border-radius: calc(var(--gate-radius) + 2px);
  overflow: hidden;
}

.pixel-gate-rows { margin: 0; }
.pixel-gate-rows dt,
.pixel-gate-rows dd { margin: 0; }

.pixel-gate-item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--gate-line);
  font-size: 0.9375rem;
}

.pixel-gate-list > .pixel-gate-item:first-child,
.pixel-gate-list > :first-child > .pixel-gate-item:first-child { border-top: 0; }

.pixel-gate-item-label { color: var(--gate-mute); }

.pixel-gate-item-value {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.pixel-gate-item-sub {
  display: block;
  margin-top: 0.125rem;
  color: var(--gate-mute);
  font-size: 0.8125rem;
  font-weight: 400;
}

.pixel-gate-item-empty { color: var(--gate-mute); font-weight: 400; }

.pixel-gate-item-action {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gate-ink);
}

.pixel-gate-edit > summary {
  list-style: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pixel-gate-edit > summary::-webkit-details-marker { display: none; }

.pixel-gate-edit > summary:hover { background: var(--gate-wash); }

.pixel-gate-edit > summary:focus-visible {
  outline: 2px solid var(--gate-accent);
  outline-offset: -2px;
  border-radius: calc(var(--gate-radius) + 2px);
}

.pixel-gate-when-open,
.pixel-gate-edit[open] .pixel-gate-when-closed { display: none; }
.pixel-gate-edit[open] .pixel-gate-when-open { display: inline; }
.pixel-gate-edit[open] .pixel-gate-item-action { color: var(--gate-mute); }

.pixel-gate-edit-form {
  display: grid;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
  animation: pixel-gate-rise 0.18s ease;
}

@keyframes pixel-gate-rise { from { opacity: 0; transform: translateY(-4px); } }

/* Where a plan stands, as a pill: running, waiting on a card, ending. */
.pixel-gate-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.pixel-gate-status::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
}

.pixel-gate-status[data-tone="good"] {
  background: color-mix(in srgb, light-dark(#15803d, #4ade80) 13%, transparent);
  color: light-dark(#166534, #86efac);
}

.pixel-gate-status[data-tone="warn"] {
  background: color-mix(in srgb, light-dark(#b45309, #fbbf24) 14%, transparent);
  color: light-dark(#92400e, #fcd34d);
}

.pixel-gate-status[data-tone="muted"] {
  background: var(--gate-wash);
  color: var(--gate-mute);
}

.pixel-gate-membership-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.pixel-gate-membership-actions form { margin: 0; }

.pixel-gate-button-small {
  min-height: 2.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
}

/* A verb that should not shout: sign out, cancel. */
.pixel-gate-quiet-link {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--gate-mute);
  cursor: pointer;
  transition: color 0.15s ease;
}

.pixel-gate-quiet-link:hover { color: var(--gate-ink); }

.pixel-gate-quiet-link:focus-visible {
  outline: 2px solid var(--gate-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.pixel-gate-account-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gate-line);
}

.pixel-gate-account-foot form { margin: 0; }
.pixel-gate-account-foot > :only-child { margin-inline: auto; }

.pixel-gate-saved {
  margin: 0;
  padding: 0.5rem 0.875rem;
  border-radius: var(--gate-radius);
  background: color-mix(in srgb, light-dark(#15803d, #4ade80) 11%, transparent);
  color: light-dark(#166534, #86efac);
  font-size: 0.875rem;
  font-weight: 550;
  text-align: center;
}

@media (max-width: 30rem) {
  .pixel-gate-item { grid-template-columns: 6rem minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-gate-edit-form { animation: none; }
}

/* The other door, the way back, the way out: a line of quiet links. */
.pixel-gate-switch {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gate-mute);
}

.pixel-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.pixel-gate-actions-start { justify-content: flex-start; }

.pixel-gate-actions form { margin: 0; }

.pixel-gate-back,
.pixel-gate-colophon {
  margin: 0;
  text-align: center;
}

.pixel-gate-back { font-size: 0.875rem; }

.pixel-gate-switch a,
.pixel-gate-back a,
.pixel-gate-aside a,
.pixel-gate-link {
  color: var(--gate-ink);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: var(--gate-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease;
}

.pixel-gate-back a {
  color: var(--gate-mute);
  font-weight: 500;
  text-decoration: none;
}

.pixel-gate-back a:hover { color: var(--gate-ink); }

.pixel-gate-switch a:hover,
.pixel-gate-aside a:hover,
.pixel-gate-link:hover { text-decoration-color: currentColor; }

.pixel-gate-link {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.pixel-gate-switch a:focus-visible,
.pixel-gate-back a:focus-visible,
.pixel-gate-link:focus-visible {
  outline: 2px solid var(--gate-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.pixel-gate-foot {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

/* The platform's one word on the screen: small, muted, the mark at text
   size, a new tab so the reader's page stays put. */
.pixel-gate-colophon {
  font-size: 0.75rem;
  color: var(--gate-mute);
}

.pixel-gate-colophon a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: inherit;
  text-decoration: none;
}

.pixel-gate-colophon a:hover { color: var(--gate-ink); }

.pixel-gate-colophon img {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
}

/* The plans (docs/PAYMENTS.md §6): one block per tier, its prices as
   buttons — the monthly in the accent, the yearly quiet beside it. */
.pixel-gate-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.pixel-gate-tier {
  display: grid;
  gap: 0.875rem;
  padding: 1.25rem;
  border: 1px solid var(--gate-line);
  border-radius: var(--gate-radius);
  background: var(--gate-wash);
}

.pixel-gate-tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pixel-gate-tier-name {
  margin: 0;
  font-family: var(--gate-heading-font);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.pixel-gate-tier-trial {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gate-accent) 14%, transparent);
  color: var(--gate-ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.pixel-gate-tier-blurb {
  margin: 0;
  color: var(--gate-mute);
  font-size: 0.9375rem;
}

.pixel-gate-tier-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
  font-size: 0.9375rem;
}

.pixel-gate-tier-benefits li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: baseline;
}

.pixel-gate-tier-benefits li::before {
  content: "✓";
  color: var(--gate-accent);
  font-weight: 700;
}

.pixel-gate-tier-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}

.pixel-gate-tier-plan { margin: 0; }

.pixel-gate-tier-plan .pixel-gate-button {
  width: 100%;
  font-weight: 500;
}

.pixel-gate-tier-plan strong { font-weight: 650; }

/* The comments frame (docs/ARCHITECTURE.md §4, Comments): no card and
   no ground — the body is see-through, so the conversation sits on the
   theme's own page — in the gate's type, accent, radius and lines. */
body.pixel-gate-comments {
  display: block;
  min-height: 0;
  padding: 0.25rem 0.125rem 1rem;
  background: transparent;
}

.pixel-comments {
  display: grid;
  gap: 1.5rem;
}

.pixel-comments-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.pixel-comments-title {
  margin: 0;
  font-family: var(--gate-heading-font);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.pixel-comments-sort {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
}

.pixel-comments-sort-link {
  color: var(--gate-mute);
  text-decoration: none;
  font-weight: 550;
}

.pixel-comments-sort-link:hover,
.pixel-comments-sort-link[aria-current] { color: var(--gate-ink); }

.pixel-comments-sort-link[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--gate-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.pixel-comments-join {
  display: grid;
  gap: 0.875rem;
  padding: 1.25rem;
  border: 1px solid var(--gate-line);
  border-radius: var(--gate-radius);
  background: var(--gate-wash);
}

.pixel-comments-form { gap: 0.75rem; }

.pixel-comments-input {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.5;
}

.pixel-comments-form-foot {
  display: flex;
  justify-content: flex-end;
}

.pixel-comments-list,
.pixel-comment-replies {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.pixel-comments-thread {
  padding: 1.25rem 0;
  border-top: 1px solid var(--gate-line);
}

.pixel-comment-replies {
  margin: 1rem 0 0 0.875rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gate-line);
  gap: 1rem;
}

.pixel-comment {
  display: grid;
  gap: 0.5rem;
  scroll-margin-top: 1rem;
}

.pixel-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  font-size: 0.875rem;
}

.pixel-comment-avatar {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--gate-accent);
  color: var(--gate-on-accent);
  font-size: 0.75rem;
  font-weight: 650;
}

.pixel-comment-author { font-weight: 600; }

.pixel-comment-to,
.pixel-comment-time { color: var(--gate-mute); }

.pixel-comment-to { text-decoration: none; }

.pixel-comment-to::before { content: "↳ "; }

.pixel-comment-to:hover { color: var(--gate-ink); }

.pixel-comment-body {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.pixel-comment-body p { margin: 0 0 0.625rem; }

.pixel-comment-body p:last-child { margin-bottom: 0; }

.pixel-comment-removed {
  margin: 0;
  color: var(--gate-mute);
  font-size: 0.875rem;
  font-style: italic;
}

.pixel-comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.pixel-comment-votes {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.pixel-comment-vote-form { margin: 0; display: contents; }

.pixel-comment-vote {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gate-mute);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pixel-comment-vote:hover {
  background: var(--gate-wash);
  color: var(--gate-ink);
}

.pixel-comment-vote[aria-pressed="true"] {
  background: color-mix(in srgb, var(--gate-accent) 14%, transparent);
  color: var(--gate-accent);
}

.pixel-comment-vote:focus-visible {
  outline: 2px solid var(--gate-accent);
  outline-offset: 1px;
}

.pixel-comment-score {
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pixel-comment-reply,
.pixel-comment-delete { font-size: 0.875rem; }

.pixel-comment-reply summary,
.pixel-comment-delete summary {
  list-style: none;
  color: var(--gate-mute);
  text-decoration: none;
}

.pixel-comment-reply summary::-webkit-details-marker,
.pixel-comment-delete summary::-webkit-details-marker { display: none; }

.pixel-comment-reply summary:hover,
.pixel-comment-delete summary:hover,
.pixel-comment-reply[open] summary { color: var(--gate-ink); }

/* An open reply takes the whole row under the presses. */
.pixel-comment-reply[open] { flex-basis: 100%; order: 1; }

.pixel-comment-reply[open] .pixel-comments-form { margin-top: 0.75rem; }

.pixel-comment-delete form { display: inline; margin-left: 0.5rem; }

.pixel-comment-delete-button { color: var(--gate-danger); }

@media (prefers-reduced-motion: reduce) {
  .pixel-gate-spinner { animation-duration: 2.4s; }
  .pixel-gate-input,
  .pixel-gate-button,
  .pixel-comment-vote { transition: none; }
}