/*
 * Design tokens live in tokens.css, imported here so every page that loads this
 * sheet gets them. admin.css imports the same file — that is the whole point of
 * it being its own file rather than a block at the top of this one.
 */
@import url("tokens.css");

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

/* Footer */
.site-footer {
  color: var(--muted);
  font-size: 0.9rem;
  background: #fff;
}

/* Link colouring, but not for the "Add to Chrome" button, which keeps its own. */
.site-footer a:not(.btn) {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:not(.btn):hover,
.site-footer a:not(.btn):focus {
  color: var(--ink);
  text-decoration: underline;
}

.site-footer-heading {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.marketplace-type-filter {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 12rem;
  flex-shrink: 0;
}

.marketplace-type-filter-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.marketplace-type-filter .form-select {
  border-color: #d0d5dd;
  background-color: #fff;
  min-height: 38px;
}

.lens-card {
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(31, 41, 51, 0.05);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.lens-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.12) !important;
}

.lens-card-header-link,
.lens-image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lens-card-header-link:hover,
.lens-card-header-link:focus-visible,
.lens-image-link:hover,
.lens-image-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.lens-card-header {
  height: 96px;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.lens-card-header-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lens-card-header.lens-image-placeholder {
  display: flex;
  width: 100%;
}

.lens-card-header-text {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lens-card-header .featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff7ed;
  color: #b45309;
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  box-shadow: none;
}

.lens-card-header .lens-visibility-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}

.lens-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem;
}

.lens-title,
.lens-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.lens-title-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: inherit;
}

.lens-title-link:visited {
  color: var(--ink);
}

.lens-title-link:hover {
  color: var(--ink);
  text-decoration: none;
}

/*
 * This used to be folded in with :hover and set `outline: none`, so the card title — the
 * main way into a lens — could be tabbed to with nothing to show it. Suppressing a focus
 * ring is a WCAG 2.4.7 failure and the sweep caught it on every card on two pages.
 *
 * Underline as well as the ring: the title is dark text on a light card either way, so a
 * ring alone is the only signal, and a reader who cannot make out a thin outline gets
 * nothing.
 */
.lens-title-link:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lens-card .lens-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 3.125rem;
  max-height: 3.125rem;
}

.lens-description {
  color: var(--muted-strong);
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: 0;
}

.lens-card .lens-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.76rem;
  max-height: 2.76rem;
}

.lens-meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 1rem;
}

.lens-questions-tip {
  cursor: default;
  text-decoration: none;
}

.lens-card .lens-questions-tip,
.lens-list-card .lens-questions-tip {
  border-bottom: 0;
  text-decoration: none !important;
}

.lens-questions-tooltip .tooltip-inner {
  max-width: min(20rem, 90vw);
  text-align: left;
  padding: 0.75rem 1rem;
}

.lens-questions-tooltip,
.lens-tag-more-tooltip,
.lens-author-tooltip,
.lens-description-tooltip {
  z-index: 1080;
}

.lens-description-tip {
  cursor: default;
}

.lens-description-tooltip .tooltip-inner {
  max-width: min(24rem, 90vw);
  text-align: left;
  white-space: pre-wrap;
}

.lens-questions-tip-lines {
  text-align: left;
}

.lens-questions-tip-heading {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.lens-questions-tip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lens-questions-tip-line {
  line-height: 1.35;
  text-align: left;
}

.lens-questions-tip-number {
  font-weight: 600;
}

.lens-tag-more-tooltip .tooltip-inner {
  max-width: min(20rem, 90vw);
  text-align: left;
}

.lens-tag-more-tip-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.lens-tag-more-tip-tag {
  display: block;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
  line-height: 1.35;
}

.lens-author {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.author-avatar-link {
  display: inline-flex;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 50%;
  line-height: 0;
}

.lens-card-author-byline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.author-avatar-link:hover {
  opacity: 0.85;
}

.creator-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border-cool);
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  object-fit: cover;
  border: none;
}

.lens-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lens-card-actions {
  margin-top: 0;
}

/* On desktop the installed state adds a button, which could tip the action row
   (buttons + author byline) onto a second line. A slightly tighter gap and button
   padding keeps it to one row without looking cramped. */
@media (min-width: 768px) {
  .lens-card-actions,
  .lens-card-actions > .d-flex {
    gap: 0.375rem;
  }
  .lens-card-actions .btn-sm {
    --bs-btn-padding-x: 0.4rem;
  }
}

.lens-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin-top: 0;
  overflow: hidden;
  min-width: 0;
}

.lens-tags .tag-more {
  flex-shrink: 0;
}

.lens-tags .lens-tag-item {
  flex-shrink: 0;
}

.lens-tags .tag,
.lens-tags .lens-tag {
  font-size: var(--text-chip);
  background: #f3f4f6;
  /* 5.57:1 on this ground. Was #6b7280 at 4.39:1 — below AA, and the single most
     repeated failure in the sweep because every card carries several. */
  color: var(--ink-secondary);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

.lens-tags .tag-more {
  color: #6b7280;
  background: #f3f4f6;
}

.lens-list-card .card-body {
  font-size: 1.125rem;
  line-height: 1.5;
}

.lens-list-card .small {
  font-size: 1.0625rem;
}

.lens-list-card .lens-tag {
  font-size: 0.9375rem;
  padding: 0.25rem 0.65rem;
}

.lens-list-card .btn-sm {
  font-size: 1rem;
  padding: 0.45rem 0.9rem;
}

.lens-image-wrap {
  position: relative;
  flex-shrink: 0;
}

.lens-image-wrap .featured-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.lens-image-wrap .lens-visibility-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.lens-list-card .lens-image-wrap .featured-badge {
  right: 4px;
  bottom: 4px;
  font-size: 0.6rem;
  padding: 0.1rem 0.3rem;
  letter-spacing: 0.02em;
}

.lens-list-image {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.lens-image-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--placeholder-bg, var(--brand-ground));
  color: var(--placeholder-fg, var(--brand));
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.author-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 0.72rem;
}

.author-avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 0.66rem;
}

.author-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.author-link:hover {
  color: var(--brand);
}

.lens-detail-sidebar .author-link {
  text-decoration: none;
}

.lens-tag {
  font-size: 0.9375rem;
  background: #f3f4f6;
  /* 5.57:1. A separate rule from `.lens-tags .lens-tag`, used on the detail page, and it
     carried the same 4.39:1 grey — fixing one selector left the other failing. */
  color: var(--ink-secondary);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
}

.lens-tag-btn {
  border: none;
  cursor: pointer;
  line-height: 1.2;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.lens-tag-btn:hover {
  background: var(--border-cool);
  color: var(--muted-strong);
}

/* Also had `outline: none`. A darker ground is a hover affordance, not a focus one — it
   reads as "the pointer is here", and a keyboard reader has no pointer. */
.lens-tag-btn:focus-visible {
  background: var(--border-cool);
  color: var(--muted-strong);
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.preview-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
}

.lens-detail-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.lens-detail-description {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  color: #374151;
  max-width: 48rem;
}

.lens-detail-description.text-muted {
  color: var(--muted);
}

.lens-detail-categories-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.lens-detail-categories-label {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.lens-detail-category-link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.lens-detail-category-link:hover,
.lens-detail-category-link:focus-visible {
  color: var(--brand);
  text-decoration: underline;
}

.lens-detail-categories-sep {
  color: var(--muted);
}

.lens-detail-image-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: zoom-in;
  overflow: hidden;
}

.lens-detail-image-btn:hover .lens-detail-image,
.lens-detail-image-btn:focus-visible .lens-detail-image {
  opacity: 0.92;
}

.lens-detail-image-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lens-detail-image {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: opacity 0.15s ease;
}

.chain-image-placeholder.lens-detail-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  max-height: 280px;
  font-size: 1.8rem;
  object-fit: initial;
}

