/*
  Page styles for the Placements and money line: /platform/placements/,
  /platform/claims/, /platform/support/ and /platform/finance/.
  Shared "outside the frame" demo controls live here so the four demos
  (noe-checks, claim-from-evidence, support-schedule, approvals) look like
  one family. Demo-specific visuals (the balance bar, clock panels, the
  claims board card note) live in each demo's own stylesheet.
*/

.demo-controls {
  display: grid;
  gap: var(--s4) var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: end;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  background: var(--concourse);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

.demo-controls__title {
  grid-column: 1 / -1;
  margin: 0 0 var(--s1);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-2);
}

.demo-controls__full {
  grid-column: 1 / -1;
}

.demo-controls__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--s1);
  border-top: 1px solid var(--rule);
}

.demo-controls__result {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.demo-controls .field {
  margin: 0;
}

/* The checks table on the placements page and small rule tables reuse the
   shared table component; this only tightens the illustrative-figure note
   under it. */
.money-figure-note {
  margin-top: var(--s2);
  font-size: var(--t-micro);
  color: var(--ink-3);
}

@media (prefers-reduced-motion: no-preference) {
  .demo-controls__result[data-flash="1"] {
    animation: money-flash 900ms ease-out;
  }
}

@keyframes money-flash {
  from { background-color: var(--line-money-wash); }
  to { background-color: transparent; }
}