/*
 * 读一段话 — one stylesheet for 变味, 点将, 几个意思 and 过目.
 *
 * The shell comes from app.css (page column, topbar, brand mark, the input row,
 * buttons, status line, panel and its head/foot) and this file adds only what
 * those four pages have and the other tools do not: a paste box, a per-line
 * readout with its own picker and bar, the curve, the cast table, and the row of
 * checks. Four pages share it for the same reason they share a controller — the
 * four vocabularies are the only thing that differs, and a rule copied four
 * times is a rule that drifts three ways.
 *
 * The two axes the engine is built on show up here as two groups of rules:
 * `lines` pages get `.lines` / `.curve-wrap` / `.people`, `whole` pages get
 * `.checks`. A page picks up one group and is unaffected by the other.
 */

/* ---------------------------------------------------------------- compose */

/*
 * The paste box, for 变味 and 点将. Line breaks are the input on those two pages
 * — the splitter has nothing to split without them — so the box is a textarea
 * exactly as 摘作业's is, and for the same reason. 几个意思 and 过目 keep the
 * single-line field from app.css: their unit is the whole message, so a newline
 * would mean nothing to the reader.
 */
.compose {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.compose textarea {
  width: 100%;
  padding: var(--s5) var(--s6);
  font: inherit;
  /* 16px, not for looks: iOS zooms a page when a control under 16px takes focus,
     and this control is tapped at the start of every use. */
  font-size: var(--t5);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease);
}

.compose textarea::placeholder {
  color: var(--text-faint);
  /* The placeholder on these pages is two lines of example; without this they
     run together into one sentence once the box is wide enough. */
  white-space: pre-line;
}

.compose textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.compose textarea:disabled {
  opacity: 0.6;
}

/*
 * The example sits left and the action sits right — the same shape 摘作业's
 * compose-foot has, and for the same reason: a preset is a way to avoid the
 * work, the primary button is the work. `margin-right: auto` rather than
 * `space-between` so that when the sample is disabled mid-request it does not
 * drag the primary button leftward with it.
 *
 * These pages need the row because of their input: `.bar` pairs a single-line
 * field with the primary button, and 变味 and 点将 have no bar at all — their
 * input is a textarea. So the sample and the primary button share this row
 * instead, while 几个意思 and 过目 keep the bar and use this row for the sample.
 */
.quick {
  margin-top: 0;
}

.quick .quick-btn {
  margin-right: auto;
}

/*
 * The panel follows the form on these pages, rather than sitting above a pile as
 * it does on 落袋 and 挑食, so it needs a gap above it — app.css only gives it one
 * underneath. Same adjustment 摘作业 makes.
 */
#panel:not([hidden]) {
  margin-top: var(--s6);
}

/* ---------------------------------------------------------------- verdict */

/*
 * The one sentence the page has to say, above the evidence.
 *
 * Read first, and short: 「第 4 句起变味」 / 「这局主要是「附和」」 / 「「在生气」和「在阴阳」
 * 同时都像」. Everything under it is the working — the curve, the rows, the cast
 * table — and it is only there for the person who does not believe the sentence.
 */
.verdict {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0 var(--s3) var(--s5);
}

.sum {
  margin: 0;
  font-size: var(--t5);
  font-weight: 650;
}

.sum span {
  font-size: var(--t3);
  font-weight: 500;
  color: var(--text-dim);
}

.sub {
  margin: 0;
  font-size: var(--t3);
  color: var(--text-dim);
}

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

/*
 * One row per line of the paste, in the order it was pasted — the order is the
 * only structure a chat log reliably has, and re-sorting these by label would
 * throw away the thing 变味 exists to show.
 */
.lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.line {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3);
  border-top: 1px solid var(--border-soft);
}

.line:first-child {
  border-top: 0;
}

.idx {
  flex: 0 0 1.6em;
  font-size: var(--t1);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.said {
  flex: 1;
  min-width: 0;
}

/*
 * The speaker only exists once `looksLikeChat` has said yes over the whole
 * paste, so a row either has a name or is plain prose. Muted rather than bold:
 * the name is how you tell two lines apart, the words are what was read.
 */
.said .who {
  margin-right: var(--s2);
  font-size: var(--t2);
  color: var(--text-dim);
}

.said .words {
  font-size: var(--t4);
}

/* The picker and its bar, held to one width so the bars line up down the page
   and can be compared without reading the numbers. */
.tagged {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s4);
}

/*
 * A select rather than the pills the offline rungs elsewhere use: on these pages
 * every row *can* be edited — that is the degradation ladder, not a fallback —
 * and eight pills on each of twenty-four rows is a page of buttons. The select
 * shows the current reading as text, which is what a reader wants from a row it
 * agrees with.
 */
.pick {
  padding: var(--s1) var(--s2);
  font: inherit;
  font-size: var(--t2);
  color: var(--text-dim);
  background: var(--bg-hover);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}

.pick:hover {
  border-color: var(--border-soft);
}

