/* The form, the progress panel and the verdict were three siblings of `.content`, which spaces
   its own children; wrapped under one element for the controller they need that spacing back.
   `gap` and not margins, so a child the controller hides with [hidden] takes its spacing with
   it and the swap between the panel and the verdict leaves no hole in the page. */
.verify-check-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.verify-check-panel__results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The card takes the width of the content column, so its edges line up with the fact cards and
   the diff below it rather than stopping short of them. Its contents do not: a file input has no
   use for more width than a filename needs, so the control keeps a measure of its own and the
   card carries the alignment. Wrapping rather than a breakpoint, matching .verify-facts. */
.verify-form__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verify-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.verify-form__row .field {
  flex: 1 1 320px;
  max-width: 560px;
}

/* forms.css gives text, number, email and password inputs a border and padding, and file inputs
   nothing, which left this one rendering as a bare native control. */
.verify-form input[type="file"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--color-secondary3);
  border-radius: 8px;
  background: var(--color-white);
  font-size: inherit;
}

.verify-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

/* Sized to its label. `.actions button[type="submit"]` stretches to 100% for the dialog forms it
   was written for, which across this card would be a button the width of the page. */
.verify-form .actions {
  flex: 0 0 auto;
}

.verify-form .actions button[type="submit"] {
  width: auto;
  padding: 10px 28px;
}

.verify-form__hint {
  font-size: 13px;
  color: var(--color-secondary2);
}

.verify-form__error {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-error);
}

/* Greyed rather than disabled: a disabled file input is dropped from the form data, and the
   submission this state describes is already in flight carrying it. Pointer events go with it,
   so the control cannot be changed under a check that is reading the file it names. */
.verify-check-panel[data-verify-checking] .verify-form input[type="file"] {
  color: var(--color-secondary2);
  background: var(--color-secondary4);
  pointer-events: none;
}

.verify-form .actions button[type="submit"]:disabled {
  background-color: var(--color-secondary2);
  box-shadow: none;
  cursor: progress;
}

/* Says the page is working, in the place the verdict is about to appear. The whole panel is the
   indicator: a spinner alone next to unchanged text is what a stalled page also looks like. */

/* `display` on the panel beats the user agent's `[hidden] { display: none }` on specificity
   alone, which left this showing "Checking" on a page where nothing was -- so the attribute is
   honoured explicitly. Same for the results wrapper below. */
.verify-pending[hidden],
.verify-check-panel__results[hidden] {
  display: none;
}

.verify-pending {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 8px;
  border-left: 6px solid var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 10px var(--color-secondary2);
}

.verify-pending__spinner {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 3px solid var(--color-secondary3);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: verify-spin 0.9s linear infinite;
}

/* A rotating ring is motion for its own sake to a reader who has asked for less of it. The
   panel's text carries the message on its own, so the ring just stops. */
@media (prefers-reduced-motion: reduce) {
  .verify-pending__spinner {
    animation: none;
    border-top-color: var(--color-secondary3);
  }
}

@keyframes verify-spin {
  to {
    transform: rotate(360deg);
  }
}

.verify-pending__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.verify-pending__headline {
  font-size: 18px;
  font-weight: 700;
}

.verify-pending__file {
  font-weight: 400;
  word-break: break-all;
}

.verify-pending__detail {
  max-width: 70ch;
  font-size: 14px;
  color: var(--color-secondary2);
}

/* The verdict is the page. It is sized so it cannot be mistaken for a subheading, because
   the answer it carries is the one someone will act on. */
.verify-verdict {
  padding: 20px;
  border-radius: 8px;
  border-left: 6px solid var(--color-secondary2);
  background: var(--color-secondary5);
}

.verify-verdict--good {
  border-left-color: var(--color-success);
  background: #F1F8F3;
}

.verify-verdict--bad {
  border-left-color: var(--color-error);
  background: var(--color-primary5);
}

.verify-verdict--warn {
  border-left-color: var(--color-warning);
  background: #FDF7EA;
}

.verify-verdict__headline {
  font-size: 22px;
  line-height: 1.25;
}

/* The verdict takes focus when it renders so a screen reader reads it out. It is tabindex="-1",
   so script is the only thing that can focus it and there is no keyboard state to signal --
   and Chrome counts a scripted focus as :focus-visible, which drew a ring around the whole
   panel that read as a border on the answer. */
.verify-verdict:focus,
.verify-verdict:focus-visible {
  outline: none;
}

.verify-verdict--good .verify-verdict__headline {
  color: var(--color-success);
}

.verify-verdict--bad .verify-verdict__headline {
  color: var(--color-error);
}

.verify-verdict__detail {
  margin-top: 10px;
  max-width: 70ch;
  color: var(--color-secondary);
}

.verify-verdict__notes {
  margin: 12px 0 0 20px;
  color: var(--color-secondary);
}

.verify-section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 18px;
}

.verify-section__note {
  max-width: 80ch;
  margin-bottom: 12px;
  color: var(--color-secondary2);
}

.verify-section--explainer p {
  max-width: 80ch;
  margin-bottom: 10px;
  color: var(--color-secondary2);
}

.verify-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-white);
  background: var(--color-secondary2);
}

.verify-pill--intact {
  background: var(--color-success);
}

.verify-pill--broken,
.verify-pill--destroyed,
.verify-pill--stripped {
  background: var(--color-error);
}

.verify-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.verify-facts>dl {
  margin: 0;
  background: var(--color-secondary5);
  border: 1px solid var(--color-secondary3);
  border-radius: 8px;
  padding: 12px;
}

.verify-facts dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-secondary2);
}

.verify-facts dd {
  margin-top: 4px;
  overflow-wrap: break-word;
}

.verify-facts__aside {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-secondary2);
}

.verify-facts--signature {
  margin-top: 16px;
}

.verify-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.verify-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 8px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--color-secondary3);
  border-radius: 8px;
  background: var(--color-white);
}

/* A glyph rather than a colour alone: the pass/fail distinction has to survive being
   printed in black and white, which is how a disputed quotation tends to travel. */
.verify-check__mark::before {
  font-weight: 700;
  content: "?";
  color: var(--color-secondary2);
}

.verify-check--pass .verify-check__mark::before {
  content: "\2713";
  color: var(--color-success);
}

.verify-check--fail .verify-check__mark::before {
  content: "\2717";
  color: var(--color-error);
}

.verify-check__state {
  margin-left: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-secondary2);
}

.verify-check__note {
  grid-column: 2;
  font-size: 13px;
  color: var(--color-secondary2);
  overflow-wrap: break-word;
}

/* A quotation's text is a wide fixed-layout table, so the diff scrolls sideways in its own
   box rather than forcing the page to. */
.verify-diff {
  overflow-x: auto;
  border: 1px solid var(--color-secondary3);
  border-radius: 8px;
  background: var(--color-white);
}

.verify-diff table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.verify-diff th {
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-secondary2);
  background: var(--color-secondary4);
  border-bottom: 1px solid var(--color-secondary3);
}

.verify-diff td {
  padding: 2px 10px;
  vertical-align: top;
}

.verify-diff__line,
.verify-diff__mark {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  color: var(--color-secondary2);
  user-select: none;
}

.verify-diff__text {
  white-space: pre;
}

.verify-diff__row--added {
  background: #EAF6EE;
}

.verify-diff__row--added .verify-diff__mark {
  color: var(--color-success);
}

.verify-diff__row--removed {
  background: var(--color-primary5);
}

.verify-diff__row--removed .verify-diff__mark {
  color: var(--color-error);
}