body.lens-image-modal-open {
  overflow: hidden;
}

body.lens-confirm-modal-open {
  overflow: hidden;
}

.lens-image-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.lens-image-modal[hidden] {
  display: none !important;
}

.lens-image-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.75);
  cursor: zoom-out;
}

.lens-image-modal-content {
  position: relative;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lens-image-modal-img {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(16, 24, 40, 0.35);
}

.lens-image-modal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.2);
}

.lens-image-modal-close:hover {
  color: var(--ink);
  background: #f3f4f6;
}

/* Split from :hover, which had suppressed the ring. This is the only control in the image
   dialog, so with no focus indicator a keyboard reader cannot tell they are on the way out
   of it. */
.lens-image-modal-close:focus-visible {
  color: var(--ink);
  background: #f3f4f6;
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lens-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.lens-confirm-modal[hidden] {
  display: none !important;
}

.lens-confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.65);
}

.lens-confirm-modal-dialog {
  position: relative;
  width: min(520px, 100%);
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(16, 24, 40, 0.25);
  padding: 1.25rem;
}

.preview-section {
  border-left: 3px solid var(--brand);
  padding-left: 0.75rem;
  margin-bottom: 0.75rem;
}

.search-input-wrap {
  position: relative;
}

.marketplace-search-form .marketplace-search-field {
  flex: 1 1 14rem;
  min-width: 0;
}

.marketplace-search-form .marketplace-filter-field {
  flex: 0 0 auto;
  width: 12rem;
}

.marketplace-search-form .marketplace-type-field {
  flex: 0 0 auto;
  width: 12rem;
}

.marketplace-search-form #sortFilterWrap {
  width: 15.5rem;
}

.marketplace-search-form #typeFilterWrap {
  width: 13rem;
}

.marketplace-search-form #personaTypeFilterWrap {
  width: 13rem;
}

.marketplace-search-form #marketplaceFilterWrap {
  width: 10rem;
}

@media (max-width: 767.98px) {
  .marketplace-search-form .marketplace-search-field,
  .marketplace-search-form .marketplace-filter-field,
  .marketplace-search-form .marketplace-type-field {
    flex: 1 1 100%;
    width: 100%;
  }
}

.search-input-wrap .form-control {
  padding-right: 2.25rem;
}

.search-input-wrap .form-select {
  padding-right: 3rem;
}

.search-input-wrap .form-select + .search-clear-btn {
  right: 2rem;
}

.search-clear-btn {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
}

.search-clear-btn:hover,
.search-clear-btn:focus {
  color: var(--ink);
  background: rgba(31, 41, 51, 0.08);
}

.status-bar {
  min-height: 1.5rem;
  font-size: 0.9rem;
}

.status-bar:empty {
  min-height: 0;
  margin: 0;
}

/* Two naming conventions reach this element: most pages set "success"/"error",
   marketplace-unified.js sets "is-success"/"is-error" (matching its toast).
   Accept both, or the marketplace's status text renders in default ink and
   stops reading as an error once the toast fades. */
.status-bar.success,
.status-bar.is-success {
  color: #027a48;
}

.status-bar.error,
.status-bar.is-error {
  color: #b42318;
}

/*
 * Loading, empty and error states rendered by lenses/shared/ui-state.js.
 *
 * Centred and quiet: these replace content, so they should read as "nothing here
 * yet" rather than as an alert. The retry button is the one thing meant to be
 * found, so it gets the space above it.
 */
.ui-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
}

.ui-state-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--ink);
}

.ui-state-message {
  margin: 0;
  font-size: 0.95rem;
}

.ui-state-error .ui-state-message {
  color: #b42318;
}

.ui-state-retry {
  margin-top: 1rem;
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.featured-badge {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
}

.lens-visibility-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
}

.lens-visibility-badge.is-public {
  background: #ecfdf3;
  color: #027a48;
}

.lens-visibility-badge.is-private {
  background: #f2f4f7;
  color: #475467;
}

.load-lens-btn.is-installed,
.load-chain-btn.is-installed {
  background-color: var(--success);
  border-color: var(--success);
  color: #ffffff;
}

.load-lens-btn.is-installed:not(:disabled),
.load-chain-btn.is-installed:not(:disabled) {
  position: relative;
}

.load-lens-btn.is-installed:hover,
.load-lens-btn.is-installed:focus,
.load-lens-btn.is-installed:active,
.load-chain-btn.is-installed:hover,
.load-chain-btn.is-installed:focus,
.load-chain-btn.is-installed:active {
  background-color: #15803d;
  border-color: #15803d;
  color: #ffffff;
}

.load-lens-btn.is-installed:not(:disabled):hover,
.load-lens-btn.is-installed:not(:disabled):focus-visible,
.load-chain-btn.is-installed:not(:disabled):hover,
.load-chain-btn.is-installed:not(:disabled):focus-visible {
  color: transparent;
}

.load-lens-btn.is-installed:not(:disabled):hover::after,
.load-lens-btn.is-installed:not(:disabled):focus-visible::after,
.load-chain-btn.is-installed:not(:disabled):hover::after,
.load-chain-btn.is-installed:not(:disabled):focus-visible::after {
  content: "Uninstall";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.installed-badge {
  background: var(--success);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
}

.lens-data-providers-wrap {
  display: inline-flex;
  align-items: center;
}

.lens-data-provider-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.lens-meta .lens-data-provider-badges {
  margin-left: 0.15rem;
}

.data-provider-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  background: #eef4ff;
  color: var(--brand);
}

.data-provider-badge.is-sec {
  background: var(--brand-ground);
  color: var(--brand);
}

.like-lens-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #475467;
  border-color: #d0d5dd;
}

.like-lens-btn:hover,
.like-lens-btn:focus {
  color: #344054;
  border-color: #98a2b3;
  background-color: var(--surface-sunken);
}

.like-lens-btn:disabled,
.like-lens-btn.disabled {
  color: #98a2b3;
  border-color: #e4e7ec;
  background-color: var(--surface-sunken);
  opacity: 1;
}

.like-lens-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.marketplace-pagination-footer #paginationNav .pagination {
  justify-content: center;
  margin-bottom: 0;
}

.marketplace-list .lens-list-card {
  border-color: var(--border);
  border-radius: 14px;
}

.marketplace-list .lens-list-card .card-body {
  padding: 0.85rem 1rem;
}

.marketplace-list .lens-list-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "title title"
    "actions actions"
    "image content";
  gap: 0.65rem 1rem;
  align-items: start;
}

.marketplace-list .lens-list-image-cell {
  grid-area: image;
}

.marketplace-list .lens-list-title-cell {
  grid-area: title;
  min-width: 0;
}

.marketplace-list .lens-list-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.marketplace-list .lens-list-content {
  grid-area: content;
  min-width: 0;
}

.marketplace-list .lens-list-tags-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.marketplace-list .lens-list-tags {
  flex: 1;
  min-width: 0;
}

.marketplace-list .lens-list-author {
  flex-shrink: 0;
  margin-left: auto;
}

