/* ============================================================
   PLUMADEN — Night Brief design system
   Deep navy canvas, hairline white trim, Geist + Geist Mono.
   Imported on pages that opt in via the night-brief base template.
   ============================================================ */

/* Geist / Geist Mono are loaded via <link rel="preconnect"> + <link rel="stylesheet">
   in night/base.html — an @import here would serialise HTML → CSS → font. */

.theme-night {
  --bg:        #07101F;
  --bg-2:      #0A1729;
  --surface:   #0D1A2E;
  --surface-2: #122339;
  --border-soft: rgba(255,255,255,0.05);
  --border:    rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  --text:      #ECF2FB;
  --text-2:    #C4D0E4;
  --muted:     #8497B5;
  --faint:     #5F7196;

  --accent:    #5B9CFF;
  --accent-hover: #7AAEFF;
  --accent-deep: #2A6DE0;
  --accent-soft: rgba(91,156,255,0.13);
  --accent-ring: rgba(91,156,255,0.30);

  --premium:   #34D6A0;
  --premium-soft: rgba(52,214,160,0.13);

  --shadow-xs: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);

  --row-pad: 18px;
  --gap: 24px;
  --feed-pad: 28px;

  color-scheme: dark;
}

.pl-root,
.pl-root * {
  box-sizing: border-box;
}
.pl-root {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.pl-root.density-compact { --row-pad: 12px; --gap: 16px; --feed-pad: 20px; }

.mono { font-family: 'Geist Mono', ui-monospace, 'JetBrains Mono', monospace; font-feature-settings: 'ss02'; }

/* ---------- Top nav ---------- */
.pl-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(13,26,46,0.7);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.pl-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.pl-logo-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.pl-nav-search {
  flex: 1;
  max-width: 440px;
  height: 32px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  display: flex; align-items: center;
  padding: 0 10px;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.pl-nav-search:hover { border-color: var(--border); }
.pl-nav-search .kbd {
  margin-left: auto;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}
.pl-nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}
.pl-nav-link {
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pl-nav-link:hover { background: var(--surface-2); color: var(--text); }
.pl-nav-link.active { background: var(--accent-soft); color: var(--accent); }
.pl-nav-divider { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }
.pl-nav-marketing-links { display: flex; gap: 4px; margin-left: 12px; }

/* Mobile disclosure ("hamburger"). Reuses the .pl-user-menu <details> pattern —
   night_brief.js already closes those on click-outside / Esc. Shown only ≤720px. */
.pl-nav-menu { display: none; }
.pl-nav-menu > summary.pl-nav-burger {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pl-nav-burger > span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}
.pl-nav-menu > summary.pl-nav-burger:focus-visible { border-radius: 8px; }
.pl-nav-menu[open] > summary.pl-nav-burger { background: var(--surface-2); color: var(--text); }
/* .pl-nav-menu-panel overrides live next to .pl-user-menu-panel (below) so they win. */

.pl-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6A8DFF, #2C53D4);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  display: grid; place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}
.pl-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Buttons ---------- */
.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
  text-decoration: none;
  white-space: nowrap;
}
.pl-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.pl-btn:active { transform: translateY(0.5px); }
.pl-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px rgba(13,30,63,0.18);
}
.pl-btn.primary:hover { background: var(--accent-hover); }
.pl-btn.sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.pl-btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.pl-btn.ghost:hover { color: var(--text); background: var(--surface-2); }
.pl-btn.danger {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}
.pl-btn.danger:hover { background: rgba(248, 113, 113, 0.18); }
.pl-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- Chips / pills ---------- */
.pl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  /* Fixed 22px height: text must never wrap out of the pill (see audit M16/H17). */
  white-space: nowrap;
}
.pl-chip.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pl-chip.premium {
  background: var(--premium-soft);
  color: var(--premium);
  border-color: transparent;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- Section / page scaffold ---------- */
.pl-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--gap, 28px);
  padding: var(--feed-pad, 28px);
  max-width: 1280px;
  margin: 0 auto;
}
.pl-col-main { min-width: 0; }
.pl-col-side { min-width: 0; }

.pl-messages {
  max-width: 1200px;
  margin: 14px auto 0;
  padding: 0 28px;
}

.pl-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}
.pl-section-title .num { color: var(--faint); }

.pl-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-xs);
}

.pl-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  color: var(--muted);
  background: var(--surface-2);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.pl-divider { height: 1px; background: var(--border-soft); border: 0; margin: 0; }

