/* Simulations (#/simulations): screen-only styles (D88, spec §4.5).
   Owned by the simulations screen builder. Rules: tokens only (no raw hex; colours
   come from var(--…) or color-mix of them), prefix every selector with the
   screen class .scr-simulations (set it on your outermost wrapper) so nothing leaks
   into other screens, and reuse the components in style.css before adding new
   ones. Breakpoint: max-width 640px is the phone. */

/* ------------------------------------------------------------------ rhythm */
/* the page is built from regions that repaint on their own; spacing lives here */
.scr-simulations > .sm-region:empty { display: none; }
.scr-simulations > .sm-region:not(:empty) ~ .sm-region:not(:empty) { margin-top: var(--s7); }
.scr-simulations .page-head { margin-bottom: 0; }
.scr-simulations .sm-region > .section { margin-top: 0; }
.scr-simulations .answer a { color: var(--crowd); }
@media (max-width: 640px) {
  .scr-simulations > .sm-region:not(:empty) ~ .sm-region:not(:empty) { margin-top: var(--s6); }
}

/* ------------------------------------------------------------------ the main autopilot */
.scr-simulations .sm-ap-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s5);
  flex-wrap: wrap; }
.scr-simulations .sm-ap-state { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scr-simulations .sm-ap-status { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-title);
  font-weight: 600; line-height: 1.3; }
.scr-simulations .sm-ap-status .sdot { width: 10px; height: 10px; }
.scr-simulations .sm-ap-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3);
  color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.scr-simulations .sm-ap-actions { flex: none; }
.scr-simulations .sm-ap-what { margin: var(--s4) 0 0; color: var(--text-2); max-width: 68ch; }
.scr-simulations .sm-note { margin: var(--s3) 0 0; font-size: var(--fs-small); max-width: 72ch; }
.scr-simulations .sm-ap > details.fold-inline { margin-top: var(--s3); }
.scr-simulations .sm-ap .fold-body .dl { margin-top: var(--s1); }
.scr-simulations .sm-ap .fold-body .dl dd { color: var(--text); }
/* the rule lists: a short label column, so the answer sits next to its label */
.scr-simulations .dl { max-width: 880px; }
.scr-simulations .dl-row { grid-template-columns: 10rem minmax(0, 1fr); }
.scr-simulations .sm-rules-note { margin: var(--s4) 0 0; font-size: var(--fs-small); color: var(--text-2); max-width: 72ch; }
@media (max-width: 640px) {
  .scr-simulations .sm-ap-actions { width: 100%; }
  .scr-simulations .sm-ap-actions .btn { flex: 1 1 auto; }
  .scr-simulations .sm-ap details.fold-inline .fold-body { padding-left: 0; }
}

/* ------------------------------------------------------------------ simulation history */
.scr-simulations #sm-history .chips { margin-bottom: var(--s3); }
.scr-simulations .sm-earlier { font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
.scr-simulations .sm-earlier:hover { color: var(--text); }
.scr-simulations .sm-list .row-title { display: flex; flex-direction: column; gap: 3px; }
.scr-simulations .sm-q { font-weight: 500; color: var(--text); }
.scr-simulations .sm-q.t2 { color: var(--text-2); font-weight: 400; }
.scr-simulations .sm-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); font-weight: 400; }
.scr-simulations .sm-sub { font-size: var(--fs-small); color: var(--text-2); }
.scr-simulations .sm-sub.attention { color: var(--attention); }
.scr-simulations .sm-subs .tag { height: 20px; padding: 0 8px; }
.scr-simulations .sm-gapcell { line-height: 0; }
.scr-simulations .sm-list .row-lead { font-size: var(--fs-small); }
.scr-simulations .sm-list .row-key { font-weight: 500; }
/* the "why it passed" line wraps under the outcome; unwrapped it took the whole
   row and squeezed the question to one letter a line (2026-10-23) */