@media (min-width: 768px) {
  .marketplace-list .lens-list-layout {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "image title actions"
      "image content content";
    align-items: start;
  }

  .marketplace-list .lens-list-actions {
    align-self: center;
  }
}

.hidden {
  display: none !important;
}

.author-profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 1.3rem;
}

.creator-profile-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.creator-profile-main {
  min-width: 0;
  flex: 1 1 18rem;
}

.creator-default-login-card {
  margin-left: auto;
  max-width: 21rem;
  border: 1px solid #e4e7ec;
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.85rem 1rem;
}

.creator-default-login-card .author-profile-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.85rem;
}

@media (max-width: 767.98px) {
  .creator-default-login-card {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

.profile-stars-likes {
  scroll-margin-top: 96px;
}

/*
 * With the content filter narrowed to one type, the surviving section is the
 * first thing under the toolbar, so its divider would hang above nothing. The
 * spacing utilities it overrides are Bootstrap's, hence !important.
 */
.profile-section.is-filtered {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.profile-count-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

.profile-count-link:hover,
.profile-count-link:focus {
  color: #1f2937;
  text-decoration-style: solid;
}

.profile-liked-block + .profile-liked-block {
  margin-top: 1.5rem;
}

.builder-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 16px;
}

.builder-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.builder-header h1 {
  margin: 4px 0 0;
  font-size: 22px;
}

.builder-header-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.header-link {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  background: #fff;
}

.header-link:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-ground);
}

.builder-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 48px;
  width: 100%;
  box-sizing: border-box;
}

.builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.builder-form {
  min-width: 0;
  max-width: 100%;
}

.builder-sidebar {
  position: sticky;
  top: 16px;
  min-width: 0;
  max-width: 100%;
}

.builder-page {
  overflow-x: clip;
}

.builder-meta-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.builder-meta-card h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.builder-status-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.builder-status-badge.is-draft {
  background: #f3f4f6;
  color: var(--muted-strong);
}

.builder-status-badge.is-unpublished {
  background: #fffaeb;
  color: #b54708;
}

.builder-status-badge.is-published {
  background: #ecfdf3;
  color: #027a48;
}

.builder-meta-card .lens-detail-list {
  margin: 0;
}

.builder-meta-card .lens-detail-list dd a {
  color: var(--brand);
  word-break: break-all;
}

.builder-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.builder-actions button {
  display: block;
  width: 100%;
  margin: 0;
  font: inherit;
  box-sizing: border-box;
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}

.builder-actions button.secondary {
  background: #fff;
  color: var(--brand);
}

.builder-actions button:hover {
  background: var(--brand-dark);
}

.builder-actions button.secondary:hover {
  background: var(--brand-ground);
}

.builder-discard-btn {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  font: inherit;
  box-sizing: border-box;
  border: 1px solid #fda29b;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: #b42318;
  cursor: pointer;
}

.builder-discard-btn:hover {
  background: #fef3f2;
  border-color: #f97066;
}

.builder-actions button:disabled,
.builder-discard-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.builder-discard-btn[hidden] {
  display: none;
}

.discard-draft-dialog {
  width: min(480px, 100%);
  max-height: none;
}

.builder-preview {
  position: sticky;
  top: 16px;
}

.builder-preview h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.preview-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

@media (max-width: 900px) {
  .builder-layout {
    grid-template-columns: 1fr;
  }

  .builder-sidebar,
  .builder-preview {
    position: static;
  }
}

.lens-detail-section h2,
.lens-detail-section h6 {
  margin-bottom: 1rem;
}

