/*
 * inrealio — the legal documents page. (WP13, B54)
 *
 * Tokens only: no colour, size or radius is declared here that tokens.css does
 * not own (DESIGN-SYSTEM.md). A reading column, mobile first — the viewer is on
 * a phone, and a Terms document is long.
 */

html { background: var(--surface-0); }
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.lg-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--surface-1-a95);
  border-bottom: 1px solid var(--border-subtle);
}
.lg-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .02em;
  color: var(--text-strong); text-decoration: none;
}
.lg-logo .io { color: var(--accent-live); }
.lg-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-7); font-size: var(--fs-meta); }
.lg-nav a { color: var(--text-muted); text-decoration: none; padding: var(--space-2) 0; }
.lg-nav a:hover, .lg-nav a[aria-current="page"] { color: var(--text-strong); }
.lg-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent-live); }
/* (WP18) The PL/EN switch — the same shape as the app's (styles.css .lang-switch). */
.lang-switch { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: var(--radius-5); overflow: hidden; align-self: center; }
.ls-btn { background: transparent; border: none; padding: var(--space-1) var(--space-3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; color: var(--text-muted); cursor: pointer; line-height: 1.4; min-width: 28px; }
.ls-btn + .ls-btn { border-left: 1px solid var(--border-subtle); }
.ls-btn.on { background: var(--accent-live-a1); color: var(--accent-live); }

.lg-doc { max-width: 720px; margin: 0 auto; padding: var(--space-8) var(--space-8) 64px; overflow-wrap: anywhere; }
.lg-status { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-meta); }

.lg-doc h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15;
  color: var(--text-strong); margin: 28px 0 var(--space-6);
}
.lg-doc h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.25;
  color: var(--text-strong); margin: 36px 0 var(--space-4); padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  scroll-margin-top: 72px;
}
.lg-doc h3 { font-size: var(--fs-ui); font-weight: 600; color: var(--text-strong); margin: 26px 0 var(--space-3); scroll-margin-top: 72px; }
.lg-doc p { margin: 0 0 var(--space-6); }
.lg-doc strong { color: var(--text-strong); font-weight: 600; }
.lg-doc ul { margin: 0 0 var(--space-6); padding-left: 22px; }
.lg-doc li { margin: 0 0 var(--space-2); }
.lg-doc hr { border: 0; border-top: 1px solid var(--border-strong); margin: 32px 0; }
.lg-doc a { color: var(--accent-live); text-underline-offset: 2px; }
.lg-doc h2:target, .lg-doc h3:target { color: var(--accent-live); }
/* (WP18) The English note that the Polish text governs, and any other quote. */
.lg-doc blockquote { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-6); border-left: 3px solid var(--accent-live-a4); background: var(--surface-1); color: var(--text-secondary); }
.lg-doc blockquote p { margin: 0; }
.lg-doc em { font-style: italic; }

/* Privacy has pipe tables; on a phone they scroll sideways rather than squash. */
.lg-tablewrap { overflow-x: auto; margin: 0 0 var(--space-8); border: 1px solid var(--border-subtle); border-radius: var(--radius-6); }
.lg-doc table { border-collapse: collapse; min-width: 560px; width: 100%; font-size: var(--fs-meta); line-height: 1.5; }
.lg-doc th, .lg-doc td { text-align: left; vertical-align: top; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.lg-doc th { background: var(--surface-2); color: var(--text-strong); font-weight: 600; }
.lg-doc tr:last-child td { border-bottom: 0; }

@media (min-width: 720px) {
  .lg-bar { padding: var(--space-7) 32px; }
  .lg-doc { padding-top: 32px; }
}
.lg-doc hr + h2 { border-top: 0; margin-top: var(--space-4); padding-top: 0; }
.lg-embedded .lg-bar { display: none; }
.lg-embedded .lg-doc { padding-top: var(--space-6); }