/* The feature pages (Saas::FeaturePage, docs/DESIGN.md §24, 2026-10-23),
   over saas/landing.css: its faces, heads, pillars and close. Each page
   is a claim beside the product drawn, then each part of the feature
   with its scene. A scene is markup in em under one font size, so it
   scales as one object with the screen. Real words, real photographs,
   real faces; never a grey bar. Still: nothing moves, not even the
   landing sheet's rise into view. */

.fx .lp-head,
.fx .lp-tile,
.fx .lp-pillars li {
  animation: none;
}

.fx em {
  font-style: normal;
}

/* — The hero: the claim, and the product beside it ——————————— */
.fx-hero {
  position: relative;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(4rem, 3rem + 4vw, 7rem);
  isolation: isolate;
}

.fx-hero::before {
  content: "";
  position: absolute;
  inset: -6rem 0 0;
  z-index: -1;
  background-image:
    radial-gradient(closest-side at 75% 45%, rgba(124, 58, 237, 0.12), transparent 70%),
    radial-gradient(closest-side at 55% 55%, rgba(46, 107, 245, 0.14), transparent 70%),
    linear-gradient(to right, rgba(11, 22, 54, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 22, 54, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 80%);
  pointer-events: none;
}

.fx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 4vw, 5rem);
}

.fx-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.fx-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--color-line-strong);
}

.fx-crumbs a {
  color: var(--color-muted);
  text-decoration: none;
}

.fx-crumbs a:hover {
  color: var(--color-ink);
}

.fx-crumbs [aria-current] {
  color: var(--color-ink);
}

.fx-display {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 1.4rem + 4.6vw, 5.75rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-wrap: balance;
}

.fx-display em,
.fx-copy h2 em,
.fx .lp-head h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: var(--lp-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}

.fx-lede {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: clamp(1.1rem, 0.98rem + 0.45vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: color-mix(in srgb, var(--color-ink) 74%, var(--color-paper));
  text-wrap: pretty;
}

/* Clean, bold words, as the landing page's ledes (landing.css): the one
   strong phrase in full ink. */
.fx-lede b,
.fx-copy p b {
  font-weight: 600;
  color: var(--color-ink);
}

.fx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* — A part of the feature: its words beside its scene ———————————— */
.fx-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
}

.fx-split-flip {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.fx-split-flip .fx-copy {
  order: 2;
}

.fx-copy h2 {
  margin-top: 1rem;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.fx-copy > p:not(.lp-index) {
  margin-top: 1.25rem;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--color-body);
  text-wrap: pretty;
}

.fx-checks {
  display: grid;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.fx-checks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.97rem;
  color: var(--color-ink);
}

.fx-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.6-5' fill='none' stroke='%231d4ed8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--color-accent-soft);
}

.fx-facts {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

.fx-facts .lp-pillars-three {
  margin-top: 0;
}

/* — Questions ———————————————————————————————————————— */
.fx-faq {
  max-width: 54rem;
  margin: 0;
  border-top: 1px solid var(--color-line-strong);
}

.fx-faq div {
  padding: 1.6rem 0.25rem;
  border-bottom: 1px solid var(--color-line-strong);
}

.fx-faq dt {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.fx-faq dd {
  max-width: 46rem;
  margin: 0.55rem 0 0;
  line-height: 1.65;
  color: var(--color-body);
}

/* — The cards: a feature each, the whole card the link ——————————— */
.fx-more-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
}

.fx-all {
  font-weight: 500;
  color: var(--color-accent-strong);
  text-decoration: none;
}

.fx-all:hover {
  text-decoration: underline;
}

.fx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--lp-radius);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  overflow: hidden;
  color: var(--color-ink);
  text-decoration: none;
}

.fx-card:hover {
  box-shadow: 0 0 0 1px var(--color-accent), var(--lp-shadow-soft);
}

.fx-card-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.fx-card-kicker {
  margin: 1.4rem 1.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.fx-card-title {
  margin: 0.6rem 1.5rem 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.fx-card-line {
  flex: 1;
  margin: 0.6rem 1.5rem 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--color-body);
}

.fx-card-more {
  margin: 1.25rem 1.5rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-accent-strong);
}

/* — The hub ——————————————————————————————————————————— */
.fx-hub-hero {
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
  text-align: center;
}

.fx-hub-hero .fx-crumbs ol {
  justify-content: center;
}

.fx-hub-display {
  font-size: clamp(2.9rem, 1.2rem + 5.6vw, 6.5rem);
}

.fx-hub-list {
  padding-top: 1rem;
}

.fx-ideas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0 2.5rem;
  margin: 0;
}

.fx-ideas div {
  padding: 1.4rem 0;
  border-top: 1px solid var(--color-line-strong);
}

.fx-ideas dt {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fx-ideas dd {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-body);
}

.fx-close {
  padding-block: clamp(5rem, 3rem + 6vw, 9rem);
}

.fx-close .lp-display {
  font-size: clamp(2.7rem, 1rem + 5.5vw, 6.25rem);
}

/* — The scene kit ———————————————————————————————————————
   One font size per scene; everything inside is em. */
.fx-stage {
  position: relative;
  font-size: clamp(0.72rem, 0.5rem + 0.6vw, 0.95rem);
  line-height: 1.45;
  color: var(--color-ink);
}

.fx-stage img {
  display: block;
}

.fx-window {
  position: relative;
  border-radius: 1.2em;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
}

.fx-bar {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper-2);
}

.fx-bar i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--color-line-strong);
}

.fx-url {
  flex: 1;
  margin-left: 0.8em;
  padding: 0.3em 0.9em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-panel {
  position: relative;
  padding: 1.5em;
  border-radius: 1.2em;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow-soft);
}

.fx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1em;
}

.fx-panel-title {
  font-family: var(--font-heading);
  font-size: 1.45em;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.fx-eyebrow {
  margin-bottom: 0.5em;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-eyebrow + .fx-panel-title {
  margin-bottom: 1em;
}

.fx-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6em;
  margin-top: 1.25em;
}

.fx-float {
  position: absolute;
  z-index: 2;
  padding: 1em 1.15em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--lp-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.fx-float-end {
  right: -1.5em;
  bottom: -2.2em;
}

.fx-float-start {
  left: -1.5em;
  bottom: -2.2em;
}

.fx-float-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.6em;
  font-family: var(--font-heading);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fx-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0.22em rgba(22, 163, 74, 0.15);
}

.fx-btn,
.fx-btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.55em 1.1em;
  border-radius: var(--radius-pill);
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.fx-btn {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.fx-btn-quiet {
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
}

.fx-btn-accent {
  background: var(--color-accent);
  color: #fff;
}

.fx-btn-block {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding-block: 0.8em;
}

.fx-danger {
  color: var(--color-danger-strong);
}

.fx-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  background: #e6edfe;
  color: #1d4ed8;
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fx-chip-paid {
  background: var(--lp-violet-soft);
  color: var(--lp-violet);
}

.fx-chip-muted {
  background: #eef1f7;
  color: #5b6478;
}

.fx-chip-live {
  background: #dcfce7;
  color: #15803d;
}

.fx-label {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-label-head {
  display: block;
  margin: 1.1em 0 0.6em;
}

.fx-segments {
  display: inline-flex;
  justify-self: start;
  padding: 0.2em;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-size: 0.85em;
}

.fx-segments > * {
  padding: 0.35em 0.85em;
  border-radius: var(--radius-pill);
  color: var(--color-body);
  font-weight: 500;
  white-space: nowrap;
}

.fx-segments b {
  background: var(--color-paper);
  box-shadow: 0 1px 2px rgba(11, 22, 54, 0.12), 0 0 0 1px var(--color-line-strong);
  color: var(--color-ink);
}

.fx-segments-small {
  font-size: 0.75em;
}

.fx-select {
  position: relative;
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.85em;
  border-radius: 0.65em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.fx-select svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--color-muted);
}

.fx-select-on {
  box-shadow: 0 0 0 1.5px var(--color-accent);
  color: var(--color-accent-strong);
}

.fx-mono-field {
  font-family: var(--font-mono);
  font-weight: 400;
}

.fx-switch-row {
  display: flex;
  align-items: center;
  gap: 0.65em;
  margin-top: 0.6em;
  font-size: 0.88em;
}

.fx-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.2em;
  height: 1.25em;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
}

.fx-switch::after {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 22, 54, 0.25);
}

.fx-switch-on {
  background: var(--color-accent);
}

.fx-switch-on::after {
  left: auto;
  right: 0.15em;
}

.fx-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-rows li {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.8em 0;
  border-top: 1px solid var(--color-line);
}

.fx-row-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.fx-row-main b {
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-row-main b i {
  font-style: normal;
  font-weight: 400;
  color: var(--color-muted);
}

.fx-row-main > span {
  overflow: hidden;
  font-size: 0.8em;
  color: var(--color-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-row-figure {
  display: grid;
  flex-shrink: 0;
  font-size: 0.72em;
  text-align: right;
  color: var(--color-muted);
}

.fx-row-figure b {
  font-family: var(--font-heading);
  font-size: 1.45em;
  font-weight: 500;
  color: var(--color-ink);
}

.fx-face {
  flex-shrink: 0;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--color-accent-soft);
  object-fit: cover;
}

.fx-face-lg {
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: var(--color-accent-soft);
}

.fx-faces {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-faces li {
  margin-right: -0.6em;
}

.fx-faces img {
  box-shadow: 0 0 0 0.2em var(--color-paper);
}

.fx-faces-more {
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow: 0 0 0 0.2em var(--color-paper);
  color: var(--color-on-ink);
  font-size: 0.85em;
  font-weight: 600;
}

.fx-form .fx-input {
  margin-top: 0.75em;
}

.fx-input {
  display: grid;
  gap: 0.35em;
}

.fx-input > b {
  display: block;
  padding: 0.6em 0.85em;
  border-radius: 0.65em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.9em;
  font-weight: 400;
}

.fx-input > b i {
  margin-right: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-style: normal;
  color: var(--color-muted);
}

.fx-input-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75em;
}

.fx-choice-on {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65em;
  padding: 0.65em 0.85em;
  border-radius: 0.7em;
  box-shadow: 0 0 0 1px var(--color-line);
  font-size: 0.9em;
}

.fx-choice-on {
  box-shadow: 0 0 0 1.5px var(--color-ink);
  font-weight: 500;
}

.fx-radio {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--color-line-strong);
}

.fx-choice-on .fx-radio {
  box-shadow: inset 0 0 0 0.3em var(--color-ink);
}

.fx-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  flex-basis: 100%;
  padding-left: 1.65em;
}

.fx-tick {
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.85em;
  font-weight: 400;
  color: var(--color-body);
}

.fx-tick-on {
  background: var(--color-ink);
  box-shadow: none;
  color: var(--color-on-ink);
}

.fx-box {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.3em;
  box-shadow: inset 0 0 0 1.5px var(--color-line-strong);
}

.fx-box svg {
  width: 0.8em;
  height: 0.8em;
  color: #fff;
}

.fx-member-on .fx-box {
  background: var(--color-ink);
  box-shadow: none;
}

.fx-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75em;
  margin: 0;
}

.fx-figures-wide {
  grid-template-columns: repeat(auto-fit, minmax(5.5em, 1fr));
  margin-top: 1em;
  padding: 0.9em 1em;
  border-radius: 0.9em;
  background: var(--color-paper-2);
}