.lens-detail-card .lens-detail-block {
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.lens-detail-card .card-body > .lens-detail-block:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

/*
 * Stand-in for Questions/Thinking style/Settings/Tags while view.js is still
 * waiting on api/lens-public.php (see view.php). Reuses .lens-detail-block for
 * its spacing so the page does not jump much in height once the skeleton is
 * swapped for the real sections.
 */
.lens-skeleton-bar {
  height: 14px;
  border-radius: 6px;
  margin: 0 0 10px;
  background-color: var(--surface-sunken);
  background-image: linear-gradient(
    90deg,
    var(--surface-sunken) 0%,
    #eef1f4 50%,
    var(--surface-sunken) 100%
  );
  background-size: 200% 100%;
}

.lens-skeleton-bar:last-child {
  margin-bottom: 0;
}

.lens-skeleton-bar-heading {
  width: 40%;
  height: 18px;
  margin-bottom: 14px;
}

.lens-skeleton-bar-short {
  width: 60%;
}

.lens-skeleton-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lens-skeleton-chip {
  display: inline-block;
  width: 72px;
  height: 26px;
  border-radius: 999px;
  background-color: var(--surface-sunken);
  background-image: linear-gradient(
    90deg,
    var(--surface-sunken) 0%,
    #eef1f4 50%,
    var(--surface-sunken) 100%
  );
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .lens-skeleton-bar,
  .lens-skeleton-chip {
    animation: lens-skeleton-shimmer 1.4s ease-in-out infinite;
  }
}

@keyframes lens-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/*
 * Stand-ins for the marketplace cards while marketplace-unified.js is still
 * waiting on api/*-marketplace.php. They borrow the real card's own classes for
 * anything that decides height — the fixed-height title and description, the
 * 96px header, the footer's margin-top:auto — so the grid is its full height
 * from the first paint and the footer below it does not jump when the catalog
 * arrives. index.php renders the first set (includes/marketplace-skeleton.php),
 * the script re-renders them before every later fetch.
 */
.lens-skeleton-panel {
  background-color: var(--surface-sunken);
  background-image: linear-gradient(
    90deg,
    var(--surface-sunken) 0%,
    #eef1f4 50%,
    var(--surface-sunken) 100%
  );
  background-size: 200% 100%;
}

.marketplace-skeleton .lens-card {
  pointer-events: none;
}

.marketplace-skeleton .lens-card-header {
  width: 100%;
}

.marketplace-skeleton .lens-skeleton-title {
  min-height: 3.125rem;
}

.marketplace-skeleton .lens-skeleton-description {
  min-height: 2.76rem;
}

.marketplace-skeleton .lens-skeleton-meta {
  margin-top: 1rem;
}

.marketplace-skeleton .lens-skeleton-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.marketplace-skeleton .lens-skeleton-button {
  display: inline-block;
  width: 5.25rem;
  height: 2rem;
  border-radius: 8px;
}

.marketplace-skeleton .lens-list-image {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .lens-skeleton-panel {
    animation: lens-skeleton-shimmer 1.4s ease-in-out infinite;
  }
}

.lens-detail-questions-block .field-group {
  margin: 0;
}

.lens-detail-questions-block .field-label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.lens-detail-questions-block .note {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

.lens-detail-card .question-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lens-detail-card .question-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.lens-detail-card .question-list-number {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 6px;
}

.lens-detail-card .question-list-text {
  flex: 1;
  min-width: 0;
}

.lens-detail-card .question-list li.question-list-empty {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
}

.lens-detail-card .question-list li.chain-step-item {
  align-items: flex-start;
}

.lens-detail-card .question-list li.chain-step-item.is-seed {
  background: #dcfce7;
  border-color: #86efac;
}

.lens-detail-card .question-list li.chain-step-item.is-final {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.lens-detail-card .question-list-number.is-seed {
  background: var(--success);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  padding: 0.2rem;
}

.chain-step-content {
  flex: 1;
  min-width: 0;
}

.chain-step-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.chain-step-title {
  font-weight: 700;
}

.chain-step-title a {
  color: inherit;
  text-decoration: none;
}

.chain-step-title a:hover,
.chain-step-title a:focus-visible {
  color: inherit;
  text-decoration: none;
}

.chain-step-toggle {
  flex-shrink: 0;
}

.chain-step-description {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}

.chain-step-meta {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.chain-step-dependency-meta {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chain-step-dependency-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.chain-step-dependency-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

.chain-step-dependency-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}

.chain-step-dependency-chip {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: #eef4ff;
  border: 1px solid #d1e0ff;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  line-height: 1.35;
  max-width: 100%;
  word-break: break-word;
}

.chain-step-dependency-chip.is-unknown {
  color: var(--muted);
  background: #f3f4f6;
  border-color: var(--border-cool);
}

.chain-step-dependency-chip.is-none {
  color: #b42318;
  background: #fef3f2;
  border-color: #fecdca;
}

.chain-step-dependency-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5925dc;
  background: #f4f3ff;
  border: 1px solid #e9d7fe;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  line-height: 1.35;
}

.chain-step-questions {
  margin-top: 0.8rem;
}

.chain-step-question-list {
  margin-top: 0;
}

.chain-step-question-list li {
  font-size: 0.95rem;
  font-weight: 500;
  gap: 10px;
  padding: 10px 12px;
}

.chain-step-question-list .question-list-number {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

.lens-detail-sidebar .lens-detail-block:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.lens-detail-block h2,
.lens-detail-block h6 {
  margin-bottom: 1rem;
}

.chain-final-prompt-block + .chain-final-prompt-block {
  margin-top: 1rem;
}

.chain-final-prompt-block h3 {
  margin-bottom: 0.35rem;
}

.lens-detail-list {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 0.65rem 1rem;
  margin: 0;
}

.lens-detail-list-compact {
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
}

.lens-detail-list dt {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.lens-detail-list dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
  min-width: 0;
  word-break: break-word;
}

.persona-detail-list dt {
  font-weight: 700;
  color: var(--ink);
}

.persona-detail-list dd {
  font-weight: 400;
}

.persona-inline-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Not a dt/dd pair — it belongs to the whole list, so it spans both columns. */
.lens-detail-list .persona-attribution-notice {
  grid-column: 1 / -1;
}

.persona-inline-thumb-link {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 8px;
}

.persona-inline-thumb-link:hover {
  opacity: 0.85;
}

.persona-inline-thumb {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 1.6rem;
}

.lens-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lens-detail-tags a.lens-tag {
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.lens-detail-tags a.lens-tag:hover {
  background: var(--border-cool);
  color: var(--muted-strong);
}

/* Same split. These are links into a filtered marketplace, so they are a real tab stop. */
.lens-detail-tags a.lens-tag:focus-visible {
  background: var(--border-cool);
  color: var(--muted-strong);
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lens-category-tag {
  background: #f3f4f6;
  color: #6b7280;
}

.lens-access-tag {
  background: #f3f4f6;
  color: #6b7280;
}

.lens-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.lens-settings-panel #lensSettings {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lens-settings-panel .lens-detail-list {
  gap: 1.1rem 1rem;
}

.lens-settings-panel .lens-detail-list dt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.lens-settings-panel .lens-detail-list dd {
  font-size: 1.125rem;
}

.lens-settings-panel .lens-settings-profile-block .field-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.lens-settings-panel .lens-settings-profile-block .checkbox-row {
  font-size: 1.125rem;
}

.lens-settings-panel .lens-settings-profile-block .lens-access-grid {
  grid-template-columns: max-content max-content;
  justify-content: start;
  column-gap: 3rem;
  row-gap: 1rem;
}

.lens-settings-profile-block .field-group {
  margin: 0;
}

.lens-settings-profile-block .field-label {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.65rem;
}

.lens-settings-profile-block .lens-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.lens-settings-profile-block .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.95rem;
}

.lens-settings-profile-block .checkbox-row input {
  width: auto;
  margin: 0;
}

.profile-read-access-display .lens-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.profile-read-access-display .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.95rem;
}

.profile-read-access-display .checkbox-row input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.profile-read-access-none {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.lens-detail-multiline {
  white-space: pre-wrap;
}

.lens-detail-inline-list {
  margin: 0;
  padding-left: 1.1rem;
}

.lens-detail-inline-list li + li {
  margin-top: 0.25rem;
}

.lens-detail-value {
  white-space: pre-wrap;
}

.lens-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.lens-stat-item {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.75rem;
  text-align: center;
}

.lens-stat-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.lens-stat-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lens-owner-stat-grid {
  margin-top: 0.65rem;
}

.lens-owner-stat-grid .lens-stat-item {
  padding: 0.55rem 0.5rem;
}

.lens-owner-stat-grid .lens-stat-value {
  font-size: 1.05rem;
}

.lens-list-content .lens-owner-stat-grid {
  margin-top: 0.35rem;
  max-width: 14rem;
}

@media (max-width: 575px) {
  .lens-detail-list,
  .lens-detail-list-compact {
    grid-template-columns: 1fr;
  }

  .lens-detail-list dt {
    margin-bottom: -0.35rem;
  }

  .lens-settings-profile-block .lens-access-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .lens-settings-panel .lens-settings-profile-block .lens-access-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

.login-card {
  max-width: 28rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 0.75rem;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e4e7ec;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #d0d5dd;
  color: #344054;
  font-weight: 500;
}

.btn-google:hover,
.btn-google:focus {
  background: var(--surface-sunken);
  border-color: #98a2b3;
  color: #344054;
}

.login-status.success {
  color: #027a48;
}

.login-status.error {
  color: #b42318;
}

.marketplace-auth-bar {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: right;
  line-height: 1.4;
  min-height: 1.25rem;
}

.marketplace-widget-anonymous-note {
  margin: 0;
  width: 100%;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.3;
  text-align: right;
}

.marketplace-widget-anonymous-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.marketplace-widget-anonymous-note a:hover,
.marketplace-widget-anonymous-note a:focus-visible {
  color: var(--ink);
}

.marketplace-auth-bar a {
  color: inherit;
  text-decoration: none;
}

/* In-page anchor targets (e.g. #how-it-works) must clear the sticky header, or
   the heading lands hidden underneath it. The header partial's inline script
   refines this to the header's exact live height; this is the no-JS fallback,
   generous enough to cover the header when it wraps to two rows. On phones the
   header is not sticky (see the mobile block below), so the offset is removed. */
html {
  scroll-padding-top: 7rem;
}

@media (max-width: 767.98px) {
  html {
    scroll-padding-top: 0;
  }
}

.lens-site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.lens-site-brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

.lens-site-brand:hover,
.lens-site-brand:focus-visible {
  color: var(--brand);
  text-decoration: none;
}

.lens-site-nav-right .btn {
  font-size: 0.875rem;
}

.lens-site-nav-right-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.lens-site-nav-right {
  justify-content: flex-end;
  width: 100%;
}

.lens-site-nav-right > .btn,
.lens-site-nav-right > .dropdown,
.lens-site-nav-right > .marketplace-auth-bar {
  flex-shrink: 0;
}

.lens-site-nav-dropdown {
  position: relative;
}

/* The mobile menu toggle: three lines drawn from one element's border, top and
   bottom, plus its own background for the middle bar. Hidden above the phone
   breakpoint, where every nav item fits on the row by itself. */
.lens-site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--ink);
  flex-shrink: 0;
}

.lens-site-nav-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lens-site-nav-toggle-bars,
.lens-site-nav-toggle-bars::before,
.lens-site-nav-toggle-bars::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.lens-site-nav-toggle-bars {
  position: relative;
}

.lens-site-nav-toggle-bars::before,
.lens-site-nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.lens-site-nav-toggle-bars::before {
  top: -6px;
}

.lens-site-nav-toggle-bars::after {
  top: 6px;
}

/* On a desktop the group is just the nav row itself, so it must not introduce a
   wrapping boundary of its own. */
.lens-site-nav-links {
  display: contents;
}

/* The full address is what there is room for on a desktop; the phone block below
   swaps in the part before the @. */
.lens-site-auth-email-short {
  display: none;
}

.lens-site-hover-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 0;
  margin: 0;
}

.lens-site-hover-dropdown.is-open .dropdown-menu,
.lens-site-hover-dropdown:hover .dropdown-menu,
.lens-site-hover-dropdown:focus-within .dropdown-menu {
  display: block;
}

.lens-site-auth {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* The flex display above would otherwise beat the browser's [hidden] rule. */
.lens-site-auth[hidden] {
  display: none;
}

.lens-site-auth-controls {
  justify-content: flex-end;
  flex-shrink: 0;
}

.lens-site-auth-email {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.lens-site-user-menu {
  position: relative;
  flex-shrink: 0;
}

.lens-site-user-trigger {
  cursor: default;
  border-radius: 999px;
  padding: 0.1rem 0.15rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lens-site-user-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lens-site-user-menu-list {
  min-width: 15rem;
  /* Eleven rows outgrow a short phone in landscape, and a menu that runs off the
     bottom hides Log out — the one item nobody can go looking for elsewhere. */
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

.lens-site-user-menu-account {
  color: var(--ink);
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
}

.lens-site-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 0.7rem;
}

@media (max-width: 767.98px) {
  /* The header is not pinned on phones. Wrapped onto three rows it stands ~194px
     tall — about a quarter of the viewport — and pinning that on every screen
     costs more than it is worth, so let it scroll away with the page. */
  .lens-site-header {
    position: static;
  }

  .lens-site-nav {
    align-items: flex-start;
  }

  .lens-site-nav-right-wrap {
    width: 100%;
    align-items: flex-start;
  }

  .lens-site-nav-right {
    width: 100%;
    justify-content: flex-start;
  }

  .marketplace-widget-anonymous-note {
    text-align: left;
  }

  .lens-site-auth {
    text-align: left;
  }

  .lens-site-auth-controls {
    justify-content: flex-start;
  }

  /* The nav buttons sit at the left edge on mobile. Anchor each menu to its own
     trigger so it opens left-aligned directly under the button it belongs to,
     rather than detached at the far right of the row. The menu stays within the
     button's own dropdown wrapper (position: relative by default). */
  .lens-site-hover-dropdown .dropdown-menu {
    left: 0;
    right: auto;
    max-width: calc(100vw - 2rem);
  }

  /* Except the user menu: it is the one trigger at the right end of the row, so
     anchoring it left ran it off the screen and clipped half of every label. */
  .lens-site-user-menu .dropdown-menu {
    left: auto;
    right: 0;
  }

  /* Collapse the nav behind the icon. The panel is an ordinary flex child taking
     the full row width, so it drops below the toggle/user row when open and
     pushes the page down rather than covering it — no overlay, and no height to
     measure. */
  .lens-site-nav-toggle {
    display: inline-flex;
  }

  .lens-site-nav-links {
    display: none;
    order: 10;
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .lens-site-nav-links.is-open {
    display: flex;
  }

  /* Each item spans the panel, so the dropdown toggles read as rows rather than
     as pills of six different widths. */
  .lens-site-nav-links > .btn,
  .lens-site-nav-links > .dropdown {
    width: 100%;
  }

  .lens-site-nav-links .dropdown > .btn {
    width: 100%;
  }

  /* The toggle and the signed-in user share the first row, with the user pushed
     to the far end. */
  .lens-site-nav-right > .lens-site-auth {
    margin-left: auto;
  }

  .lens-site-auth-email-full {
    display: none;
  }

  .lens-site-auth-email-short {
    display: inline;
  }
}

/* Chain flow chart (Drawflow) */
.chain-flow-page {
  max-width: none;
}

.chain-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.chain-flow-card {
  overflow: hidden;
}

.chain-flow-card:fullscreen,
.chain-flow-card:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
}

.chain-flow-card:fullscreen .card-body,
.chain-flow-card:-webkit-full-screen .card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chain-flow-card:fullscreen .chain-flow-canvas,
.chain-flow-card:-webkit-full-screen .chain-flow-canvas {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.chain-flow-toolbar {
  background: #fff;
}

.chain-flow-legend-bar {
  background: #f8fafc;
}

.chain-flow-legend-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.chain-flow-legend-list-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
}

.chain-flow-legend-hint {
  margin-left: auto;
  color: #64748b;
  font-size: 0.8125rem;
}

.chain-flow-canvas {
  width: 100%;
  min-height: 560px;
  height: min(78vh, 860px);
  background: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.08) 1px, transparent 0) 0 0 /
    20px 20px;
  cursor: grab;
  touch-action: none;
}

.chain-flow-canvas.is-panning,
.chain-flow-canvas.is-panning .parent-drawflow {
  cursor: grabbing;
}

.chain-flow-step-detail-panel {
  background: #fff;
}

.chain-flow-canvas-modal {
  min-height: 420px;
  height: min(62vh, 640px);
}

.chain-flow-modal .tags-modal-dialog {
  width: min(96vw, 1120px);
  max-width: none;
}

.chain-flow-modal-body {
  padding-top: 0.75rem;
}

.chain-flow-empty {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.chain-flow-sidebar .card-body {
  position: sticky;
  top: 1rem;
}

.chain-flow-legend-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.chain-flow-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.chain-flow-type-badge.is-lens {
  background: #dbeafe;
  color: #1d4ed8;
}

.chain-flow-type-badge.is-prompt {
  background: #fce7f3;
  color: #be185d;
}

.chain-flow-type-badge.is-data {
  background: #dcfce7;
  color: #15803d;
}

.chain-flow-type-badge.is-final {
  background: #ede9fe;
  color: #6d28d9;
}

.chain-flow-drawflow-node .drawflow_content_node {
  width: 100%;
  padding: 0;
}

.chain-flow-drawflow-node .chain-flow-node {
  width: 100%;
  min-height: 88px;
  padding: 0.55rem 0.65rem;
  box-sizing: border-box;
  overflow: hidden;
}

.chain-flow-drawflow-node.is-seed .chain-flow-node,
.chain-flow-node.is-seed {
  background: #dcfce7;
  border-radius: 8px;
}

.chain-flow-node-number.is-seed {
  color: #15803d;
}

.chain-flow-node-number.is-final {
  color: #6d28d9;
}

.chain-flow-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.chain-flow-node-number {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.chain-flow-node-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chain-flow-node-flag {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 600;
}

.chain-flow-node-flag.is-required {
  background: #f4ebff;
  color: #6941c6;
}

.chain-flow-node-flag.is-conditional {
  background: var(--brand-ground);
  color: var(--brand);
}

/* A step that becomes several. Distinct from the conditional flag on purpose:
   "may not run" and "runs many times" are opposite kinds of surprise, and a node
   can carry both. */
.chain-flow-node-flag.is-repeating {
  background: var(--surface-sunken);
  color: var(--muted-strong);
  border: 1px solid var(--border-cool);
}

.chain-step-required-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f4ebff;
  color: #6941c6;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
}

#drawflow .drawflow-node {
  min-width: 220px;
  width: 220px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

#drawflow .drawflow-node.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

#drawflow .drawflow-node.is-lens {
  border-top: 3px solid #2563eb;
}

#drawflow .drawflow-node.is-prompt {
  border-top: 3px solid #db2777;
}

#drawflow .drawflow-node.is-data {
  border-top: 3px solid var(--success);
}

#drawflow .drawflow-node.is-final {
  background: #f5f3ff;
  border-color: #c4b5fd;
  border-top: 3px solid #7c3aed;
}