.scr-simulations .sm-list .row-key-sub { max-width: 260px; white-space: normal; }
.scr-simulations .sm-live { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.scr-simulations .sm-list .row.dim { opacity: .45; }
.scr-simulations .sm-list .row.dim:hover { opacity: .8; }

/* a band that starts a group (a day, or "before this batch") */
.scr-simulations .sm-sep { grid-column: 1 / -1; padding: 8px var(--s5) 7px; font-size: var(--fs-small); font-weight: 600;
  color: var(--text-2); background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.scr-simulations .list-head + .sm-sep, .scr-simulations .list > .sm-sep:first-child { border-top: 0; }

/* "Showing 30 of 63" + Show more */
.scr-simulations .sm-more { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; margin-top: var(--s3); min-height: 32px; }
.scr-simulations .sm-more-count { font-size: var(--fs-small); }

/* ------------------------------------------------------------------ the two folds at the bottom */
.scr-simulations .sm-fold-lead { margin: 0 0 var(--s3); font-size: var(--fs-small); max-width: 72ch; }
.scr-simulations .sm-folds .fold-body > .chips { margin-bottom: var(--s3); }
.scr-simulations .fold-body .sm-list { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line);
  margin: 0 calc(-1 * var(--s5)); }
.scr-simulations .fold-body .sm-list + details.fold-inline { margin-top: var(--s3); }
.scr-simulations .fold-body .sm-list .row { min-height: 52px; padding-top: 10px; padding-bottom: 10px; }
.scr-simulations .fold-body .sm-list .sm-sep:first-child { border-top: 0; }
.scr-simulations .sm-log-empty { margin: var(--s2) 0 var(--s3); }
.scr-simulations #sm-log-body + details.fold-inline { margin-top: var(--s3); }

/* other autopilots: one row each, controls on the right, details below */
.scr-simulations .sm-lanes .row { align-items: start; padding-top: var(--s4); padding-bottom: var(--s3); }
.scr-simulations .sm-lanes .row-key { padding-top: 1px; }
.scr-simulations .sm-lanes .row-actions { gap: var(--s2); }
.scr-simulations .sm-lanes .row-below { margin-top: 2px; }
.scr-simulations .sm-lanes .sm-q { font-weight: 600; }
.scr-simulations .sm-lanes .sm-sub { max-width: 68ch; }
.scr-simulations .sm-lanes .row-below details.fold-inline .fold-body { padding-left: 20px; }
.scr-simulations .sm-lanes .row-below .dl dd { color: var(--text); }
.scr-simulations .sm-retired .sm-q { color: var(--text-2); }
.scr-simulations .sm-assets { display: flex; flex-wrap: wrap; gap: 2px var(--s4); }
.scr-simulations .sm-asset { font-size: var(--fs-small); color: var(--text); min-height: 30px; align-items: center; }
.scr-simulations .sm-asset input { margin-top: 0; }

/* the technical log: a real table, allowed only inside a fold (spec §2.3) */
.scr-simulations .sm-events-wrap { margin-top: var(--s2); border: 1px solid var(--line); border-radius: var(--r-nested); }
.scr-simulations .sm-events { font-size: var(--fs-small); min-width: 560px; }
.scr-simulations .sm-events th, .scr-simulations .sm-events td { padding: 7px 10px; font-size: var(--fs-small); }
.scr-simulations .sm-events td.t2 { overflow-wrap: anywhere; min-width: 16rem; }
.scr-simulations .sm-events td a { color: var(--text); }
.scr-simulations .sm-events td a:hover { color: var(--crowd); }

@media (max-width: 640px) {
  .scr-simulations .dl-row { grid-template-columns: 1fr; }
  /* the fold's counts don't fit beside its title on a phone; the chips inside carry them */
  .scr-simulations .sm-folds details.fold > summary > .fold-meta { display: none; }
  .scr-simulations .sm-folds details.fold > summary > .fold-chev { margin-left: auto; }
  .scr-simulations .fold-body .sm-list { margin: 0 calc(-1 * var(--s4)); }
  .scr-simulations .sm-sep { padding: 7px var(--s4) 6px; }
  .scr-simulations #sm-history .section-action { width: 100%; }
  .scr-simulations .sm-list .row-meta .sm-gapcell:empty { display: none; }
  .scr-simulations .sm-list .row-key-sub { max-width: 150px; }
  .scr-simulations .sm-lanes .row-below details.fold-inline .fold-body { padding-left: 0; }
  .scr-simulations .sm-lanes .row-actions .btn { flex: 1 1 auto; }
  .scr-simulations .sm-lanes .row-actions { width: 100%; }
}