.fx-figures dt {
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-figures dd {
  margin: 0.2em 0 0;
  font-family: var(--font-heading);
  font-size: 1.35em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* The dark terminal an agent works in. */
.fx-term {
  position: relative;
  padding: 0 1.4em 1.4em;
  border-radius: 1.2em;
  background:
    radial-gradient(30em 14em at 100% 0%, rgba(124, 58, 237, 0.35), transparent 70%),
    radial-gradient(26em 14em at 0% 100%, rgba(46, 107, 245, 0.3), transparent 70%),
    var(--color-ink);
  box-shadow: var(--lp-shadow);
  color: var(--color-on-ink);
}

.fx-term-bar {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 -1.4em 1.1em;
  padding: 0.8em 1.1em;
  border-bottom: 1px solid rgba(234, 240, 255, 0.1);
}

.fx-term-bar i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: rgba(234, 240, 255, 0.22);
}

.fx-term-bar span {
  margin-left: 0.8em;
  font-family: var(--font-mono);
  font-size: 0.75em;
  color: var(--color-on-ink-muted);
}

.fx-term-you {
  margin: 0 0 1em auto;
  max-width: 85%;
  padding: 0.8em 1em;
  border-radius: 1em 1em 0.25em 1em;
  background: rgba(234, 240, 255, 0.12);
  font-size: 0.92em;
}

.fx-term-call {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  padding: 0.42em 0;
  font-size: 0.85em;
}

.fx-term-call code {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: #a5b8ff;
}

.fx-term-call span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-on-ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-term-call b {
  flex-shrink: 0;
  font-weight: 500;
  color: #86efac;
}

.fx-term-call b.fx-term-no {
  color: #fda4af;
}

.fx-term-agent {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid rgba(234, 240, 255, 0.1);
  font-size: 0.92em;
  color: var(--color-on-ink);
}

.fx-term-small {
  margin-top: 1.5em;
  font-size: 0.92em;
}

/* Code as a file: the ink stage, mono. */
.fx-code {
  position: relative;
  border-radius: 1.2em;
  background: var(--color-ink);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
  color: var(--color-on-ink);
}

.fx-code-head {
  padding: 0.8em 1.2em;
  border-bottom: 1px solid rgba(234, 240, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.75em;
  color: var(--color-on-ink-muted);
}

.fx-code pre {
  margin: 0;
  padding: 1.1em 1.25em 1.3em;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78em;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fx-c {
  color: #a5b8ff;
}

.fx-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--color-accent);
}

/* — Small real sites, drawn ———————————————————————————————— */
.fx-site {
  padding: 1.25em 1.5em 1.5em;
}

.fx-site-nav {
  display: flex;
  align-items: center;
  gap: 1.1em;
  margin-bottom: 1.4em;
  font-size: 0.8em;
  color: var(--color-body);
}

.fx-site-nav b {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.fx-site-cta,
.fx-site-lang {
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: 500;
}

.fx-site-lang {
  background: var(--color-paper-2);
  box-shadow: 0 0 0 1px var(--color-line);
  color: var(--color-ink);
}

.fx-site-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.fx-site-title {
  margin-top: 0.35em;
  font-family: var(--font-display);
  font-size: 2.2em;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

.fx-site-title-sm {
  margin-top: 0.9em;
  font-size: 1.6em;
}

.fx-site-by {
  margin-top: 0.6em;
  font-size: 0.78em;
  color: var(--color-muted);
}

.fx-site-photo {
  width: 100%;
  height: auto;
  margin-top: 1em;
  aspect-ratio: 2.3 / 1;
  border-radius: 0.8em;
  object-fit: cover;
}

.fx-site-nav + .fx-site-photo {
  margin-top: 0;
}

.fx-site-photo-tall {
  aspect-ratio: 1.6 / 1;
}

.fx-site-text {
  margin-top: 0.9em;
  font-size: 0.9em;
  line-height: 1.6;
  color: var(--color-body);
}

/* The site's own faces: a bakery in warm serif, a climbing school in
   grotesk. */
.fx-site-crumb {
  background: #fbf7f0;
}

.fx-site-crumb .fx-site-kicker {
  color: #9a4b1c;
}

.fx-site-crumb .fx-site-cta {
  background: #7a3a14;
}

.fx-site-summit .fx-site-nav b,
.fx-site-summit .fx-site-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.fx-site-summit .fx-site-title {
  margin-top: 0.8em;
  font-size: 1.75em;
}

.fx-site-summit .fx-site-cta {
  background: #2f5d50;
}

/* The paywall the platform draws, under the teaser. */
.fx-gate {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.6em;
  margin-top: -2em;
  padding: 3.25em 1.5em 0.5em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 2.5em);
  text-align: center;
}

.fx-site-crumb .fx-gate {
  background: linear-gradient(to bottom, rgba(251, 247, 240, 0), #fbf7f0 2.5em);
}

.fx-gate b {
  font-family: var(--font-heading);
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fx-gate > span:not(.fx-btn) {
  font-size: 0.85em;
  color: var(--color-body);
}

.fx-site-crumb .fx-gate .fx-btn {
  background: #7a3a14;
}

.fx-gate-circle {
  margin-top: 1.25em;
  padding: 1.25em;
  border-radius: 1em;
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.fx-gate-circle svg {
  width: 1.4em;
  height: 1.4em;
  color: #2f5d50;
}

.fx-gate-link {
  font-weight: 500;
  color: #2f5d50;
}

.fx-plans {
  width: 15em;
}

.fx-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  margin-top: 0.5em;
  padding: 0.7em 0.85em;
  border-radius: 0.75em;
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.fx-plan span {
  display: grid;
}

.fx-plan b {
  font-size: 0.92em;
}

.fx-plan i {
  font-size: 0.72em;
  font-style: normal;
  color: var(--color-muted);
}

.fx-plan em {
  font-family: var(--font-heading);
  font-size: 1.15em;
  font-weight: 600;
}

.fx-plan small {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--color-muted);
}

.fx-plan-on {
  box-shadow: 0 0 0 1.5px var(--color-ink);
}

/* — Newsletters ———————————————————————————————————————— */
.fx-mail-body {
  display: grid;
  grid-template-columns: 13em minmax(0, 1fr);
}

.fx-inbox {
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid var(--color-line);
}

.fx-inbox li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1em 0.5em;
  padding: 0.85em 1em;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.8em;
}

.fx-inbox b {
  font-weight: 600;
}

.fx-inbox span {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--color-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-inbox em {
  grid-row: 1;
  grid-column: 2;
  color: var(--color-muted);
}

.fx-inbox-on {
  background: var(--color-accent-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.fx-letter {
  padding: 1.25em;
  background: #f2f4f8;
}

.fx-letter-card {
  padding: 1.5em;
  border-radius: 0.6em;
  background: #fff;
}

/* The classic design's masthead: the publication's name in the heading
   face, small, bold and in capitals (Newsletter::Style, "masthead"). */
.fx-letter-pub {
  font-family: var(--font-heading);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fx-letter-title {
  margin-top: 0.8em;
  font-family: var(--font-display);
  font-size: 1.85em;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The subtitle under the title, in the body face and the muted ink, then
   the byline: the author and the date. */
.fx-letter-sub {
  margin-top: 0.45em;
  font-size: 0.95em;
  line-height: 1.4;
  color: #6b6b6b;
}

.fx-letter-by {
  margin-top: 0.75em;
  font-size: 0.72em;
  color: #6b6b6b;
}

.fx-letter-photo {
  width: 100%;
  height: auto;
  margin-top: 1em;
  aspect-ratio: 1.9 / 1;
  border-radius: 0.4em;
  object-fit: cover;
}

.fx-letter-text {
  margin-top: 0.85em;
  font-size: 0.85em;
  line-height: 1.6;
  color: #374151;
}

.fx-letter-text u {
  color: var(--color-accent);
}

/* The footer after a hairline: why the reader gets it, the way off, the
   way to the browser, then Powered by PixelGlass. */
.fx-letter-foot,
.fx-letter-powered {
  font-size: 0.66em;
  line-height: 1.6;
  color: #6b6b6b;
}

.fx-letter-foot {
  margin-top: 1.25em;
  padding-top: 0.9em;
  border-top: 1px solid var(--color-line);
}

.fx-letter-powered {
  margin-top: 0.3em;
}

.fx-mail .fx-float {
  width: 17em;
}

/* The publish page's second step: the way back and Preview, the
   headline, a row for each choice (one open), the sentence, the verb. */
.fx-pub {
  padding: 1.1em 1.5em 1.6em;
  background: var(--color-canvas);
}

.fx-pub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.fx-pub-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.3em 0.9em 0.3em 0.35em;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.fx-pub-back i {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.4em;
  background: var(--color-ink);
}

.fx-pub-back b {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding-left: 0.75em;
  border-left: 1px solid var(--color-line-strong);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-pub-back b::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--color-muted);
}

.fx-pub-headline {
  margin-top: 2em;
  font-family: var(--font-heading);
  font-size: 1.7em;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.fx-pub-headline span {
  display: block;
}

.fx-pub-headline span:first-child {
  color: var(--color-accent-strong);
}

.fx-pub-headline span + span {
  margin-top: 0.3em;
}

.fx-pub-rows {
  margin-top: 1.4em;
  border-block: 1px solid var(--color-line);
}

.fx-pub-rows > * + * {
  border-top: 1px solid var(--color-line);
}

.fx-pub-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.85em 0;
  font-size: 0.94em;
  font-weight: 500;
}

.fx-pub-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-pub-row svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  color: var(--color-muted);
}

.fx-pub-body {
  padding: 0 0 1.2em 1.75em;
}

.fx-pub-legend {
  margin: 0.9em 0 0.5em;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--color-body);
}

.fx-pub-legend:first-child {
  margin-top: 0;
}

.fx-pub-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}

.fx-pub-pills > * {
  padding: 0.45em 1em;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.fx-pub-pills b {
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 1px rgba(46, 107, 245, 0.4);
  color: var(--color-accent-strong);
}

.fx-pub-labels {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1em;
}

.fx-pub-menu-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 0.9em 0.45em 1em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 0.85em;
  font-weight: 500;
}

.fx-pub-menu-pill svg {
  width: 0.9em;
  height: 0.9em;
}

.fx-pub-reach {
  font-size: 0.85em;
  color: var(--color-muted);
}

/* The labels' menu, open: it floats, so it has the floating shadow. */
.fx-pub-menu {
  position: absolute;
  top: calc(100% + 0.5em);
  left: 0;
  z-index: 2;
  width: 12em;
  margin: 0;
  padding: 0.35em;
  border: 1px solid var(--color-line-strong);
  border-radius: 1em;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow);
  list-style: none;
}

.fx-pub-menu li {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.45em 0.7em;
  border-radius: 0.7em;
  color: var(--color-body);
  font-size: 0.88em;
}

.fx-pub-menu li[data-ticked] {
  color: var(--color-ink);
  font-weight: 500;
}

.fx-pub-menu i {
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
}

.fx-pub-menu li[data-ticked] i {
  background: var(--color-ink);
  box-shadow: none;
  color: var(--color-on-ink);
}

.fx-pub-menu svg {
  width: 0.75em;
  height: 0.75em;
}

.fx-pub-sentence {
  margin: 1.4em 0 1.1em;
  font-size: 0.9em;
  color: var(--color-body);
}

/* The media picker: a sheet of paper with its close in the corner, the
   floating bar over the grid, and a picture opened large in a float. */
.fx-picker-stage {
  padding-bottom: 3em;
}

.fx-picker {
  position: relative;
  padding: 0.7em 0.7em 1.4em;
  border: 1px solid var(--color-line);
  border-radius: 1.6em;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow);
}

/* The sheet's close and the large view's way back: one round button. */
.fx-picker-close,
.fx-picker-back {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: 0 10px 15px -3px rgba(11, 22, 54, 0.1), 0 4px 6px -4px rgba(11, 22, 54, 0.1);
  color: var(--color-body);
}

.fx-picker-close {
  top: 0.7em;
  right: 0.7em;
}

.fx-picker-back {
  top: 0.5em;
  left: 0.5em;
}

.fx-picker-close svg,
.fx-picker-back svg {
  width: 1em;
  height: 1em;
}

.fx-picker-bar {
  position: absolute;
  top: 0.7em;
  left: 3em;
  right: 3em;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em;
  border: 1px solid var(--color-line-strong);
  border-radius: 1.5em;
  background: var(--color-paper);
  box-shadow: 0 10px 15px -3px rgba(11, 22, 54, 0.1), 0 4px 6px -4px rgba(11, 22, 54, 0.1);
}

.fx-picker-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 0.2em;
  padding: 0.2em;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
}

.fx-picker-tabs > * {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  color: var(--color-body);
  font-size: 0.85em;
  font-weight: 500;
}

.fx-picker-tabs b {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.fx-picker-mark {
  width: 0.75em;
  height: 0.75em;
}

.fx-picker-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  padding: 0.4em 0.8em;
  font-size: 0.88em;
}

.fx-picker-search svg {
  width: 1em;
  height: 1em;
  color: var(--color-muted);
}

.fx-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-picker-grid li {
  position: relative;
  overflow: hidden;
  border-radius: 0.8em;
  box-shadow: 0 0 0 1px var(--color-line);
}

.fx-picker-grid li[data-hover] {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.fx-picker-grid li > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.fx-picker-insert {
  position: absolute;
  right: 0.55em;
  bottom: 0.55em;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong), 0 10px 15px -3px rgba(11, 22, 54, 0.15);
  color: var(--color-body);
  font-size: 0.72em;
  font-weight: 500;
}

/* A picture, large: the way back on its corner, then the likes, its
   page, Insert. */
.fx-picker-detail {
  width: 17em;
  padding: 0.6em;
}

.fx-picker-view {
  position: relative;
}

.fx-picker-large {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.65em;
}

.fx-picker-who {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.7em;
  padding: 0 0.3em;
  font-size: 0.88em;
}

.fx-picker-who span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--color-body);
}

