/* -- Info page layout (about, privacy, terms) -- */

:root {
  --ui-scale: 15px;
  --font-container-title: calc(var(--ui-scale) * 1.33);
  --font-body:            var(--ui-scale);
  --font-secondary:       calc(var(--ui-scale) * 0.93);
  --font-small:           calc(var(--ui-scale) * 0.87);
}

html { height: 100% !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
body { height: 100% !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important;
       font-size: var(--font-body); letter-spacing: 0.5px; word-spacing: 1px; }

.info-page   { display: flex; flex-direction: column; height: 100%; }
.info-scroll  { flex: 1; overflow-y: auto; min-height: 0; padding: 40px 24px 40px; }
.info-scroll .panel { max-width: 720px; margin: 0 auto; }

.panel {
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  background: var(--secondary-bg);
  padding: 24px 28px;
}
.panel-title { color: var(--accent); font-size: var(--font-container-title); margin: 0 0 4px; }
.panel p, .panel ul { margin-top: 12px; margin-bottom: 12px; }
.panel a { color: var(--accent); text-decoration: none; }
.panel a:hover { text-decoration: underline; }
.info-row { display: flex; gap: 12px; margin-top: 8px; }
.info-label { color: var(--text-3); min-width: 90px; }

/* Prevent content from hiding behind fixed footer */
.info-scroll { padding-bottom: 50px !important; }

@media (max-width: 768px) {
  .info-scroll { padding: 24px 14px 24px; }
}