/* /secret-santa-exclude-couples only: the "Will these rules work?" checker
   and the counted table. Colours from site.css tokens, so dark mode follows. */

.ex-title {
  font: 600 1.3rem/1.2 var(--serif); color: var(--ink);
  margin: 0 0 0.9rem; letter-spacing: -0.005em;
}
.ex-check textarea { min-height: 7.5rem; font-size: 1rem; }
.ex-check #ex-list-help { margin: 0.4rem 0 0.75rem; }

.ex-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 0.75rem; }
.ex-try-label {
  color: var(--muted); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.08em; font-variant-caps: all-small-caps; margin-right: 2px;
}
.ex-try button { padding: 4px 12px; font-size: 0.92rem; }

.ex-oneway { margin: 0 0 0.9rem; }
.ex-oneway[open] { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem; }
.ex-rule-add { display: grid; gap: 0 12px; grid-template-columns: 1fr; align-items: end; margin-top: 0.5rem; }
.ex-rule-add > button { justify-self: start; margin-bottom: 0.75rem; }
@media (min-width: 560px) {
  .ex-rule-add { grid-template-columns: 1fr 1fr auto; }
}
.ex-rule-msg:empty { display: none; }
.ex-rules { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.ex-rules li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
  padding: 4px 0; border-bottom: 1px solid var(--line);
}
.ex-rules li > span { flex: 1 1 12rem; }
.ex-rules .ex-missing { flex-basis: 100%; order: 3; margin: 0; }

/* The answer: a sheet laid on the card, with the count in red ink. */
.ex-result {
  background: var(--tag-2); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 14px 4px; margin: 0.25rem 0 0.5rem;
}
.ex-count { margin: 0 0 0.35rem; font-size: 1.05rem; }
.ex-count strong {
  font: 600 2rem/1.1 var(--serif); color: var(--name); letter-spacing: -0.01em;
  margin-right: 0.3rem; font-variant-numeric: lining-nums;
}
.ex-count sup { font-size: 0.55em; }
.ex-warn { color: var(--warn-ink); background: var(--warn-soft); border-radius: var(--radius); padding: 6px 10px; }

.ex-nojs { display: none; }
@media (scripting: none) { .ex-nojs { display: block; } }

.ex-check .actions { margin-top: 0.5rem; }
.ex-check .actions + .help { margin: 0.5rem 0 0; }

/* The counted table: the numbers column never wraps its figures. */
.ex-table td:last-child { white-space: normal; }
.ex-table td:first-child { white-space: nowrap; }
@media (max-width: 420px) {
  .ex-table th, .ex-table td { padding: 8px 8px; font-size: 0.92rem; }
}