.fx-picker-who svg {
  width: 1em;
  height: 1em;
}

.fx-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  margin-top: 0.7em;
  padding: 0.7em 0.3em 0.2em;
  border-top: 1px solid var(--color-line);
}

.fx-picker-foot u {
  font-size: 0.8em;
  color: var(--color-muted);
  text-decoration: none;
}

.fx-designs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
}

.fx-design-name {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.6em;
  font-family: var(--font-heading);
  font-weight: 600;
}

.fx-design-name .fx-dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 0.22em var(--color-accent-soft);
}

.fx-design-ground {
  height: 100%;
  padding: 1em;
  border-radius: 1em;
  background: #eef1f6;
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.fx-design-card {
  padding: 1.2em;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 22, 54, 0.06);
}

.fx-design-title {
  margin-top: 0.5em;
  font-family: var(--font-display);
  font-size: 1.35em;
  line-height: 1.1;
}

.fx-design-photo {
  width: 100%;
  height: auto;
  margin-top: 0.8em;
  aspect-ratio: 1.85 / 1;
  border-radius: 0.35em;
  object-fit: cover;
}

.fx-design-text {
  margin-top: 0.7em;
  font-size: 0.78em;
  line-height: 1.6;
  color: #374151;
}

/* The classic design's subtitle and byline, in the body face and the
   muted ink (Newsletter::Style, "subtitle" and "byline"). */
.fx-design-subtitle {
  margin-top: 0.35em;
  font-size: 0.85em;
  line-height: 1.4;
  color: #6b6b6b;
}

.fx-design-by {
  margin-top: 0.5em;
  font-size: 0.66em;
  color: #6b6b6b;
}

/* A quote in the classic design: the accent's rule, the text muted and
   in italics. */
.fx-design-quote {
  margin-top: 0.8em;
  padding-left: 0.8em;
  border-left: 3px solid var(--color-accent);
  font-size: 0.78em;
  font-style: italic;
  line-height: 1.6;
  color: #6b6b6b;
}

.fx-design-plain .fx-design-ground {
  background: #fff;
}

.fx-design-plain .fx-design-card {
  padding: 0.4em;
  box-shadow: none;
}

.fx-design-plain .fx-design-text,
.fx-design-plain .fx-design-foot {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.fx-design-plain .fx-design-text {
  margin-top: 0.75em;
}

.fx-design-plain .fx-design-text:first-child {
  margin-top: 0;
}

/* The plain design's footer: its links in a row, split by bars. */
.fx-design-foot {
  margin-top: 1.4em;
  font-size: 0.66em;
  line-height: 1.6;
  color: #6b6b6b;
}

.fx-design-plain u {
  color: #1155cc;
}

.fx-checks-bar {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 0.5em;
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
}

.fx-checks-bar li {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.8em;
}

/* The link check's answer and the mail's weight are quiet words on the
   publish page, in small capitals; only the test send is a pill. */
.fx-checks-bar .fx-design-quiet {
  padding-inline: 0.2em;
  background: none;
  box-shadow: none;
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* The Newsletters screen as the admin sets it: the eyebrow, the title
   with its one ink pill, the count, then each list with its subscribers
   as an eyebrow and a chevron. The reader's page stands at its side. */
.fx-lists .fx-panel {
  margin-right: 9.5em;
}

.fx-lists-head {
  margin-bottom: 0;
}

.fx-lists-count {
  margin: 0.6em 0 0.9em;
  font-size: 0.88em;
  color: var(--color-body);
}

.fx-lists-subscribers {
  flex-shrink: 0;
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-lists .fx-rows svg {
  flex-shrink: 0;
  width: 0.95em;
  height: 0.95em;
  color: var(--color-muted);
}

/* The reader's Newsletters page (the gate): their address, a box on the
   right of each list, Save, and the way out of everything. */
.fx-prefs {
  width: 12.5em;
  bottom: -2.5em;
}

.fx-prefs .fx-float-title {
  margin-bottom: 0.1em;
}

.fx-prefs-address {
  margin-bottom: 0.5em;
  font-size: 0.75em;
  color: var(--color-muted);
}

.fx-prefs-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.5em 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.82em;
  font-weight: 500;
}

.fx-prefs-box {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  background: #fff;
}

.fx-prefs-box-on {
  background: var(--color-accent);
  box-shadow: none;
  color: #fff;
}

.fx-prefs-box svg {
  width: 0.8em;
  height: 0.8em;
}

.fx-prefs-save {
  margin-top: 0.6em;
  padding-block: 0.6em;
  border-radius: 0.6em;
}

.fx-prefs-foot {
  margin-top: 0.7em;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--color-muted);
}

.fx-links {
  margin-top: 1em;
}

.fx-links-head,
.fx-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4em 4em;
  gap: 0.75em;
  align-items: start;
}

.fx-links-head {
  padding-bottom: 0.5em;
  font-size: 0.72em;
  color: var(--color-muted);
}

.fx-links-head b {
  font-family: var(--font-heading);
  font-size: 1.25em;
  color: var(--color-ink);
}

.fx-links-head span,
.fx-link em {
  text-align: right;
}

.fx-link {
  padding: 0.7em 0;
  border-top: 1px solid var(--color-line);
}

.fx-link > span {
  display: grid;
  min-width: 0;
}

.fx-link b {
  font-size: 0.9em;
  font-weight: 500;
}

