/* ALMA · the legal pages (SITEKIT): views/legal.ejs (/tos, /aup, /privacy, /refund-policy, /contact).
   An art banner, the five pages as tabs with a gliding gold underline, then the text beside a contents list
   (legal.js) that marks the section being read. On top of game-system.css and site.css (.prose is in site.css). */

.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-block: var(--s5) var(--s7); }
.legal-banner { min-height: clamp(220px, 26vw, 320px); display: grid; align-items: end; padding: var(--s6); animation: gm-in-fade 700ms var(--ease-soft) backwards; }
.legal-banner > picture > img { object-position: 70% 60%; }
.legal-head { display: grid; gap: 10px; max-width: 640px; animation: gm-in-up var(--t-panel) var(--ease-panel) 120ms backwards; }
.legal-head h1 { font: 400 clamp(32px, 4.2vw, 52px)/1.05 var(--f-display); letter-spacing: 0.01em; text-wrap: balance; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 6px var(--s4); color: var(--fg-2); font: 600 12.5px/1.2 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; }
.legal-meta span { display: inline-flex; align-items: center; gap: 8px; }
.legal-meta span + span::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

/* the five pages, as tabs; the underline glides to the current one (legal.js sets --ix / --iw) */
.legal-tabs { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.legal-tabs::-webkit-scrollbar { display: none; }
.legal-tabs a { position: relative; flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 14px; color: var(--fg-2); font: 600 13px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--t-quick), background var(--t-quick); }
.legal-tabs a:hover { color: var(--fg); background: var(--gold-tint); }
.legal-tabs a[aria-current="page"] { color: var(--fg); }
.legal-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px; background: var(--gold); }
.legal-tabs a[aria-current="page"]::before { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; margin-left: -4px; background: var(--gold); transform: rotate(45deg); }
.legal-tabs a:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
.legal-tabs.has-ink a[aria-current="page"]::after, .legal-tabs.has-ink a[aria-current="page"]::before { display: none; }
.legal-ink { position: absolute; left: 0; bottom: 0; height: 1px; width: 1px; background: var(--gold); transform-origin: 0 0; transform: translateX(var(--ix, 0)) scaleX(var(--iw, 0)); transition: transform 520ms var(--ease-panel); pointer-events: none; }
.legal-ink-dia { position: absolute; left: 0; bottom: -3px; width: 7px; height: 7px; margin-left: -4px; background: var(--gold); transform: translateX(var(--ic, 0)) rotate(45deg); transition: transform 520ms var(--ease-panel); pointer-events: none; }

/* text and contents */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.legal-layout:has(.legal-toc[hidden]) { grid-template-columns: minmax(0, 1fr); }
.legal-toc { position: sticky; top: calc(var(--nav-h) + var(--s5)); display: grid; gap: var(--s3); max-height: calc(100vh - var(--nav-h) - var(--s7)); overflow-y: auto; scrollbar-width: thin; animation: gm-in-left var(--t-panel) var(--ease-panel) 200ms backwards; }
.legal-toc ol { position: relative; display: grid; gap: 2px; margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 1px solid var(--line); }
.legal-toc a { display: block; padding: 6px 8px; color: var(--fg-3); font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: color var(--t-quick), background var(--t-quick); }
.legal-toc a:hover { color: var(--fg); background: var(--gold-tint); }
.legal-toc a[aria-current="true"] { color: var(--fg); }
.legal-toc a:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
.legal-toc .gm-marker { left: -15px; margin: 0 0 0 -4px; }
.legal-prose { max-width: none; padding: var(--s6) clamp(var(--s4), 4vw, var(--s7)); }
.legal-prose > * { max-width: 76ch; }
.legal-prose h2 { transition: color var(--t-base); }
.legal-prose h2.is-here { color: var(--gold-hot); }
.legal-report { --cut: 10px; display: grid; gap: var(--s2); padding: var(--s4) var(--s5); background: var(--gold-tint); box-shadow: inset 0 0 0 1px oklch(0.85 0.09 85 / 0.4); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.legal-report h2 { margin-top: 0; }
.legal-home a { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); font: 600 13px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.legal-home a:hover { color: var(--fg); }
.legal-home a:hover .ico { transform: translateX(-3px); }
.legal-home .ico { width: 16px; height: 16px; transition: transform var(--t-quick); }

@media (max-width: 960px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { display: none; }
}
@media (max-width: 640px) {
  .legal-banner { padding: var(--s5) var(--s4); min-height: 240px; }
  .legal-banner > picture > img { object-position: 78% 60%; }
  .legal-prose { padding: var(--s5) var(--s4); font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-banner, .legal-head, .legal-toc { animation: none; }
  .legal-ink, .legal-ink-dia { transition: none; }
}