/* ============================================================
   Roundup page — supplemental utilities
   Only loaded on /best/* and /admin/roundups/* preview pages.
   These utilities are not present in the purged tailwind.min.css
   so we define them here. Never run `npm run build:css` —
   that breaks the whole site. Add new classes here instead.
   ============================================================ */

/* ── Tool card title ── */
.tool-card-title {
  font-size: 2.125rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 0.25rem !important;
  line-height: 1.2 !important;
}

/* ── Tool screenshot ── */
.tool-screenshot {
  width: 100% !important;
  height: 280px !important;
  max-height: 280px !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* ── Sizing ── */
.w-7  { width:  1.75rem; }
.h-7  { height: 1.75rem; }
.w-8  { width:  2rem; }
.h-8  { height: 2rem; }
.w-9  { width:  2.25rem; }
.h-9  { height: 2.25rem; }
.w-10 { width:  2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width:  3rem; }
.h-12 { height: 3rem; }
.w-72 { width: 18rem; }

/* ── Gap ── */
.gap-1   { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-3   { gap: 0.75rem; }
.gap-6   { gap: 1.5rem; }

/* ── Object fit ── */
.object-contain { object-fit: contain; }
.object-cover   { object-fit: cover;   }

/* ── Flex direction responsive ── */
@media (min-width: 640px) {
  .sm\:flex-row  { flex-direction: row; }
  .sm\:gap-8     { gap: 2rem; }
  .sm\:w-64      { width: 16rem; }
  .sm\:text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:p-8       { padding: 2rem; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:col-span-2  { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .lg\:flex-row   { flex-direction: row; }
  .lg\:w-80       { width: 20rem; }
  .lg\:w-72       { width: 18rem; }
  .lg\:sticky     { position: sticky; }
  .lg\:top-20     { top: 5rem; }
  .lg\:self-start { align-self: flex-start; }
}
@media (min-width: 1280px) {
  .xl\:gap-16 { gap: 4rem; }
}

/* ── Space-y ── */
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }

/* ── Leading / line-height ── */
.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }

/* ── Truncate ── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Shrink ── */
.shrink-0 { flex-shrink: 0; }

/* ── Overflow ── */
.overflow-x-auto { overflow-x: auto; }
.overflow-hidden  { overflow: hidden; }

/* ── Min-width ── */
.min-w-0 { min-width: 0; }

/* ── Flex-wrap ── */
.flex-wrap { flex-wrap: wrap; }

/* ── Items alignment ── */
.items-start { align-items: flex-start; }

/* ── justify ── */
.justify-end { justify-content: flex-end; }

/* ── Gradient ── */
.from-indigo-600 { --tw-gradient-from: #4f46e5; }
.to-purple-600   { --tw-gradient-to:   #9333ea; }
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* ── Shadow ── */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* ── Rounded ── */
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded     { border-radius: 0.25rem; }

/* ============================================================
   Roundup page custom components
   ============================================================ */

.roundup-prose { font-size: 1.0625rem; line-height: 1.8; color: #374151; }
.roundup-prose p { margin-top: 0; margin-bottom: 1.25em; }

.trust-badge {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 1rem; border: 1px solid #e5e7eb;
  border-radius: 0.75rem; background: #fff;
}
.trust-badge i { font-size: 1.25rem; flex-shrink: 0; }

.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cmp-table th {
  background: #fff; padding: 0.625rem 0.875rem; text-align: left;
  font-size: 0.75rem; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid #e5e7eb; white-space: nowrap;
}
.cmp-table td { padding: 0.625rem 0.875rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; background: #fff; }
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table tr:hover td { background: #f5f3ff; }
.cmp-table .tool-col { min-width: 140px; }

.stars-row { display: flex; align-items: center; gap: 1px; }
.star-full  { color: #f59e0b; font-size: 0.75rem; }
.star-half  { color: #f59e0b; font-size: 0.75rem; }
.star-empty { color: #d1d5db; font-size: 0.75rem; }

/* Tool card on public roundup page */
.tool-card-public {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem;
  padding: 1.25rem 1.5rem; transition: box-shadow 0.2s, border-color 0.2s;
}
.tool-card-public:hover { box-shadow: 0 4px 20px rgba(99,102,241,0.1); border-color: #c7d2fe; }

/* Rank badge */
.rank-badge {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(99,102,241,0.35);
}

/* Tool logo inside cards */
.tool-logo {
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
  object-fit: contain; border: 1px solid #f3f4f6; flex-shrink: 0;
}
.tool-logo-fallback {
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
  background: #ede9fe; display: flex; align-items: center; justify-content: center;
  color: #6d28d9; font-weight: 700; font-size: 1rem; flex-shrink: 0;
}

/* Rating block */
/* Rating badge — inline pill used in comparison table and tool cards */
.rating-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-width: 2px;
  border-style: solid;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.35);
}
.rating-badge--lg {
  font-size: 1.375rem;
  padding: 0.375rem 0.9rem;
  border-radius: 0.6rem;
  gap: 0.1rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.35);
}
.rating-badge-denom { font-size: 0.6em; font-weight: 600; opacity: 0.7; margin-left: 1px; }
.rating-badge--excellent  { background: #059669; color: #fff; border-color: #047857; box-shadow: 0 2px 8px rgba(5,150,105,0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
.rating-badge--very-good  { background: #2563eb; color: #fff; border-color: #1d4ed8; box-shadow: 0 2px 8px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
.rating-badge--good       { background: #7c3aed; color: #fff; border-color: #6d28d9; box-shadow: 0 2px 8px rgba(124,58,237,0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
.rating-badge--fair       { background: #6b7280; color: #fff; border-color: #4b5563; box-shadow: 0 2px 6px rgba(107,114,128,0.3), inset 0 1px 0 rgba(255,255,255,0.15); }
.rating-badge--excellent.rating-badge--lg { box-shadow: 0 4px 14px rgba(5,150,105,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
.rating-badge--very-good.rating-badge--lg  { box-shadow: 0 4px 14px rgba(37,99,235,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
.rating-badge--good.rating-badge--lg       { box-shadow: 0 4px 14px rgba(124,58,237,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
.rating-badge--fair.rating-badge--lg       { box-shadow: 0 4px 12px rgba(107,114,128,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
/* Legacy selectors kept for any older references */
.rating-num { font-size: 1.5rem; font-weight: 700; color: #4338ca; line-height: 1; }
.rating-denom { font-size: 0.875rem; color: #9ca3af; }

/* Sidebar TOC */
.toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc-list li { counter-increment: toc; }
.toc-list li a {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.4rem 0;
  font-size: 0.875rem; color: #4b5563; text-decoration: none; transition: color 0.15s;
}
.toc-list li a:hover { color: #6366f1; }
.toc-list li a::before {
  content: counter(toc); min-width: 1.25rem; height: 1.25rem;
  background: #ede9fe; color: #6366f1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}

/* FAQ */
.faq-item details summary { cursor: pointer; list-style: none; }
.faq-item details summary::-webkit-details-marker { display: none; }
.faq-item details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.2s; }

/* Tag pills */
.tag-pill {
  display: inline-flex; align-items: center; padding: 0.2rem 0.55rem;
  background: #ede9fe; color: #6d28d9; border-radius: 999px;
  font-size: 0.7rem; font-weight: 500; white-space: nowrap;
}

/* Meta row icons */
.meta-icon { color: #a5b4fc; margin-right: 0.25rem; }

/* Section anchor */
.section-anchor { scroll-margin-top: 80px; }

/* Methodology grid */
.method-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
  padding: 1rem; text-align: center;
}
.method-icon {
  width: 2.5rem; height: 2.5rem; background: #ede9fe; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.75rem;
  font-size: 1rem; color: #6366f1;
}

/* Badge chip on card */
.badge-chip {
  display: inline-block; padding: 0.125rem 0.5rem;
  background: #fef3c7; color: #b45309;
  border-radius: 9999px; font-size: 0.7rem; font-weight: 600;
}

/* Divider */
.section-divider { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }

/* Rendered markdown inside tool cards */
.roundup-tool-desc p        { margin: 0 0 0.65em; }
.roundup-tool-desc p:last-child { margin-bottom: 0; }
.roundup-tool-desc strong, .roundup-tool-desc b { color: #1f2937; font-weight: 700; }
/* Section sub-headings (p containing only a bold element) */
.roundup-tool-desc p > strong:only-child,
.roundup-tool-desc p > b:only-child {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.2rem;
}
.roundup-tool-desc em { font-style: italic; }
.roundup-tool-desc h1, .roundup-tool-desc h2,
.roundup-tool-desc h3, .roundup-tool-desc h4 {
  font-size: 0.925rem; font-weight: 700; color: #1f2937;
  margin: 0.9rem 0 0.3rem;
}
.roundup-tool-desc h1:first-child,
.roundup-tool-desc h2:first-child,
.roundup-tool-desc h3:first-child { margin-top: 0; }

/* Feature lists inside tool descriptions */
.roundup-tool-desc ul {
  list-style: none;
  margin: 0.25rem 0 0.75rem 0;
  padding: 0;
}
.roundup-tool-desc ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.6;
}
.roundup-tool-desc ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: #6366f1;
  font-size: 1rem;
  line-height: 1.6;
}

/* Read-more collapse */
.tool-desc-collapsed .desc-overflow { display: none; }
.tool-desc-expanded  .desc-overflow  { display: block; }
.read-more-btn {
  background: none; border: none; padding: 0;
  color: #4f46e5; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; margin-top: 0.25rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.read-more-btn:hover { color: #3730a3; }