.fx-link i {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-style: normal;
  color: var(--color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-link em {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* A fixed link's line, as the admin's _link shows it: what it changed
   from, who changed it and when, and Restore, in one line that wraps. */
.fx-cam-changed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.7em;
  margin-top: 0.35em;
  font-size: 0.7em;
  color: var(--color-body);
}

.fx-cam-mono {
  font-family: var(--font-mono);
}

.fx-cam-who {
  color: var(--color-muted);
}

/* The campaign page (pixel/posts/campaigns/show): its head with two quiet
   verbs, the status line in the published blue, the figures four to a
   row with hairlines, the send in one line, then the recipients under
   it, overlapping a little. */
.fx-cam-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.fx-cam-verbs {
  display: flex;
  flex-shrink: 0;
  gap: 0.4em;
}

.fx-cam-verbs .fx-btn-quiet {
  padding: 0.45em 0.9em;
  font-size: 0.75em;
}

.fx-cam-status {
  margin-top: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: #1d4ed8;
}

.fx-cam-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1em 0 0;
  border-radius: 0.9em;
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.fx-cam-figures div {
  padding: 0.7em 0.85em;
}

.fx-cam-figures div:not(:nth-child(4n + 1)) {
  border-left: 1px solid var(--color-line);
}

.fx-cam-figures div:nth-child(n + 5) {
  border-top: 1px solid var(--color-line);
}

.fx-cam-figures dt {
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-cam-figures dd {
  margin: 0.2em 0 0;
  font-family: var(--font-heading);
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fx-cam-figures dd + dd {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: 0.66em;
  letter-spacing: 0;
  color: var(--color-muted);
}

.fx-cam-send {
  margin-top: 0.9em;
  padding: 0.8em 0.95em;
  border-radius: 0.9em;
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.fx-cam-send-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.fx-cam-send-head b {
  font-family: var(--font-heading);
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fx-cam-sub {
  margin-top: 0.2em;
  font-size: 0.78em;
  color: var(--color-body);
}

.fx-cam-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em 1em;
  margin-top: 0.7em;
  padding-top: 0.7em;
  border-top: 1px solid var(--color-line);
  font-size: 0.78em;
  color: var(--color-body);
}

.fx-cam-more .fx-btn-quiet {
  padding: 0.4em 0.85em;
  font-size: 0.95em;
}

.fx-cam-edit {
  display: flex;
  gap: 0.9em;
  margin-top: 0.3em;
  font-size: 0.7em;
  color: var(--color-body);
}

.fx-cam-recipients {
  z-index: 2;
  margin: -1.5em 0 0 3em;
  padding: 1.1em 1.2em 0.4em;
  box-shadow: var(--lp-shadow);
}

.fx-cam-menus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 0.7em;
}

.fx-cam-menus .fx-select {
  font-size: 0.75em;
}

/* The two menus are the admin's quiet pills; a chosen one is in the
   accent's soft colour (pixel/shared/_filter_menu). */
.fx-cam-menus .fx-select-on {
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.fx-cam-search {
  flex: 1;
  min-width: 10em;
  color: var(--color-muted);
  font-weight: 400;
}

.fx-cam-recipients .fx-cam-sub {
  margin: 0.6em 0 0.4em;
}

.fx-cam-recipients .fx-rows li {
  padding: 0.6em 0;
}

.fx-cam-recipients .fx-face {
  width: 1.8em;
  height: 1.8em;
}

.fx-cam-recipients .fx-row-main > span {
  font-family: var(--font-mono);
  font-size: 0.7em;
}

.fx-cam-opened {
  background: #e6f6ed;
  color: #0f7a46;
}

/* On a phone the figures go two to a row, as the admin's do, and the
   recipients stand under the campaign at its full width. */
@media (max-width: 47.9375rem) {
  .fx-cam-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx-cam-figures div:nth-child(2n + 1) {
    border-left: 0;
  }

  .fx-cam-figures div:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }

  .fx-cam-recipients {
    margin-left: 0;
  }
}

/* — Memberships ——————————————————————————————————————— */
.fx-paywall .fx-window {
  margin-right: 4em;
}

/* Who can read: the drawer's select and its tier boxes (.fx-post-drawer,
   with the editor's rules), beside what each reader then sees. */
.fx-post-access {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.25em;
}

.fx-post-boxes {
  display: grid;
  gap: 0.55em;
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
}

.fx-post-boxes li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.88em;
}

.fx-post-boxes i {
  display: grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 1.5px var(--color-line-strong);
}

.fx-post-boxes svg {
  width: 0.8em;
  height: 0.8em;
  color: #fff;
  visibility: hidden;
}

.fx-post-boxes li[data-current] i {
  background: var(--color-ink);
  box-shadow: none;
}

.fx-post-boxes li[data-current] svg {
  visibility: visible;
}

.fx-post-sees {
  display: grid;
  gap: 0.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-post-sees li {
  display: grid;
  justify-items: start;
  gap: 0.5em;
  padding: 0.9em 1em;
  border-radius: 1em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.fx-post-sees b {
  font-size: 0.9em;
  font-weight: 500;
}

.fx-providers {
  display: grid;
  gap: 0.85em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-provider {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  align-items: center;
  gap: 0.2em 1.25em;
  padding: 1.1em 1.25em;
  border-radius: 1.1em;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow-soft);
}

.fx-provider-logo {
  display: flex;
  grid-row: span 3;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-size: 1.1em;
}

.fx-provider-logo img {
  max-width: 100%;
  height: auto;
}

.fx-provider > b {
  font-family: var(--font-heading);
  font-size: 1.05em;
  font-weight: 600;
}

.fx-provider > span:not(.fx-provider-logo) {
  font-size: 0.85em;
  color: var(--color-body);
}

.fx-provider .fx-btn {
  justify-self: start;
  margin-top: 0.4em;
}

.fx-btn-stripe {
  background: #635bff;
}

.fx-currencies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-top: 0.3em;
}

.fx-currencies i {
  padding: 0.2em 0.55em;
  border-radius: 0.4em;
  background: var(--color-paper-2);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-style: normal;
  color: var(--color-ink);
}

.fx-zero {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 1.25em;
  font-size: 0.95em;
  color: var(--color-body);
}

.fx-zero b {
  font-family: var(--font-display);
  font-size: 3em;
  font-weight: 400;
  line-height: 1;
  background: var(--lp-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fx-account {
  padding: 1.5em;
  background: #fbf7f0;
}

.fx-account-who {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 1.25em;
}

.fx-account-face {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: #f3e6d6;
}

.fx-account-who p {
  display: grid;
}

.fx-account-who b {
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 400;
}

.fx-account-who span {
  font-size: 0.78em;
  color: var(--color-muted);
}

.fx-account-row {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75em;
  padding: 0.8em 0;
  border-top: 1px solid rgba(122, 58, 20, 0.12);
  font-size: 0.9em;
}

.fx-account-row > span {
  color: var(--color-muted);
}

.fx-account-row b {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
}

.fx-account-row em {
  color: var(--color-muted);
}

.fx-account-plan {
  margin-top: 1em;
  padding: 1.1em 1.2em 1.2em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(122, 58, 20, 0.12);
}

.fx-account-plan .fx-account-row:first-of-type {
  border-top: 0;
}

.fx-account .fx-btn {
  background: #7a3a14;
}

/* — Circles ——————————————————————————————————————————— */
.fx-circle .fx-circle-card {
  margin-right: 5em;
}

.fx-circle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.9em;
}

.fx-circle-head b {
  font-family: var(--font-heading);
  font-size: 1.35em;
  letter-spacing: -0.03em;
}

.fx-circle-head span {
  font-size: 0.78em;
  color: var(--color-muted);
}

.fx-circle-post {
  margin-top: 1.25em;
  padding: 1em;
  border-radius: 1em;
  background: var(--color-paper-2);
}

.fx-circle-photo {
  width: 100%;
  height: auto;
  margin-bottom: 0.9em;
  aspect-ratio: 2.1 / 1;
  border-radius: 0.7em;
  object-fit: cover;
}

.fx-circle-title {
  margin-top: 0.3em;
  font-family: var(--font-heading);
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.fx-lock {
  display: flex;
  align-items: center;
  gap: 0.75em;
  width: 17em;
}

.fx-lock p {
  display: grid;
  gap: 0.3em;
}

.fx-lock b {
  font-size: 0.88em;
  line-height: 1.3;
}

.fx-lock p span {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--color-accent-strong);
}

.fx-lock-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.fx-lock-icon svg {
  width: 1.1em;
  height: 1.1em;
}

.fx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 0.75em;
}

/* Audience (pixel/members/index): the admin's pill menus, the chosen one
   in the accent's soft ground; the rows' ticks in ink, the row itself
   on the faint ground of a ticked row. */
.fx-roster-verbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4em;
}

.fx-roster .fx-select {
  border-radius: var(--radius-pill);
}

.fx-roster .fx-filters .fx-select-on {
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.fx-roster-matches {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.4em;
  font-size: 0.85em;
  color: var(--color-body);
}

.fx-roster-matches b {
  font-weight: 500;
  color: var(--color-accent-strong);
}

.fx-roster-matches .fx-btn-quiet {
  margin-left: auto;
}

.fx-roster .fx-btn-quiet svg,
.fx-badges .fx-btn svg {
  width: 1em;
  height: 1em;
}

.fx-roster .fx-chip-paid {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* A row's dates in mono under its lists, cut short in a narrow row. */
.fx-roster .fx-row-main .fx-aud-mono {
  margin-top: 0.2em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-members .fx-member-on {
  margin-inline: -0.6em;
  padding-inline: 0.6em;
  border-radius: 0.6em;
  background: var(--color-paper-2);
}

/* The bulk bar floats at the foot of the list as a paper pill bar, as
   pixel/members/_batch_bar does: the count, Select all, the three menus,
   a hairline, Export and Delete, and the clear. */
.fx-batch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  width: fit-content;
  margin: 1em auto 0;
  padding: 0.35em 0.35em 0.35em 1em;
  border-radius: 1.6em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong), 0 12px 30px -12px rgba(11, 22, 54, 0.3);
  font-size: 0.9em;
}

.fx-batch b {
  margin-right: 0.3em;
  font-size: 0.9em;
  font-weight: 500;
}

.fx-batch > .fx-btn-quiet {
  padding: 0.45em 0.85em;
}

.fx-batch svg {
  width: 0.95em;
  height: 0.95em;
}

.fx-batch-open {
  position: relative;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.fx-batch-rule {
  width: 1px;
  height: 1.3em;
  background: var(--color-line);
}

.fx-batch .fx-batch-clear {
  padding: 0.45em;
}

/* The Circle menu, above its pill: the circles as radios, then Add and
   Remove from circle. */
.fx-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.6em);
  display: grid;
  gap: 0.15em;
  min-width: 15em;
  padding: 0.35em;
  border-radius: 1em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong), var(--lp-shadow);
  color: var(--color-body);
  font-size: 1.1em;
  font-weight: 400;
}

.fx-menu-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.5em 0.75em;
  border-radius: 0.75em;
}

.fx-menu-row-on {
  font-weight: 500;
  color: var(--color-ink);
}

.fx-menu-row-on .fx-radio {
  box-shadow: inset 0 0 0 0.3em var(--color-ink);
}

.fx-menu-verbs {
  display: flex;
  gap: 0.35em;
  margin-top: 0.2em;
}

.fx-menu-verbs .fx-btn-quiet {
  flex: 1;
  font-size: 0.9em;
}

.fx-menu .fx-menu-go {
  color: var(--color-ink);
}

.fx-circle-locked .fx-window {
  margin-left: 5em;
}

.fx-drawer-mini {
  bottom: 2em;
  width: 14em;
}

.fx-drawer-mini .fx-label-head {
  margin-top: 0;
}

.fx-drawer-mini .fx-ticks {
  margin-top: 0.6em;
  padding-left: 0;
}

/* — Community ————————————————————————————————————————— */
.fx-thread-post {
  display: flex;
  align-items: center;
  gap: 1em;
  padding-bottom: 1.1em;
  border-bottom: 1px solid var(--color-line);
}

.fx-thread-photo {
  width: 6em;
  height: 4em;
  border-radius: 0.6em;
  object-fit: cover;
}

.fx-thread-post p {
  display: grid;
  gap: 0.2em;
}

.fx-thread-title {
  font-family: var(--font-display);
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.fx-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.1em 0 0.4em;
  font-family: var(--font-heading);
}

.fx-comment {
  display: flex;
  gap: 0.8em;
  padding: 0.9em 0;
}

.fx-comment + .fx-comment {
  border-top: 1px solid var(--color-line);
}

.fx-comment-reply {
  margin-left: 2.9em;
  border-top: 0 !important;
  padding-top: 0.2em;
}

.fx-comment-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
  font-size: 0.88em;
}

.fx-comment-who i {
  font-style: normal;
  color: var(--color-muted);
}

.fx-comment-text {
  margin-top: 0.3em;
  font-size: 0.88em;
  line-height: 1.55;
  color: #374151;
}

.fx-comment-foot {
  display: flex;
  gap: 1.1em;
  margin-top: 0.45em;
  font-size: 0.75em;
  color: var(--color-muted);
}

.fx-voted {
  color: var(--color-accent-strong);
  font-weight: 600;
}

/* A badge is the member's little picture beside their name. */
.fx-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #fff;
}

.fx-badge svg {
  width: 0.8em;
  height: 0.8em;
}

.fx-badge-lg {
  width: 2.4em;
  height: 2.4em;
}

.fx-badge-lg svg {
  width: 1.2em;
  height: 1.2em;
}

.fx-rows li:nth-child(2) .fx-badge,
.fx-give .fx-badge {
  background: linear-gradient(135deg, #818cf8, #7c3aed);
}

.fx-rows li:nth-child(3) .fx-badge {
  background: linear-gradient(135deg, #fb7185, #e11d48);
}

.fx-badge-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.6em);
  display: grid;
  width: max-content;
  max-width: 14em;
  padding: 0.55em 0.75em;
  border-radius: 0.6em;
  background: var(--color-ink);
  color: var(--color-on-ink-muted);
  font-size: 0.85em;
  transform: translateX(-50%);
}

.fx-badge-tip b {
  color: #fff;
}

.fx-gate-stage .fx-site-dim {
  position: relative;
}

.fx-site-dim .fx-site-photo {
  filter: brightness(0.55);
}

.fx-gate-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(20em, 84%);
  padding: 1.5em;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: var(--lp-shadow);
  text-align: center;
  transform: translate(-50%, -46%);
}

.fx-gate-pub {
  font-family: var(--font-display);
  font-size: 1.1em;
  color: var(--color-muted);
}

.fx-gate-title {
  margin-top: 0.4em;
  font-family: var(--font-display);
  font-size: 1.75em;
  letter-spacing: -0.02em;
}

.fx-gate-lede {
  margin-top: 0.5em;
  font-size: 0.82em;
  color: var(--color-body);
}

.fx-otp {
  display: flex;
  justify-content: center;
  gap: 0.35em;
  margin: 1.1em 0;
}

.fx-otp span {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2.5em;
  border-radius: 0.5em;
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: 1.05em;
  font-weight: 600;
}

.fx-otp span:empty {
  width: 0.4em;
  box-shadow: none;
}

.fx-gate-switch {
  margin-top: 0.9em;
  font-size: 0.72em;
  color: var(--color-muted);
}

.fx-reply .fx-comment {
  padding-top: 0;
}

.fx-compose {
  display: flex;
  gap: 0.8em;
  margin-left: 2.9em;
  padding-top: 0.4em;
}

.fx-compose > div {
  flex: 1;
}

.fx-compose-to {
  font-size: 0.75em;
  color: var(--color-muted);
}

.fx-compose-box {
  margin-top: 0.35em;
  padding: 0.75em 0.9em;
  border-radius: 0.75em;
  box-shadow: 0 0 0 1.5px var(--color-accent);
  font-size: 0.88em;
}

.fx-compose-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6em;
  font-size: 0.75em;
  color: var(--color-muted);
}

.fx-face-styles {
  display: flex;
  justify-content: center;
  gap: 1.5em;
  margin: 1.4em 0 0;
  padding: 1.1em 0 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.fx-face-styles li {
  display: grid;
  justify-items: center;
  gap: 0.4em;
  font-size: 0.75em;
  color: var(--color-muted);
}

.fx-badges .fx-panel,
.fx-moderation {
  margin-right: 4em;
}

/* Audience's own small words: the way back over a title, and a date or a
   count in mono at a row's end. */
.fx-aud-back {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.9em;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-aud-back svg {
  width: 1.15em;
  height: 1.15em;
}

.fx-aud-mono {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--color-muted);
  white-space: nowrap;
}

/* A member's Badges panel: the badge worn, its date and Remove, then a
   badge chosen and Give. */
.fx-give {
  width: 19em;
}

.fx-give-title {
  margin: 0.9em 0 0;
}

.fx-give-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.6em;
  font-size: 0.88em;
}

.fx-give-row b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-give-row .fx-aud-mono {
  font-size: 0.8em;
}

.fx-give-pick {
  padding-top: 0.75em;
  border-top: 1px solid var(--color-line);
}

.fx-give-pick .fx-select {
  flex: 1;
  justify-content: space-between;
}

/* The Comments screen: each comment's words under who wrote it and on
   what, its date and votes in mono, its verbs as glyph pills. A hidden
   comment's words go muted, as the admin shows them. */
.fx-row-hidden .fx-aud-said {
  color: var(--color-muted);
}

.fx-aud-count {
  margin: -0.4em 0 0.6em;
  font-size: 0.85em;
  color: var(--color-body);
}

.fx-moderation .fx-rows li {
  align-items: flex-start;
}

.fx-aud-said {
  margin-top: 0.35em;
  font-size: 0.88em;
  font-style: normal;
  line-height: 1.5;
  color: var(--color-ink);
}

/* The post a comment is on, in ink as the admin's link is. */
.fx-aud-on {
  font-weight: 500;
  color: var(--color-ink);
}

.fx-moderation .fx-btn-quiet svg {
  width: 1em;
  height: 1em;
}

.fx-row-main .fx-aud-mono {
  margin-top: 0.35em;
}

