/* 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; }

/* The card is flat paper with a hairline, as the admin's panels are
   (DESIGN.md §14). */
.pixel-gate-card {
  width: min(100%, 26rem);
  display: grid;
  gap: 1.5rem;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--gate-card);
  border: 1px solid var(--gate-line);
  border-radius: var(--gate-card-radius);
}

/* 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: 2rem 1.75rem 1.25rem;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 1.5rem;
  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.5rem;
  color: var(--gate-ink);
  text-decoration: none;
}

.pixel-gate-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: min(0.75rem, 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.125rem;
  font-weight: 650;
  line-height: 1;
}

.pixel-gate-site-name {
  font-size: 0.8125rem;
  font-weight: 500;
  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.375rem;
  font-weight: 600;
  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: 0.875rem;
}

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

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

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

/* Body-sized, so a phone never zooms into one. */
.pixel-gate-input {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  min-height: 2.625rem;
  padding: 0.5rem 0.8125rem;
  border: 1px solid var(--gate-line-strong);
  border-radius: min(var(--gate-radius), 0.75rem);
  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.25rem;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  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; }

/* The screen's one bold object is solid ink, the admin's primary button
   (DESIGN.md §14; Ronald, 2026-11-05), a rectangle since the new style
   (§35, 2026-11-11). The ink and the paper are
   system colours, so the pill turns white on a dark page. The accent
   stays for the publication's mark, the focus ring and the checks. */
.pixel-gate-button {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  min-height: 2.625rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: min(var(--gate-radius), 0.5rem);
  background: var(--gate-ink);
  color: var(--gate-paper);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

@media (hover: hover) {
  .pixel-gate-button:hover { background: color-mix(in srgb, var(--gate-ink) 84%, var(--gate-paper)); }
}

.pixel-gate-button:active { transform: scale(0.98); }

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

/* A form that sends: a small turn before the word, and no second press. */
.pixel-gate-button[aria-busy="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: progress;
  filter: none;
}

.pixel-gate-button[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid color-mix(in srgb, var(--gate-paper) 35%, transparent);
  border-top-color: var(--gate-paper);
  border-radius: 999px;
  animation: pixel-gate-spin 0.8s linear infinite;
}

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

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

.pixel-gate-error,
.pixel-gate-notice {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: min(var(--gate-radius), 0.75rem);
  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): cards of rows — the details, the membership —
   each row a label, its value, and a verb where there is one. */

.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;
}

/* A member's face (2026-10-19) on the same tinted disc the initial sat
   on. */
img.pixel-gate-avatar { object-fit: cover; }

/* The account and Edit profile (2026-11-11, after X's profile): who the
   reader is in the centre, the face large. */
.pixel-gate-avatar-large {
  width: 6rem;
  height: 6rem;
  font-size: 2.25rem;
}

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

.pixel-gate-hero .pixel-gate-avatar { margin-bottom: 0.5rem; }

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

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

.pixel-gate-hero .pixel-gate-button { margin-top: 0.75rem; }

/* What the member wears on the account (2026-11-11): the badges, each
   its picture, name and line, and the circles as chips. Not
   .pixel-gate-badge: that is the round mark above a result's title. */
.pixel-gate-honours {
  display: grid;
  gap: 0.625rem;
}

.pixel-gate-honour-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pixel-gate-honour {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gate-line);
  border-radius: min(calc(var(--gate-radius) + 2px), 0.75rem);
}

.pixel-gate-honour-icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

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

.pixel-gate-honour-name {
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pixel-gate-honour-line {
  color: var(--gate-mute);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.pixel-gate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pixel-gate-chip {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--gate-line);
  border-radius: 999px;
  background: var(--gate-wash);
  font-size: 0.8125rem;
  font-weight: 550;
}

/* Edit profile's bar: the way back, the title, Save. */
.pixel-gate-edit-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

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

.pixel-gate-icon-button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: min(var(--gate-radius), 0.5rem);
  color: var(--gate-ink);
}

.pixel-gate-icon-button:hover { background: var(--gate-wash); }

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

/* The photo with its tools on it: round, dark, see-through buttons. */
.pixel-gate-photo-edit {
  position: relative;
  justify-self: center;
  width: 6rem;
  height: 6rem;
  margin: 0.25rem 0 0.5rem;
}

.pixel-gate-photo-preview {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.pixel-gate-photo-preview[hidden] { display: none; }

.pixel-gate-photo-tools {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 999px;
}

.pixel-gate-photo-tool {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(15 15 15 / 0.6);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pixel-gate-photo-tool:hover { background: rgb(15 15 15 / 0.75); }

.pixel-gate-photo-tool:focus-within,
.pixel-gate-photo-tool:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* A field with its label inside the box. */
.pixel-gate-float {
  display: grid;
  gap: 0.125rem;
  padding: 0.5rem 0.8125rem 0.5625rem;
  border: 1px solid var(--gate-line-strong);
  border-radius: min(var(--gate-radius), 0.5rem);
  background: var(--gate-paper);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pixel-gate-float:focus-within {
  border-color: var(--gate-accent);
  box-shadow: 0 0 0 3px var(--gate-ring);
}

.pixel-gate-float-label {
  color: var(--gate-mute);
  font-size: 0.8125rem;
}

.pixel-gate-float:focus-within .pixel-gate-float-label { color: var(--gate-accent); }

.pixel-gate-float-input {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--gate-ink);
}

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

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

/* The label takes the width of its words, on one line: the overlay's
   frame is always narrower than a phone, so a fixed column broke
   "Member since" and squeezed a newsletter's name (2026-11-05). */
.pixel-gate-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 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); white-space: nowrap; }

