/* ---- Legal documents ----
   A legal document, so it is set for reading rather than for scanning: one
   column, generous line height, and headings that separate clauses instead of
   competing with them. Measure is held near 68 characters, which is where
   prose wants to be at this size regardless of how wide the window is.

   These pages opt out of the app chrome deliberately. The rest of Communicept
   is a fixed-height flex shell that never scrolls the body; a document that
   cannot scroll is a document nobody can read past the first screen. */

.legal-body {
    overflow-y: auto;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.65;
}

.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 24px 0;
    box-sizing: border-box;
}

.legal-home {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.legal-home .legal-logo {
    height: 34px;
    width: 34px;
}

.legal-wordmark {
    font-family: nexa-black, sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--primary-color);
}

.legal-back,
.text-link {
    color: var(--secondary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, color 0.3s;
}

.legal-back:hover,
.text-link:hover {
    border-bottom-color: var(--secondary-color);
}

.legal-back:focus-visible,
.text-link:focus-visible,
.legal-tab:focus-visible,
.section-rail a:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
}

/* ---- The switch between the documents ----
   Styled as one control rather than three buttons: they are three parts of the
   same agreement, and a reader who lands on one should see the other two
   without hunting for them. */

.legal-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 32px;
}

.legal-tabs__sep {
    color: var(--sub-text);
    margin: 0 6px;
}

.legal-tab {
    font-family: nexa-bold, sans-serif;
    font-size: 15px;
    padding: 2px 4px;
    color: var(--text-color-fade);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

.legal-tab:hover {
    color: var(--text-color);
}

.legal-tab[aria-current="page"] {
    color: var(--text-color);
    border-bottom-color: var(--primary-color);
}

/* ---- The document ---- */

.policy {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    box-sizing: border-box;
}

.policy__title {
    font-family: nexa-black, sans-serif;
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--text-color);
}

.policy__updated {
    margin: 0 0 32px;
    font-size: 14px;
    color: var(--sub-text);
}

.policy__intro {
    margin: 0 0 20px;
    max-width: 66ch;
    color: var(--text-color-fade);
}

.policy__section {
    margin: 0 0 40px;
    /* Anchored headings land under the sticky nothing — but a browser scrolls
       an :target flush to the viewport edge, which reads as the heading being
       cropped. */
    scroll-margin-top: 24px;
}

.policy__h {
    font-family: nexa-bold, sans-serif;
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 14px;
    color: var(--text-color);
}

.policy__h3 {
    font-family: nexa-bold, sans-serif;
    font-size: 15px;
    margin: 0 0 10px;
    color: var(--text-color);
}

.policy__p {
    margin: 0 0 14px;
    max-width: 68ch;
    color: var(--text-color-fade);
}

.policy__list {
    margin: 0 0 14px;
    padding-left: 20px;
    max-width: 68ch;
    list-style: disc;
    color: var(--text-color-fade);
}

.policy__list li {
    margin-bottom: 10px;
}

.policy__group {
    margin: 0 0 24px;
}

.policy__contact {
    margin: 48px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--foreground-color);
    color: var(--text-color-fade);
}

/* ---- Section rail ----
   Collapsed to a column of ticks and opened on hover or focus. Eighteen clause
   titles permanently in the margin is a second document competing with the
   first; a tick per clause still shows how long the document is and where you
   are in it. Hidden below the width where there is no margin to park it in. */

.section-rail {
    position: fixed;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 8px;
    z-index: 10;
}

.section-rail a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color-fade);
    font-size: 13px;
}

.section-rail__tick {
    flex: 0 0 auto;
    height: 2px;
    width: 14px;
    background-color: var(--sub-text);
    transition: background-color 0.3s, width 0.3s;
}

.section-rail a[aria-current="true"] .section-rail__tick {
    width: 22px;
    background-color: var(--primary-color);
}

.section-rail__label {
    /* Out of the layout, not out of the accessibility tree: the labels are the
       only thing that makes a tick meaningful, and a screen reader gets them
       whether or not a pointer is hovering. */
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.3s, opacity 0.3s;
}

.section-rail:hover .section-rail__label,
.section-rail:focus-within .section-rail__label {
    max-width: 200px;
    opacity: 1;
}

.section-rail:hover a:hover,
.section-rail a:focus-visible {
    color: var(--text-color);
}

.legal-footer {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px 32px;
    text-align: center;
}

.legal-footer .footer-info {
    opacity: 0.5;
    animation: none;
}

@media (max-width: 1200px) {
    .section-rail { display: none; }
}

@media (max-width: 640px) {
    .policy { padding: 24px 18px 48px; }
    .policy__title { font-size: 26px; }
    .legal-header { padding: 18px 18px 0; }
}