/* =============================================================================
   We Form Pay - legal documents (ON01, client review of 14 October 2026)
   The reading window on /register and the published text on /terms and /privacy
   (assets/js/legal.js). Uses the tokens of style.css.
   ========================================================================== */

/* ---------------------------------------------------------------- the reading window */
.lg-noscroll{ overflow:hidden; }
.lg-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; }
.lg-scrim{ position:absolute; inset:0; background:rgba(10,19,60,.55); backdrop-filter:blur(2px); }
.lg-box{
  position:relative; display:flex; flex-direction:column; width:min(760px, 100%); max-height:min(860px, calc(100vh - 48px));
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-pop); overflow:hidden;
}
.lg-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:26px 30px 18px; border-bottom:1px solid #E7EAF3; }
.lg-hd h2{ margin:0; font-size:clamp(1.25rem, 2.2vw, 1.55rem); line-height:1.25; color:var(--ink); letter-spacing:-.01em; }
.lg-hd h2:focus{ outline:none; }
.lg-hd h2:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:6px; }
.lg-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 0; font-size:13.5px; color:var(--muted); }
.lg-meta .lg-ver{ font-weight:600; color:var(--ink-2); }
.lg-meta .lg-old{ font-weight:600; color:#8A5A00; }
.lg-x{
  flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--bg-soft); color:var(--ink-2);
  font-size:24px; line-height:40px; cursor:pointer; transition:background .2s, color .2s;
}
.lg-x:hover{ background:var(--blue); color:#fff; }
.lg-x:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.lg-body{ flex:1 1 auto; min-height:120px; overflow-y:auto; overscroll-behavior:contain; padding:22px 30px 26px; }
.lg-body:focus{ outline:none; }
.lg-body:focus-visible{ box-shadow:inset 0 0 0 2px var(--blue); }
.lg-ft{ display:flex; flex-direction:column; gap:12px; padding:16px 30px 22px; border-top:1px solid #E7EAF3; background:var(--bg-softer); }
.lg-links{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.lg-links:empty{ display:none; }
.lg-link{ font-size:14px; font-weight:600; color:var(--blue-text); text-decoration:underline; text-underline-offset:3px; }
.lg-link:hover{ color:var(--blue); }
.lg-hint{ margin:0; min-height:1.4em; font-size:13.5px; color:var(--muted); }
.lg-hint:empty{ display:none; }
.lg-acts{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.lg-acts .btn{ white-space:normal; text-align:center; }
.lg-loading, .lg-err{ margin:0; color:var(--muted); font-size:15px; }
.lg-err{ color:#A8341D; font-weight:500; }
.lg-end{ margin:22px 0 0; padding-top:14px; border-top:1px dashed #D5DAE8; font-size:13.5px; color:var(--muted); }
.lg-awaiting p{ margin:0 0 12px; color:var(--ink-2); font-size:15px; line-height:1.6; }
.lg-awaiting p:last-child{ margin-bottom:0; color:var(--muted); font-size:14px; }
.lg-modal[data-legal-state="awaiting"] .lg-body{ background:#FFF9EC; }

/* ---------------------------------------------------------------- the text itself */
.lg-text{ color:var(--ink-2); font-size:15px; line-height:1.7; overflow-wrap:anywhere; }
.lg-text h2{ margin:26px 0 10px; font-size:1.2rem; line-height:1.35; color:var(--ink); }
.lg-text h3{ margin:20px 0 8px; font-size:1.02rem; line-height:1.4; color:var(--ink); }
.lg-text h2:first-child, .lg-text h3:first-child{ margin-top:0; }
.lg-text p{ margin:0 0 14px; }
.lg-text ul{ margin:0 0 14px; padding-left:22px; list-style:disc; }
.lg-text li{ margin:0 0 6px; }

/* ---------------------------------------------------------------- /terms and /privacy */
.lg-doc{ max-width:880px; margin:0 auto; padding:clamp(24px, 4vw, 48px); background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.lg-doc-hd{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:0 0 26px; padding-bottom:18px; border-bottom:1px solid #E7EAF3; }
.lg-doc-hd .lg-meta{ margin:0; font-size:14px; }
.lg-doc .lg-text{ font-size:16px; }
.lg-awaiting.stub-card .lg-sub{ font-size:15px; }
.stub-card.lg-awaiting{ background:#fff; }

/* ---------------------------------------------------------------- registration (step 1) */
.legal-checks{ display:flex; flex-direction:column; gap:6px; margin-top:24px; }
.legal-checks .check-row{ margin:0; }
.legal-checks .check-row + .legal-ver{ margin-top:-2px; }
.legal-lead{ margin:0 0 6px; font-size:14px; color:var(--muted); line-height:1.55; }
.legal-ver{ margin:0 0 0 34px; font-size:13px; color:var(--muted); line-height:1.5; }
.legal-ver a, .legal-ver button{ color:var(--blue-text); font-weight:600; }
.legal-ver .lg-await{ display:inline-block; padding:1px 8px; border-radius:6px; background:#FFF1D6; color:#7A4E00; font-weight:600; font-size:12.5px; }
.legal-checks .field-msg{ margin-left:34px; }
.legal-checks .field-msg:empty{ display:none; }
.check-row .legal-open{ padding:0; border:0; background:none; font:inherit; color:var(--blue); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.check-row .legal-open:hover{ color:var(--blue-hov); }

@media (max-width: 640px){
  .lg-modal{ padding:0; align-items:stretch; }
  .lg-box{ width:100%; max-height:none; height:100%; border-radius:0; }
  .lg-hd{ padding:18px 16px 14px; }
  .lg-body{ padding:16px 16px 20px; }
  .lg-ft{ padding:12px 16px 16px; }
  .lg-acts{ flex-direction:column-reverse; }
  .lg-acts .btn{ width:100%; }
  .lg-doc-hd{ flex-direction:column; align-items:flex-start; }
  .legal-ver, .legal-checks .field-msg{ margin-left:0; }
}

/* Round 10b: in the Portal and /bank the answer is recorded before the window closes; what the server said (another
   version is in force now, or the answer could not be recorded) shows above the hint */
.lg-notice{ margin:0; padding:10px 14px; border-radius:10px; background:#FFF1D6; color:#6B4300; font-size:13.5px; font-weight:500; line-height:1.5; }