/* legal.css — /p/legal (Terms of Service + Privacy Policy). Standalone page,
   no global nav — just a back link to myJASPER. Reuses tokens.css vars only. */

body { margin: 0; background: var(--space-gradient), var(--bg-primary); background-repeat: no-repeat; background-attachment: fixed; }

.lg-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  color: var(--text-primary);
  font-family: var(--font-thai);
  /* Full-viewport flex column (2026-08-05 ask) — no navbar to subtract here
     (this page has its own .lg-back header, not the shared global nav), so
     100dvh directly, unlike pages using .fb-page's calc(100dvh - navbar-h). */
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* Reverted centering (2026-08-05 correction — "ไม่เอากลางหน้า...ให้ชิดขอบ
   บน") — content stays pinned at the top, right after .lg-back, in normal
   flow. `.lg-page`'s min-height above is kept so the page background still
   fills the full viewport on short content; it just no longer pulls the
   content down to the middle to do it. */

.lg-back {
  display: inline-flex;
  /* align-self: flex-start (2026-08-05 fix) — .lg-page became a
     flex-direction:column container for the min-height fix above; flex
     items default to align-items:stretch on the cross axis, which silently
     stretched this chip to the full row width regardless of its own
     `display: inline-flex`. This opts it back out to its natural content
     width. */
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  font-size: 9.6px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  background: rgba(var(--surface-rgb),0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4.8px 9.6px 4.8px 8px;
}
@media (hover: hover) { .lg-back:hover { color: var(--text-primary); border-color: var(--text-primary); } }

/* 2 fully separate tabs (2026-07-08) — only the active section is in flow,
   the other is [hidden]; nothing stacks or scrolls past the other anymore. */
.lg-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 24px; background: rgba(var(--surface-rgb),0.05); border-radius: var(--radius-xl); }
.lg-tabs__btn {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: 600 13px var(--font-thai);
  cursor: pointer;
}
.lg-tabs__btn.is-active { background: rgba(var(--accent-gold-rgb),0.14); border-color: var(--accent-gold); color: var(--accent-gold-text); }

.lg-section[hidden] { display: none; }
.lg-section__title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.lg-section__updated { font-size: 11px; color: var(--text-secondary); margin-bottom: 18px; }
.lg-section ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.lg-section li { font-size: 13px; line-height: 1.6; color: var(--text-primary); }

/* Footer link row — shared "ข้อกำหนดการใช้งาน · นโยบายความเป็นส่วนตัว" row,
   appended by every /p page except Login and Legal itself (2026-07-09).
   Base rule below only covers text styling + horizontal padding (so it
   never sits flush against a narrow viewport's edges) — each consuming
   page's own CSS sets the top/bottom spacing to match ITS OWN container's
   existing bottom padding, so the gap above the footer equals the gap
   below it exactly (rather than one shared guess that's wrong everywhere
   except the page it was tuned for). */
.lg-footer-link { text-align: center; font-size: 10px; color: var(--text-secondary); padding: 0 16px; opacity: 0.81; }
.lg-footer-link a { color: var(--text-secondary); text-decoration: none; }
@media (hover: hover) { .lg-footer-link a:hover { color: var(--text-primary); } }

/* Red-fog theme (events/jasper-temptation-2026, 2026-10-12) — scoped so PPW is untouched.
   The fill red (#C0201C) is not an ink: text uses --accent-gold-text, red actions get white ink. */
:root[data-motif-pattern="red-fog"][data-project] .lg-tabs__btn.is-active { background: var(--accent-gold); color: #FFFFFF; }