/* The review screen. Desktop-first, unusually for this project, and P8-01 says
   why: this is worked at a desk with two hands on a keyboard, not in a foyer
   on a phone. The narrow layout below still works -- it stacks -- but the wide
   one is the one that is designed.

   Everything here is in service of one budget: ten to fifteen seconds for a
   card that needs nothing done to it. That means the image is as large as the
   window allows, the numbers are big enough to read without leaning in, and
   the only things that draw the eye are the ones a person has to act on. A
   line that passed every check should be scannable in peripheral vision.

   Colours come from app.css. `--flag` is "act on this", `--good` is "settled",
   `--warn` is "worth a look" -- the same three meanings they carry everywhere
   else, so a red thing here means what a red thing means on the dashboard. */

main.wide { max-width: 110rem; }

.review-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.review-head h1 { margin-right: auto; }
.review-head .progress { font-size: 0.9rem; color: var(--quiet); }
.help-open {
  background: none;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  color: var(--quiet);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

/* -- the two panes -------------------------------------------------------- */

.review { display: grid; gap: 1rem; outline: none; }

@media (min-width: 62rem) {
  /* The image gets the larger share. It is the evidence; everything in the
     right-hand pane is a claim about it. */
  .review { grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 1fr); }
  .pane.image {
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 1rem);
    overflow: auto;
  }
}

.pane.image img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  cursor: zoom-in;
  transition: transform 0.12s ease-out;
}
/* Click-to-zoom on a region: review.js sets transform-origin to the point that
   was clicked, so the line being squinted at is the line that grows. */
.pane.image img.zoomed { transform: scale(2.4); cursor: zoom-out; }
.provenance { word-break: break-all; }

/* -- the card head -------------------------------------------------------- */

.card-head { border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }
.card-head .where { margin: 0; font-size: 0.85rem; color: var(--quiet); }
.card-head .doctype { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.card-head .reason {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--warn);
}

.datefield {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.35rem;
}
.datefield .value { font-size: 1.5rem; font-weight: 600; }
.datefield.bad .value { color: var(--flag); }
.datefield .raw, .line .raw, .total .raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--quiet);
  background: var(--sunk);
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
}

/* -- the lines ------------------------------------------------------------ */

.block { margin: 1rem 0 0; }
.block h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--quiet);
  margin: 0 0 0.35rem;
}
.lines { list-style: none; margin: 0; padding: 0; }

.line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid transparent;
}
/* Tab moves between these, so the focus ring is doing real navigational work
   and is deliberately loud. */
.line:focus, .total:focus, .datefield:focus {
  outline: none;
  border-color: var(--hue-1);
  box-shadow: 0 0 0 2px var(--hue-1);
}
.line .label { flex: 1; }
.line .value, .total .value {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 600;
  min-width: 3.5rem;
  text-align: right;
}
/* A blank line is not a zero and must never look like one. */
.line.blank { color: var(--quiet); }
.line.blank .value { font-weight: 400; }

.line .note {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--quiet);
}

/* A failed check, beside the number it is about. */
.review .problem {
  flex-basis: 100%;
  margin: 0.15rem 0 0;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--flag-bg);
  color: var(--flag);
  font-size: 0.85rem;
}
.review .problem.refusal { font-weight: 600; }
.line.flagged { background: var(--flag-bg); }

/* -- the totals ----------------------------------------------------------- */

.total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--line);
  border-radius: 0.3rem;
}
.total .label { flex: 1; font-size: 0.9rem; color: var(--quiet); }
.total .computed { font-size: 0.85rem; color: var(--quiet); }
/* Both figures, side by side, and no correction. The card keeps saying what it
   says; this only points out that the parts say something else. */
.total.differs { background: var(--warn-bg); }
.total.differs .computed { color: var(--warn); font-weight: 600; }

/* -- card versus bulletin ------------------------------------------------- */

.conflict {
  margin: 0.75rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.3rem;
  border: 1px solid var(--line);
}
.conflict p { margin: 0 0 0.3rem; }
.conflict.agrees { background: var(--good-bg); border-color: var(--good); }
.conflict.differs { background: var(--warn-bg); border-color: var(--warn); }
.conflict .pair { display: flex; gap: 1.5rem; }
.conflict .side {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.conflict .who {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--quiet);
}

.block.margin pre {
  margin: 0;
  padding: 0.5rem;
  background: var(--sunk);
  border-radius: 0.3rem;
  font-size: 0.85rem;
  white-space: pre-wrap;
}
.block.plan .occ {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  background: var(--sunk);
  border-radius: 0.25rem;
  font-size: 0.75rem;
}
.block.plan .warn { color: var(--warn); }

/* -- editing -------------------------------------------------------------- */

/* A <details>, so the editor is reachable with no script at all: the summary
   is a real disclosure control and the form inside it is a real POST. `E` just
   opens it and puts the cursor in it. */