.fx-aud-glyph {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
}

.fx-aud-glyph svg {
  width: 0.95em;
  height: 0.95em;
}

.fx-moderation .fx-chip {
  margin-top: 0.45em;
}

/* A member's page (DESIGN.md §27), under the comments: the head, the
   facts on one panel with hairlines between, then the panels staff change
   at the left and the activity rail at the right. */
.fx-aud-member {
  z-index: 1;
  margin: -2.5em 0 0 3em;
  padding: 1.3em;
}

.fx-aud-head {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.fx-aud-head .fx-row-main b {
  font-size: 1.15em;
}

.fx-aud-head .fx-btn-quiet {
  font-size: 0.78em;
}

.fx-aud-head .fx-btn-quiet svg {
  width: 1em;
  height: 1em;
}

.fx-aud-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1em 0 0;
  border-radius: 0.9em;
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.fx-aud-facts div {
  min-width: 0;
  padding: 0.7em 0.8em;
}

.fx-aud-facts div + div {
  border-left: 1px solid var(--color-line);
}

.fx-aud-facts dt {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.72em;
  font-weight: 500;
  color: var(--color-body);
}

.fx-aud-facts dt svg {
  width: 1em;
  height: 1em;
  color: var(--color-muted);
}

.fx-aud-facts dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-aud-facts dt + dd {
  margin-top: 0.3em;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fx-aud-facts dd + dd {
  margin-top: 0.1em;
  font-size: 0.66em;
  color: var(--color-muted);
}

.fx-aud-facts code {
  font-family: var(--font-mono);
}

.fx-aud-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 0.8em;
  margin-top: 0.8em;
}

.fx-aud-box {
  padding: 0.9em 1em;
  border-radius: 0.9em;
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.fx-aud-line {
  margin: 0.3em 0 0.7em;
  font-size: 0.88em;
  color: var(--color-body);
}

.fx-aud-box .fx-btn-quiet {
  font-size: 0.78em;
}

.fx-aud-activity-title {
  margin-bottom: 0.4em;
  font-family: var(--font-heading);
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.fx-aud-activity .fx-eyebrow {
  margin: 0.7em 0 0.45em;
}

.fx-aud-rail {
  margin: 0 0 0 0.9em;
  padding: 0;
  border-left: 1px solid var(--color-line);
  list-style: none;
}

.fx-aud-rail li {
  position: relative;
  display: grid;
  padding: 0 0 0.7em 1.4em;
  font-size: 0.8em;
}

.fx-aud-rail li:last-child {
  padding-bottom: 0;
}

.fx-aud-disc {
  position: absolute;
  top: -0.1em;
  left: -0.95em;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: 0 1px 2px rgba(11, 22, 54, 0.12), 0 0 0 1px var(--color-line);
  color: var(--color-muted);
}

.fx-aud-disc svg {
  width: 0.9em;
  height: 0.9em;
}

.fx-aud-rail b {
  overflow: hidden;
  padding-top: 0.25em;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-aud-rail .fx-aud-mono {
  font-size: 0.85em;
  white-space: normal;
}

.fx-aud-sunken {
  margin-top: 0.35em;
  padding: 0.45em 0.65em;
  overflow: hidden;
  border-radius: 0.5em;
  background: var(--color-paper-2);
  color: var(--color-body);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow: the member's page comes into the flow under the comments, its
   facts two by two and its columns one under the other, as the admin's
   own breakpoints do. */
@media (max-width: 47.9375rem) {
  .fx-aud-member {
    margin: 1em 0 0;
  }

  .fx-aud-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx-aud-facts div:nth-child(3) {
    border-left: 0;
  }

  .fx-aud-facts div:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }

  .fx-aud-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* — The editor ——————————————————————————————————————————
   The editor (pixel/posts/_form), drawn in the admin's tokens: the chrome
   row's pills on the canvas, the header slot, the body in the paper's
   column, the toolbar floating over a highlight and the word count's
   pill. */
.fx-ed {
  padding: 0.9em 1em 3em;
  background: var(--color-canvas);
}

/* It wraps as the admin's header does: on a phone the verbs go to a
   second row and keep the right edge. */
.fx-ed-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  white-space: nowrap;
}

.fx-ed-back {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
  padding: 0.4em 0.85em 0.4em 0.65em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: 0.85em;
  font-weight: 500;
  color: var(--color-body);
}

.fx-ed-back svg,
.fx-ed-toggle svg {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
}

.fx-ed-back > i {
  flex-shrink: 0;
  width: 1px;
  height: 1em;
  margin: 0 0.15em;
  background: var(--color-line-strong);
}

.fx-ed-back > svg:last-child {
  color: var(--color-muted);
}

.fx-ed-status {
  display: flex;
  align-items: center;
  gap: 0.45em;
  overflow: hidden;
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-ed-status b {
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #5b6478;
}

.fx-ed-verbs {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-left: auto;
}

.fx-ed-quiet {
  padding: 0.45em 0.7em;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--color-body);
}

.fx-ed-toggle {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-body);
}

/* The drawer is open: the toggle wears the accent. */
.fx-ed-toggle-on {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.fx-ed-paper {
  max-width: 34em;
  margin: 1.6em auto 0;
}

.fx-ed-cover {
  position: relative;
  overflow: hidden;
  border-radius: 1em;
}

.fx-ed-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 8;
  object-fit: cover;
}

/* The header slot's rail: the layouts, stacked chosen, then replace and
   remove. */
.fx-ed-rail {
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  padding: 0.2em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
}

.fx-ed-rail b {
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  color: var(--color-body);
}

.fx-ed-rail b[data-current] {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.fx-ed-rail svg {
  width: 0.9em;
  height: 0.9em;
}

.fx-ed-rail i {
  width: 0.9em;
  height: 1px;
  margin: 0.1em 0;
  background: var(--color-line-strong);
}

.fx-ed-caption {
  margin-top: 0.55em;
  font-size: 0.8em;
  text-align: center;
  color: var(--color-body);
}

.fx-ed-title {
  margin-top: 0.6em;
  font-family: var(--font-display);
  font-size: 2.1em;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.fx-ed-subtitle {
  margin-top: 0.25em;
  font-size: 1.08em;
  line-height: 1.375;
  color: var(--color-body);
}

.fx-ed-words {
  margin-top: 0.9em;
  font-size: 0.95em;
  line-height: 1.7;
  color: #2a3243;
}

.fx-ed-subtitle + .fx-ed-words {
  margin-top: 1.2em;
}

/* The highlight, and the toolbar over it: the editor's buttons in their
   groups, 2.25rem chips in the admin, with the one real shadow. */
.fx-ed-select {
  position: relative;
}

.fx-ed-select mark {
  border-radius: 2px;
  background: rgba(46, 107, 245, 0.16);
  color: inherit;
}

.fx-ed-toolbar {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 0.4em);
  left: -1em;
  display: flex;
  align-items: center;
  gap: 0.05em;
  width: max-content;
  padding: 0.25em 0.45em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong), 0 0.75em 1.5em -0.5em rgba(11, 22, 54, 0.18);
  line-height: 1;
}

.fx-ed-toolbar > i {
  flex-shrink: 0;
  width: 1px;
  height: 1em;
  margin: 0 0.25em;
  background: var(--color-line-strong);
}

.fx-ed-tool {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 1.9em;
  color: var(--color-ink);
}

.fx-ed-tool svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
}

.fx-ed-tool-menu::after {
  content: "";
  width: 0.3em;
  height: 0.3em;
  margin: -0.15em 0 0 0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.5;
  rotate: 45deg;
}

/* A callout card in the blue (Cards::Callout). */
.fx-ed-callout {
  margin-top: 1.2em;
  padding: 0.95em 1.15em;
  border: 1px solid color-mix(in oklab, var(--color-accent-soft), var(--color-ink) 12%);
  border-radius: 0.75em;
  background: var(--color-accent-soft);
  font-size: 0.92em;
}

/* The word count's pill, at the window's corner. */
.fx-ed-count {
  position: absolute;
  right: 0.9em;
  bottom: 0.9em;
  padding: 0.35em 0.9em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Cards in a post: the panel keeps room at its right for the card rail. */
.fx-ed-page {
  padding: 1.75em 4.5em 2em 2em;
}

/* The empty image card (.aero-slot): a wash at 16:10 with the card's
   hairline, the PixelGlass mark at 30%, its ways in as muted text pills. */
.fx-ed-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  aspect-ratio: 16 / 10;
  margin-top: 1.2em;
  padding: 1.25em;
  border: 1px solid var(--color-line);
  border-radius: 1.1em;
  background: var(--color-canvas);
}

.fx-ed-slot-mark {
  width: 3.4em;
  height: 3.4em;
  opacity: 0.3;
}

.fx-ed-slot-verbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em;
}

.fx-ed-slot-verbs span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.8em;
  border-radius: var(--radius-pill);
  font-size: 0.82em;
  color: var(--color-muted);
}

.fx-ed-slot-verbs svg {
  width: 1em;
  height: 1em;
}

.fx-ed-slot-verbs .fx-ed-unsplash {
  width: 0.85em;
  height: 0.85em;
}

/* An empty line with the caret, and the card rail (.aero-inserter) just
   past the column's right edge, its first glyph on the line. */
.fx-ed-line {
  position: relative;
  margin-top: 1.1em;
  line-height: 1.7;
}

.fx-ed-inserter {
  position: absolute;
  top: -0.35em;
  left: calc(100% + 0.6em);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  padding: 0.2em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
}

.fx-ed-inserter b {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  color: var(--color-muted);
}

.fx-ed-inserter b[data-current] {
  color: var(--color-accent-strong);
}

.fx-ed-inserter svg {
  width: 0.95em;
  height: 0.95em;
}

.fx-ed-inserter small {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.35em);
  padding: 0.2em 0.55em;
  border-radius: 0.45em;
  background: rgba(40, 42, 48, 0.92);
  color: #fff;
  font-size: 0.75em;
  font-weight: 500;
  white-space: nowrap;
  translate: 0 -50%;
}

/* A button card on its left side: the face in its colour, the lettering
   Cards::Button picks. */
.fx-ed-button {
  margin-top: 1.4em;
  padding: 0.5em;
}

.fx-ed-button span {
  display: inline-block;
  padding: 0.65em 1.4em;
  border-radius: var(--radius-pill);
  background: var(--button-bg);
  color: var(--button-ink);
  font-weight: 600;
  line-height: 1.3;
}

/* Post history (pixel/posts/revisions/show): the versions at the left,
   newest first, the open one on paper-2; at the right its bar and the
   version rendered as the post, its changes marked in the admin's
   danger and success washes. Room under it for the conflict bar. */
.fx-post-history {
  padding-bottom: 3.5em;
}

.fx-post-sheet {
  display: grid;
  grid-template-columns: 12.5em minmax(0, 1fr);
}

.fx-post-versions {
  border-right: 1px solid var(--color-line);
}

.fx-post-sheet-head,
.fx-post-version-bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 3.2em;
  padding: 0 1em;
  border-bottom: 1px solid var(--color-line);
}

.fx-post-sheet-head svg {
  width: 1em;
  height: 1em;
  color: var(--color-body);
}

.fx-post-sheet-head b {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fx-post-versions ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-post-versions li {
  display: grid;
  gap: 0.35em;
  padding: 0.75em 1.1em;
  border-bottom: 1px solid var(--color-line);
}

.fx-post-versions li[data-current] {
  background: var(--color-paper-2);
}

.fx-post-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
}

.fx-post-when b {
  font-size: 0.82em;
  font-weight: 600;
}

.fx-post-badge {
  padding: 0.15em 0.45em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.6em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fx-post-badge-event {
  background: #e6f6ed;
  color: #0f7a46;
}

.fx-post-who {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.75em;
  color: var(--color-body);
}

.fx-post-who i {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-style: normal;
  font-weight: 500;
}

.fx-post-version-bar {
  justify-content: flex-end;
  gap: 1.1em;
}

.fx-post-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.82em;
  color: var(--color-body);
}

.fx-post-check i {
  display: grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0.25em;
  background: var(--color-accent);
  color: #fff;
}

.fx-post-check svg {
  width: 0.8em;
  height: 0.8em;
}

