/* The email and Google login: its box in the connect dialogs, its line in the deposit dialog and its section on the
   Security page (class prefix lg-). docs/LANES.md 4.3 and the width contract of 3.7.
   Colours only through the tokens of styles.css: no colour literal and no custom property in this file, so the light
   theme arrives without touching it.
   ONE column, no fixed width: the box sits inside the shared .modal, which is a bottom sheet on a phone. Every
   control a thumb has to hit is at least 44 px high. */

.lg-box { display: grid; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.lg-box > p { margin: 0; }
.lg-box .field { margin: 0; }
.lg-or { color: var(--brand-hi); font: 700 11px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.lg-entry { justify-content: flex-start; min-height: 44px; }
.lg-new { margin-left: auto; }
.lg-by, .lg-newline, .lg-fine, .lg-note { max-width: 60ch; }
.lg-sent { color: var(--text); overflow-wrap: anywhere; }
.lg-actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px; min-width: 0; }
.lg-actions .btn { flex: 1 1 140px; min-height: 44px; }
.lg-other { justify-self: start; }
.lg-email-in, .lg-code-in { min-height: 44px; }
.lg-code-in { font-family: var(--font-mono); letter-spacing: 0.18em; }

/* "stay logged in on this device": the switch, its words, and the warning that comes before it takes effect */
.lg-keep { display: grid; gap: 8px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--line); }
.lg-keep > p { margin: 0; }
.lg-keep-row { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; }
.lg-keep-t { min-width: 0; color: var(--text); font-size: 13px; }
.lg-switch { position: relative; width: 40px; height: 22px; flex: none; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-3); cursor: pointer; }
.lg-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.lg-switch:focus-visible { outline: none; box-shadow: var(--ring); }
.lg-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.12s; }
.lg-switch.on { border-color: var(--warn); background: var(--warn-soft); }
.lg-switch.on .lg-switch-knob { background: var(--warn); transform: translateX(18px); }
.lg-ask { display: grid; gap: 8px; min-width: 0; }
.lg-ask > p { margin: 0; }
.lg-kept { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }

/* what must be read: the warning, a refusal, the line that says the login switched itself off */
.lg-warn { margin: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--warn); background: var(--warn-soft); color: var(--text); font-size: 13px; }
.lg-err, .lg-off { margin: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--down); background: var(--down-soft); color: var(--text); font-size: 13px; }

/* the deposit dialog, for the address of a login */
.lg-dep { display: grid; gap: 6px; min-width: 0; }
.lg-dep > p { margin: 0; }

/* the Security page: the login's own section sits between the eight statements and "what we do not claim" */
.lg-sec h2 { margin: 0 0 8px; text-transform: lowercase; }
.lg-sec p { max-width: 74ch; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .lg-switch-knob { transition: none; }
}