details.edit summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--quiet);
  list-style: none;
}
details.edit summary::-webkit-details-marker { display: none; }
details.edit[open] { flex-basis: 100%; }
details.edit form { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
details.edit input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.4rem;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  background: var(--field);
  color: var(--ink);
}

/* -- the decisions -------------------------------------------------------- */

.actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.6rem 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.actions form { margin: 0; }
.actions button, .actions .skip {
  min-height: var(--tap);
  padding: 0 1rem;
  border-radius: 0.3rem;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.actions button.accept { border-color: var(--good); color: var(--good); font-weight: 600; }
.actions button.accept:disabled { opacity: 0.45; cursor: not-allowed; }
.actions button.reject { border-color: var(--flag); color: var(--flag); }
.actions .nav { margin-left: auto; display: flex; gap: 0.5rem; }
.actions .nav a { font-size: 1.3rem; text-decoration: none; padding: 0 0.4rem; }

kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.2rem;
  padding: 0 0.25rem;
  color: var(--quiet);
}

/* -- the shortcut list ---------------------------------------------------- */

.shortcuts {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  background: var(--field);
}
.shortcuts h2 { margin-top: 0; font-size: 1rem; }
.shortcuts dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}
.shortcuts dt { text-align: right; }
.shortcuts dd { margin: 0; }

/* -- the queue table ------------------------------------------------------ */

.filters {
  display: flex;
  align-items: end;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}
.filters label { font-size: 0.8rem; color: var(--quiet); display: block; }
.filters select, .filters button {
  min-height: 2.4rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  background: var(--field);
  color: var(--ink);
}

table.queue { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.queue th, table.queue td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.queue th { font-size: 0.75rem; text-transform: uppercase; color: var(--quiet); }
table.queue .num { text-align: right; font-variant-numeric: tabular-nums; }
table.queue .doctype { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
table.queue .why { color: var(--quiet); }
/* Everything below the failures is a glance, and looks like one. */
table.queue tr.rank-clean td { color: var(--quiet); }
.chip {
  display: inline-block;
  margin: 0 0.2rem 0.2rem 0;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--flag-bg);
  color: var(--flag);
  font-size: 0.75rem;
}

/* -- progress ------------------------------------------------------------- */

dl.stats { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; }
dl.stats dt { color: var(--quiet); text-align: right; }
dl.stats dd { margin: 0; font-variant-numeric: tabular-nums; }

/* -- suggested dates ------------------------------------------------------
   Only ever shown on a card whose date could not be read, which is the only
   card that cannot be promoted at all. Each row is a choice with its evidence
   printed beside it: a date offered without a reason is a guess wearing a
   suit, and this screen exists to stop numbers arriving that way. */

.suggestions {
  margin: 0.75rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  background: var(--field);
}
.suggestions .head { margin: 0 0 0.4rem; font-weight: 600; }
.suggestions ol { list-style: none; margin: 0; padding: 0; }
.suggestion {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.suggestion form { margin: 0; }
.suggestion button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  min-height: 2.2rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
}
.suggestion .when { font-variant-numeric: tabular-nums; font-weight: 600; }
.suggestion .dow { font-size: 0.8rem; color: var(--quiet); }
.suggestion .because { flex: 1; font-size: 0.8rem; color: var(--quiet); }

/* An independently sourced figure agrees. The only kind of suggestion this
   screen is willing to look pleased about. */
.suggestion.confident button { border-color: var(--good); color: var(--good); }
.suggestion.confident .because { color: var(--good); }

/* Another staged page already claims this date. Shown, not hidden: the other
   page may be the misdated one, and only somebody looking at both can say. */
.suggestion.claimed button { border-style: dashed; opacity: 0.75; }
.suggestion.claimed .because { color: var(--warn); }

/* -- the other sides of a folded sheet -------------------------------------
   A 1971 bulletin is one sheet scanned front and back, so the masthead that
   dates the issue and the block that carries the figures are often on opposite
   sides. Both neighbours are shown because loose sheets were mixed into the
   stacks: which one is this page's other half is a question for whoever is
   looking at the paper, not for a rule. */
.facing { margin-top: 0.75rem; }
.facing h2 { font-size: 0.8rem; margin: 0 0 0.2rem; }
.facinglist { display: flex; gap: 0.75rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.facinglist li { flex: 1 1 0; min-width: 0; }
.facinglist img {
  width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field);
}
.facinglist .suggestion { margin-top: 0.25rem; }
.facinglist .suggestion button { width: 100%; }

/* Duplicate sits beside Reject but is not a kind of it: rejecting says "read
   this again", and this sheet has already been read. Muted rather than red --
   it is a bookkeeping answer, not a judgement on the reading. */
.actions .duplicate { color: var(--quiet); }

/* Which date this era's "Week of" wants. Three of the four 1971-72 wordings
   name the week itself and one means the week before the issue; that is seven
   days on a real week and invisible afterwards, so the page says which. */
.daterule { margin: 0.2rem 0 0; font-style: italic; }