.fx-post-diff {
  padding: 1.4em 1.5em 2em;
  font-size: 0.9em;
  line-height: 1.65;
  color: #2a3243;
}

.fx-post-diff p + p {
  margin-top: 0.8em;
}

.fx-post-diff .fx-post-diff-title {
  margin-bottom: 0.4em;
  font-family: var(--font-display);
  font-size: 1.9em;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.fx-post-diff del {
  background: #fdecef;
  color: #b81e38;
  text-decoration-thickness: 1px;
}

.fx-post-diff ins {
  background: #e6f6ed;
  color: #0f7a46;
  text-decoration: none;
}

/* The editor's two bars, over the sheet's corners: who else has the post
   open (_presence), and a save the post refused (_conflict). */
.fx-post-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  font-size: 0.85em;
  color: var(--color-body);
}

.fx-post-bar svg {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  color: var(--color-ink);
}

.fx-post-presence {
  top: -1.2em;
  right: -1em;
}

.fx-post-conflict {
  width: 24em;
}

.fx-post-alert {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.5em;
  background: var(--color-paper-2);
}

.fx-post-conflict > p:not(.fx-post-bar-verbs) {
  display: grid;
  flex: 1;
  gap: 0.15em;
  min-width: 0;
}

.fx-post-conflict b {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.fx-post-bar-verbs {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
  gap: 0.4em;
}

/* The post settings drawer (pixel/posts/_settings): its fields in the
   admin's shape — a label over a field with a hairline, the switches and
   the meta data between hairlines. Who can read uses it too. */
.fx-post-drawer {
  display: grid;
  gap: 1.35em;
  border-radius: 1.5em;
}

.fx-post-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.4em;
}

.fx-post-drawer-head b {
  font-family: var(--font-heading);
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fx-post-field {
  display: grid;
  gap: 0.4em;
}

.fx-post-label {
  font-size: 0.78em;
  font-weight: 500;
  color: var(--color-body);
}

.fx-post-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  box-sizing: border-box;
  min-height: 2.6em;
  padding: 0.5em 0.85em;
  border: 1px solid var(--color-line-strong);
  border-radius: 0.75em;
  background: var(--color-paper);
  font-size: 0.9em;
  font-weight: 400;
}

.fx-post-select {
  justify-content: space-between;
}

.fx-post-select svg {
  width: 1em;
  height: 1em;
  color: var(--color-muted);
}

.fx-post-permalink {
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--color-muted);
}

.fx-post-sibling {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0.75em;
  border: 1px solid var(--color-line-strong);
  border-radius: 0.75em;
  font-size: 0.85em;
}

/* The sibling's status dot: published, in the admin's published blue. */
.fx-post-sibling i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: #1d4ed8;
}

.fx-post-sibling span {
  font-family: var(--font-mono);
  font-size: 0.85em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-post-sibling b {
  font-weight: 400;
}

.fx-post-translate span {
  display: inline-block;
  padding: 0.4em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 500;
}

.fx-post-tags i {
  padding: 0.25em 0.65em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 0.82em;
  font-style: normal;
  font-weight: 500;
}

/* The first tag is the primary one, in the solid accent. */
.fx-post-tags .fx-post-tag-primary {
  background: var(--color-accent);
  color: #fff;
}

/* A tag's × (tags_controller.js), at the pill's end. */
.fx-post-tags small {
  margin-left: 0.45em;
  font-size: 1em;
  opacity: 0.7;
}

.fx-post-switch {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-top: 1.1em;
  border-top: 1px solid var(--color-line);
  font-size: 0.92em;
  font-weight: 500;
}

.fx-post-switch svg {
  width: 1.1em;
  height: 1.1em;
}

.fx-post-switch span {
  flex: 1;
}

.fx-post-meta {
  display: grid;
  gap: 1em;
  padding-top: 0.9em;
  border-top: 1px solid var(--color-line);
}

.fx-post-meta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92em;
  font-weight: 500;
}

/* Open: its chevron turned down. */
.fx-post-meta-head svg {
  width: 1em;
  height: 1em;
  color: var(--color-muted);
  rotate: 90deg;
}

.fx-post-lines {
  line-height: 1.5;
}

.fx-live .fx-window {
  margin-right: 3em;
}

.fx-chart {
  margin-top: 1.1em;
  padding: 1.1em;
  border-radius: 0.9em;
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.fx-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.85em;
}

.fx-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
  height: 9em;
  margin-top: 1em;
}

.fx-bars > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.fx-bars i {
  height: var(--h);
  border-radius: 0.35em 0.35em 0.1em 0.1em;
  background: linear-gradient(to top, var(--color-accent), #7c6cf5);
}

.fx-bars em {
  margin-top: 0.35em;
  font-size: 0.65em;
  text-align: center;
  color: var(--color-muted);
}

.fx-chart-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9em;
  font-size: 0.82em;
  color: var(--color-body);
}

.fx-call {
  display: grid;
  gap: 0.25em;
  width: 15em;
  font-size: 0.9em;
}

.fx-call code {
  font-family: var(--font-mono);
  color: var(--color-accent-strong);
}

.fx-call span {
  color: var(--color-body);
}

.fx-call b {
  font-weight: 500;
  color: #15803d;
}

/* — Themes —————————————————————————————————————————————— */
.fx-theme-stage .fx-window {
  margin-right: 3em;
}

.fx-rr {
  background: #f6f4ee;
}

.fx-rr-nav {
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: 1em 1.5em;
  font-size: 0.8em;
  color: #2f5d50;
}

.fx-rr-nav b {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 1.7em;
  font-weight: 400;
  color: #1f3d35;
}

.fx-rr-nav b i {
  font-style: italic;
}

.fx-rr-cta {
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  background: #2f5d50;
  color: #fff;
}

.fx-rr-lead {
  position: relative;
  margin: 0 1.25em;
}

.fx-rr-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: 0.9em;
  object-fit: cover;
}

.fx-rr-lead-copy {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5em 1.5em 1.25em;
  border-radius: 0 0 0.9em 0.9em;
  background: linear-gradient(to top, rgba(15, 32, 27, 0.85), transparent);
  color: #fff;
}

.fx-rr-kicker {
  font-family: var(--font-mono);
  font-size: 0.68em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.fx-rr-title {
  margin-top: 0.3em;
  font-family: var(--font-display);
  font-size: 2.1em;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.fx-rr-by {
  margin-top: 0.4em;
  font-size: 0.75em;
  opacity: 0.8;
}

.fx-rr-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em;
  margin: 0;
  padding: 1.1em 1.25em 1.4em;
  list-style: none;
}

.fx-rr-cards li {
  display: grid;
  gap: 0.3em;
}

.fx-rr-card-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1.6 / 1;
  border-radius: 0.6em;
  object-fit: cover;
}

.fx-rr-cards span {
  margin-top: 0.3em;
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2f5d50;
}

.fx-rr-cards b {
  font-family: var(--font-display);
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1.15;
}

.fx-shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25em 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-shelf li {
  display: grid;
  gap: 0.6em;
}

.fx-shelf b {
  font-family: var(--font-heading);
  font-size: 0.95em;
  font-weight: 600;
}

/* Settings › Design (pixel/settings/design/show): the sidebar on paper
   with its tabs, theme rows and Save, the site's frame beside it on the
   canvas. */
.fx-ds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding: 0;
  overflow: hidden;
}

.fx-ds-side {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-line);
}

.fx-ds-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.1em 0.75em;
}

.fx-ds-back {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-line);
  color: var(--color-muted);
}

.fx-ds-back svg {
  width: 0.9em;
  height: 0.9em;
}

.fx-ds-head b {
  font-family: var(--font-heading);
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.fx-ds-tabs {
  display: flex;
  gap: 1em;
  padding: 0 1.1em;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.78em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-muted);
}

.fx-ds-tabs span {
  margin-bottom: -1px;
  padding: 0.6em 0;
  border-bottom: 2px solid transparent;
}

.fx-ds-tabs .fx-ds-tab-on {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.fx-ds-themes {
  display: grid;
  gap: 0.45em;
  margin: 0;
  padding: 1em 1.1em;
  list-style: none;
}

.fx-ds-themes > li {
  border-radius: 0.75em;
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.fx-ds-themes > .fx-ds-theme-on {
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
}

.fx-ds-theme {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.7em 0.8em 0.4em;
}

.fx-ds-theme .fx-radio {
  margin-top: 0.2em;
}

.fx-ds-theme-on .fx-radio {
  box-shadow: inset 0 0 0 0.3em var(--color-ink);
}

.fx-ds-theme > span:last-child {
  display: grid;
  min-width: 0;
}

.fx-ds-theme b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  font-size: 0.88em;
  font-weight: 500;
}

.fx-ds-theme code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 400;
  color: var(--color-muted);
}

.fx-ds-theme em {
  padding: 0.1em 0.45em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 0.68em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fx-ds-theme .fx-ds-edited {
  background: var(--color-paper);
  color: var(--color-muted);
}

.fx-ds-theme b + span {
  overflow: hidden;
  font-size: 0.78em;
  color: var(--color-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-ds-verbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  padding: 0 0.8em 0.7em 2.4em;
  font-size: 0.85em;
}

.fx-ds-update {
  margin: 0 0.8em 0.8em 2.4em;
  padding: 0.6em 0.7em 0.1em;
  border-radius: 0.6em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line);
}

.fx-ds-update b {
  font-size: 0.82em;
  font-weight: 500;
}

.fx-ds-update .fx-ds-verbs {
  padding: 0.5em 0 0.6em;
}

.fx-ds-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding: 0.7em 1.1em;
  border-top: 1px solid var(--color-line);
}

.fx-ds-frame {
  display: grid;
  align-content: start;
  padding: 0.75em;
  background: var(--color-canvas);
}

.fx-ds-kinds {
  display: flex;
  gap: 0.15em;
  padding: 0.4em 0.4em 0;
  overflow: hidden;
  border-radius: 0.75em 0.75em 0 0;
  background: var(--color-paper-2);
  font-size: 0.72em;
  color: var(--color-muted);
}

.fx-ds-kinds span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.6em;
  border-radius: 0.5em 0.5em 0 0;
}

.fx-ds-kinds i {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 0.25em;
  background: #2f5d50;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85em;
  font-style: normal;
}

.fx-ds-kinds .fx-ds-kind-on {
  background: var(--color-paper);
  color: var(--color-ink);
}

.fx-ds-address {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.6em;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper);
  font-size: 0.75em;
}

.fx-ds-address > span:first-child {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
  padding: 0.25em 0.75em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  font-family: var(--font-mono);
  color: var(--color-muted);
  white-space: nowrap;
}

.fx-ds-address svg {
  flex-shrink: 0;
  width: 0.9em;
  height: 0.9em;
}

.fx-ds-address b {
  font-weight: 400;
  color: var(--color-ink);
}

.fx-ds-sample {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5em;
  color: var(--color-body);
}

.fx-ds-frame .fx-mini-site {
  border-radius: 0 0 0.75em 0.75em;
}

.fx-mini-site {
  padding: 0.9em;
  border-radius: 0.9em;
  background: #f6f4ee;
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.fx-mini-mast {
  font-family: var(--font-display);
  font-size: 1.2em;
  color: #1f3d35;
}

.fx-mini-photo {
  width: 100%;
  height: auto;
  margin-top: 0.6em;
  aspect-ratio: 2 / 1;
  border-radius: 0.5em;
  object-fit: cover;
}

.fx-mini-title {
  margin-top: 0.5em;
  font-family: var(--font-display);
  font-size: 1.05em;
}

.fx-mini-line {
  width: 70%;
  height: 0.45em;
  margin-top: 0.4em;
  border-radius: 1em;
  background: #2f5d50;
  opacity: 0.25;
}

.fx-mini-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em;
  margin-top: 0.6em;
}

.fx-mini-cards img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.5 / 1;
  border-radius: 0.4em;
  object-fit: cover;
}

.fx-theme-agent .fx-term {
  margin-right: 5em;
}

.fx-theme-history {
  width: 15em;
}

.fx-version {
  display: grid;
  margin-top: 0.5em;
  padding: 0.5em 0.65em;
  border-radius: 0.55em;
  background: var(--color-paper-2);
  font-size: 0.85em;
}

.fx-version span {
  font-size: 0.85em;
  color: var(--color-muted);
}

