/* Guardrails: where to start (2026-10-17, js/79-guardrails-start.js; _audits/2026-10-17-guardrails-start-mockup.html).
   Theme tokens only. */
#guardrailsFields .gr-mode-f, #guardrailsFields .gr-start { grid-column:1 / -1; }
#guardrailsFields .gr-mode { display:flex; flex-wrap:wrap; gap:8px; }
#guardrailsFields .gr-mode-note:empty { display:none; }
.gr-start:empty { display:none; }
.gr-start { margin:6px 0 0; padding:18px 18px 16px; border-radius:14px; background:var(--s-band, var(--c-gray-95)); }
.grs-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:6px 16px; margin:0 0 14px; }
.grs-top h4 { margin:0; font-size:15.5px; color:var(--s-ink, var(--c-slate-15)); }
.grs-sub { margin:2px 0 0; font-size:13.5px; color:var(--s-muted, var(--c-slate-55)); }
.grs-aim { font-size:13.5px; color:var(--s-muted, var(--c-slate-55)); white-space:nowrap; }
.grs-tg { display:inline-flex; gap:2px; margin:0 4px; padding:2px; border-radius:8px; background:var(--s-card, var(--c-gray-99)); border:1px solid var(--s-line, var(--c-gray-90)); vertical-align:1px; }
.grs-tg button { min-height:28px; padding:1px 9px; border:0; border-radius:6px; background:none; font:inherit; font-size:12.5px; color:var(--s-muted, var(--c-slate-55)); cursor:pointer; }
.grs-tg button.on { background:var(--s-blue-l, var(--c-teal-90)); color:var(--s-ink, var(--c-slate-15)); font-weight:600; }
.grs-pick { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grs-opt { display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:12px; background:var(--s-card, var(--c-gray-99)); }
.grs-opt.now { border-color:var(--s-blue, var(--c-teal-50)); box-shadow:inset 0 0 0 1px var(--s-blue, var(--c-teal-50)); }
.grs-opt .k { font-size:13.5px; color:var(--s-muted, var(--c-slate-55)); }
.grs-opt .v { font-size:22px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--s-ink, var(--c-slate-15)); }
.grs-opt .s { font-size:14px; line-height:1.5; color:var(--s-ink2, var(--c-slate-35)); }
.grs-opt button { align-self:flex-start; margin-top:4px; min-height:38px; padding:7px 14px; border-radius:10px; border:1px solid var(--s-line2, var(--c-gray-90)); background:var(--s-card, var(--c-gray-99)); font:inherit; font-size:14px; font-weight:600; color:var(--s-ink, var(--c-slate-15)); cursor:pointer; }
.grs-opt button.pri { background:var(--s-blue, var(--c-teal-50)); border-color:var(--s-blue, var(--c-teal-50)); color:var(--s-on, var(--c-gray-99)); }
.grs-opt button[disabled] { opacity:.6; cursor:default; }
.grs-gap { margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--s-amber-l, var(--c-amber-80)); font-size:14px; color:var(--s-ink2, var(--c-slate-35)); }
.grs-wait { margin:6px 0 0; font-size:14px; color:var(--s-muted, var(--c-slate-55)); }
.gr-start a, .gr-start-line a { color:var(--s-link, var(--c-teal-45)); font-weight:600; }
.grs-tb-h { margin:18px 0 2px; font-size:14.5px; font-weight:600; color:var(--s-ink, var(--c-slate-15)); }
.grs-tb-s { margin:0 0 6px; font-size:13px; color:var(--s-muted, var(--c-slate-55)); }
.grs-table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.grs-table th, .grs-table td { padding:9px 10px; text-align:right; border-bottom:1px solid var(--s-line, var(--c-gray-90)); font-size:14.5px; white-space:normal; }
.grs-table th:first-child, .grs-table td:first-child { text-align:left; white-space:nowrap; }
.grs-table thead th { font-size:12.5px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); vertical-align:bottom; text-transform:none; letter-spacing:normal; }
.grs-table tbody tr[data-grs-use] { cursor:pointer; }
.grs-table tbody tr[data-grs-use]:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:-2px; }
.grs-table td small { display:block; font-size:12px; color:var(--s-muted, var(--c-slate-55)); }
.grs-tag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px; font-size:11.5px; font-weight:600; background:var(--s-band, var(--c-gray-95)); color:var(--s-muted, var(--c-slate-55)); }
.grs-tag.now { background:var(--s-blue, var(--c-teal-50)); color:var(--s-on, var(--c-gray-99)); }
.grs-good { color:var(--s-green-ink, var(--s-green, var(--c-green-40))); } .grs-meh { color:var(--c-amber-40); } .grs-bad { color:var(--s-red, var(--c-red-50)); }
.grs-how { margin:10px 0 0; font-size:12.5px; color:var(--s-muted, var(--c-slate-55)); }
.gr-start-line { margin:4px 0 12px; font-size:14.5px; color:var(--s-ink2, var(--c-slate-35)); }
@media (max-width:760px){
  .gr-start { padding:14px 12px; }
  .grs-pick { grid-template-columns:1fr; }
  .grs-table thead { display:none; }
  .grs-table tbody tr { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 10px; padding:10px 4px; border-bottom:1px solid var(--s-line, var(--c-gray-90)); }
  .grs-table tbody td { padding:0; border:0 !important; text-align:left; font-size:14px; }
  .grs-table tbody td:first-child { grid-column:1 / -1; font-weight:600; }
  .grs-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 .grs-table thead th, html body .grs-table tbody td { background:transparent !important; border-color:var(--s-line, var(--c-gray-90)) !important; }
  html body .grs-table thead th { color:var(--s-muted, var(--c-slate-55)) !important; }
  html body .grs-table tbody tr.grs-cur td { background:var(--s-blue-l, var(--c-teal-90)) !important; }
  html body .grs-table tbody tr[data-grs-use]:hover td { background:var(--s-card, var(--c-gray-99)) !important; }
  html body .grs-tg button, html body .grs-tg button[aria-pressed="true"] { color:var(--s-muted, var(--c-slate-55)) !important; font-weight:400 !important; background:none !important; }
  html body .grs-tg button.on { background:var(--s-blue-l, var(--c-teal-90)) !important; color:var(--s-ink, var(--c-slate-15)) !important; font-weight:600 !important; }
  html body .grs-opt button:not(.pri) { color:var(--s-ink, var(--c-slate-15)) !important; background:var(--s-card, var(--c-gray-99)) !important; }
}
@media (max-width:760px){ @layer studio { html body .grs-table tbody tr.grs-cur { background:var(--s-blue-l, var(--c-teal-90)); border-radius:10px; } html body .grs-table tbody tr.grs-cur td { background:transparent !important; } } }
.grs-pick.grs-one { grid-template-columns:minmax(0, 1fr); max-width:520px; }
.grs-flat { margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); max-width:72ch; }
.grs-more { margin:16px 0 0; border-top:1px solid var(--s-line, var(--c-gray-90)); }
.grs-more > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:12px 0 4px; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--s-ink, var(--c-slate-15)); list-style:none; }
.grs-more > summary::-webkit-details-marker { display:none; }
.grs-more > summary::after { content:"›"; margin-left:auto; font-size:18px; color:var(--s-muted, var(--c-slate-55)); transform:rotate(90deg); }
.grs-more[open] > summary::after { transform:rotate(-90deg); }
.grs-more > summary span { font-size:13px; font-weight:400; color:var(--s-muted, var(--c-slate-55)); }
.grs-more > summary:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; border-radius:6px; }