.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;
}

/* A row that is a choice: a list on the Newsletters screen, its name
   and description, and a switch at the end. The switch is ink when on,
   as the primary pill is, so it turns light on a dark page. */
.pixel-gate-choice { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }

@media (hover: hover) {
  .pixel-gate-choice:hover { background: var(--gate-wash); }
}

.pixel-gate-choice input {
  appearance: none;
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 1.375rem;
  margin: 0;
  border-radius: 999px;
  background: var(--gate-line-strong);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pixel-gate-choice input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.375rem - 6px);
  height: calc(1.375rem - 6px);
  border-radius: 999px;
  background: var(--gate-paper);
  transition: transform 0.15s ease;
}

.pixel-gate-choice input:checked { background: var(--gate-ink); }

.pixel-gate-choice input:checked::before { transform: translateX(0.875rem); }

.pixel-gate-choice input:focus-visible {
  outline: 2px solid var(--gate-accent);
  outline-offset: 2px;
}
.pixel-gate-asked { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--gate-line); border-radius: var(--gate-radius); }
.pixel-gate-asked .pixel-gate-form { margin-top: 0.75rem; }

/* 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-end { justify-content: flex-end; }

.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 (prefers-reduced-motion: reduce) {
  .pixel-gate-choice input,
  .pixel-gate-choice input::before { transition: 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; }

/* A link reads as a link by its ink; the line comes with the hover. */
.pixel-gate-switch a,
.pixel-gate-back a,
.pixel-gate-aside a,
.pixel-gate-link {
  color: var(--gate-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  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. On
   their own wide screen (2026-11-11) the tiers stand side by side where
   they fit and one under another on a phone; each block's prices line
   up at its foot. */
body.pixel-gate-wide .pixel-gate-card { width: min(100%, 60rem); }

.pixel-gate-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.875rem;
}

.pixel-gate-tier {
  display: flex;
  flex-direction: column;
  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;
  margin-top: auto;
}

.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 reader's composer, as a tweet is written (2026-11-11): the face
   and name, a Lexxy field with no box that grows as the reader types,
   the chosen photos as tiles, and a bar with the photo button, the
   characters left near the limit and Post. Lexxy's own rules are all
   :where(), so these win. */
.pixel-composer {
  display: grid;
  gap: 0.875rem;
}

.pixel-composer-who {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.pixel-composer-face {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--gate-accent);
  color: var(--gate-on-accent);
  font-weight: 650;
}

img.pixel-composer-face { background: color-mix(in srgb, var(--gate-accent) 14%, transparent); }

.pixel-composer-name { font-weight: 650; overflow-wrap: anywhere; }

.pixel-composer-name-field {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--gate-line-strong);
  outline: none;
  background: transparent;
  color: var(--gate-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
}

.pixel-composer-name-field:focus { border-bottom-color: var(--gate-accent); }

.pixel-composer-field {
  --lexxy-color-canvas: transparent;
  --lexxy-color-ink: var(--gate-ink);
  --lexxy-font-base: inherit;
  --lexxy-editor-padding: 0;
  --lexxy-editor-rows: 4lh;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gate-ink);
  font-size: 1.1875rem;
  line-height: 1.5;
}

.pixel-composer-field .lexxy-editor__content { max-height: 50vh; overflow-y: auto; }

.pixel-composer-field .lexxy-editor__content p { margin: 0; }

.pixel-composer-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
}

.pixel-composer-strip[hidden] { display: none; }

.pixel-composer-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: min(var(--gate-radius), 0.625rem);
  background: var(--gate-wash);
  box-shadow: inset 0 0 0 1px var(--gate-line);
}

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

/* A photo this browser cannot draw (HEIC outside Safari): its name. */
.pixel-composer-tile[data-name]::before {
  content: attr(data-name);
  position: absolute;
  inset: 0.5rem 0.5rem auto;
  color: var(--gate-mute);
  font-size: 0.6875rem;
  overflow-wrap: anywhere;
}

.pixel-composer-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(15 15 15 / 0.65);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.pixel-composer-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gate-line);
}

.pixel-composer-tool {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -0.375rem;
  border-radius: 999px;
  color: var(--gate-accent);
  cursor: pointer;
}

.pixel-composer-tool:hover { background: color-mix(in srgb, var(--gate-accent) 12%, transparent); }

