/* 筛选、候选检索式的节、暂停停止、关键词组、折起的步骤。从 w7_style.css 拆出来, 页面按顺序加载。 */

/** --- the screening step --- */

/** Figures rather than a table: five or six numbers side by side, wrapping on a narrow screen,
    each with the denominator under it so a per cent is never left to be guessed at. */
.counts { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 4px; }
.figure {
  flex: 1 1 150px; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: var(--bg);
}
.figure b { display: block; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.figure span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.figure i { display: block; margin-top: 2px; font-size: 12.5px; color: var(--accent); font-style: normal; }

/** One record at a time, and nothing on it says what the model decided. */
.record {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 16px 18px; margin: 10px 0 14px; background: var(--bg);
}
.record h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.record .meta { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.record .abstract { margin: 0; line-height: 1.6; white-space: pre-wrap; }

#criterion { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.55; }
#disagreed td:first-child { font-weight: 550; }

ul#bill-invoices { list-style: none; margin: 12px 0 0; padding: 0; }
ul#bill-invoices li { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; font-size: 14px; }
ul#bill-invoices a { color: var(--accent); font-weight: 550; }
ul#bill-invoices span { color: var(--muted); font-size: 13.5px; }

.mock { margin: 0; }
.mock-cap {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12.5px; color: #9aa2c4;
}
.mock-tag {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 650;
  color: #cfd3ff; background: rgba(124, 108, 255, 0.3); border-radius: 999px; padding: 2px 8px;
}


/** --- candidates as sections --- */

/** The table these replaced put six synonyms into one column and clipped them. A section is as
    wide as the window, so a group wraps down the page instead of sideways. */
.cands { display: flex; flex-direction: column; gap: 14px; }
.cand {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; background: var(--panel);
}
.cand.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cand.skipped { opacity: 0.55; }
.cand header { display: flex; align-items: center; gap: 12px; }
.cand header b { font-size: 16px; }
.cand .intent { margin: 6px 0 12px; color: var(--muted); font-size: 13.5px; }
.cand .groups { display: flex; flex-direction: column; gap: 8px; }
.group { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.group .glue {
  flex: 0 0 auto; min-width: 78px; font-size: 12.5px; color: var(--muted);
  text-transform: lowercase; letter-spacing: 0.02em;
}
.chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.term {
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
  font-size: 13px; background: var(--bg);
}
.term.dead { text-decoration: line-through; color: var(--warn); border-color: var(--warn); }
.chips i { font-style: normal; font-size: 11.5px; color: var(--muted); padding: 0 2px; }
.group.allDead .glue { color: var(--warn); }
.cand .editor { margin-top: 10px; }
.cand .editor textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.cand .counts { margin-top: 14px; }

.confirmbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
}
.confirmbar span { font-size: 13.5px; }


/** --- a step you can pause or stop, and counts that fill the width --- */

.progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.progress .ptext { flex: 1 1 220px; }
.jobctl { display: flex; gap: 8px; flex: 0 0 auto; }
.progress.paused .bar span { opacity: 0.45; }
.progress.paused .ptext { color: var(--warn); }

/** Rows, not cells: the name at one end, the number at the other, leaders between them. On a
    narrow screen the row simply gets shorter, where a table would have needed sideways scroll. */
.srclist { list-style: none; margin: 12px 0 0; padding: 0; }
.srclist li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.srclist li:last-child { border-bottom: none; }
.srclist .src { flex: 0 0 auto; }
.srclist .dots { flex: 1 1 24px; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.srclist .n { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 650; font-size: 15px; }
.srclist .why { flex: 1 0 100%; font-size: 12.5px; color: var(--muted); }
.srclist li.err .n { color: var(--warn); font-weight: 500; }
.srclist li.rate .n { color: var(--accent); }

.progress.stopping .ptext { color: var(--warn); }
.progress button[disabled] { opacity: 0.5; cursor: default; }


/** --- a keyword group is a block, and the AND between two of them is drawn --- */

.cand .groups { display: flex; flex-direction: column; gap: 0; }

.group {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
}
.group .glue {
  flex: 0 0 auto; font-size: 12px; color: var(--muted);
  letter-spacing: 0.02em; text-transform: none;
}
.group.allDead { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--bg)); }
.group.allDead .glue { color: var(--warn); }

/** A rule with the word sitting in it: the two groups either side both have to be satisfied. */
.andline { display: flex; align-items: center; gap: 12px; padding: 0 6px; margin: 0; }
.andline::before, .andline::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--line);
}
.andline span {
  flex: 0 0 auto; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); font-weight: 650; padding: 6px 0;
}

.term { background: var(--panel); }

/* a candidate card folded: the name, the numbers, and a control to open it */
.cand > header[data-fold] {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border-radius: 10px; padding: 4px 6px; margin: -4px -6px 0;
}
.cand > header[data-fold]:hover { background: var(--accent-soft); }
/* the page-wide rule stretches every input to full width; a checkbox is not that kind of
   input, and outside a .field label it has to be told so */
.cand > header input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; cursor: pointer; }
.cand .chev { font-size: 11px; color: var(--accent); width: 10px; }
.cand .foldnote { color: var(--muted); font-size: 12.5px; }
.cand.open > header { margin-bottom: 6px; }


/** --- a folded step keeps its head and its number, and drops its controls --- */

.panel-head { cursor: pointer; }
.panel-head .fold-note { color: var(--muted); font-size: 13px; }
button.fold {
  flex: 0 0 auto; width: 28px; height: 28px; line-height: 1;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--muted); font-size: 16px; cursor: pointer;
}
button.fold:hover { border-color: var(--accent); color: var(--accent); }
.panel.folded > *:not(.panel-head) { display: none; }
.panel.folded { padding-bottom: 14px; }
.panel.folded .panel-head { margin-bottom: 0; }

/** A checkbox is not a text field. The rule above sizes inputs for typing into, which stretched
    every tick box to the width of its row and padded it out; a box and a radio take their own
    size and sit where they are put. */
input[type="checkbox"], input[type="radio"] {
  width: auto; flex: 0 0 auto; padding: 0; margin: 0;
  border-radius: 4px; accent-color: var(--accent);
}
.field input[type="checkbox"], .field input[type="radio"] { width: auto; }

/** The hidden attribute only carries display:none from the browser's own stylesheet, so any
    class here that sets display beats it and the element stays on screen with nothing in it.
    That is how an idle progress bar and its two empty buttons appeared under the goals. This
    rule makes hidden mean hidden, whatever a class says. */
[hidden] { display: none !important; }

/* the folded card's one line of numbers: quiet, but readable enough to choose on */
.cand:not(.open) .foldnote { font-variant-numeric: tabular-nums; }
.cand:not(.open) { padding-top: 12px; padding-bottom: 12px; }