.pl-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.pl-meta .sep { color: var(--faint); margin: 0 6px; }

.pl-img {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.03) 0 6px,
    rgba(255,255,255,0.06) 6px 12px);
  border: 1px solid var(--border-soft);
}
.pl-img::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pl-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pl-img.has-image::after { content: none; }

.pl-avatars { display: inline-flex; }
.pl-avatars > * { margin-left: -6px; }
.pl-avatars > *:first-child { margin-left: 0; }
.pl-av {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background-size: cover; background-position: center;
}

/* ---------- Reset for body so dark fills viewport ---------- */
html.pl-html, body.pl-body {
  margin: 0;
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Forms ---------- */
.pl-input {
  height: 36px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
.pl-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------- Auth / account surfaces ---------- */
.pl-auth-page {
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 56px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 28px;
}
.pl-auth-copy { min-width: 0; }
.pl-auth-copy h1 {
  margin: 22px 0 0;
  max-width: 620px;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.pl-auth-copy p {
  margin: 20px 0 0;
  max-width: 540px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.pl-auth-points {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  max-width: 520px;
}
.pl-auth-point {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.pl-auth-point .mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--premium);
  background: var(--premium-soft);
  margin-top: 1px;
}
.pl-auth-panel {
  background: linear-gradient(180deg, rgba(18,35,57,0.88), rgba(13,26,46,0.96));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.pl-auth-panel-header { margin-bottom: 20px; }
.pl-auth-panel-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pl-auth-panel-header p:not(.pl-section-title) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.pl-auth-form { display: grid; gap: 14px; }
.pl-auth-field { display: grid; gap: 7px; }
.pl-auth-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pl-auth-label {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.pl-auth-label-hint {
  color: var(--muted);
  font-size: 11.5px;
}
.pl-auth-form input[type="email"],
.pl-auth-form input[type="password"],
.pl-auth-form input[type="text"],
.pl-auth-form input[type="url"],
.pl-auth-form input[type="number"],
.pl-auth-form textarea,
.pl-auth-form select {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.pl-auth-form textarea {
  min-height: 96px;
  padding-top: 10px;
  resize: vertical;
}
.pl-auth-form input:focus,
.pl-auth-form textarea:focus,
.pl-auth-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.pl-auth-form input::placeholder { color: var(--faint); }
.pl-auth-password-wrap { position: relative; }
.pl-auth-password-wrap input { padding-right: 72px; }
.pl-auth-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
}
.pl-auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12.5px;
  cursor: pointer;
}
.pl-auth-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}
.pl-auth-handle {
  display: grid;
  grid-template-columns: 38px 1fr;
}
.pl-auth-prefix {
  min-height: 38px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--muted);
  font-family: 'Geist Mono', monospace;
}
.pl-auth-handle input {
  border-radius: 0 8px 8px 0 !important;
}
.pl-auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pl-auth-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
}
.pl-auth-link:hover { color: var(--accent-hover); }
.pl-auth-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.pl-auth-note strong { color: var(--text-2); }
.pl-auth-errors,
.pl-auth-errorlist,
.pl-auth-form .errorlist {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.22);
  color: #fca5a5;
  font-size: 12.5px;
  line-height: 1.45;
}
.pl-auth-errors ul,
.pl-auth-errorlist ul,
.pl-auth-form .errorlist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pl-auth-success {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--premium-soft);
  border: 1px solid rgba(52,214,160,0.24);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.pl-auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--faint);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px 0;
}
.pl-auth-divider::before,
.pl-auth-divider::after {
  content: "";
  height: 1px;
  background: var(--border-soft);
}
.pl-auth-social-stack {
  display: grid;
  gap: 8px;
}
/* Each provider is a POST form (see account/_social_providers.html), so the grid
   items are <form>s — zero their UA margin and let the button fill the cell. */