.pixel-composer-tool:focus-within {
  outline: 2px solid var(--gate-accent);
  outline-offset: 1px;
}

.pixel-composer-count {
  margin-left: auto;
  color: var(--gate-mute);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.pixel-composer-count[data-over] { color: var(--gate-danger); font-weight: 600; }

.pixel-composer-bar .pixel-gate-button { padding-inline: 1.25rem; }

.pixel-composer-bar .pixel-gate-button:disabled { opacity: 0.45; cursor: default; }

/* 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;
}

/* The conversation, as Disqus lays one out, in the new style (2026-11-11):
   a face column on the left, the words beside it, small grey verbs under
   them, replies indented under the words, and no rule between threads. */
.pixel-comments {
  display: grid;
  gap: 1.75rem;
  --pixel-face: 2.5rem;
  --pixel-face-gap: 0.875rem;
}

.pixel-comments-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--gate-line);
}

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

/* Best and Newest: a segmented control, as the admin's tabs. */
.pixel-comments-sort {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: min(calc(var(--gate-radius) + 2px), 0.625rem);
  background: var(--gate-wash);
  box-shadow: inset 0 0 0 1px var(--gate-line);
  font-size: 0.8125rem;
}

.pixel-comments-sort-link {
  padding: 0.3125rem 0.75rem;
  border-radius: min(var(--gate-radius), 0.5rem);
  color: var(--gate-mute);
  font-weight: 550;
  text-decoration: none;
}

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

.pixel-comments-sort-link[aria-current] {
  background: var(--gate-paper);
  color: var(--gate-ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--gate-line);
}

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

/* The composer: the face, then one box that holds the field and its
   button; the box takes the accent's ring while the reader types. */
.pixel-comments-compose {
  display: grid;
  grid-template-columns: var(--pixel-face) minmax(0, 1fr);
  align-items: start;
  gap: var(--pixel-face-gap);
}

.pixel-comments-compose-main { gap: 0.625rem; }

.pixel-comments-me {
  display: block;
  border-radius: 999px;
  text-decoration: none;
}

.pixel-comments-me:hover .pixel-comment-avatar { filter: brightness(0.92); }

.pixel-comments-me:focus-visible {
  outline: 2px solid var(--gate-accent);
  outline-offset: 2px;
}

.pixel-comments-box {
  border: 1px solid var(--gate-line-strong);
  border-radius: min(calc(var(--gate-radius) + 2px), 0.75rem);
  background: var(--gate-paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pixel-comments-box:focus-within {
  border-color: var(--gate-accent);
  box-shadow: 0 0 0 3px var(--gate-ring);
}

.pixel-comments-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 3.25rem;
  padding: 0.75rem 0.875rem 0.25rem;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--gate-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

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

.pixel-comments-form-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.375rem 0.5rem 0.5rem;
}

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

.pixel-comment-replies {
  margin: 1.25rem 0 0 calc(var(--pixel-face) + var(--pixel-face-gap));
  gap: 1.25rem;
  --pixel-face: 2rem;
}

/* One comment: the face column and the words beside it. */
.pixel-comment {
  display: grid;
  grid-template-columns: var(--pixel-face) minmax(0, 1fr);
  gap: var(--pixel-face-gap);
  scroll-margin-top: 1rem;
}

.pixel-comment-main {
  display: grid;
  gap: 0.3125rem;
  min-width: 0;
}

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

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

img.pixel-comment-avatar {
  object-fit: cover;
  background: color-mix(in srgb, var(--gate-accent) 14%, transparent);
}

.pixel-comment-author { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }

/* Another reader's name, a way to their profile (card 383). */
a.pixel-comment-author { color: inherit; text-decoration: none; }

a.pixel-comment-author:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* The badges a commenter wears (2026-10-18): each its own small picture,
   its name and line on hover. */
.pixel-comment-badges { display: inline-flex; align-items: center; gap: 0.1875rem; }

.pixel-comment-badge { width: 1.125rem; height: 1.125rem; object-fit: contain; }

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

.pixel-comment-time::before { content: "·"; margin-right: 0.5rem; }

.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;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

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

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

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

/* The presses: small and grey, as Disqus has them. */
.pixel-comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
}

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

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

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

.pixel-comment-vote svg { width: 0.9375rem; height: 0.9375rem; }

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

.pixel-comment-vote[aria-pressed="true"] { color: var(--gate-accent); }

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

.pixel-comment-score {
  min-width: 1rem;
  text-align: center;
  color: var(--gate-mute);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pixel-comment-reply summary {
  list-style: none;
  color: var(--gate-mute);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

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

.pixel-comment-reply 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; font-size: 1rem; }

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

.pixel-comment-reply .pixel-comments-compose { --pixel-face: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .pixel-gate-spinner,
  .pixel-gate-button[aria-busy="true"]::before { animation-duration: 2.4s; }
  .pixel-gate-input,
  .pixel-gate-button,
  .pixel-comment-vote { transition: none; }
}