/* Simple, high-contrast, large-print layout — designed for an elderly,
   non-technical reviewer. No dark mode, no animation, no clutter.
   Deliberately the same visual language as the word review app, so the two
   read as one tool he already knows rather than as two he has to learn. */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: #f5f5f0;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 32px 16px;
}

.progress {
  font-size: 20px;
  color: #666;
  margin-bottom: 24px;
}

.loading {
  font-size: 22px;
  color: #666;
}

.card {
  width: 100%;
  max-width: 720px;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Page number left, position within this rule right. Both are orientation, not
   content, so they stay small and grey. */
.card-head {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  color: #8a8a80;
  margin-bottom: 28px;
}

/* THE CHANGE IS THE QUESTION, so it is the largest thing on the card. */
.change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  font-size: 38px;
  margin: 0 0 28px 0;
  text-align: center;
}

.before {
  color: #8a8a80;
}

.arrow {
  color: #b0b0a6;
  font-size: 30px;
}

.after {
  font-weight: 600;
}

/* The sentence as it now stands, supporting the question rather than competing
   with it. The changed word is marked, but with weight and a soft highlight —
   not colour, which is reserved entirely for the three verdicts. */
.sentence {
  font-size: 23px;
  line-height: 1.55;
  text-align: center;
  color: #3a3a34;
  margin: 0 0 26px 0;
}

.sentence .span {
  font-weight: 600;
  color: #1a1a1a;
  background: #f0efe6;
  border-radius: 4px;
  padding: 1px 5px;
}

.sentence .ellipsis {
  color: #b0b0a6;
}

.rule {
  font-size: 17px;
  color: #8a8a80;
  text-align: center;
  margin: 0 0 30px 0;
}

/* Why a change is being shown again, when it is not simply new. */
.rule .flag {
  display: inline-block;
  margin-top: 8px;
  color: #8a6d00;
}

.verdicts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.verdict {
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  padding: 18px 26px;
  border-radius: 14px;
  border: 3px solid transparent;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 150px;
}

.verdict--approve {
  background: #e6f4e6;
  border-color: #2e7d32;
  color: #1b5e20;
}

.verdict--discuss {
  background: #fdf4d8;
  border-color: #c79a00;
  color: #6d5300;
}

.verdict--decline {
  background: #fbe9e7;
  border-color: #c62828;
  color: #8e1b1b;
}

.verdict:hover {
  filter: brightness(0.96);
}

.verdict[aria-pressed="true"] {
  box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 3px currentColor;
}

/* Shown when he is looking at something he has already answered — via Back, or
   from the summary. Says so plainly rather than leaving the highlighted button
   to carry the whole message. */
.decided {
  font-size: 18px;
  text-align: center;
  color: #666;
  margin: 22px 0 0 0;
}

/* The escalation from "this one" to "all of them". Below a rule so it reads as
   an extra option, never as the expected answer. */
.batch {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px solid #eceae0;
  text-align: center;
}

.batch-btn {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 12px;
  border: 3px solid #2e7d32;
  background: #ffffff;
  color: #1b5e20;
  cursor: pointer;
}

.batch-btn:hover {
  background: #e6f4e6;
}

.batch-note {
  font-size: 16px;
  color: #8a8a80;
  margin: 12px 0 0 0;
}

.nav {
  display: flex;
  gap: 14px;
  margin-top: 26px;
}

.nav-btn {
  font-family: inherit;
  font-size: 19px;
  padding: 13px 26px;
  border-radius: 12px;
  border: 2px solid #cfcfc7;
  background: #ffffff;
  color: #3a3a34;
  cursor: pointer;
}

.nav-btn:hover {
  background: #faf9f4;
}

.nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.nav-btn--primary {
  border-color: #3a3a34;
  font-weight: 600;
}

.link-btn {
  margin-top: 22px;
  font-family: inherit;
  font-size: 18px;
  background: none;
  border: none;
  color: #5a5a52;
  text-decoration: underline;
  cursor: pointer;
}

.card--done {
  text-align: center;
}

.done-message {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

.done-counts {
  font-size: 20px;
  color: #666;
  margin: 0 0 28px 0;
  line-height: 1.7;
}

.card--done .nav-btn {
  margin: 0 7px;
}

.review {
  width: 100%;
  max-width: 720px;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.review-title {
  font-size: 28px;
  margin: 0 0 10px 0;
}

.review-progress {
  font-size: 19px;
  color: #666;
  margin: 0 0 24px 0;
}

.review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 19px;
}

.review-table th,
.review-table td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid #eceae0;
  vertical-align: middle;
}

.review-table th {
  font-size: 16px;
  color: #8a8a80;
  font-weight: 600;
}

.verdict-tag {
  font-size: 17px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.verdict-tag--approve { background: #e6f4e6; color: #1b5e20; }
.verdict-tag--discuss { background: #fdf4d8; color: #6d5300; }
.verdict-tag--decline { background: #fbe9e7; color: #8e1b1b; }

.scope-all {
  font-size: 15px;
  color: #8a8a80;
  display: block;
}

.goto-btn {
  font-family: inherit;
  font-size: 17px;
  padding: 7px 14px;
  border-radius: 9px;
  border: 2px solid #cfcfc7;
  background: #ffffff;
  cursor: pointer;
}

.review-actions {
  margin-top: 26px;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .change { font-size: 30px; }
  .sentence { font-size: 20px; }
  .verdict { font-size: 20px; min-width: 120px; padding: 16px 18px; }
}