.pl-auth-social-stack form { margin: 0; }
.pl-auth-provider {
  justify-content: center;
  width: 100%;
  height: 38px;
}
.pl-auth-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.pl-auth-footer .pl-btn { margin-top: 10px; width: 100%; justify-content: center; }
.pl-auth-state {
  display: grid;
  gap: 14px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.pl-auth-state p { margin: 0; }
.pl-auth-state a { color: var(--accent); text-decoration: none; }
.pl-auth-state a:hover { color: var(--accent-hover); }

/* ---------- HTMX request indicators ----------
   htmx normally injects these three rules itself, as an inline <style> with no
   nonce -- which our CSP refuses, so `.htmx-indicator` spinners stayed visible
   at rest. base.html sets htmx-config includeIndicatorStyles:false and the
   rules live here instead, where 'self' covers them. Keep them byte-equivalent
   to htmx's defaults so hx-indicator behaves exactly as documented. */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

/* ---------- Writer / creator workflow surfaces ---------- */
.pl-root .hidden { display: none !important; }
.pl-root .text-success { color: var(--premium) !important; }
.pl-root .text-warning { color: #fbbf24 !important; }
.pl-root .text-error { color: #fca5a5 !important; }
.pl-root .text-accent { color: var(--accent) !important; }
.pl-root .text-sm { font-size: 13px !important; }
.pl-root .text-xs { font-size: 12px !important; }
.pl-root .text-base-content\/50,
.pl-root .text-base-content\/60,
.pl-root .text-base-content\/70 { color: var(--muted) !important; }

.pl-writer-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 28px 72px;
}
.pl-writer-page.narrow { max-width: 760px; }
.pl-writer-page.medium { max-width: 980px; }
.pl-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}
.pl-page-header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.pl-page-header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.pl-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.pl-panel {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow-xs);
}
.pl-panel + .pl-panel { margin-top: 16px; }
.pl-form > .pl-panel + .pl-panel { margin-top: 0; }
.pl-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.pl-panel-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.pl-panel-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.pl-form {
  display: grid;
  gap: 18px;
}
.pl-field {
  display: grid;
  gap: 8px;
}
.pl-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pl-label {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.pl-help {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.pl-control,
.pl-select,
.pl-textarea,
.pl-root .input,
.pl-root .select,
.pl-root .textarea {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.pl-control.lg { min-height: 46px; font-size: 18px; letter-spacing: -0.015em; }
.pl-select.sm {
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}
.pl-textarea,
.pl-root .textarea {
  min-height: 140px;
  padding: 12px;
  line-height: 1.55;
  resize: vertical;
}
.pl-control:focus,
.pl-select:focus,
.pl-textarea:focus,
.pl-root .input:focus,
.pl-root .select:focus,
.pl-root .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.pl-control::placeholder,
.pl-textarea::placeholder { color: var(--faint); }
.pl-root input[type="checkbox"],
.pl-root input[type="radio"] {
  accent-color: var(--accent);
}
.pl-root input[type="file"] {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font: inherit;
}
.pl-root input[type="file"]::file-selector-button {
  margin-right: 10px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.pl-root code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.92em;
  color: var(--text-2);
}
.pl-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pl-inline-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pl-toggle-row,
.pl-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
}
.pl-toggle-row input,
.pl-radio-row input {
  margin-top: 2px;
  accent-color: var(--accent);
}
.pl-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pl-separator::before,
.pl-separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border-soft);
}
.pl-alert,
.pl-root .alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.5;
}
.pl-alert.info,
.pl-root .alert-info {
  background: var(--accent-soft);
  border-color: rgba(91,156,255,0.24);
}
.pl-alert.warning,
.pl-root .alert-warning {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.24);
}
.pl-alert.error,
.pl-root .alert-error,
.pl-root .alert-danger {
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.24);
  color: #fecaca;
}
.pl-alert.success,
.pl-root .alert-success {
  background: var(--premium-soft);
  border-color: rgba(52,214,160,0.24);
}
.pl-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pl-stat-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-stat-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 16px;
}
.pl-stat-label {
  color: var(--muted);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pl-stat-value {
  margin-top: 8px;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.pl-stat-desc {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12.5px;
}
.pl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.pl-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.pl-table th,
.pl-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: middle;
}
.pl-table th {
  color: var(--muted);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--surface-2);
}
.pl-table td {
  color: var(--text-2);
  font-size: 13px;
}
.pl-table tr:last-child td { border-bottom: 0; }
.pl-table a { color: var(--text); text-decoration: none; font-weight: 500; }
.pl-table a:hover { color: var(--accent); }
.pl-list-stack { display: grid; gap: 10px; }
.pl-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.pl-list-row:hover { border-color: var(--border); background: var(--surface-2); }
.pl-list-row h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.pl-list-row p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.pl-row-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.pl-empty-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 44px 18px;
  text-align: center;
  color: var(--muted);
}
.pl-empty-state h3 {
  margin: 0;
  color: var(--text-2);
  font-size: 18px;
  letter-spacing: -0.015em;
}
.pl-empty-state p { margin: 0; max-width: 420px; }
.pl-image-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
.pl-image-frame img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}
.pl-image-remove {
  position: absolute;
  right: 10px;
  top: 10px;
}
.pl-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
}
.pl-progress::-webkit-progress-bar { background: var(--surface-2); }
.pl-progress::-webkit-progress-value { background: var(--accent); }
.pl-progress::-moz-progress-bar { background: var(--accent); }
.pl-kbd,
.pl-root .kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
}
.pl-editor-shell #editor-container {
  min-height: 420px;
  background: var(--bg);
  border-radius: 0 0 8px 8px;
}
.pl-editor-shell .ql-toolbar.ql-snow {
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: var(--surface-2);
  color: var(--text-2);
}
.pl-editor-shell .ql-container.ql-snow {
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}
.pl-editor-shell .ql-editor {
  min-height: 420px;
  font-size: 16px;
  line-height: 1.75;
}
.pl-editor-shell .ql-editor.ql-blank::before { color: var(--faint); font-style: normal; }
.pl-editor-shell .ql-snow .ql-stroke { stroke: var(--text-2); }
.pl-editor-shell .ql-snow .ql-fill { fill: var(--text-2); }
.pl-editor-shell .ql-snow .ql-picker { color: var(--text-2); }
.pl-editor-shell .ql-snow .ql-picker-options .ql-picker-item { color: var(--text-2); }
.pl-editor-shell .ql-snow .ql-picker-options {
  background: var(--surface);
  border-color: var(--border) !important;
}
.pl-editor-shell .ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: var(--border);
}
.pl-editor-shell .ql-snow a { color: var(--accent); }
.pl-editor-shell .ql-snow.ql-toolbar button:hover,
.pl-editor-shell .ql-snow.ql-toolbar button:focus,
.pl-editor-shell .ql-snow.ql-toolbar button.ql-active,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-label:hover,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-item:hover,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
  color: var(--accent);
}
.pl-editor-shell .ql-snow.ql-toolbar button:hover .ql-stroke,
.pl-editor-shell .ql-snow.ql-toolbar button:focus .ql-stroke,
.pl-editor-shell .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
  stroke: var(--accent);
}
.pl-editor-shell .ql-snow.ql-toolbar button:hover .ql-fill,
.pl-editor-shell .ql-snow.ql-toolbar button:focus .ql-fill,
.pl-editor-shell .ql-snow.ql-toolbar button.ql-active .ql-fill,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.pl-editor-shell .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
  fill: var(--accent);
}
.pl-editor-shell .ql-snow .ql-tooltip {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--text-2);
}
.pl-editor-shell .ql-snow .ql-tooltip input[type=text] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  outline: none;
}
.pl-editor-shell .ql-snow .ql-tooltip a.ql-action,
.pl-editor-shell .ql-snow .ql-tooltip a.ql-remove { color: var(--accent); }

