/* Privacy and Terms, as two tabs of one screen (2026-10-12). The policy text itself is
   authored in the admin's editor and brings its own paragraphs and links, so the body
   styles what arrives rather than assuming a shape. */
.pol { display: grid; gap: 12px; }

.pol-notice {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--wx-signal, #d4af37);
    color: var(--wx-muted, #c9c9c9);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Two, and only ever two - so they share the width rather than sitting in a scrolling
   rail like the streams chips.

   Full width on every surface, to the same edges as the notice above and the text
   below. Two tabs spanning a desktop would be a lot of button for one word each, which
   is why they are not one word each: they carry the documents' own names, "Privacy
   Policy" and "Terms of Service", which have the weight to fill the room. */
.pol-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    background: var(--wx-surface-2, #1d1d1d);
}

.pol-tab {
    appearance: none;
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    background: transparent;
    color: var(--wx-muted, #c9c9c9);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pol-tab.is-on {
    background: var(--wx-surface, #262626);
    color: var(--wx-ink, #fff);
}

.pol-tab:focus-visible {
    outline: 2px solid var(--wx-signal, #d4af37);
    outline-offset: 2px;
}

.pol-body { display: grid; gap: 12px; }

.pol-text {
    color: var(--wx-ink, #fff);
    font-size: 0.86rem;
    line-height: 1.6;
}

.pol-text p, .pol-text ul, .pol-text ol { margin: 0 0 10px; }
.pol-text ul, .pol-text ol { padding-left: 20px; }
.pol-text h2, .pol-text h3 { margin: 14px 0 6px; font-size: 0.95rem; }
.pol-text a { color: var(--wx-signal, #d4af37); }

/* The website, where the page is the whole page rather than a phone-shaped column.
   No measure of its own: it fills what the page gives it, which is what Frank asked
   for - the narrow 760px reading column made a long policy a very long scroll. The
   type gets a little bigger with the room, and the headings get more air. */
.pol.is-wide {
    gap: 18px;
}

.pol.is-wide .pol-notice { font-size: 0.9rem; }

.pol.is-wide .pol-text {
    font-size: 0.95rem;
    line-height: 1.7;
}

/* A policy brings its own headings and its own centred title. Given room, they want
   more air above them than the app's narrow column allows. */
.pol.is-wide .pol-text h1 { margin: 0 0 14px; font-size: 1.4rem; }
.pol.is-wide .pol-text h2 { margin: 24px 0 8px; font-size: 1.15rem; }
.pol.is-wide .pol-text h3 { margin: 18px 0 6px; font-size: 1rem; }
.pol.is-wide .pol-text p, .pol.is-wide .pol-text ul, .pol.is-wide .pol-text ol { margin: 0 0 12px; }

/* A tab that is a link on the website and a button in the app. Both are .pol-tab, so
   the link gives back what an anchor brings with it: no underline, the button's own
   colour rather than the theme's link colour, and the same box to tap. */
a.pol-tab {
    display: block;
    text-align: center;
    text-decoration: none;
}

a.pol-tab:hover { color: var(--wx-ink, #fff); text-decoration: none; }