.fx-version-old span {
  color: var(--color-accent-strong);
  font-weight: 500;
}

/* — The MCP server ——————————————————————————————————————— */
.fx-agent-stage .fx-term {
  margin-right: 4em;
}

.fx-made {
  width: 14em;
  padding: 0.6em;
}

.fx-made-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1.8 / 1;
  border-radius: 0.6em;
  object-fit: cover;
}

.fx-made p {
  display: grid;
  justify-items: start;
  gap: 0.4em;
  padding: 0.6em 0.3em 0.2em;
  font-family: var(--font-display);
  font-size: 1.05em;
}

/* Settings › MCP setup: a row for each client, one open with its steps. */
.fx-mcp {
  margin: 0.8em 0 0;
  padding: 0;
  list-style: none;
}

.fx-mcp > li + li {
  border-top: 1px solid var(--color-line);
}

.fx-mcp-row {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.6em 1.1em;
}

.fx-mcp-row svg {
  flex-shrink: 0;
  width: 0.95em;
  height: 0.95em;
  color: var(--color-muted);
}

.fx-mcp-row b {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.fx-mcp-row span {
  font-family: var(--font-mono);
  font-size: 0.6em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-mcp-steps {
  display: grid;
  gap: 0.75em;
  margin: 0;
  padding: 0.2em 1.1em 1.1em;
  list-style: none;
  font-size: 0.82em;
  color: var(--color-body);
}

.fx-mcp-steps > li {
  display: flex;
  gap: 0.7em;
}

.fx-mcp-steps > li > i {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--color-paper-2);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-style: normal;
  color: var(--color-ink);
}

.fx-mcp-steps > li > span {
  display: grid;
  justify-items: start;
  gap: 0.5em;
  min-width: 0;
  padding-top: 0.1em;
}

.fx-mcp-step {
  font-weight: 500;
  color: var(--color-ink);
}

.fx-mcp-steps svg {
  width: 1em;
  height: 1em;
}

.fx-mcp-steps .fx-set-pre {
  margin: 0;
}

.fx-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75em;
}

.fx-tool-area {
  padding: 1em 1.1em;
  border-radius: 1em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.fx-tool-area p {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 0.95em;
}

.fx-tool-area p span {
  font-family: var(--font-mono);
  color: var(--color-accent-strong);
}

.fx-tool-area ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin: 0.6em 0 0;
  padding: 0;
  list-style: none;
}

.fx-tool-area code {
  display: inline-block;
  padding: 0.15em 0.45em;
  border-radius: 0.35em;
  background: var(--color-paper-2);
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--color-ink);
}

/* — Analytics ——————————————————————————————————————————— */
/* The Dashboard (pixel/analytics, DESIGN.md §26), drawn as the home page
   draws it (landing.css, .lp-dash-*): the screen on its canvas, each part
   a paper panel with a hairline, the open tab on a soft ink wash, figures
   as words then numbers, changes in mono. The world map and its faces
   are the home page's rules, sized here in the scene's em. */
.fx-dash {
  display: grid;
  gap: 0.9em;
  background: var(--color-canvas);
}

.fx-dash-head,
.fx-dash-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em 1em;
}

.fx-dash-title {
  font-family: var(--font-heading);
  font-size: 1.45em;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.fx-dash-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85em;
  color: var(--color-body);
}

.fx-dash-live i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-accent);
}

.fx-dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em;
  margin-left: -0.75em;
  font-size: 0.88em;
}

.fx-dash-tabs span {
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  color: var(--color-body);
  font-weight: 500;
  white-space: nowrap;
}

.fx-dash-tabs .fx-dash-tab-on {
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  color: var(--color-ink);
}

.fx-dash-period,
.fx-dash-filter,
.fx-dash-verbs span,
.fx-dash-pager b {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.95em;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  color: var(--color-body);
  font-size: 0.82em;
  font-weight: 500;
  white-space: nowrap;
}

/* The period in force: the menu's pill on the accent wash. */
.fx-dash .fx-dash-period {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.fx-dash-period svg,
.fx-dash-filter svg,
.fx-dash-pager svg {
  width: 1em;
  height: 1em;
}

.fx-dash-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.fx-dash-filter i {
  font-style: normal;
  color: var(--color-muted);
}

.fx-dash-panel {
  margin: 0;
  padding: 1em 1.1em 0.8em;
  border: 1px solid var(--color-line-strong);
  border-radius: 0.9em;
  background: var(--color-paper);
}

.fx-dash-panel-title {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Web traffic's figures as tabs across the top of its panel, the
   charted one with a 2px ink bar under it; a tab's figures on one panel
   with hairlines between. */
.fx-dash-traffic,
.fx-dash-figures {
  padding: 0;
  overflow: hidden;
}

.fx-dash-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--color-line);
}

.fx-dash-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fx-dash-tiles div,
.fx-dash-figures div {
  position: relative;
  min-width: 0;
  padding: 0.85em 0.9em;
}

.fx-dash-tiles div + div,
.fx-dash-figures div + div {
  border-left: 1px solid var(--color-line);
}

.fx-dash-figures div:nth-child(4n + 1) {
  border-left: 0;
}

.fx-dash-figures div:nth-child(n + 5) {
  border-top: 1px solid var(--color-line);
}

.fx-dash-tile-on::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--color-ink);
}

.fx-dash-tiles dt,
.fx-dash-figures dt {
  overflow: hidden;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--color-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A campaign's figures wear the eyebrow (pixel/posts/campaigns/show). */
.fx-dash-campaign .fx-dash-figures dt {
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-dash-tiles dd,
.fx-dash-figures dd {
  margin: 0.3em 0 0;
  font-family: var(--font-heading);
  font-size: 1.3em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fx-dash .fx-dash-change {
  min-height: 1.4em;
  margin-top: 0.15em;
  font-family: var(--font-mono);
  font-size: 0.68em;
  letter-spacing: 0;
  color: var(--color-muted);
}

/* A chart: the values' ticks beside four hairlines, the line on them
   (.lp-dash-line), the first and the last day under them. */
.fx-dash-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7em;
  padding: 1.1em 1.1em 0.8em;
}

.fx-dash-ticks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: -0.5em 0;
  font-size: 0.68em;
  line-height: 1;
  text-align: right;
  color: var(--color-muted);
}

.fx-dash-plot {
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  height: 9em;
  border-bottom: 1px solid var(--color-line);
}

.fx-dash-plot i {
  border-top: 1px solid var(--color-line);
}

.fx-dash-axis {
  display: flex;
  grid-column: 2;
  justify-content: space-between;
  margin-top: 0.45em;
  font-size: 0.7em;
  color: var(--color-muted);
}

.fx-dash-views .fx-dash-plot {
  height: 6em;
  margin-top: 0.4em;
}

/* The map and its faces at the scene's size. Audience shades by members
   and shows the faces (--dash-aud, a still number here). */
.fx-dash-world {
  margin-top: 0.8em;
}

.fx-dash-audience {
  --dash-aud: 1;
}

.fx-dash .lp-dash-face {
  width: 1.35em;
  height: 1.35em;
}

.fx-dash .lp-dash-face + .lp-dash-face {
  margin-left: -0.45em;
}

.fx-dash .lp-dash-faces b {
  font-size: 0.6em;
}

.fx-dash .lp-dash-zoom i {
  width: 1.7em;
  height: 1.7em;
}

.fx-dash .lp-dash-zoom svg {
  width: 0.85em;
  height: 0.85em;
}

/* A list (pixel/analytics/_line_list): its head over a hairline, each
   line a share bar in the accent wash with its count in mono. */
.fx-dash-list-head {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9em;
  padding-bottom: 0.45em;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-dash-lines {
  margin: 0.35em 0 0;
  padding: 0;
  font-size: 0.88em;
  list-style: none;
}

.fx-dash-lines li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.35em 0.5em 0.35em 0.6em;
  isolation: isolate;
}

.fx-dash-lines li::before {
  content: "";
  position: absolute;
  inset: 0.1em auto 0.1em 0;
  z-index: -1;
  pointer-events: none;
  width: var(--share);
  border-radius: 0.45em;
  background: var(--color-accent-soft);
}

.fx-dash-lines span {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-dash-lines em {
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-style: normal;
  color: var(--color-body);
}

/* A source or a campaign is its key in mono, as the admin writes it. */
.fx-dash-lines code {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.92em;
  text-overflow: ellipsis;
}

.fx-dash-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: 0.4em;
  padding-top: 0.6em;
  border-top: 1px solid var(--color-line);
}

.fx-dash-pager span {
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--color-muted);
}

.fx-dash-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9em;
}

/* A campaign's head: the eyebrow, the title and the status line, the
   ways to the site and the editor at the right. */
.fx-dash-campaign-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
}

.fx-dash-campaign-head p {
  display: grid;
  min-width: 0;
}

.fx-dash-status {
  margin-top: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-style: normal;
  color: #1d4ed8;
}

.fx-dash-verbs {
  display: flex;
  flex-shrink: 0;
  gap: 0.4em;
}

.fx-dash-views {
  padding-bottom: 0.7em;
}

.fx-dash-views .fx-eyebrow {
  margin: 0;
}

@media (max-width: 47.9375rem) {
  .fx-dash-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fx-dash-tiles div:nth-child(4) {
    border-left: 0;
  }

  .fx-dash-tiles div:nth-child(n + 4) {
    border-top: 1px solid var(--color-line);
  }

  .fx-dash-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx-dash-figures div:nth-child(odd) {
    border-left: 0;
  }

  .fx-dash-figures div:nth-child(even) {
    border-left: 1px solid var(--color-line);
  }

  .fx-dash-figures div:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }

  .fx-dash-pair,
  .fx-dash-campaign-head {
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
    align-items: flex-start;
  }
}

.fx-privacy {
  margin-right: 2em;
}

.fx-days {
  display: grid;
  gap: 0.5em;
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
}

.fx-days li {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 0.9em;
  border-radius: 0.8em;
  background: var(--color-paper-2);
  font-size: 0.88em;
}

.fx-days code {
  justify-self: start;
  padding: 0.25em 0.6em;
  border-radius: 0.4em;
  background: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: #a5b8ff;
}

.fx-days em {
  color: var(--color-muted);
}

.fx-nevers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 1.1em 0 0;
  padding: 0;
  list-style: none;
}

.fx-nevers li {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.82em;
}

.fx-nevers svg {
  width: 1em;
  height: 1em;
  color: var(--color-accent);
}

/* — Many languages ——————————————————————————————————————— */
.fx-translated,
.fx-twin {
  display: grid;
  padding-bottom: 3em;
}

.fx-window-back {
  width: 82%;
}

.fx-window-front {
  width: 74%;
  margin: -14em 0 0 auto;
}

.fx-lang-code {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.4em;
  height: 1.8em;
  border-radius: 0.45em;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-mono);
  font-size: 0.78em;
}

/* Settings › General's languages (pixel/shared/_language_list): a chip
   for each, the default ringed in the accent, and the menu that adds one,
   drawn open. */
.fx-set-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}

.fx-set-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.35em 0.3em 0.65em;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.82em;
  font-weight: 500;
}

.fx-set-lang-on {
  box-shadow: 0 0 0 1px var(--color-accent);
}

.fx-set-lang code {
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-set-lang em {
  padding: 0.15em 0.45em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 0.68em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fx-set-radio {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--color-line-strong);
}

.fx-set-lang-on .fx-set-radio {
  box-shadow: inset 0 0 0 0.26em var(--color-accent);
}

.fx-set-remove {
  display: grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  font-style: normal;
  color: var(--color-muted);
}

.fx-set-menu-wrap {
  max-width: 18em;
  margin-top: 0.75em;
}

.fx-set-menu {
  margin: 0.3em 0 0;
  padding: 0.3em;
  border-radius: 0.9em;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow);
  list-style: none;
  font-size: 0.85em;
  color: var(--color-body);
}

.fx-set-menu li {
  padding: 0.4em 0.7em;
  border-radius: 0.6em;
  white-space: nowrap;
}

.fx-set-menu .fx-set-menu-on {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.fx-urls {
  margin-right: 3em;
}

.fx-url-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.65em 0;
  border-top: 1px solid var(--color-line);
}