#drawflow .drawflow-node.is-final.selected {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.22);
}

.chain-flow-drawflow-node.is-final .chain-flow-node,
.chain-flow-node.is-final {
  background: #f5f3ff;
  border-radius: 8px;
}

#drawflow .drawflow-node.is-seed {
  background: #dcfce7;
  border-color: #86efac;
  border-top: 3px solid var(--success);
}

#drawflow .drawflow-node.is-seed.selected {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.22);
}

#drawflow .drawflow-node .input,
#drawflow .drawflow-node .output {
  width: 10px;
  height: 10px;
  border: 2px solid #64748b;
  background: #fff;
}

#drawflow .connection .main-path {
  stroke: #64748b;
  stroke-width: 2px;
  fill: none;
}

/*
 * The two kinds of wiring a chain can have, told apart.
 *
 * An InData source replaces what a step reads; an addTo edge adds to what it
 * already had. Drawing both as one line put the InData wiring on screen (it was
 * not drawn at all before) while still hiding the difference between them, which
 * is the difference that decides what the model actually sees.
 *
 * Dashed for "replaces", solid for "adds", and the seed's own edges faded, since
 * every step that reads the seed has one and they otherwise dominate the picture.
 *
 * Deliberately not colour. These classes are added by script after drawflow has
 * already painted the connection, and in that situation `stroke` does not restyle
 * — it keeps the value from the base rule even though this rule is later, more
 * specific, and the only other match. `stroke-dasharray` and `opacity` on the very
 * same class do apply, and injecting any new stylesheet makes the colour appear,
 * which is what a stale style cache for that one property looks like. Rather than
 * ship a declaration that silently does nothing, the difference is carried by the
 * two properties that actually render.
 */
