/* Copyright Ayers Electronics Inc. All rights reserved. */
/* Report a Problem: one card, big plain rows, one quiet line. */

/* Wider and left-aligned where the shared dialog card is 380px and centred: this card is a list a
   person walks with a remote from the far side of a room, and the narrow version reads too small
   on a television. */
/* 90vh keeps the card inside the television's safe area, 5% clear above and below. */
.report-card {
  width: 520px;
  max-height: 90vh;
  padding: 20px 24px;
  text-align: left;
}
/* The X stands on the choices' right edge, level with the title. */
.report-card .card-x {
  top: 20px;
  right: 24px;
}
.report-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: 56px;
  margin-bottom: 8px;
  font-size: var(--type-heading);
  font-weight: 600;
  line-height: max(1.2em, var(--text-pitch-floor));
  color: var(--text);
}
.report-choices {
  display: flex;
  flex-direction: column;
}
/* Spacing is margins here: the television's WebView draws no flex gap. */
.report-choices > * + * {
  margin-top: 8px;
}
/* The choice and the send button clear the same 44px floor every other control on this page keeps. */
.report-choice {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--panel);
  font-size: var(--type-body);
  font-weight: 600;
  text-align: left;
  color: var(--text);
}
/* The picked one carries the accent fill; the ring is focus, so the two never say the same thing. */
.report-choice[aria-checked="true"] {
  background: var(--accent);
  color: var(--on-accent);
}
.report-note {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: var(--type-label);
  color: var(--text);
}
/* The auto margin takes the row's slack; the padding keeps 10px after the note's word. */
.report-note small {
  margin-left: auto;
  padding-left: 10px;
  font-size: var(--type-micro);
  color: var(--muted);
}
.report-field {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: var(--type-body);
  color: var(--text);
}
.report-send {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
}
.report-quiet {
  margin: 10px 0 0;
  font-size: var(--type-micro);
  line-height: max(1.45em, var(--text-pitch-floor));
  color: var(--muted);
}
/* The question face carries the line only while a failed send says why. */
.report-quiet:empty {
  display: none;
}
/* The quiet line carrying a reason a send failed, in place of what it usually says. */
.report-quiet.report-warn {
  color: var(--error);
}
.report-outcome {
  margin: 0;
  font-size: var(--type-body);
  line-height: max(1.4em, var(--text-pitch-floor));
  color: var(--text);
}
.report-number {
  margin: 8px 0 0;
  font-size: var(--type-label);
  color: var(--muted);
}
/* The preview: what Send is about to post, one line per fact, the same 44px row height as the
   choices above it so the ring reads the same walking either face. */
.report-preview-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.report-preview-list > * + * {
  margin-top: 8px;
}
.report-preview-list li {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--panel);
  font-size: var(--type-body);
  color: var(--text);
  display: flex;
  align-items: center;
}
/* A fact is a stop the remote walks to read, never a control: the ring alone marks it. Plain :focus,
   since the rows take focus only from the key walk. */
.report-preview-list li:focus {
  outline: none;
  box-shadow: var(--focus-ring-outset);
}
.report-preview-actions {
  display: flex;
  margin-top: 14px;
}
.report-preview-actions > * + * {
  margin-left: 10px;
}
.report-preview-actions .report-send,
.report-preview-actions .report-cancel {
  flex: 1;
  margin-top: 0;
}