/* ---------- Post row (feed / tribe / search) ---------- */
.pl-post-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 18px;
  padding: var(--row-pad, 18px) 0;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
}
.pl-post-row.large { grid-template-columns: 1fr; }
.pl-post-row .pl-post-body { min-width: 0; }
.pl-post-row .pl-post-hat {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.pl-post-row .pl-post-hat .pl-tribe { color: var(--accent); font-weight: 600; }
.pl-post-row .pl-post-title {
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  text-wrap: pretty;
}
.pl-post-row.large .pl-post-title { font-size: 22px; }
.pl-post-row .pl-post-dek {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-post-row.large .pl-post-dek { -webkit-line-clamp: 3; }
.pl-post-row .pl-post-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pl-post-row .pl-post-foot .spacer { flex: 1; }
.pl-post-row:hover .pl-post-title { color: var(--accent); }

/* ---------- Reader account / library surfaces ---------- */
.pl-reader-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 28px 72px;
}
.pl-reader-page.narrow { max-width: 760px; }
.pl-reader-page.medium { max-width: 960px; }
.pl-reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}
.pl-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  /* Scroll rather than overflow when there are more tabs than room (audit M5). */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.pl-tabs::-webkit-scrollbar {
  display: none;
}
.pl-tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.pl-tab:hover { color: var(--text); background: var(--surface-2); }
.pl-tab.active { color: var(--accent); background: var(--accent-soft); }
.pl-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.pl-profile-avatar {
  width: 108px;
  height: 108px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: #fff;
  font-size: 38px;
  font-weight: 700;
}
.pl-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pl-profile-name {
  margin: 0;
  color: var(--text);
  font-size: 32px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.pl-profile-handle {
  margin-top: 5px;
  color: var(--accent);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
}
.pl-profile-bio {
  margin: 16px 0 0;
  max-width: 700px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
}
.pl-profile-facts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
}
.pl-profile-facts a { color: var(--text-2); text-decoration: none; }
.pl-profile-facts a:hover { color: var(--accent); }
.pl-metric-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-2);
  text-decoration: none;
}
.pl-metric-link strong {
  color: var(--text);
  font-size: 18px;
}
.pl-metric-link span { color: var(--muted); font-size: 12.5px; }
.pl-metric-link:hover span { color: var(--accent); }
.pl-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}
.pl-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pl-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pl-article-excerpt {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.pl-article-excerpt p { margin: 0; }
.pl-article-excerpt p + p { margin-top: 8px; }
/* Teasers render arbitrary post HTML — keep media inside the card (audit M12). */
.pl-article-excerpt img { max-width: 100%; height: auto; }
.pl-article-excerpt pre { max-width: 100%; overflow-x: auto; }
.pl-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  padding: 0;
}
.pl-dialog::backdrop { background: rgba(3, 8, 17, 0.72); backdrop-filter: blur(4px); }
.pl-dialog-inner { padding: 20px; }
.pl-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
.pl-qr-frame {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg);
}
.pl-qr-frame img {
  max-width: 220px;
  width: 100%;
  border-radius: 8px;
  background: #fff;
}
.pl-code-box {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* ---------- Payment ops / pricing surfaces ---------- */
.pl-ops-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  align-items: start;
}
.pl-ops-status-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.pl-ops-issue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pl-ops-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) minmax(220px, 1.35fr) auto auto;
  gap: 10px;
  align-items: end;
}
.pl-key-grid {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 8px 12px;
  font-size: 13px;
}
.pl-key-grid .key {
  color: var(--muted);
}
.pl-key-grid .value {
  color: var(--text-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.pl-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pl-timeline-step {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px;
  background: var(--bg);
}
.pl-timeline-step.done {
  background: var(--premium-soft);
  border-color: rgba(52,214,160,0.24);
}
.pl-marketing-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 28px;
}
.pl-marketing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: end;
}
.pl-fee-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.pl-fee-results,
.pl-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pl-fee-amount {
  color: var(--text);
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.pl-faq-list {
  display: grid;
  gap: 10px;
}
.pl-faq-list details {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px 16px;
}
.pl-faq-list summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}
.pl-faq-list p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.pl-explore-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.pl-explore-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pl-topic-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pl-topic-strip::-webkit-scrollbar {
  display: none;
}
/* Horizontal card/chip scrollers. Snapping gives the cut-off edge a "there is
   more this way" feel instead of reading as a clipped layout (audit L2). */
