/* AI and thinking tools, part B. Tokens only; works in light and dark themes. */

.ai-x-gate { display: grid; gap: var(--space-3); }

.ai-x-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.ai-x-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--outline);
}
.ai-x-metric:last-child { border-bottom: 0; }

.ai-x-count {
  min-width: 2.5rem;
  padding: 2px var(--space-3);
  text-align: center;
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--radius-s);
}

.ai-x-cats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ai-x-cat {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  padding: var(--space-3);
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
}
.ai-x-cat h3, .ai-x-cat .h-sub { margin: 0; }

.ai-x-form { display: grid; gap: var(--space-3); }
.ai-x-form textarea,
.ai-x-form input { width: 100%; box-sizing: border-box; }

.ai-x-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--radius-s);
}

.ai-x-chapter { display: grid; gap: var(--space-1); }

.ai-x-steps,
.ai-x-weeks { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.ai-x-step h3,
.ai-x-week .h-sub { margin: 0 0 var(--space-1); }

.ai-x-week { border-inline-start: 4px solid var(--outline); }
.ai-x-week.is-done { border-inline-start-color: var(--good); }

.ai-x-cards { display: grid; gap: var(--space-3); }
.ai-x-tier {
  display: inline-block;
  padding: 2px var(--space-3);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: var(--radius-s);
}
.ai-x-tier-green { border-color: var(--good); }
.ai-x-tier-yellow { border-color: var(--gold); }
.ai-x-tier-orange { border-color: var(--blossom); }

.ai-x-revisit { align-items: center; gap: var(--space-3); margin-top: var(--space-1); }

.ai-x-note { margin-top: var(--space-4); color: var(--ink-faint); }

.ai-x-cat .btn,
.ai-x-plan .btn,
.ai-x-chapter .chip,
.ai-x-revisit .btn { min-height: 44px; }


@media print {
  .ai-x-cat .btn,
  .ai-x-plan .btn { display: none; }
}