#drawflow .connection.is-edge-replaces .main-path {
  stroke-dasharray: 6 4;
}

#drawflow .connection.is-edge-seed .main-path {
  opacity: 0.55;
}

/*
 * A gate edge: the source decides whether the target runs, rather than feeding it
 * anything. Dotted rather than dashed, for the reason given above about colour ---
 * stroke-dasharray is one of the two properties that actually restyle a
 * connection drawflow has already painted.
 */
#drawflow .connection.is-edge-condition .main-path {
  stroke-dasharray: 2 4;
}

.chain-flow-page > .status-bar:empty {
  min-height: 1.5rem;
  margin-bottom: 1rem !important;
}

.chain-flow-page #drawflow .drawflow-node {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.chain-flow-page #drawflow .connection .main-path {
  transition:
    stroke 0.2s ease,
    stroke-width 0.2s ease;
}

.chain-flow-playback-controls {
  padding-right: 0.35rem;
  border-right: 1px solid #e2e8f0;
}

.chain-flow-playback-speed-select {
  width: auto;
  min-width: 5.5rem;
}

.chain-flow-playback-controls.is-running .chain-flow-playback-speed-select {
  opacity: 0.65;
  pointer-events: none;
}

#drawflow .drawflow-node.is-playback-active,
#drawflow .drawflow-node.is-playback-completed {
  background: #dcfce7;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
}

#drawflow .drawflow-node.is-playback-active.is-lens,
#drawflow .drawflow-node.is-playback-completed.is-lens,
#drawflow .drawflow-node.is-playback-active.is-prompt,
#drawflow .drawflow-node.is-playback-completed.is-prompt,
#drawflow .drawflow-node.is-playback-active.is-data,
#drawflow .drawflow-node.is-playback-completed.is-data {
  border-top-color: var(--success);
}

#drawflow .drawflow-node.is-playback-active .chain-flow-node,
#drawflow .drawflow-node.is-playback-completed .chain-flow-node {
  background: transparent;
}

#drawflow .drawflow-node.is-playback-active .chain-flow-node-title,
#drawflow .drawflow-node.is-playback-completed .chain-flow-node-title {
  color: #14532d;
}

#drawflow .connection.is-playback-active .main-path,
#drawflow .connection.is-playback-completed .main-path {
  stroke: #22c55e;
  stroke-width: 2.5px;
}

@media (max-width: 991.98px) {
  .chain-flow-canvas {
    min-height: 420px;
    height: 56vh;
  }

  .chain-flow-legend-hint {
    margin-left: 0;
    width: 100%;
  }
}

/* Dual-track landing: Chrome + Claude */
.track-landing {
  padding-bottom: 0.25rem;
}

.track-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  height: 100%;
}

.track-card-claude {
  border-color: #c7d7fe;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
}

.track-card-title {
  margin-bottom: 0.5rem;
}

.track-card-copy {
  color: #475569;
  margin-bottom: 0.85rem;
}

.track-steps {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
}

.track-steps li + li {
  margin-top: 0.35rem;
}

.track-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.track-shared-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.surface-track-toggle .btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.detail-actions-row .detail-actions-claude-btn {
  margin-left: auto;
}

.detail-sidebar-col {
  align-self: flex-start;
}

.surface-instructions a {
  text-decoration: none;
}

