/* ============================================================================
   OFFIQA — Roundup page stylesheet
   Loads AFTER offiqa-design-v2.css via extra_css.
   Used by: /best/* pages
   ============================================================================ */

/* Roundup intro — evaluation criteria */
.roundup-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-5);
  align-items: center;
}
.criteria-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.3rem;
}

/* Ranked tool card */
.tool-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-4);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tool-card:hover {
  border-color: var(--violet-xl);
  box-shadow: var(--shadow-sm);
}
.tool-card.our-pick {
  border-color: var(--violet-l);
  background: rgba(22, 70, 59, 0.025);
  box-shadow: var(--shadow-sm), 0 0 0 3px rgba(22,70,59,0.08);
}

/* Rank number */
.tool-rank {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}
.tool-card:nth-child(1) .tool-rank,
.tool-card.our-pick .tool-rank {
  border-color: var(--violet-l);
  background: var(--violet-tint);
  color: var(--violet-d);
}

/* Tool info */
.tool-info { min-width: 0; }
.tool-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.our-pick-badge {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tool-tagline { font-size: 0.92rem; color: var(--muted); margin: 0 0 var(--space-3); }

/* Pros / cons inline */
.tool-pros-cons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.tool-pros, .tool-cons {
  padding: var(--space-3);
  border-radius: var(--r-sm);
}
.tool-pros { background: var(--success-soft); border: 1px solid rgba(47,107,74,0.15); }
.tool-cons { background: var(--surface-2); border: 1px solid var(--line-soft); }
.tool-pros h4, .tool-cons h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.tool-pros h4 { color: var(--success); }
.tool-cons h4 { color: var(--muted); }
.tool-pros ul, .tool-cons ul {
  margin: 0; padding-left: 1.1rem;
}
.tool-pros li, .tool-cons li { font-size: 0.85rem; margin: 0.2rem 0; line-height: 1.5; }
.tool-pros li { color: var(--success); }
.tool-cons li { color: var(--muted); }

/* Score / rating area */
.tool-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.score-ring {
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: conic-gradient(var(--violet-l) 0%, var(--line-soft) 0%);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--violet-d);
  border: 2px solid var(--line);
}
.score-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* Summary comparison table */
.roundup-summary-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  margin-top: var(--space-6);
}

@media (max-width: 720px) {
  .tool-card { grid-template-columns: auto minmax(0, 1fr); }
  .tool-score { display: none; }
  .tool-pros-cons { grid-template-columns: 1fr; }
}