/* Commercial-use checker. Phone first: the article frame is 311 px on a phone and 700 px on a computer. */

h1 { font-size: 1.25rem; }
h2 { font-size: 1rem; margin: 18px 0 8px; }

.inputs { margin-top: 14px; }
.field { margin: 0 0 12px; }
.field > label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 6px; }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 6px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; vertical-align: 1px;
}
select {
  width: 100%;
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6271' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
}

.result { margin-top: 6px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card { padding: 12px 14px; border: 1px solid var(--line); border-left-width: 5px; border-radius: 10px; background: #fff; }
.card.ok { border-left-color: #2e8b57; }
.card.check { border-left-color: #d9822b; }
.card.stop { border-left-color: #c0392b; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.card-title { font-weight: 700; }
.pill { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; }
.pill.ok { background: #e9f7ef; color: #1f5f3a; }
.pill.check { background: #fff4e5; color: #7a4100; }
.pill.stop { background: #fdecec; color: #8f1f17; }
.card-text { margin: 0; font-size: 0.9375rem; }
.card-text.cancel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--muted); }

.records { margin: 0; padding-left: 22px; font-size: 0.9375rem; }
.records li { margin: 4px 0; }
.cta { margin: 14px 0 0; font-weight: 600; }

.sources { margin-top: 16px; font-size: 0.8125rem; color: var(--muted); }
.sources summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.sources ul { margin: 8px 0 0; padding-left: 18px; }
.sources li { margin: 6px 0; }

@media (min-width: 600px) {
  h1 { font-size: 1.375rem; }
  .cards { grid-template-columns: 1fr 1fr; }
}