/* Moving to another state, a Plan options card (2026-10-17, js/76-state-move.js; _audits/2026-10-17-state-move-mockup.html).
   Theme tokens only. */
#advStateMoveWrap .sm-ask { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:4px 0 0; font-size:16px; color:var(--s-ink, var(--c-slate-15)); }
#advStateMoveWrap .sm-ask select { width:auto; min-width:180px; }
#advStateMoveWrap .sm-ask input { width:84px; }
#advStateMoveWrap .sm-ask small { font-size:13.5px; color:var(--s-muted, var(--c-slate-55)); }
.sm-wait { margin:14px 0 0; font-size:14.5px; color:var(--s-muted, var(--c-slate-55)); }
.sm-ans { margin:16px 0 0; padding:16px 18px; border-radius:12px; background:var(--s-soft, var(--c-gray-95)); }
.sm-ans > p:first-child { margin:0; font-size:17px; line-height:1.5; color:var(--s-ink, var(--c-slate-15)); }
.sm-ans b { font-weight:700; }
.sm-table { width:100%; border-collapse:collapse; margin:12px 0 0; font-variant-numeric:tabular-nums; }
.sm-table th, .sm-table td { padding:9px 10px; text-align:right; border-bottom:1px solid var(--s-line, var(--c-gray-90)); font-size:15px; white-space:normal; }
.sm-table th:first-child, .sm-table td:first-child { text-align:left; }
.sm-table thead th { font-size:13px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); text-transform:none; letter-spacing:normal; }
.sm-table td:last-child { font-weight:700; }
.sm-good { color:var(--s-green-ink, var(--s-green, var(--c-green-40))) !important; } .sm-bad { color:var(--s-red, var(--c-red-50)) !important; }
.sm-how { margin:8px 0 0; font-size:13px; color:var(--s-muted, var(--c-slate-55)); }
.sm-others { margin:16px 0 0; } .sm-others h4, .sm-what h4 { margin:0 0 4px; font-size:14.5px; color:var(--s-ink, var(--c-slate-15)); }
.sm-sub { margin:0 0 8px; font-size:13.5px; color:var(--s-muted, var(--c-slate-55)); }
.sm-opts { display:flex; flex-wrap:wrap; gap:8px; }
.sm-opt { min-height:40px; padding:8px 12px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:10px; background:var(--s-card, var(--c-gray-99)); font:inherit; font-size:14.5px; color:var(--s-ink, var(--c-slate-15)); cursor:pointer; }
.sm-opt b { margin-left:6px; }
.sm-opt.on { border-color:var(--s-blue, var(--c-teal-50)); background:var(--s-blue-l, var(--c-teal-95)); }
.sm-opt:focus-visible, .sm-link:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
.sm-what { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin:16px 0 0; }
.sm-what p { margin:0; font-size:14.5px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); }
.sm-link { padding:0; border:0; background:none; font:inherit; font-weight:600; color:var(--s-link, var(--c-teal-45)); cursor:pointer; }
@media (max-width:760px){
  .sm-what { grid-template-columns:1fr; }
  .sm-table thead { display:none; }
  .sm-table tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--s-line, var(--c-gray-90)); }
  .sm-table tbody td { padding:0; border:0 !important; text-align:left; font-size:14.5px; }
  .sm-table tbody td:first-child { grid-column:1 / -1; padding:0 0 4px; font-weight:600; }
  .sm-table tbody td[data-h]::before { content:attr(data-h); display:block; font-size:11.5px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); }
}
/* the app's layered table and button rules (compass-app-theme.css): @layer studio is declared first, so its !important wins */
@layer studio {
  html body .sm-table thead th, html body .sm-table tbody td { background:transparent !important; border-color:var(--s-line, var(--c-gray-90)) !important; }
  html body .sm-table thead th { color:var(--s-muted, var(--c-slate-55)) !important; }
  html body .sm-opt { font-weight:400 !important; }
  html body .sm-opt[aria-pressed="true"], html body .sm-opt.on { border-color:var(--s-blue, var(--c-teal-50)) !important; background:var(--s-blue-l, var(--c-teal-95)) !important; color:var(--s-ink, var(--c-slate-15)) !important; }
  html body .sm-opt b, html body .sm-opt[aria-pressed="true"] b { color:var(--s-ink, var(--c-slate-15)) !important; } /* the chosen chip's "about the same" came out white (the app's pressed-button rule) */
  html body .sm-opt b.sm-good { color:var(--s-green-ink, var(--s-green, var(--c-green-40))) !important; } html body .sm-opt b.sm-bad { color:var(--s-red, var(--c-red-50)) !important; }
  html body #poRow_StateMove .po-res { display:none !important; } /* the row's summary says it already */
}