.pl-scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
}
.pl-scroll-x::-webkit-scrollbar {
  display: none;
}
.pl-scroll-x > * {
  scroll-snap-align: start;
}
.pl-explore-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.pl-explore-card:hover {
  border-color: var(--border);
  background: var(--surface-2);
}
.pl-explore-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.pl-explore-card:hover h3 {
  color: var(--accent);
}
.pl-explore-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.pl-explore-thumb {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-2);
  aspect-ratio: 16 / 8;
}
.pl-explore-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pl-compact-post {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  color: inherit;
  text-decoration: none;
}
.pl-compact-post:last-child {
  border-bottom: 0;
}
.pl-compact-post:hover .title {
  color: var(--accent);
}
.pl-compact-post .title {
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* ---------- Animations ---------- */
@keyframes pl-pulse {
  0%, 100% { opacity: 1 }
  50% { opacity: 0.3 }
}
.pl-pulse { animation: pl-pulse 1.6s infinite; }

@keyframes pl-caret {
  0%, 50% { opacity: 1 }
  50.01%, 100% { opacity: 0 }
}

/* ---------- Mark / highlights ---------- */
.pl-root mark {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
}

/* ---------- Article body (post detail) ---------- */
.pl-article-body {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
  /* Pasted wallet addresses / long URLs must break instead of widening the page. */
  overflow-wrap: anywhere;
}
.pl-article-body p { margin: 0 0 22px; }
.pl-article-body h2 {
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
  margin: 36px 0 16px; color: var(--text);
}
.pl-article-body h3 {
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
  margin: 28px 0 14px; color: var(--text);
}
.pl-article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pl-article-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.pl-article-body a:hover { border-bottom-color: var(--accent); }
.pl-article-body ul, .pl-article-body ol { margin: 0 0 22px; padding-left: 22px; }
.pl-article-body li { margin-bottom: 8px; }
.pl-article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 22px 0; }
.pl-article-body pre {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
}
.pl-article-body code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.pl-article-body pre code { background: none; padding: 0; }
/* AI chat markdown allows tables; the post sanitizer strips them. Either way,
   scroll the table instead of the page. */
