/* "Does it work?" and the publish dialog (view-receipts.js), design A. Tokens and shared controls (.chip, .tone-*,
   .tag, .meta, .btn, details) are in styles.css. One tinted verdict, then sentences, then only the runs that need a
   look; everything technical behind Details. */

.rc-section { display: grid; gap: 12px; min-width: 0; }
.rc-section .h2-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rc-section > p { max-width: var(--measure); }

/* "Does it work?" as one row when only the verdict shows: the heading, the verdict, Test again,
   then Details at the end; it wraps on narrow screens, and an open Details takes its own full-width line */
.rc-oneline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.rc-oneline > .h2 { flex: none; }
.rc-oneline > .verdict { flex: 1 1 300px; min-width: 0; padding: 8px 12px; }
.rc-oneline > .btn { flex: none; }
.rc-oneline > .rc-details { flex: none; margin-left: auto; }
.rc-oneline > .rc-details[open] { flex: 1 1 100%; margin-left: 0; }
/* the passed glyph is decoration: generated, so the verdict's words stay exactly what they say */
.rc-settled .verdict.tone-green > p:first-child::before { content: "✓\00a0"; font-weight: 600; }

/* the verdict: one tint (green = it works; red = not yet, out of date, not tested, couldn't run) */
.verdict { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface-2); color: var(--label); }
.verdict p { font-size: var(--fs-body); line-height: var(--lh-body); }
.verdict .meta { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.verdict.tone-green, .verdict.tone-success { background: var(--green-tint); }
.verdict.tone-red, .verdict.tone-danger { background: var(--red-tint); }
.verdict.tone-needs, .verdict.tone-warning { background: var(--amber-tint); }

.rc-void, .rc-reason { color: var(--label); }
.rc-note { padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--label); font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.rc-note.tone-needs { background: var(--amber-tint); }

/* a self-test in flight: where its result will land */
.rc-progress { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface-2); }
.rc-progress progress { width: 100%; height: 4px; appearance: none; border: 0; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.rc-progress progress::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--r-full); }
.rc-progress progress::-webkit-progress-value { background: var(--label); border-radius: var(--r-full); transition: width var(--dur-2) var(--ease); }
.rc-progress progress::-moz-progress-bar { background: var(--label); }

/* the runs as list rows: the name and one plain line on the left, the chips on the right */
.rc-runs { display: grid; }
.rc-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--separator); }
.rc-run:first-child { border-top: 0; }
.rc-run .meta { margin-top: 2px; color: var(--label-2); }
.rc-run-name { overflow-wrap: anywhere; }
.rc-run-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

/* Details: the raw outcomes, codes and ids */
.rc-details { display: grid; }
.rc-details[open] { gap: 8px; }
.rc-totals { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.rc-tech { display: grid; gap: 6px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.rc-tech > div { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 2px 12px; padding-top: 6px; border-top: 1px solid var(--separator); }
.rc-tech dt { font-family: var(--font-mono); overflow-wrap: anywhere; color: var(--label); }
.rc-tech dd { display: grid; gap: 2px; overflow-wrap: anywhere; }
.votes { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.codes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.notes.reasons, .notes.warnings { color: var(--label-2); font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.rc-details .mono { overflow-wrap: anywhere; }

/* a result that just landed fades in once */
.rc-landed { animation: rc-in var(--dur-2) var(--ease-out); }
@keyframes rc-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rc-landed { animation: none; }
  .rc-progress progress::-webkit-progress-value { transition: none; }
}

/* the publish dialog (native <dialog>) */
.dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px; border: 0;
  border-radius: var(--r-xl); background: var(--surface); color: var(--label);
  box-shadow: inset 0 0 0 1px var(--separator), var(--shadow-pop);
}
.dialog::backdrop { background: var(--backdrop); }
.dialog form { display: grid; gap: 16px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.dialog-actions .meta { flex: 1 1 100%; text-align: right; }
.dialog-actions .meta:empty { display: none; }
#publish-preview { display: grid; gap: 12px; }
#publish-result { display: grid; gap: 4px; }
.publish-ships, .publish-left-out { display: grid; }
.publish-ships li, .publish-left-out li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--separator);
}
.publish-ships li:first-child, .publish-left-out li:first-child { border-top: 0; }
.publish-criterion { font-family: var(--font-serif); overflow-wrap: anywhere; }
.publish-status { color: var(--label-2); font-size: var(--fs-subhead); line-height: var(--lh-subhead); text-align: right; }
.publish-line { grid-column: 1 / -1; }
.publish-left-out .publish-status { grid-column: 1 / -1; text-align: left; }

@media (max-width: 760px) {
  .dialog { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .dialog-actions .btn { flex: 1; }
  .dialog-actions .meta { text-align: left; }
  .rc-run { grid-template-columns: minmax(0, 1fr); }
  .rc-run-chips { justify-content: flex-start; grid-row: 1; }
  .rc-tech > div { grid-template-columns: minmax(0, 1fr); }
}