/*
 * enw-codes.css — the live count under a box of book codes.
 *
 * Loaded beside enw-codes.js by every page that takes a pasted list of codes: the
 * promo builder, the shelf and /addbook/. A page-local sheet so it arrives after
 * the four shared ones and can read their custom properties.
 */

.enw-code-meter {
  display: grid;
  gap: var(--enw-sp-2);
  margin-block-start: var(--enw-sp-2);
}

/* The summary carries the verdict: a plain count while there is nothing to
   complain about, green when every code is valid, red when some are not. */
.enw-code-meter__summary {
  margin: 0;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs);
  font-weight: 700;
}

.enw-code-meter__summary.all-valid {
  color: var(--enw-accent-ink, #0f7b3f);
}

.enw-code-meter__summary.has-invalid {
  color: var(--enw-danger, #c62828);
}

.enw-code-meter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--enw-sp-1);
}

/* One code, droppable on its own: the × removes just this one and rewrites the
   box, so a single bad line in a pasted fifty costs a click rather than a re-type. */
.enw-code-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--enw-sp-1);
  padding: 2px var(--enw-sp-2);
  border: 1px solid var(--enw-border);
  border-radius: var(--enw-r-pill);
  background: var(--enw-surface-2);
  color: var(--enw-text);
  font-family: var(--enw-font-mono, ui-monospace, monospace);
  font-size: var(--enw-fs-2xs);
  line-height: 1.6;
}

.enw-code-chip.is-invalid {
  border-color: var(--enw-danger, #c62828);
  color: var(--enw-danger, #c62828);
  text-decoration: line-through;
}

.enw-code-chip__x {
  padding: 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
}

.enw-code-chip__x:hover,
.enw-code-chip__x:focus-visible {
  opacity: 1;
}

.enw-code-meter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--enw-sp-3);
}

.enw-code-meter__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--enw-ink, #1a7a45);
  font: inherit;
  font-size: var(--enw-fs-xs);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.enw-code-meter__warn {
  color: var(--enw-danger, #c62828);
  font-size: var(--enw-fs-2xs);
  font-weight: 700;
}