/* ===============================================
   lvrd.ai — Build-the-team section
   Standalone CSS for the interactive team-builder.
   Loaded after site.css.
   =============================================== */

.team {
  padding: 144px 0 128px;
}

.team-head {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 64px;
}
.team-head h2 {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-strong);
  margin: 28px 0 0;
  text-wrap: balance;
  max-width: 14ch;
}
.team-head h2 em {
  display: inline;
  margin: 0;
}
.team-head .intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 48ch;
  margin: 0;
}
.team-head .intro strong {
  color: var(--fg-strong);
  font-weight: 500;
}

/* ---------- Filter chips ---------- */
.team-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  align-items: center;
}
.filter-chip {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);
}
.filter-chip:hover {
  color: var(--fg-strong);
  border-color: var(--smoke-700);
}
.filter-chip[aria-pressed="true"] {
  background: var(--smoke-900);
  border-color: var(--smoke-900);
  color: #FFFFFF;
}
.filter-chip .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  margin-left: 6px;
}
.filter-chip[aria-pressed="true"] .count { color: var(--smoke-400); }

/* Custom chip — slightly distinguished so the user can spot it. */
.filter-chip-custom {
  border-color: var(--smoke-700);
  color: var(--accent);
}
.filter-chip-custom:hover { color: var(--accent-hover); }
.filter-chip-custom[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}

/* ---------- Card groups ---------- */
.team-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-group {
  padding: 0;          /* override the global section { padding: 128px 0 } */
}
.team-group[hidden] { display: none; }
.team-group.cat-hidden { display: none; }

.team-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.team-group-head h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  margin: 0;
  line-height: 1.2;
}
.team-group-head p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.2;
  color: var(--fg-muted);
  margin: 0;
  text-align: right;
  max-width: 40ch;
}
@media (max-width: 600px) {
  .team-group-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .team-group-head p { text-align: left; font-size: 16px; }
}

.team-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 960px) { .team-group-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-group-grid { grid-template-columns: 1fr; } }

.agent-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 22px 18px;
  position: relative;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    background var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default),
    box-shadow var(--duration-fast) var(--easing-default),
    opacity var(--duration-fast) var(--easing-default);
}
.agent-card.hidden { display: none; }
.agent-card:hover {
  border-color: var(--smoke-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.agent-card[data-added="true"] {
  background: color-mix(in oklab, var(--marian) 6%, var(--bg));
  border-color: var(--marian);
}

.agent-name {
  font-size: 19px;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.agent-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0 0 22px;
  flex: 1;
  text-wrap: pretty;
}
.agent-desc em {
  font-size: 1em;
  letter-spacing: 0;
}

.agent-add {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg-strong);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all var(--duration-fast) var(--easing-default);
}
.agent-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.agent-add .add-icon {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  transition: transform var(--duration-default) var(--easing-default);
}
.agent-card[data-added="true"] .agent-add {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}
.agent-card[data-added="true"] .agent-add:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.agent-card[data-added="true"] .agent-add .add-icon {
  transform: rotate(45deg);   /* + becomes × */
}

/* ---------- Custom agent generator (standalone panel) ---------- */
.team-custom {
  background: var(--smoke-900);
  border: 1px solid var(--smoke-900);
  border-radius: var(--radius-md);
  color: var(--smoke-50);
  padding: 28px 32px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 720px) { .team-custom { grid-template-columns: 1fr; gap: 20px; padding: 24px; } }

.team-custom-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.team-custom-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marian-bright);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Brighter breath dot in the dark custom panel — the default accent
   blue is too dark on smoke-900. */
.team-custom .breath-dot {
  background: var(--marian-bright);
}
.team-custom-head h3 {
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
.team-custom-head p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--smoke-400);
  margin: 0;
  max-width: 32ch;
}

.custom-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.custom-input {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  transition: border-color var(--duration-fast) var(--easing-default);
}
.custom-input::placeholder {
  color: var(--smoke-500);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
}
.custom-input:focus {
  outline: none;
  border-color: var(--marian-bright);
}
.custom-input.err { border-color: oklch(0.65 0.18 28); }

