/**
 * The agreement panel.
 *
 * Bottom-right rather than a full-screen block. Somebody being asked to agree
 * to a legal document should be able to open it, read it, and look at what they
 * already have while they decide — none of which is possible behind a curtain.
 * It cannot be dismissed, because the decision is the point, and the server
 * refuses to send until it is made.
 */
.tg-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9500;
  width: min(420px, calc(100vw - 40px));
  font: 400 14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tg-card {
  background:var(--paper,#fff);
  border: 1px solid rgba(15, 30, 60, .12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 30, 60, .2);
  padding: 20px;
  color: #14202f;
}
.tg-card h2 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.tg-say { margin: 0 0 14px; font-size: 13.5px; opacity: .82; }

.tg-docs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.tg-docs li { display: grid; gap: 1px; }
.tg-docs a { font-weight: 620; font-size: 13.5px; color: #1f5fd0; text-decoration: none; }
.tg-docs a:hover { text-decoration: underline; }
.tg-docs span { font-size: 12px; opacity: .7; }

.tg-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; cursor: pointer; }
/* Visible, and sized to be hit. The checkbox on the signup form was
   display:none and marked required, which made that form silently refuse to
   submit — the exact bug this file must not repeat. */
.tg-check input { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }

.tg-actions { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.tg-go {
  height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
  background: #1f5fd0; color: #fff; font: 620 13.5px/1 inherit; cursor: pointer;
}
.tg-go:hover:not(:disabled) { background: #1a51b4; }
.tg-go:disabled { opacity: .45; cursor: not-allowed; }
.tg-go:focus-visible { outline: 2px solid #1f5fd0; outline-offset: 2px; }
.tg-actions small { font-size: 11px; opacity: .55; font-variant-numeric: tabular-nums; }

.tg-note { margin: 9px 0 0; font-size: 12.5px; min-height: 1em; }
.tg-note[data-tone="good"] { color: #15803d; }
.tg-note[data-tone="bad"] { color: #b3253c; }

@media (max-width: 560px) {
  .tg-wrap { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

html[data-theme="dark"] {
  .tg-card { background: #151d29; border-color: rgba(150, 180, 230, .16); color: #e6edf6; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .tg-docs a { color: #6ea8ff; }
  .tg-go { background: #2f6fe0; }
  .tg-go:hover:not(:disabled) { background: #3d7cf0; }
  .tg-note[data-tone="good"] { color: #7ad9a3; }
  .tg-note[data-tone="bad"] { color: #ff9aa8; }
}