/* =============================================================================
   The terms and privacy tick, and the footer links on every sign in step
   (public/js/termsScreen.js). Loaded by the sign in page and by every page
   that can show the screen over the app, after the auth and look files.
   Sizes and colours are existing tokens only.
   ============================================================================= */

/* The card stays in the middle; the footer line sits at the foot of the page. */
.auth-frame { flex-direction: column; }
.auth-frame > .auth-card { margin-block: auto; }

.terms-foot {
  margin-top: var(--sp-16); text-align: center;
  font: var(--t-meta); color: var(--text-2);
}
.terms-foot .terms-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--sp-4); color: inherit; }

/* The tick row: the whole label is the tap area, at least 44 px tall. */
.terms-tick {
  display: flex; gap: var(--sp-12); align-items: flex-start; min-height: var(--tap-min);
  margin-top: var(--sp-8); padding: var(--sp-12); box-sizing: border-box; cursor: pointer;
  border: var(--hair) solid var(--control-edge); border-radius: var(--r-12); background: var(--paper);
  font: var(--t-body); color: var(--ink); overflow-wrap: anywhere;
}
.terms-tick:focus-within { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.terms-tick__box { width: var(--sp-20); height: var(--sp-20); margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.terms-tick__text { min-width: 0; }
.terms-link { font-weight: 700; text-decoration: underline; }

.terms-tick + .auth-error { margin-top: var(--sp-8); }
.terms-note { font: var(--t-meta); color: var(--text-2); margin: var(--sp-8) 0 0; }

/* In the boards' look (lookauth.css): its card, its ink and its link colour. */
[data-look] .terms-foot { color: var(--lk-text-2); font-size: max(14px, calc(14px * var(--lk-s))); }
[data-look] .terms-tick {
  border-color: var(--lk-edge); border-radius: calc(16px * var(--lk-s)); background: var(--lk-paper);
  color: var(--lk-ink); font: 400 max(14px, calc(15px * var(--lk-s)))/1.5 var(--lk-font);
}
[data-look] .terms-tick__box { accent-color: var(--lk-ink); }
[data-look] .terms-note { color: var(--lk-text-2); font-size: max(14px, calc(14px * var(--lk-s))); }
[data-look] .terms-tick .terms-link { color: var(--lk-link); }

/* The same screen drawn over an open app (public/js/termsOverlay.js): the card in the middle, the footer line under it. */
.auth-lock--terms { flex-direction: column; }
.auth-lock--terms > .auth-card { margin-block: auto; }