/* Compass — the Terms of Use agreement (2026-10-19, js/81-terms.js; _audits/2026-10-19-terms-mockup.html). Theme tokens only. */
.tu-agree { display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; padding:12px 14px; border-radius:12px; background:var(--s-band, var(--c-gray-95)); font-size:14.5px; line-height:1.5; color:var(--s-ink2, var(--c-slate-35)); cursor:pointer; }
.tu-agree[hidden] { display:none !important; }
.tu-agree input { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--s-blue, var(--c-teal-50)); cursor:pointer; }
.tu-agree a, .tu-bar a { color:var(--s-link, var(--c-teal-45)); font-weight:600; }
.tu-agree.tu-nudge { animation:tuNudge .6s ease; }
@keyframes tuNudge { 0%, 100% { box-shadow:0 0 0 0 transparent; } 30% { box-shadow:0 0 0 3px var(--s-blue, var(--c-teal-50)); } }
@media (prefers-reduced-motion:reduce){ .tu-agree.tu-nudge { animation:none; outline:2px solid var(--s-blue, var(--c-teal-50)); } }
.tu-off { opacity:.45 !important; cursor:not-allowed !important; }
.tu-bar { position:fixed; z-index:1300; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(820px, calc(100% - 32px)); display:flex; align-items:center; gap:14px; padding:12px 14px 12px 18px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:14px; background:var(--s-card, var(--c-gray-99)); box-shadow:0 10px 30px rgba(var(--s-shadow-rgb, 16,24,40), .16); font-size:14.5px; line-height:1.5; color:var(--s-ink2, var(--c-slate-35)); }
.tu-bar[hidden] { display:none !important; }
.tu-bar .tu-ok { margin-left:auto; flex:none; min-height:44px; padding:8px 18px; border-radius:10px; border:0; background:var(--s-blue, var(--c-teal-50)); color:var(--s-on, var(--c-gray-99)); font:inherit; font-weight:600; cursor:pointer; }
.tu-bar .tu-ok:focus-visible, .tu-agree input:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
html.mf-on .tu-bar { bottom:calc(140px + env(safe-area-inset-bottom)); } /* above the phone's action bar and tabs */
@media (max-width:640px){ .tu-bar { flex-wrap:wrap; gap:10px; } .tu-bar .tu-ok { margin-left:0; width:100%; } }
@layer studio {
  html body .tu-bar .tu-ok { background:var(--s-blue, var(--c-teal-50)) !important; color:var(--s-on, var(--c-gray-99)) !important; min-height:44px !important; }
  html body .tu-agree input { min-height:0 !important; height:20px !important; width:20px !important; padding:0 !important; }
}