.fx-url-row code {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.85em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-url-feed svg {
  width: 1.2em;
  height: 1.2em;
  margin: 0 0.6em;
  color: #ea580c;
}

.fx-urls + .fx-code {
  margin: -1.5em 0 0 3em;
}

.fx-app-ko {
  min-height: 0;
}

/* The posts list in Korean is narrower than the admin's: on a phone the
   rows keep their first verbs and give the title the rest. */
.fx-app-ko .lp-app-main {
  container-type: inline-size;
}

@container (max-width: 22rem) {
  .fx-app-ko .lp-app-row-verbs i:nth-last-child(-n + 2) {
    display: none;
  }
}

/* — SEO and AI search ———————————————————————————————————— */
.fx-twin .fx-window-front {
  width: 70%;
  margin-top: -16em;
}

.fx-result-stage {
  display: grid;
  gap: 1em;
}

.fx-result {
  margin-right: 3em;
}

.fx-result-site {
  display: flex;
  align-items: center;
  gap: 0.65em;
}

.fx-result-site > span:last-child {
  display: grid;
  font-size: 0.8em;
}

.fx-result-site i {
  font-style: normal;
  color: var(--color-muted);
}

.fx-result-icon {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #7a3a14;
  color: #fff;
  font-family: var(--font-display);
}

.fx-result-title {
  margin-top: 0.6em;
  font-size: 1.35em;
  color: #1a0dab;
}

.fx-result-text {
  margin-top: 0.35em;
  font-size: 0.88em;
  line-height: 1.55;
  color: #4b5563;
}

.fx-result-meta {
  margin-top: 0.45em;
  font-size: 0.75em;
  color: var(--color-muted);
}

.fx-domain {
  margin-left: 4em;
}

.fx-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.65em 0;
  border-top: 1px solid var(--color-line);
}

.fx-domain-row code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.fx-domain-old {
  color: var(--color-muted);
}

.fx-domain-old span {
  font-family: var(--font-mono);
  font-size: 0.82em;
}

/* — For developers ———————————————————————————————————————— */
.fx-api-stage .fx-code {
  margin-right: 5em;
}

.fx-headless {
  width: 15em;
  padding: 0;
  overflow: hidden;
}

.fx-headless-bar {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--color-line);
}

.fx-headless-bar i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--color-line-strong);
}

.fx-headless-bar span {
  margin-left: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.65em;
  color: var(--color-muted);
}

.fx-headless-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1.85 / 1;
  object-fit: cover;
}

.fx-headless-tag {
  padding: 0.8em 1em 0;
  font-family: var(--font-mono);
  font-size: 0.65em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.fx-headless-title {
  padding: 0.2em 0.8em 1em;
  font-family: var(--font-display);
  font-size: 1.3em;
  line-height: 1.1;
}

.fx-ok {
  color: #86efac;
}

.fx-no {
  color: #fda4af;
}

.fx-sso-steps {
  display: grid;
  gap: 1.1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-sso-step {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.55em;
  font-family: var(--font-heading);
  font-weight: 600;
}

.fx-sso-step span {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-mono);
  font-size: 0.8em;
}

.fx-sso-link {
  padding: 0.75em 1em;
  border-radius: 0.8em;
  background: var(--color-paper);
  box-shadow: var(--lp-shadow-soft);
}

.fx-sso-member {
  padding: 0.4em 1.2em;
}

.fx-hooks {
  display: grid;
  gap: 1em;
}

.fx-hooks .fx-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.fx-hooks pre code {
  font: inherit;
  color: #a5b8ff;
}

.fx-soon {
  flex-shrink: 0;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--lp-violet);
  font-family: var(--font-sans);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}

.fx-hook-uses {
  display: grid;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-hook-uses li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 1em;
  border-radius: 0.9em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.88em;
}

.fx-hook-uses code {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--color-accent-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-hook-uses span {
  color: var(--color-muted);
}

.fx-hook-uses b {
  font-weight: 500;
}

/* — Settings screens, drawn ——————————————————————————————————
   The admin's settings sections as the feature scenes show them: the frame
   of pixel/shared/_section_header, then paper panels with the admin's
   fields (a label in sentence case over a field with a hairline), its
   rows, its pills and its switch. */
.fx-set-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-set-back svg {
  width: 1.1em;
  height: 1.1em;
}

.fx-set-head {
  display: flex;
  align-items: center;
  gap: 0.85em;
  margin-top: 0.9em;
}

.fx-set-chip {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.6em;
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.fx-set-chip svg {
  width: 1.2em;
  height: 1.2em;
}

.fx-set-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.35em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.fx-set-blurb {
  display: block;
  margin-top: 0.3em;
  font-size: 0.82em;
  color: var(--color-body);
}

.fx-set-panel {
  margin-top: 1.1em;
}

.fx-set-label {
  margin-bottom: 0.4em;
  font-size: 0.82em;
  font-weight: 500;
}

.fx-set-gap {
  margin-top: 1em;
}

.fx-set-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.55em 0.85em;
  border-radius: 0.65em;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.88em;
}

.fx-set-field svg {
  flex-shrink: 0;
  width: 0.95em;
  height: 0.95em;
  color: var(--color-muted);
}

.fx-set-select {
  max-width: 18em;
}

.fx-set-select-open {
  box-shadow: 0 0 0 1.5px var(--color-ink);
}

.fx-set-area {
  display: block;
  line-height: 1.6;
}

.fx-set-placeholder {
  color: var(--color-muted);
}

.fx-set-hint {
  margin-top: 0.5em;
  font-size: 0.78em;
  color: var(--color-muted);
}

.fx-set-part-title {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-heading);
  font-size: 1em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fx-set-part-title svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--color-muted);
}

.fx-set-form {
  display: flex;
  gap: 0.5em;
  margin-top: 0.9em;
}

.fx-set-form .fx-set-field {
  width: 8em;
  color: var(--color-muted);
}

.fx-set-form svg,
.fx-set-rows svg,
.fx-set-verbs svg {
  width: 1em;
  height: 1em;
}

.fx-set-eyebrow {
  margin-top: 1.2em;
  font-size: 0.64em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.fx-set-code {
  margin-top: 0.4em;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-set-pre {
  display: block;
  margin-top: 0.4em;
  padding: 0.8em 0.95em;
  border-radius: 0.65em;
  background: var(--color-paper-2);
  font-family: var(--font-mono);
  font-size: 0.74em;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fx-set-rows {
  margin: 1em 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.fx-set-rows li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 0;
}

.fx-set-rows li + li {
  border-top: 1px solid var(--color-line);
}

.fx-set-row-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.fx-set-row-main > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-set-row-main b {
  font-size: 0.85em;
  font-weight: 500;
}

.fx-set-row-main code,
.fx-set-row-main span {
  font-family: var(--font-mono);
  font-size: 0.7em;
}

.fx-set-row-main span {
  color: var(--color-muted);
}

.fx-set-app {
  margin-left: 0.5em;
  padding: 0.15em 0.45em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fx-set-text-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 0.7em;
  border-radius: var(--radius-pill);
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-body);
}

.fx-set-verbs {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 1em;
}

.fx-set-panel .fx-set-verbs {
  justify-content: flex-start;
}

.fx-set-question {
  margin-top: 1.2em;
  font-family: var(--font-heading);
  font-size: 1em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fx-set-switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2em;
  margin-top: 1.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--color-line);
}

.fx-set-switch-row b {
  font-size: 0.9em;
  font-weight: 500;
}

/* The tier form: two prices side by side, each after the currency's
   symbol, and the trial's short field. */
.fx-tier-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9em;
}

.fx-tier-price {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.fx-tier-price i {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-style: normal;
  color: var(--color-muted);
}

.fx-tier-price .fx-set-field {
  flex: 1;
}

.fx-tier-short {
  max-width: 7em;
}

/* The post's history sheet (pixel/posts/revisions/show): the versions in
   a column, the open one lit, and the version beside it with its changes,
   inserted in green and taken out in red, as the admin marks them. */
.fx-ah-sheet {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  padding: 0;
  overflow: hidden;
}

.fx-ah-side {
  border-right: 1px solid var(--color-line);
}

.fx-ah-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1em;
  border-bottom: 1px solid var(--color-line);
}

.fx-ah-head svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--color-body);
}

.fx-ah-head b {
  font-family: var(--font-heading);
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.fx-ah-versions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-ah-versions li {
  display: grid;
  gap: 0.35em;
  padding: 0.7em 1em;
}

.fx-ah-versions li + li {
  border-top: 1px solid var(--color-line);
}

.fx-ah-versions .fx-ah-on {
  background: var(--color-paper-2);
}

.fx-ah-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
}

.fx-ah-when b {
  font-size: 0.82em;
  font-weight: 600;
}

.fx-ah-when em {
  padding: 0.15em 0.45em;
  border-radius: var(--radius-pill);
  background: #e6f6ed;
  color: #0f7a46;
  font-family: var(--font-mono);
  font-size: 0.6em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fx-ah-when .fx-ah-latest {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.fx-ah-who {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.74em;
  color: var(--color-body);
}

.fx-ah-who i {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-style: normal;
}

.fx-ah-pane {
  min-width: 0;
}

.fx-ah-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9em;
  padding: 0.5em 1em;
  border-bottom: 1px solid var(--color-line);
}

.fx-ah-toggle {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8em;
  color: var(--color-body);
}

.fx-ah-toggle i {
  display: grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0.25em;
  background: var(--color-accent);
  color: #fff;
}

.fx-ah-toggle svg {
  width: 0.8em;
  height: 0.8em;
}

.fx-ah-doc {
  display: grid;
  gap: 0.7em;
  padding: 1.2em 1.3em 1.4em;
  font-size: 0.85em;
  line-height: 1.65;
  color: var(--color-body);
}

.fx-ah-title {
  font-family: var(--font-display);
  font-size: 1.55em;
  line-height: 1.15;
  color: var(--color-ink);
}

.fx-ah-doc ins,
.fx-ah-doc del {
  padding-inline: 0.15em;
  border-radius: 0.25em;
}

.fx-ah-doc ins {
  background: #e6f6ed;
  color: #0f7a46;
  text-decoration: none;
  box-shadow: -3px 0 0 currentColor;
}

.fx-ah-doc del {
  background: #fdecef;
  color: var(--color-danger-strong);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  box-shadow: -3px 0 0 currentColor;
}

/* — Narrow screens: one column, the floats in the flow ——————————— */
@media (max-width: 63.9375rem) {
  .fx-hero-grid,
  .fx-split,
  .fx-split-flip {
    grid-template-columns: minmax(0, 1fr);
  }

  .fx-split-flip .fx-copy {
    order: 0;
  }

  .fx-hero-scene {
    max-width: 44rem;
  }
}

@media (max-width: 47.9375rem) {
  .fx-float {
    position: relative;
    inset: auto;
    width: auto !important;
    max-width: 22em;
    margin: -1.5em 0.75em 0 auto;
  }

  .fx-float-start {
    margin: -1.5em auto 0 0.75em;
  }

  .fx-paywall .fx-window,
  .fx-circle .fx-circle-card,
  .fx-circle-locked .fx-window,
  .fx-lists .fx-panel,
  .fx-badges .fx-panel,
  .fx-moderation,
  .fx-live .fx-window,
  .fx-theme-stage .fx-window,
  .fx-theme-agent .fx-term,
  .fx-agent-stage .fx-term,
  .fx-privacy,
  .fx-api-stage .fx-code,
  .fx-urls,
  .fx-result,
  .fx-domain {
    margin-inline: 0;
  }

  .fx-urls + .fx-code {
    margin: 1em 0 0;
  }

  .fx-mail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .fx-inbox {
    display: none;
  }

  .fx-designs,
  .fx-post-access,
  .fx-post-sheet,
  .fx-ds,
  .fx-ah-sheet,
  .fx-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .fx-ds-side,
  .fx-ah-side,
  .fx-post-versions {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .fx-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx-provider {
    grid-template-columns: minmax(0, 1fr);
  }

  .fx-provider-logo {
    grid-row: auto;
  }

  .fx-window-back,
  .fx-window-front,
  .fx-twin .fx-window-front {
    width: 100%;
    margin-top: 1em;
  }

  .fx-rr-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx-rr-cards li:nth-child(3) {
    display: none;
  }
}