.pl-article-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* ---------- Paywall fade ---------- */
.pl-paywall-fade {
  mask-image: linear-gradient(to bottom, black 0%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 95%);
}

/* ---------- Comments tree ---------- */
.pl-comment {
  padding: 14px 0 6px;
  display: flex; gap: 12px;
}
.pl-comment .pl-comment-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.pl-comment-body { flex: 1; min-width: 0; }
.pl-comment-text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.pl-comment-children {
  margin-left: 24px;
  padding-left: 16px;
  border-left: 1px solid var(--border-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .pl-page { grid-template-columns: 1fr; }
  .pl-reader-layout { grid-template-columns: 1fr; }
  .pl-ops-layout,
  .pl-marketing-hero,
  .pl-fee-shell,
  .pl-fee-results,
  .pl-feature-grid,
  .pl-explore-layout,
  .pl-explore-card-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-ops-status-grid,
  .pl-ops-issue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-ops-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* .pl-page is single-column here, so the aside stacks under .pl-col-main
     instead of being deleted (audit M8). */
  .pl-col-side { margin-top: 4px; }
  .pl-auth-page {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 22px;
  }
  .pl-auth-copy h1 { font-size: 38px; }
  .pl-page-header { align-items: flex-start; flex-direction: column; }
  .pl-stat-grid,
  .pl-stat-grid.three,
  .pl-form-grid { grid-template-columns: 1fr; }
}
/* ---------- Chat / Q&A (site chat + post Q&A + author Q&A) ---------- */
/* The chat page owns the viewport: the header takes what it needs and the shell
   claims the rest, so the composer is always on screen. A fixed shell height had
   to guess the header's height and pushed the composer below the fold whenever
   it guessed low. 56px is .pl-nav. */
.pl-chat-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  padding-bottom: 24px;
}
.pl-chat-page .pl-page-header { flex-shrink: 0; }
.pl-chat-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.pl-chat-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}
.pl-chat-transcript { display: flex; flex-direction: column; }
.pl-chat-row {
  display: flex;
  margin-bottom: 14px;
}
.pl-chat-row.end { justify-content: flex-end; }
.pl-chat-bubble {
  display: inline-block;
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
/* Wrapper for an assistant turn: bubble plus its payment card and tool chips. */
.pl-chat-msg { max-width: 80%; }
.pl-chat-row.end .pl-chat-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.pl-chat-row.start .pl-chat-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}
.pl-chat-payment-card {
  max-width: 480px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pl-chat-payment-body {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}
.pl-chat-payment-qr img {
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  max-width: 100%;
  height: auto;
}
.pl-chat-payment-fields {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
}
.pl-chat-payment-fields dt {
  margin-top: 8px;
}
.pl-chat-payment-fields dt:first-child {
  margin-top: 0;
}
.pl-chat-payment-fields dd {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text);
}
.pl-chat-tool-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--accent);
  background: var(--accent-soft);
}
.pl-chat-loading-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.pl-chat-loading-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: pl-chat-slide 1.4s infinite;
}
@keyframes pl-chat-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.pl-chat-loading-dots { display: inline-flex; gap: 4px; }
.pl-chat-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pl-chat-dot 1.2s infinite ease-in-out;
}
.pl-chat-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.pl-chat-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pl-chat-dot {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}
/* The scroll area is a fixed-height box, so an empty thread has to centre itself
   in it -- pinned to the top it read as a large blank panel. */
.pl-chat-scroll { display: flex; flex-direction: column; }
/* `1 0 auto`: fill the box when the thread is short (so an empty state can
   centre itself) but never shrink below the messages, or a long thread would be
   squeezed instead of scrolling. */