.try-claude-panel {
  border: 1px solid #dbeafe;
  background: #f8fbff;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

.lens-detail-sidebar .try-claude-panel.lens-detail-block {
  padding: 1.35rem 1.4rem 1.45rem;
  margin-top: 1.5rem;
}

.lens-detail-sidebar .try-claude-panel .h6 {
  margin-bottom: 0.75rem;
}

.lens-detail-sidebar .try-claude-panel .form-label {
  margin-bottom: 0.4rem;
}

.try-claude-panel textarea {
  min-height: 7rem;
  resize: vertical;
}

.copy-field-wrap {
  position: relative;
}

.copy-field-wrap .copy-field-btn {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
}

.claude-mcp-url-btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.account-connection-list {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.account-connection-list div {
  display: grid;
  gap: 0.15rem;
}

.account-connection-list dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 0;
}

.account-connection-list dd {
  margin: 0;
}

.account-connection-note {
  font-size: 0.9rem;
  color: #475569;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.profile-editor-shell {
  max-width: 640px;
  margin: 0 auto;
}

.settings-tabs,
.profile-editor-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.settings-tab,
.profile-editor-tab {
  flex: 1;
  border: 0;
  border-radius: 7px;
  padding: 0.6rem 0.8rem;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}

.settings-tab:hover,
.settings-tab:focus-visible,
.profile-editor-tab:hover,
.profile-editor-tab:focus-visible {
  color: var(--brand);
  background: #f8fafc;
}

.settings-tab.active,
.profile-editor-tab.active {
  color: #fff;
  background: var(--brand);
}

.settings-tabs {
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.settings-tab {
  flex: 1 1 8rem;
}

.settings-panel[hidden] {
  display: none;
}

/* Two identical tab bars stacked read as one control that broke. The editor's own
   Profile/Preferences switch is a section of the form under the page tab, so it is
   drawn as the smaller, quieter one. */
.settings-panel .profile-editor-tabs {
  border-color: transparent;
  background: transparent;
  padding: 0;
  gap: 0.5rem;
}

.settings-panel .profile-editor-tab {
  flex: 0 1 auto;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--border);
  font-size: 0.875rem;
}

.profile-editor-section {
  margin-bottom: 1rem;
}

.profile-fields-stack {
  display: grid;
  gap: 0.85rem;
}

.profile-fields-stack .form-label {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.profile-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(8px);
}

.profile-field {
  display: grid;
  gap: 0.4rem;
}

.profile-checkbox-field {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
}

.profile-checkbox-field .form-check-input {
  margin: 0;
}

@media (max-width: 767.98px) {
  .profile-save-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .lens-site-nav-right .btn {
    width: auto;
  }
}

.marketplace-action-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1085;
  width: min(420px, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.marketplace-action-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.marketplace-action-toast.is-success {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.marketplace-action-toast.is-error {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.requires-extension {
  white-space: nowrap;
}

/* Pricing page */
.pricing-hero-lead {
  max-width: 62ch;
  color: #475467;
  font-size: 1.05rem;
}

.pricing-plan-card.is-featured {
  border-color: var(--brand);
  box-shadow: 0 12px 32px rgba(23, 92, 211, 0.12);
}

.pricing-plan-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  color: #101828;
  /* Matches the numeric amount's line box so quoted tiers line up with priced ones. */
  min-height: 2.75rem;
}

/* Monthly/yearly choice on the Pro card. Only rendered while Pro is on sale. */
.pricing-interval-toggle {
  align-self: flex-start;
}

/*
 * Bootstrap gives .btn-group `display: flex`, which beats the browser's own
 * `[hidden] { display: none }` on specificity — so hiding the toggle for an
 * account already on Pro needs saying explicitly or it stays on screen.
 */
.pricing-interval-toggle[hidden] {
  display: none;
}

/* Used instead of currency + amount by tiers that are quoted, not listed. */
.pricing-price-label {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
}

.pricing-price-currency {
  font-size: 1.25rem;
  font-weight: 600;
  align-self: flex-start;
  padding-top: 0.35rem;
}

.pricing-price-amount {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
}

.pricing-price-suffix {
  color: var(--muted);
  font-size: 0.95rem;
  margin-left: 0.25rem;
}

.pricing-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pricing-feature {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.95rem;
}

.pricing-feature-mark {
  color: #12b76a;
  font-weight: 700;
  line-height: 1.5;
}

.pricing-feature.is-excluded {
  color: #98a2b3;
}

.pricing-feature.is-excluded .pricing-feature-mark {
  color: #d0d5dd;
}

.pricing-current-plan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.pricing-usage {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* These blocks are toggled with the `hidden` attribute, so the display rules
   above must not outrank it. */
.pricing-usage[hidden],
.pricing-usage-bar[hidden] {
  display: none;
}

.pricing-usage-item {
  display: grid;
  gap: 0.3rem;
  min-width: 11rem;
}

.pricing-usage-label {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-usage-value {
  font-weight: 600;
  color: #101828;
}

.pricing-usage-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #eaecf0;
  overflow: hidden;
}

.pricing-usage-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--brand);
  transition: width 200ms ease;
}

.pricing-usage-bar.is-full .pricing-usage-bar-fill {
  background: #f79009;
}

.pricing-compare-table th[scope="row"] {
  font-weight: 500;
}

.pricing-compare-table thead th {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/*
 * "Today" vs "Planned" in the comparison header.
 *
 * The distinction is carried by the word, on its own line — not by the colour,
 * which only reinforces it. A reader who cannot tell these apart by shade still
 * has to be able to tell which column they can actually have today.
 */
.pricing-compare-note {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #98a2b3;
}

.pricing-compare-table thead th.is-planned .pricing-compare-note {
  color: #b54708;
}

/* The columns that describe a plan nobody is on yet read one step back. */
.pricing-compare-table thead th.is-planned {
  color: #98a2b3;
}

/*
 * Yes and no in the comparison table.
 *
 * Darker than the #12b76a/#f04438 the plan cards use for their flat marks: these
 * carry white glyphs rather than sitting on white, so they need the contrast the
 * lighter pair does not have.
 */
.pricing-compare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1;
  color: #fff;
}

.pricing-compare-mark.is-yes {
  background: #039855;
}

.pricing-compare-mark.is-no {
  background: #d92d20;
}

@media (max-width: 575.98px) {
  .pricing-current-plan-row,
  .pricing-usage {
    gap: 1rem;
  }

  .pricing-price-amount {
    font-size: 2.25rem;
  }
}

/* Register page ---------------------------------------------------------- */

.register-signup-card {
  max-width: none;
  position: sticky;
  top: 1rem;
}

.register-steps {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
}

.register-steps li + li {
  margin-top: 0.6rem;
}

.register-steps strong {
  color: var(--ink);
}

.register-need-col {
  border: 1px solid #e4e7ec;
  border-radius: 0.75rem;
  padding: 1rem;
  background: #fff;
}

.register-need-free {
  border-color: #d1fadf;
  background: #f6fef9;
}

.register-need-account {
  border-color: #d1e0ff;
  background: #f5f8ff;
}

.register-need-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.register-need-col ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

.register-need-col li + li {
  margin-top: 0.35rem;
}

.register-sent {
  border: 1px solid #d1fadf;
  background: #f6fef9;
  border-radius: 0.75rem;
  padding: 1rem;
}

.register-sent-title {
  font-weight: 600;
  color: #027a48;
}

.register-sent-tips {
  padding-left: 1.1rem;
  margin-bottom: 0;
}

.register-sent-tips li + li {
  margin-top: 0.25rem;
}

.register-faq .accordion-button {
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 0;
  background: transparent;
  box-shadow: none;
}

.register-faq .accordion-button:not(.collapsed) {
  color: var(--brand);
}

.register-faq .accordion-body {
  padding: 0 0 0.75rem;
}

@media (max-width: 991.98px) {
  .register-signup-card {
    position: static;
  }
}

/*
 * The subject-area disclaimer on a lens or a result.
 *
 * Visible but not shouting. It has to be read once and remembered, which a red banner
 * achieves for a week and then becomes furniture — so it is set apart by a rule and a
 * warmer ground, and carries its own icon so it does not depend on colour alone.
 */
.lens-risk-disclaimer {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  background: var(--warning-ground);
  border: 1px solid var(--warning-edge);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--warning-ink);
}

.lens-risk-disclaimer::before {
  /* Decorative: the sentence already says everything, and a screen reader announcing
     "warning sign" before it would add nothing. */
  content: "⚠";
  flex-shrink: 0;
  line-height: 1.4;
}

/*
 * Fork provenance on a lens page.
 *
 * Quieter than the risk disclaimer — it is context, not a caveat — except when the
 * original has moved on, which is the one state a reader may want to act on. Marked by
 * a data attribute rather than a class so the four states read as one thing with a
 * value, and so "behind" cannot be styled without also being announced in the text.
 */
.lens-fork-upstream {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0;
}

.lens-fork-upstream[data-state="behind"] {
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--warning-strong);
  background: var(--warning-ground);
  border-radius: 0.4rem;
  color: var(--warning-ink);
}

/*
 * History label chips.
 *
 * Buttons, not decorated spans: clicking one filters the list, so it has to be reachable
 * by keyboard and announced as something you can activate.
 */