.pick:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* A row the person set themselves: same words, different provenance. */
.pick[data-manual='true'] {
  color: var(--primary-ink);
  background: var(--primary-soft);
}

/* --------------------------------------------------------------- the bars */

/*
 * Fixed width here, stretching on the checks pages — see `.check .rbar`.
 *
 * On a paste the bar is a footnote to a number that is already written down, and
 * a row of bars of four different lengths reads as four different measurements
 * when they are all percentages of the same thing. Equal tracks, then the length
 * inside does the talking.
 */
.rbar {
  display: block;
  flex: 0 0 56px;
  height: 4px;
  background: var(--bg-sunken);
  border-radius: 999px;
  overflow: hidden;
}

.fill {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}

/* Three bands, the same three `bandOf` reports, so the summary sentence above
   and the bars below cannot disagree. `none` is "no answer", which is why a
   probability of exactly 0 still draws a trace rather than nothing. */
.rbar[data-band='some'] .fill {
  opacity: 0.55;
}

.rbar[data-band='faint'] .fill {
  background: var(--border);
  opacity: 1;
}

.rbar[data-band='none'] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

/* --------------------------------------------------------------- the curve */

/*
 * 变味's whole output: every line placed on the pressure axis, in order.
 *
 * `color` rather than a stroke colour, because the polyline and the dots are
 * drawn with `currentColor` in reading.js — a bare emoji-free SVG has no fill
 * of its own, and one declaration here keeps the line and its points together.
 */
.curve-wrap {
  margin-bottom: var(--s5);
  padding: var(--s5) var(--s4);
  color: var(--brand);
  background: var(--bg-sunken);
  border-radius: var(--radius-lg);
}

.curve {
  display: block;
  width: 100%;
  height: auto;
}

.curve circle {
  fill: currentColor;
}

/* --------------------------------------------------------------- the cast */

.people {
  margin-top: var(--s5);
}

.people h3 {
  margin: 0 0 var(--s3);
  font-size: var(--t2);
  font-weight: 600;
  color: var(--text-dim);
}

.people-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.person {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) var(--s5);
  background: var(--bg-hover);
  border-radius: 999px;
}

.person .who {
  font-size: var(--t3);
  font-weight: 600;
}

/*
 * The role as a badge, the same shape as 闺蜜团's vote badge — here it is the one
 * thing worth finding without reading, because comparing six people's parts is
 * how this page is actually used.
 */
.person .role {
  padding: 1px var(--s3);
  font-size: var(--t1);
  color: var(--primary-ink);
  background: var(--primary-soft);
  border-radius: 999px;
}

.person .n {
  font-size: var(--t1);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- the checks */

/*
 * 几个意思 and 过目: one row per reading, in vocabulary order.
 *
 * Vocabulary order, not sorted by probability, and that is the page's argument:
 * the point of these two tools is that several readings can be true at once, and
 * a list that reorders itself around the highest number teaches the opposite.
 */
.checks {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3);
  border-top: 1px solid var(--border-soft);
}

.check:first-child {
  border-top: 0;
}

/*
 * Wide enough for the longest label in either vocabulary — 「会被读成指责」 and
 * 「在下最后通牒」 are six characters — and not a character wider, because the bar
 * beside it is the part that carries the comparison.
 */
.rlabel {
  flex: 0 0 6.8em;
  font-size: var(--t4);
  color: var(--text-dim);
}

/* Here the bar stretches: it is the reading, not a footnote to a number, and the
   eight of them stacked read as a distribution. */
.check .rbar {
  flex: 1 1 auto;
  min-width: 40px;
}

.rnum {
  flex: 0 0 4.8em;
  font-size: var(--t2);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The reading that carries the sentence above gets its weight back, so the eye
   can find the strong ones without matching numbers to bands. */
.check[data-band='strong'] .rlabel {
  color: var(--text);
  font-weight: 600;
}

.check input[type='checkbox'] {
  flex: none;
  margin: 0;
  accent-color: var(--primary);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 560px) {
  /* Same collapse 闺蜜团 makes, for the same reason: the input here holds a
     pasted message and the button is one word, so the button drops a line. */
  .bar input {
    flex: 1 1 100%;
  }

  .verdict {
    padding: 0 0 var(--s5);
  }

  /* A row wraps its own controls under the words rather than squeezing them:
     measured at 390px, a 24-character line plus a picker and a bar leaves the
     words about ten characters wide. */
  .line {
    flex-wrap: wrap;
  }

  .said {
    flex: 1 1 100%;
  }

  .tagged {
    flex: 1 1 100%;
  }

  .tagged .pick {
    flex: 1;
    min-width: 0;
  }

  .rbar {
    flex: 1 1 auto;
  }

  .check {
    flex-wrap: wrap;
  }

  .rlabel {
    flex: 1 1 auto;
  }

  /* At this width the label takes its own line and the bar keeps the next one
     with its number, which is how the pair is read anyway. */

  .panel-foot {
    flex-direction: column;
  }

  .panel-foot .btn {
    width: 100%;
  }
}