/* =========================================================================
   The public policy page.

   Plain HTML served straight from wwwroot, outside the Blazor router, and that
   is the point of it. The app is a Blazor Server circuit whose layout paints a
   loading state until the session has been restored, so anything reading a
   page without opening a WebSocket — a crawler, or the person reviewing the
   site for AdSense — receives an empty shell for every app route. A document
   that has to be readable by those has to need no circuit at all.

   It reuses site.css for the palette and shell.css for the scene and the
   frame, so it belongs to the same place as the game. Only what a long-form
   reading page needs lives here.
   ========================================================================= */

/* The app frame is a two-column shell; this is one column of prose, so the
   content area carries the reading measure itself. */
.public-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-xl) 0 var(--space-xxl);
}

.public-page .brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xxl);
}

.public-page .brand-row img { width: 168px; height: auto; display: block; }

.public-page h2 {
    margin: var(--space-xxl) 0 var(--space-md);
    padding-bottom: var(--space-sm);
    font-size: 22px;
    border-bottom: 1px solid var(--divider);
}

.public-page p { margin: 0 0 var(--space-md); }

.public-page ul { margin: 0 0 var(--space-md); padding-left: 1.25em; }

.public-page li { margin-bottom: var(--space-xs); }

.policy .updated {
    margin-bottom: var(--space-xl);
    font-size: 14px;
    color: var(--ink-muted);
}

.policy table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); }

.policy th, .policy td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
    border-bottom: 1px solid var(--divider);
}

.policy th { font-weight: 700; }

.policy td:first-child { white-space: nowrap; font-weight: 600; }

/* A three-column table has nowhere to go on a phone, so let it scroll inside
   its own box rather than making the whole page scroll sideways. */
.table-scroll { overflow-x: auto; }

.public-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-xxl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--divider);
    font-size: 14px;
    color: var(--ink-muted);
}

.public-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }

.public-footer a { color: var(--ink-muted); }
.public-footer a:hover { color: var(--coral); }

@media (max-width: 700px) {
    .public-page .brand-row { flex-direction: column; align-items: flex-start; }
}