.history-label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.history-label-chip {
  font-size: 0.78rem;
  background: #f3f4f6;
  color: var(--muted-strong);
  border: 1px solid var(--border-cool);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.history-label-chip:hover,
.history-label-chip:focus-visible {
  background: var(--border-cool);
  color: var(--ink);
}

/*
 * The star reads as pressed or not, and says which in words as well as by shape — the
 * brief rules out carrying state in colour alone.
 */
.history-favourite-btn[aria-pressed="true"] {
  border-color: var(--warning-strong);
  color: #92400e;
  background: var(--warning-ground);
}

/* The label editor: a link-styled button that becomes a text box in place. */
.history-label-edit {
  font-size: 0.78rem;
  background: none;
  border: 0;
  color: var(--brand);
  text-decoration: underline;
  padding: 0.2rem 0.2rem;
  cursor: pointer;
}

.history-label-edit:hover,
.history-label-edit:focus-visible {
  color: var(--brand-dark);
}

.history-label-input {
  /* Wide enough for a handful of labels, capped so it does not stretch the card. */
  max-width: 22rem;
}

/*
 * Bootstrap's secondary grey is #6c757d, which clears AA on white at 4.69:1 and fails on
 * this site's --paper ground at 4.42:1 — and --paper is what most of these buttons sit on.
 * A near miss found by the accessibility sweep, not by looking.
 *
 * The border is left as Bootstrap sets it: a 3:1 non-text contrast is the requirement for
 * a control boundary, which it already meets, and darkening it would change the visual
 * weight of every secondary button on the site.
 */
.btn-outline-secondary {
  color: var(--ink-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
  /* Bootstrap inverts to white-on-grey here, which is its own contrast pair and passes. */
  color: var(--surface);
}

/*
 * Links use the brand blue, not Bootstrap's.
 *
 * Bootstrap's #0d6efd meets AA on pure white by exactly 4.50:1 and fails on everything
 * else this site puts behind it — 4.25:1 on --paper, 4.31:1 on --surface-sunken. A default
 * that passes only on the one background we rarely use is a default that fails in
 * practice, and the accessibility sweep found it on two pages before anyone looked.
 *
 * --brand is 5.65:1 on paper and 5.99:1 on white, so it clears AA everywhere and matches
 * the buttons. Bootstrap's own components keep their colours; this is for ordinary prose
 * links.
 */
a {
  color: var(--brand);
}

a:hover,
a:focus-visible {
  color: var(--brand-dark);
}

/*
 * A focus ring for anything that did not get its own. Bootstrap covers its components;
 * plain links, and the handful of controls with bespoke styling, fell through — and a
 * ring is the difference between a keyboard reader knowing where they are and guessing.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/*
 * The per-run profile scope chips on the analyse page.
 *
 * A checkbox styled as a chip rather than a button with aria-pressed: the state is
 * "included or not", which is what a checkbox means, and the platform then supplies
 * the role, the label association, the keyboard handling and the announcement for
 * free. The history chips are buttons because activating one *does* something
 * (filters the list); these only record a choice, so they are inputs.
 *
 * State is carried by border weight and a tick glyph as well as by fill, because
 * colour alone is ruled out — and a reader deciding whether their portfolio is
 * about to be read is exactly who cannot afford to guess.
 */
.analyze-scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.analyze-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-chip);
  background: var(--surface-sunken);
  color: var(--muted-strong);
  border: 1px solid var(--border-cool);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  /* No transition on background: the chip is a statement of fact about what is
     about to be sent, and it should read as changed the instant it is clicked. */
}

/* The native box is hidden but still the thing being operated — focus lands on it,
   so the ring is drawn on the label via :has(). */
.analyze-scope-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.analyze-scope-chip:hover {
  border-color: var(--brand);
}

.analyze-scope-chip:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.analyze-scope-chip:has(input:checked) {
  background: var(--brand-ground);
  border-color: var(--brand);
  border-width: 2px;
  /* Compensate for the thicker border so the row does not reflow on every click. */
  padding: calc(0.25rem - 1px) calc(0.7rem - 1px);
  color: var(--brand-dark);
  font-weight: 600;
}

/* The glyph, so "included" is not carried by colour and weight alone. */
.analyze-scope-chip-mark::before {
  content: "＋";
  font-weight: 700;
}

.analyze-scope-chip:has(input:checked) .analyze-scope-chip-mark::before {
  content: "✓";
}

/* --ink-secondary rather than --muted: 6.09:1 against white where --muted is 4.97,
   and a 4.97 is the near-miss class the sweep spent sixty-six findings on. */
.analyze-scope-chip-hint {
  display: block;
  font-size: var(--text-chip);
  color: var(--ink-secondary);
}

/* The lens picker's live preview on the Create a Dropbox form: a small thumbnail
   (or an initial when the lens has no image), the question count, and a link out. */
.lens-pick-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  font-size: 1.6rem;
}
.lens-pick-preview a {
  text-decoration: none;
}
/* Clamp the target description to a few lines so a long one does not push the form. */
.lens-pick-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dropboxes page: the two-column layout (main + provider-keys sidebar) already
   narrows the create form on desktop. Keep the sidebar in view as the list grows. */
@media (min-width: 992px) {
  .dropbox-keys-sidebar {
    position: sticky;
    top: 1.5rem;
  }
}

/* The Dropbox detail page stacks several cards per column, so they must size to
   their content — unlike .lens-card, which is 100% tall to line grid cards up. */
.dropbox-detail-card {
  height: auto;
  border: 0;
  box-shadow: 0 1px 2px rgba(31, 41, 51, 0.05);
}

/* Run-statistic chips on an owner's Dropbox card. */
.dropbox-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.dropbox-card-stats .dropbox-stat:not(:last-child)::after {
  content: "·";
  margin-left: 0.5rem;
  color: var(--border, #ced4da);
}

/* Owner Dropbox list cards: a white background so each stands out from the page. */
#dropboxList .lens-card {
  background: #fff;
}

/* Drag-and-drop file area on the public Dropbox page. */
.dropbox-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  min-height: 7rem;
  padding: 1.25rem;
  border: 2px dashed var(--border, #ced4da);
  border-radius: 12px;
  background: var(--brand-ground);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.dropbox-drop:hover {
  border-color: var(--brand);
}
.dropbox-drop.is-dragover {
  border-color: var(--brand);
  background: #fff;
}
.dropbox-drop-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
}

/* A Dropbox's own logo on the public page. */
.dropbox-logo {
  max-height: 64px;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* Owner Dropbox cards: quick-actions layout, and a muted look when they can't run. */
.min-w-0 {
  min-width: 0;
}
.dropbox-card--off {
  opacity: 0.7;
  border-left: 3px solid var(--border, #ced4da);
}
.dropbox-empty-icon {
  font-size: 2.5rem;
}

/* Create/edit Dropbox form: sticky action bar and a preview of the visitor's page. */
.dropbox-form-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--paper, #fff);
  border-top: 1px solid var(--border, #e9ecef);
  padding: 0.75rem 0;
  margin-top: 0.5rem;
}
.dropbox-advanced-toggle {
  text-decoration: none;
  font-weight: 600;
}
@media (min-width: 992px) {
  .dropbox-preview-wrap {
    position: sticky;
    top: 1.5rem;
  }
}
.dropbox-preview-card {
  background: var(--brand-ground);
}

/* Lens/chain picker modal cards. */
.target-pick-card {
  border: 1px solid var(--border, #e9ecef);
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.target-pick-card:hover,
.target-pick-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-ground);
}