.custom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.custom-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--smoke-500);
  letter-spacing: 0.04em;
}
.custom-generate {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--marian-lift);
  background: var(--marian-lift);
  color: var(--smoke-900);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--duration-fast) var(--easing-default);
}
.custom-generate:hover {
  background: var(--marian-bright);
  border-color: var(--marian-bright);
  gap: 12px;
}
.custom-generate:disabled {
  background: var(--smoke-700);
  border-color: var(--smoke-700);
  color: var(--smoke-500);
  cursor: wait;
}
.custom-generate .spinner {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  animation: cust-spin 0.8s linear infinite;
}
.custom-generate.loading .label { opacity: 0.6; }
.custom-generate.loading .spinner { display: inline-block; }
.custom-generate.loading .arrow { display: none; }
@keyframes cust-spin { to { transform: rotate(360deg); } }

/* Generated agent cards land styled the same as presets, but get
   a Custom badge in the slot where the category sits. */
.agent-card.is-generated .agent-cat { color: var(--marian-bright); }
.agent-card.is-generated::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--marian-lift);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

/* ---------- Roster summary ---------- */
.team-roster {
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  transition:
    background var(--duration-default) var(--easing-default),
    border-color var(--duration-default) var(--easing-default);
}
.team-roster[data-has-team="true"] {
  background: var(--smoke-900);
  border-color: var(--smoke-900);
  color: var(--smoke-50);
}

.roster-meta {
  display: flex;
  align-items: baseline;
  gap: 20px;
  min-width: 0;
  flex: 1;
}
.roster-count {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
.team-roster[data-has-team="true"] .roster-count { color: #FFFFFF; }

.roster-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.roster-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.team-roster[data-has-team="true"] .roster-label { color: var(--smoke-400); }

.roster-list {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: var(--fg-muted);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  letter-spacing: -0.005em;
}
.team-roster[data-has-team="true"] .roster-list { color: var(--smoke-200); }
.roster-list:empty::before {
  content: "Pick the work you'd hand off.";
  color: var(--fg-faint);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 15px;
}
.roster-item { display: inline; }
.roster-item:not(:last-child)::after {
  content: " ·";
  color: var(--fg-faint);
  margin-left: 2px;
}

.roster-cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--fg-on-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: gap var(--duration-fast) var(--easing-default), background var(--duration-fast) var(--easing-default);
}
.roster-cta:hover { background: var(--accent-hover); gap: 14px; }
.team-roster[data-has-team="true"] .roster-cta {
  background: var(--marian-lift);
  border-color: var(--marian-lift);
  color: var(--smoke-900);
}
.team-roster[data-has-team="true"] .roster-cta:hover {
  background: var(--marian-bright);
  border-color: var(--marian-bright);
}
.team-roster[data-has-team="false"] .roster-cta {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .team { padding: 96px 0; }
  .team-head { grid-template-columns: 1fr; gap: 24px; }
  .team-head .intro { max-width: 60ch; }
  .team-roster { padding: 20px 22px; gap: 20px; }
  .roster-meta { width: 100%; }
}
@media (max-width: 720px) {
  /* Filter chips — let them flow off the right edge so the user can
     swipe through categories instead of the row eating two lines and
     pushing the cards way down. Hide the scrollbar. Edge alignment
     (negative margin + padding to match container) is handled in the
     560 / 561+ sub-rules below. */
  .team-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-top: 4px;
    padding-bottom: 12px;
    margin-bottom: 24px;
    /* Trail a small fade off the right edge so the cut-off chip reads
       as "swipe for more" rather than "the row is broken." */
    -webkit-mask-image: linear-gradient(to right,
      black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right,
      black calc(100% - 32px), transparent 100%);
    scrollbar-width: none;
  }
  .team-filters::-webkit-scrollbar { display: none; }
  .filter-chip {
    scroll-snap-align: start;
    flex-shrink: 0;
    min-height: 40px;     /* tap target */
  }

  /* Agent grids — convert to horizontal scroll-snap carousels so each
     category is one swipeable row instead of a 3-tall vertical scroll.
     User scrolls VERTICALLY through categories, HORIZONTALLY through
     agents within a category. Far more consumable on a phone than 18
     stacked cards. */
  .team-group-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding-top: 4px;
    padding-bottom: 16px;
    scrollbar-width: none;
    /* Stop the iOS rubber-band from bouncing the whole page when the
       user reaches an end of the carousel. */
    overscroll-behavior-x: contain;
  }
  .team-group-grid::-webkit-scrollbar { display: none; }
  .agent-card {
    /* ~78vw shows one full card + a sliver of the next, the universal
       "this is a carousel" tell. Cap so big phones don't blow it up. */
    flex: 0 0 78vw;
    max-width: 320px;
    min-width: 240px;
    scroll-snap-align: start;
    padding: 20px 20px 16px;
  }
  /* The hover lift is a desktop affordance — turn it off on touch so
     the card doesn't visibly jolt when you finish a swipe. */
  .agent-card:hover { transform: none; box-shadow: none; }

  /* Group header gets a count chip on the right so the user sees how
     many cards live behind the swipe. Generated via CSS counter from
     the chip counts on the filter bar — fall back: leave native h3. */
  .team-group-head { padding-bottom: 12px; margin-bottom: 14px; }

  /* Custom panel — pull padding in, hint stays inline. */
  .team-custom { padding: 22px 20px; margin-bottom: 28px; }
  .team-custom-head h3 { font-size: 20px; }
  .custom-input { font-size: 16px; /* don't trigger iOS zoom */ }
  .custom-generate { padding: 12px 18px; min-height: 44px; }

  /* Roster summary — make the CTA full-width and stack the count
     beside the label rather than under it. */
  .team-roster {
    padding: 20px 22px;
    flex-direction: column;
    align-items: stretch;
  }
  .roster-meta { gap: 16px; }
  .roster-cta { width: 100%; justify-content: center; min-height: 48px; }

  /* Tap target floor for the add-button on agent cards. */
  .agent-add { padding: 12px 14px; min-height: 44px; font-size: 14px; }
}
@media (max-width: 560px) {
  /* Container drops to 20px padding at this width — sync the chip
     and carousel bleeds so they still align flush to the section edge. */
  .team-filters {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .team-group-grid {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-left: 20px;
  }
  .team-group-head { padding-bottom: 10px; margin-bottom: 10px; }
  .team-group-head h3 { font-size: 20px; }
}
@media (max-width: 720px) and (min-width: 561px) {
  /* At 561-720px the container uses 32px padding — match it. */
  .team-filters {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .team-group-grid {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
    scroll-padding-left: 32px;
  }
}

/* ---------- Industry filter ---------- */
.industry-filter {
  margin-bottom: 32px;
}
.industry-filter-label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-muted);
  margin: 0 0 12px;
}
.industry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.industry-chip {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);
}
.industry-chip:hover {
  color: var(--fg-strong);
  border-color: var(--smoke-700);
}
.industry-chip[aria-selected="true"] {
  background: var(--marian);
  border-color: var(--marian);
  color: #FFFFFF;
}

