/* Settings > Help & Legal, and the FAQ / Privacy / Terms pages it opens (legal.js) */
.hl-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

.lg-modal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgba(10, 10, 18, .45);
    opacity: 0; transition: opacity .2s; }
.lg-modal.in { opacity: 1; }
.lg-card { width: min(720px, 100%); max-height: min(86vh, 900px); display: grid; grid-template-rows: auto auto 1fr; border-radius: 18px;
    background-color: #fff; background-image: linear-gradient(var(--surface), var(--surface)); color: var(--ink, inherit); border: 1px solid var(--line); box-shadow: 0 18px 60px rgba(0, 0, 0, .3); overflow: hidden;   /* solid, even where a world's surface is see-through */
    transform: translateY(8px); transition: transform .2s; }
.lg-modal.in .lg-card { transform: none; }
.lg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.lg-head h2 { margin: 0; font: 700 calc(1.6rem * var(--head-scale, 1)) var(--font-head); }
.lg-tabs { display: flex; gap: 6px; padding: 0 20px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lg-tabs button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: inherit;
    font: 800 .85rem var(--font-body); cursor: pointer; }
.lg-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lg-body { overflow-y: auto; padding: 8px 20px 20px; font-size: .97rem; line-height: 1.55; }
.lg-body h3 { margin: 18px 0 6px; font-size: 1.02rem; font-weight: 900; }
.lg-body p { margin: 0 0 10px; }
.lg-body ul { margin: 0 0 10px; padding-left: 20px; }
.lg-body a { color: var(--accent); }
.lg-body .link-btn { font: inherit; color: var(--accent); text-decoration: underline; }
.lg-qa { border-bottom: 1px solid var(--line); }
.lg-qa summary { padding: 10px 0; font-weight: 800; cursor: pointer; list-style-position: outside; }
.lg-qa summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg-qa > div { padding: 0 0 6px; }
.lg-date, .lg-none { display: block; margin-top: 14px; color: var(--muted); font-size: .85rem; font-weight: 700; }
.lb-forget { margin-top: 6px; font-size: .85rem; }
[data-theme="dark"] .lg-card { background-color: #12121a; }      /* the solid backing under a dark world's surface */