/* AspiringPeasant — component classes.
   Ported from mocks/components/core.css with hardcoded colors promoted to
   tokens (see tokens.css), so no [data-theme] blocks are needed here except
   the toggle-disc scale. Net-new pieces are marked. */

/* Buttons */
.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-drift) var(--ease-drift), color var(--dur-drift) var(--ease-drift), border-color var(--dur-drift) var(--ease-drift);
}
.ap-btn--primary { background: var(--c-sun-500); color: oklch(0.985 0.008 85); }
.ap-btn--primary:hover { background: var(--c-sun-700); }
.ap-btn--secondary { background: transparent; color: var(--text-display); border-color: var(--btn-secondary-border); }
.ap-btn--secondary:hover { border-color: var(--btn-secondary-border-hover); color: var(--btn-secondary-fg-hover); }
.ap-btn--ghost { background: transparent; color: var(--accent-warm-strong); padding-left: 6px; padding-right: 6px; }
.ap-btn--ghost:hover { color: var(--link-hover); }
/* cool variant: field-notes-stream affordances (net-new) */
.ap-btn--cool { color: var(--accent-cool-text); }
.ap-btn--cool:hover { color: var(--accent-cool-text-strong); }
.ap-btn--sm { font-size: 13px; padding: 7px 14px; }
.ap-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ap-btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Tag pill */
.ap-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4.5px 13px;
  border-radius: var(--radius-pill);
  background: var(--tag-bg);
  color: var(--tag-fg);
  border: 1px solid var(--tag-border);
  text-decoration: none;
  transition: background var(--dur-drift) var(--ease-drift);
}
a.ap-tag:hover { background: var(--tag-bg-hover); color: var(--tag-fg-hover); }
.ap-tag--cool { background: var(--tag-cool-bg); color: var(--tag-cool-fg); border-color: var(--tag-cool-border); }

/* Input */
.ap-input {
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: var(--text-display);
  background: var(--bg-card);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color var(--dur-drift) var(--ease-drift);
}
.ap-input::placeholder { color: var(--text-faint); }
.ap-input:focus { outline: none; border-color: var(--accent-cool); box-shadow: 0 0 0 3px var(--focus-ring); }

/* Meta label */
.ap-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Card */
.ap-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--dur-drift) var(--ease-drift), transform var(--dur-drift) var(--ease-drift);
}
a.ap-card { display: block; text-decoration: none; color: inherit; }
a.ap-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); color: inherit; }

/* Image placeholder (used when a post has no feature image) */
.ap-placeholder {
  position: relative;
  background: repeating-linear-gradient(45deg, var(--placeholder-stripe-a), var(--placeholder-stripe-a) 10px, var(--placeholder-stripe-b) 10px, var(--placeholder-stripe-b) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-placeholder > span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--placeholder-label-bg);
  padding: 3px 8px;
  border-radius: 3px;
}

/* Grain overlay */
.ap-grain { position: relative; }
.ap-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-grain);
  opacity: var(--grain-opacity);
  pointer-events: none;
  border-radius: inherit;
}
/* Hero/band grain fades out before the section boundary — a hard-stopping
   texture reads as a straight seam against the untextured page below. */
.ap-hero.ap-grain::after,
.ap-band.ap-grain::after {
  mask-image: linear-gradient(180deg, black 60%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, black 60%, transparent 96%);
}

/* Pagination */
.ap-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ap-pagination .ap-meta { flex: 1; text-align: center; }
.ap-pagination__spacer { min-width: 108px; }

/* Dark-mode toggle — a small sun that becomes a moon */
.ap-theme-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--nav-pill-border);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur-drift) var(--ease-drift);
}
.ap-theme-toggle:hover { border-color: var(--nav-link-hover); }
.ap-theme-toggle .disc {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--toggle-disc);
  transition: background var(--dur-drift) var(--ease-drift), transform var(--dur-drift) var(--ease-drift);
}
[data-theme="dark"] .ap-theme-toggle .disc { transform: scale(0.85); }

/* Form result notes */
.ap-note { font-family: var(--font-ui); font-size: 13px; margin-top: 10px; }
.ap-note--ok { color: var(--accent-cool); }
.ap-note--err { color: var(--note-err); }

/* Members form states (net-new — Ghost's members script toggles these classes) */
form[data-members-form] .ap-note { display: none; }
form[data-members-form].success .ap-note--ok { display: block; }
form[data-members-form].error .ap-note--err { display: block; }
form[data-members-form].loading button[type="submit"] { opacity: 0.45; pointer-events: none; }

/* Newsletter-choice checkbox (net-new design — flag for review) */
.ap-checkbox {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: var(--text-body);
  cursor: pointer;
}
.ap-checkbox input[type="checkbox"] {
  accent-color: var(--c-sun-500);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transform: translateY(2px);
}
.ap-checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ap-checkbox span em { color: var(--text-muted); font-style: normal; }