/* ---------- Industry recommendation bar ---------- */
.industry-rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 16px;
  background: color-mix(in oklab, var(--marian) 8%, var(--bg));
  border: 1px solid color-mix(in oklab, var(--marian) 20%, var(--border));
  border-radius: var(--radius-sm);
}
.industry-rec[hidden] { display: none; }
.industry-rec-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--fg-muted);
}
.industry-rec-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--marian);
  background: var(--marian);
  color: #FFFFFF;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--easing-default);
}
.industry-rec-btn:hover {
  background: var(--marian-lift);
  border-color: var(--marian-lift);
}

/* ---------- Industry dimmed state ---------- */
.agent-card.industry-dimmed {
  opacity: 0.4;
}
.agent-card.industry-dimmed:hover {
  opacity: 0.65;
}

/* ---------- Industry filter — responsive ---------- */
@media (max-width: 720px) {
  .industry-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-top: 4px;
    padding-bottom: 12px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    scrollbar-width: none;
  }
  .industry-chips::-webkit-scrollbar { display: none; }
  .industry-chip {
    scroll-snap-align: start;
    flex-shrink: 0;
    min-height: 40px;
  }
  .industry-rec {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
  }
  .industry-rec-btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
  }
}
@media (max-width: 560px) {
  .industry-chips {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 720px) and (min-width: 561px) {
  .industry-chips {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }
}