/* ===========================================
   LONG-TAIL CLEANUP, shared utilities promoted from the final inline-style sweep.
   Each rule replaces ≥2 inline-style instances across templates.
   =========================================== */

/* Tab-spinner loading indicator (used by 3+ dashboards). */

/* Inline-block secondary action link styled as a button. */
.btn-link {
  display: inline-block;
  padding: var(--gap-peer) var(--gap-section);
  text-decoration: none;
}
.btn-link--sm { padding: var(--gap-peer) var(--gap-section); }

/* Username-availability spinner (wizards + standalone account form). */
.username-spinner { font-size: var(--text-note); }

/* Centered foot-link beneath wizard cards. */
.foot-link--centered { margin-top: var(--gap-section); text-align: center; }

/* Health-page status dots. */
.health-indicator-dot { width: 8px; height: 8px; margin-right: var(--gap-peer); }
.health-error-text { color: var(--danger); }

/* Inline error fragments (login_error, error_fragment) toggle this on. */
.error-message.is-active { display: block; }

/* Cart count badge in nav. */
.cart-badge-count { font-size: var(--text-fine); }

/* Empty-row inside a data table. */
.table-empty-row { text-align: center; opacity: 0.6; }

/* Discover grid: card wrapper + body anchor. */
.discover-grid-card { position: relative; }
.discover-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.discover-filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  cursor: pointer;
  font-size: var(--text-note);
}

/* Tag suggestion list. */
.tag-suggest-label {
  font-size: var(--text-fine);
  opacity: 0.7;
  margin-bottom: var(--gap-peer);
  overflow-wrap: anywhere;
}
.tag-suggest-pill {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
  cursor: pointer;
  margin: var(--gap-bound);
}

/* Dashboard-export header layout + Export-all CTA. */
.dashboard-export-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.export-all-btn {
  white-space: nowrap;
  margin-top: var(--gap-peer);
}

/* Tiny inline action button (admin-metrics, dashboard-item share). */
.dashboard-item-share-btn {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
  opacity: 0.6;
}

/* Monospaced page sub-headers. */
.section-mono-meta {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.6;
  margin-bottom: var(--gap-pane);
}
/* Email-result single-card page. */
.email-result-wrap {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
}

/* Admin lottery form (admin-waitlist). */
.lottery-form {
  display: flex;
  gap: var(--gap-section);
  align-items: flex-end;
}

/* Login screen: "or" divider + passkey button + error slot. */
.login-divider {
  text-align: center;
  margin: var(--gap-pane) 0 var(--gap-section);
  opacity: 0.5;
  font-size: var(--text-note);
}
/* The passkey offer is out only where the browser can do WebAuthn.
   `page-login-2.js` asks and states the answer; the region's own markup is the
   renderer's, so there is no class for a script to take off. */
#passkey-login { display: none; }
#passkey-login[data-supported] { display: block; }

.login-passkey-btn { width: 100%; }
.login-passkey-error { margin-top: var(--gap-peer); }

/* Upload-progress sibling text (item_audio_upload). */
.upload-speed-text {
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-top: var(--gap-bound);
}

/* Faded "Following" follow-button state. */
.follow-btn.is-selected { opacity: 0.7; }

/* Compact alert / paragraph margin variants used 2+ times. */

/* Paywall trust line. */
.paywall-trust {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-top: var(--gap-section);
  line-height: 1.4;
}

/* Confirm-delete: button background already covered by .danger class.
   The wizard step uses `.primary` and inlines the danger background; we just
   change the class instead. No CSS rule needed here. */

/* Paywall-style centered narrow form-group used inside project_paywall. */
.form-group--centered-narrow {
  max-width: 240px;
  margin: var(--gap-section) auto;
}

/* Inline-form margin-left for adjacent pills (collection.html private badge). */
.badge--inline-l { margin-left: var(--gap-peer); }

/* ===== Team page ===== */

/* The whole block below this line went with `templates/pages/team.html` when
   `/team` moved to the description layer. What is left is the measure, which a
   described document carries on <main> rather than on a container div: the
   screen has no `.container`, exactly as `.feed-page main` found. The intro
   paragraph, the section spacing, the card's parts and the bio disclosure are
   all drawn by the design system now, off `Node::text`, `Node::section`,
   `Node::list` and a selective region. */
.team-page main { max-width: 56rem; margin: 0 auto; }

/* ── SyncKit billing panel ──
   Per-app accordion shown inside the SyncKit dashboard tab (both user and
   project levels). The .synckit-billing root carries pricing constants as
   data-attrs that static/synckit-billing.js reads to mirror monthly_price_cents.
*/
.synckit-billing {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--gap-peer) var(--gap-section);
  min-width: 220px;
}
.synckit-billing-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  font-size: var(--text-note);
}
.synckit-billing-toggle { margin-left: auto; color: var(--content-muted); }
.synckit-billing-status {
  display: inline-block;
  padding: 2px var(--gap-peer);
  border-radius: var(--radius-fine);
  font-size: var(--text-fine);
  font-weight: 600;
}
.synckit-billing-status--draft { background: var(--surface-sunken); }
.synckit-billing-status--active { background: color-mix(in oklch, var(--success) 12%, var(--surface-page)); color: var(--success); }
.synckit-billing-status--past-due { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
.synckit-billing-status--canceled { background: color-mix(in oklch, var(--danger) 10%, var(--surface-page)); color: var(--danger); }
.synckit-billing-price { font-weight: 600; }
.synckit-billing-body {
  padding-top: var(--gap-section);
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}
.synckit-billing-section { display: flex; flex-direction: column; gap: var(--gap-peer); }
.synckit-billing-subheading { font-size: var(--text-note); margin: 0; font-weight: 600; }
.synckit-knob-row {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  flex-wrap: wrap;
}
.synckit-knob-row label { min-width: 110px; }
.synckit-knob-row input[type="range"] { flex: 1 1 160px; min-width: 120px; }
.synckit-radio { display: inline-flex; align-items: center; gap: var(--gap-bound); min-width: 0; }
.synckit-billing-summary-line {
  display: flex;
  align-items: baseline;
  gap: var(--gap-peer);
  padding-top: var(--gap-peer);
  border-top: 1px solid var(--border);
}
.synckit-price-preview { font-size: var(--text-lead); font-weight: 600; }
.synckit-billing-actions { display: flex; gap: var(--gap-peer); }
.synckit-billing-manage { flex-direction: row; gap: var(--gap-peer); }
.synckit-billing-status-msg { font-size: var(--text-note); min-height: 1.25em; }
.synckit-billing-status-msg--info { color: var(--content-muted); }
.synckit-billing-status-msg--error { color: var(--danger); }
.synckit-billing-period { margin: 0; }
.synckit-gauge { display: flex; flex-direction: column; gap: 2px; }
.synckit-gauge-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-fine);
}
.synckit-gauge-value { color: var(--content-muted); }