/* Shared chrome for the static legal pages (Privacy / Terms / DMCA / §2257).
   Palette mirrors front/404.html + the index.html :root tokens so the pages
   read as part of GayBoard without pulling in the SPA bundle (these are plain
   static HTML served by nginx, no JS, no webpack). Content measure is capped
   for legibility; the header is sticky so "Back to board" is always reachable
   on long documents. */
:root {
    --surface-0: #07090B;
    --surface-chrome: #0C1013;
    --surface-1: #141A1F;
    --surface-2: #1B2329;
    --text-1: #F0F4F6;
    --text-2: #8FA3AA;
    --text-3: #5E727A;
    --accent: #6E45E8;
    --accent-strong: #8B6AF5;
    --hairline: rgba(255, 255, 255, .06);
    --hairline-strong: rgba(255, 255, 255, .11);
    --r-sm: 8px;
    --r-xs: 6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--surface-0);
    color: var(--text-1);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sticky header with brand + back link */
.legalHeader {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 12px clamp(1rem, 5vw, 2rem) 10px;
    background: var(--surface-chrome);
    border-bottom: 1px solid var(--hairline);
}
.legalHeader .brand {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text-1);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.1;
}
.legalHeader .brand::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 3px;
    border-radius: 1px;
    opacity: .88;
    background: linear-gradient(90deg,
        #FF5B5B 0 16.66%, #FFA940 16.66% 33.33%, #FFE45C 33.33% 50%,
        #4DD07A 50% 66.66%, #4F8CFF 66.66% 83.33%, #B46CFF 83.33% 100%);
}
.legalHeader .back {
    color: var(--text-2);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-xs);
    padding: 4px 8px;
    background: var(--surface-2);
    white-space: nowrap;
}
.legalHeader .back:hover { color: var(--text-1); border-color: var(--text-2); }

/* Article column */
main {
    max-width: 68rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 5vw, 2rem) 4rem;
}
article { max-width: 42rem; }

.eyebrow {
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    margin: 0 0 .5rem;
}
h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .4rem;
    letter-spacing: -.01em;
}
.updated {
    color: var(--text-2);
    font-size: .9rem;
    margin: 0 0 2rem;
}
h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 2rem 0 .6rem;
    padding-top: .2rem;
}
h3 { font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
p { margin: 0 0 1rem; color: var(--text-1); }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin: 0 0 .4rem; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.5rem 0; }

.lead {
    font-size: 1.1rem;
    color: var(--text-2);
    margin: 0 0 1.6rem;
}
.note {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-sm) var(--r-xs) var(--r-xs) var(--r-xs);
    padding: 1rem 1.2rem 1rem 1.35rem;
    margin: 1.4rem 0;
    font-size: .98rem;
    color: var(--text-2);
}
/* Straight 2px accent, inset from the corner radius — same as the board rules. */
.note::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--r-sm);
    bottom: var(--r-xs);
    width: 2px;
    background: var(--accent);
    border-radius: 0;
}
.contact {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    color: var(--text-1);
}

/* Placeholder that the operator MUST replace before launch — visibly flagged. */
.tofill {
    color: var(--accent-strong);
    background: rgba(124, 82, 240, .1);
    border-bottom: 1px dashed var(--accent-strong);
    padding: 0 .15em;
    border-radius: 2px;
}

.legalFooter {
    border-top: 1px solid var(--hairline);
    margin-top: 3rem;
    padding-top: 1.5rem;
    color: var(--text-2);
    font-size: .9rem;
}
.legalFooter nav { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-bottom: 1rem; }
.legalFooter a { color: var(--text-2); }
.legalFooter a:hover { color: var(--text-1); }

@media (max-width: 767px) {
    .legalHeader {
        box-sizing: border-box;
        height: calc(55px + env(safe-area-inset-top, 0px));
        min-height: calc(55px + env(safe-area-inset-top, 0px));
        padding: 6px 12px;
        padding-top: calc(6px + env(safe-area-inset-top, 0px));
    }
}