/*
 * zodiac-clash-checker.css — per-tool styles for เช็คปีชง.
 * CSP: style-src 'self' — no inline styles anywhere, everything lives here.
 * Colours come from tokens so the tool follows the theme.
 */

/* Birth date: three selects side by side, wrapping to one column on phones. */
.zcc-date-row {
  display: grid;
  grid-template-columns: 5rem 1fr 6.5rem;
  gap: var(--space-2);
}
@media (max-width: 479px) {
  .zcc-date-row { grid-template-columns: 1fr; }
}

.zcc-verdict .badge { font-size: 14px; }
.zcc-headline { margin-top: var(--space-2); }

/* The four answer lines under the verdict badge. */
.zcc-line {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
}
.zcc-line + .zcc-line { margin-top: var(--space-2); }

.zcc-stat-grid { grid-template-columns: 1fr; }

/* Row of the four clashing นักษัตร — always exactly four chips. */
.zcc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.zcc-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 5.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  text-align: center;
}
/* The user's own นักษัตร, so they can spot themselves without reading. */
.zcc-chip.is-mine {
  border-color: var(--blue-300);
  background: var(--blue-50);
  box-shadow: 0 0 0 1px var(--blue-200) inset;
}
.zcc-chip-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.zcc-chip-type { font-size: 12px; color: var(--text-muted); }

/* Ambiguity block: one row per counting convention. */
.zcc-ambig-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.zcc-ambig-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: 14px;
}
.zcc-ambig-label { color: var(--text-muted); }
.zcc-ambig-value { font-weight: 600; color: var(--text-primary); }

/* 12-year grid: it only has four short columns, so it need not force 640px. */
.zcc-grid { min-width: 420px; }
.zcc-grid tbody tr.zcc-row-chong td { background: var(--warning-50); }

.zcc-disclaimer .icon { color: var(--warning-500); }
.zcc-links a { color: var(--text-link); }