@import "tokens.css";

/* Shared by privacy.html, terms.html and delete-account.html: the reading
 * layout for a policy page, the EN/RU language toggle, and the
 * delete-account forms. style.css supplies the panel, topbar and footer;
 * this file only adds what those three pages need on top of it. The landing
 * (index.html) loads it too, for the language toggle and .vh. */

/* Accessible-but-not-visible: the recovery form's <label> and the landing's
 * #cam-status are read out by a screen reader and not drawn. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.legal-head { padding: calc(var(--hp) * 1.6) calc(var(--hp) * 1.2) calc(var(--hp) * 0.8); }
.legal-head .h2 { margin-bottom: 4px; }

.lang-toggle { display: inline-flex; gap: 6px; margin: 10px 0 0; }
.lang-btn {
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--control);
  color: var(--ink-dim); cursor: pointer;
}
.lang-btn[aria-pressed="true"] { background: #fff; color: #111; border-color: transparent; }

.legal-body { padding: 0 calc(var(--hp) * 1.2) calc(var(--hp) * 2.4); }
.legal-body > div { max-width: calc(var(--hp) * 34); margin-inline: auto; }
.legal-body h3 { margin: 28px 0 8px; }
.legal-body h3:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px; padding-left: 1.2em; }
.legal-body li { margin: 0 0 6px; }

.legal-form { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.legal-input {
  font-family: var(--data); font-size: 15px; letter-spacing: .04em;
  padding: 12px 14px; min-height: 48px; flex: 1 1 240px;
  border-radius: var(--r-tile); border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--ink);
}
.legal-input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.legal-input:disabled { opacity: .6; }
.legal-result {
  margin-top: 12px; font-size: 14px; padding: 10px 12px;
  border-radius: var(--r-tile); border: 1px solid var(--hairline);
  background: var(--surface-2);
}
/* .legal-body p would otherwise take the gap above the box away. */
.legal-body .legal-result { margin: 12px 0; }
.legal-result[data-tone="ok"] { border-color: var(--fam-channel); }
.legal-result[data-tone="error"] { border-color: var(--record); }

/* The account form: fields under their labels, one per line, and the button
 * under them: two fields of the row form's 240px and a button do not fit side by
 * side on a phone. */
.legal-form-stack { flex-direction: column; align-items: stretch; max-width: 420px; }
.legal-form-stack .btn { align-self: flex-start; }
.legal-field { display: flex; flex-direction: column; gap: 6px; }
.legal-label { font-size: 13px; color: var(--ink-dim); }
/* Inside the column a flex-basis is a height: without this the field takes
 * the row form's 240px as its own height. */
.legal-field .legal-input { flex: none; }
/* The monospace face and letter spacing are for the recovery code; an address
 * and a password are set in the text face, like the rest of the page. */
.legal-input-text { font-family: var(--ui); letter-spacing: 0; }

.legal-body .btn:disabled { opacity: .5; cursor: default; }
.btn-danger { background: var(--record); color: #fff; }
.btn-danger:active { background: #d63a31; }

/* The question asked before a delete is sent. It takes focus when it opens, so
 * a screen reader reads it out, but it is not a control and draws no ring. */
.legal-confirm {
  margin-top: 12px; padding: 12px 14px; max-width: 520px;
  border-radius: var(--r-tile); border: 1px solid var(--record);
  background: var(--surface-2);
}
.legal-confirm [tabindex="-1"]:focus { outline: none; }
/* The question names the address, and a long one has no space to break at. */
.legal-confirm p { overflow-wrap: break-word; }
.legal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Without a gap the paragraph under a form touches its last box or answer. */
.legal-body [data-delete] { margin-bottom: 16px; }