.pl-chat-thread { flex: 1 0 auto; display: flex; flex-direction: column; }
.pl-chat-transcript { flex: 1 0 auto; }
.pl-chat-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: auto 0;
  padding: 8px 18px;
  text-align: center;
}
.pl-chat-empty-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.pl-chat-empty h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.pl-chat-empty p {
  margin: 0;
  max-width: 380px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.pl-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.pl-chat-suggestion {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pl-chat-suggestion:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Pending turn. Bordered and accented because the previous treatment -- muted
   dots inside the Send button -- was easy to miss while a reply was in flight. */
.pl-chat-thinking {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 520px;
  padding: 14px 16px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pl-chat-thinking-body { min-width: 0; flex: 1; }
.pl-chat-thinking-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.pl-chat-thinking-sub {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.pl-chat-spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: pl-chat-spin 0.7s linear infinite;
}
.pl-chat-thinking .pl-chat-spinner {
  margin-top: 2px;
  color: var(--accent);
}
@keyframes pl-chat-spin { to { transform: rotate(360deg); } }

/* Composer: input and Send share one bounded surface so they read as a single
   control instead of two loose blocks. */
.pl-chat-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pl-chat-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pl-chat-input {
  width: 100%;
  min-height: 26px;
  max-height: 180px;
  padding: 4px 0 0;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  outline: none;
  overflow-y: auto;
}
.pl-chat-input::placeholder { color: var(--muted); }
.pl-chat-input:disabled { color: var(--muted); }
.pl-chat-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pl-chat-hint {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
.pl-chat-send {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 14px;
}
.pl-chat-send:disabled { opacity: 0.7; cursor: progress; }
/* Idle/busy faces of the Send button. `.pl-root .hidden` is !important, so the
   visible display has to come from a class rather than an inline style. */
.pl-chat-send-state { display: inline-flex; align-items: center; gap: 6px; }

/* iOS Safari zooms in on focus for any control under 16px and never zooms back
   out. One rule keeps every night-shell control at the threshold (audit M1). */
@media (max-width: 768px) {
  .pl-input,
  .pl-control,
  .pl-select,
  .pl-select.sm,
  .pl-textarea,
  .pl-chat-input,
  .pl-root .input,
  .pl-root .select,
  .pl-root .textarea,
  .pl-auth-form input,
  .pl-auth-form textarea,
  .pl-auth-form select {
    font-size: 16px;
  }
}

@media (max-width: 720px) {
  .pl-nav { gap: 12px; padding: 0 14px; }
  .pl-nav-search { display: none; }
  .pl-nav-link { padding: 6px 8px; font-size: 12px; min-height: 44px; }
  /* Icon-only nav links (the bell) still need a 44px target. */
  .pl-nav-icon { min-width: 44px; justify-content: center; }
  /* Collapse the link row into the hamburger; keep logo + bell + avatar + CTA
     on-screen (audit H1/H2/H3). */
  .pl-nav-menu { display: block; }
  .pl-nav-desktop-only,
  .pl-nav-marketing-links { display: none; }
  .pl-avatar { width: 40px; height: 40px; font-size: 15px; }
  .pl-btn { min-height: 40px; }
  .pl-btn.sm { min-height: 36px; }
  .pl-tab { min-height: 40px; }
  .pl-page { padding: 20px 16px; }
  .pl-messages { padding: 0 16px; }
  .pl-table { min-width: 480px; }
  .pl-timeline { grid-template-columns: 1fr; }
  /* Let the chat page size to its content so the composer stays reachable
     above the iOS keyboard (audit H16), and let the document scroll rather
     than the column.

     Deliberately no max-height. Clamping the column squeezed .pl-chat-scroll
     instead of the page: it is an overflow container, so its automatic minimum
     size is 0 and flexbox was free to shrink it to a sliver -- on a phone the
     header alone left the thread about one line tall, clipping the empty state
     and every reply. */
  .pl-chat-page {
    height: auto;
    min-height: 0;
    max-height: none;
    padding-bottom: 16px;
  }
  .pl-chat-shell { min-height: 0; }
  /* Floor so the thread is never squeezed to nothing, ceiling so a long
     conversation scrolls inside its own box instead of growing the document
     without bound and dragging the composer off the end of it. */
  .pl-chat-scroll {
    min-height: 38vh;
    min-height: 40dvh;
    max-height: 68vh;
    max-height: 70dvh;
    padding: 14px;
  }
  /* The standing intro cost most of a phone screen before the first message,
     and pushed the composer off the bottom of it. The empty state inside the
     thread already says what the assistant can do, so the header keeps only
     its title here. */
  .pl-chat-page .pl-page-header { gap: 12px; margin-bottom: 16px; }
  .pl-chat-page .pl-page-header h1 { font-size: 24px; }
  .pl-chat-page .pl-page-header p:not(.pl-section-title) { display: none; }
  /* Narrow bubbles waste the little width a phone has. */
  .pl-chat-bubble,
  .pl-chat-thinking,
  .pl-chat-msg { max-width: 100%; }
  /* "Enter to send · Shift + Enter for a new line" is desktop advice, and it
     wrapped to two lines pressed against the Send button. */
  .pl-chat-hint { display: none; }
  .pl-chat-composer-bar { justify-content: flex-end; }
  .pl-post-row { grid-template-columns: 1fr; }
  .pl-post-row .pl-post-thumb { display: none; }
  .pl-auth-page { padding: 34px 16px; }
  .pl-auth-copy h1 { font-size: 32px; }
  .pl-auth-panel { padding: 18px; }
  .pl-auth-actions { align-items: flex-start; flex-direction: column; }
  .pl-writer-page { padding: 24px 16px 56px; }
  .pl-page-header h1 { font-size: 28px; }
  .pl-list-row { flex-direction: column; }
  .pl-reader-page { padding: 24px 16px 56px; }
  .pl-marketing-section { padding: 34px 16px; }
  .pl-ops-status-grid,
  .pl-ops-issue-grid { grid-template-columns: 1fr; }
  .pl-ops-filters { grid-template-columns: 1fr; }
  .pl-key-grid { grid-template-columns: 1fr; }
  .pl-compact-post { grid-template-columns: 42px minmax(0, 1fr); }
  .pl-compact-post > .pl-row-actions { grid-column: 1 / -1; justify-content:flex-start; }
  .pl-profile-hero { grid-template-columns: 1fr; }
  .pl-profile-avatar { width: 86px; height: 86px; border-radius: 20px; font-size: 30px; }
}

/* ---------- User menu dropdown (nav avatar) ---------- */
.pl-user-menu { position: relative; }
.pl-user-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
.pl-user-menu > summary::-webkit-details-marker { display: none; }
.pl-user-menu > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 50%;
}
.pl-user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 60;
  display: grid;
  gap: 1px;
}
.pl-user-menu-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 2px;
}
.pl-user-menu-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pl-user-menu-handle {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
}
.pl-user-menu-section {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border-soft);
}
.pl-user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 7px;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.pl-user-menu-item:hover,
.pl-user-menu-item:focus-visible {
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}
.pl-user-menu-item svg {
  flex-shrink: 0;
  color: var(--muted);
}
.pl-user-menu-item:hover svg,
.pl-user-menu-item:focus-visible svg {
  color: var(--accent);
}
.pl-user-menu-item-danger { color: #fca5a5; }
.pl-user-menu-item-danger:hover,
.pl-user-menu-item-danger:focus-visible {
  background: rgba(248, 113, 113, 0.10);
  color: #fecaca;
}
.pl-user-menu-item-danger svg { color: #fca5a5; }
.pl-user-menu-form { display: contents; }

/* Hamburger panel: same chrome as the avatar menu, but capped to the viewport
   and with touch-sized rows. Declared after .pl-user-menu-panel so it wins. */
.pl-nav-menu-panel {
  right: 0;
  min-width: 232px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
}
.pl-nav-menu-panel .pl-user-menu-item { min-height: 44px; font-size: 14px; }

@media (max-width: 480px) {
  .pl-user-menu-panel { min-width: 220px; }
  .pl-nav-menu-panel { min-width: 220px; }
}

/* ── Site footer ─────────────────────────────────────────────────────────── */
/* .pl-root is a flex column so .pl-main absorbs the slack and the footer
   always lands at the bottom of the viewport, even on short pages. */
.pl-root {
  display: flex;
  flex-direction: column;
}
.pl-main {
  flex: 1 0 auto;
}

.pl-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 40px 28px 24px;
  margin-top: 64px;
}
.pl-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.pl-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.pl-footer-blurb {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 320px;
  line-height: 1.55;
}
.pl-footer-status {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pl-footer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--premium);
}
.pl-footer-col-title {
  margin: 0 0 12px;
}
.pl-footer-links {
  display: grid;
  gap: 8px;
}
.pl-footer-links a {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
}
.pl-footer-links a:hover {
  color: var(--text);
}
.pl-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 960px) {
  .pl-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .pl-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .pl-footer {
    padding: 32px 18px 20px;
    margin-top: 48px;
  }
  .pl-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}