/* The legal pages (data protection, terms): a title and numbered chapters in the
   journal's reading column, with the setup screen's chapter rail on the left (home/js/legal.js).
   Pages: templates/public/legal/. */

:root {
    --legal-column: 760px;
    /* the macOS setup's rail: 26pt orb, 6pt dots, 14pt apart */
    --legal-orb: 26px;
    --legal-dot: 6px;
}

.lg {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(0, var(--legal-column)) minmax(0, 1fr);
    column-gap: var(--gutter);
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px var(--gutter) calc(var(--gutter) * 3);
    counter-reset: chapter;
}

/* -- Chapter rail ------ */

.lg-rail {
    position: sticky;
    top: var(--nav-h);
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--screen-h) - var(--nav-h));
}

.lg-rail-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lg-step {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--legal-orb);
    color: inherit;
    text-decoration: none;
    outline: none;
}

.lg-mark {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--legal-orb);
    height: var(--legal-orb);
}

/* ahead: faint; done: filled; current: the orb instead. Fades both ways after a beat, like the app. */
.lg-dot {
    width: var(--legal-dot);
    height: var(--legal-dot);
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    transition: opacity .4s var(--ease) .35s, background-color .4s var(--ease), transform .3s var(--ease);
}

.lg-step.is-done .lg-dot { background: var(--primary-color-light); }
.lg-step.is-current .lg-dot,
.lg-step.is-leaving .lg-dot { opacity: 0; }
.lg-step:not(.is-current):hover .lg-dot,
.lg-step:not(.is-current):focus-visible .lg-dot { transform: scale(1.5); }

.lg-mark ada-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--legal-orb);
    translate: -50% -50%;
    opacity: 0;
    transition: opacity .2s linear;
}

.lg-mark ada-orb.is-shown { opacity: 1; }
.lg-mark ada-orb[state="scattering"] { transition-duration: .3s; }

/* the current chapter's name shows once its orb has gathered; the others' on hover */
.lg-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--between-color);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s;
}

.lg-step.is-named .lg-name { opacity: 1; transform: none; color: var(--primary-color-light); }
.lg-step:hover .lg-name,
.lg-step:focus-visible .lg-name { opacity: 1; transform: none; }
.lg-step:hover .lg-name { color: var(--primary-color-light); }

/* only on narrow screens, where the names don't fit beside the dots */
.lg-rail-now { display: none; }

/* -- Document ------ */

.lg-doc {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gutter) * 1.4);
    min-width: 0;
    padding-top: calc(var(--gutter) * 1.2);
}

.lg-head { display: flex; flex-direction: column; gap: 14px; }
.lg-head .header { width: auto; margin: 0; text-wrap: balance; }

.lg-meta {
    margin: 0;
    font-size: 14px;
    color: var(--primary-color-light);
}

.lg-chapter { scroll-margin-top: calc(var(--nav-h) + 24px); }

.lg-chapter > h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: auto;
    margin: 0 0 16px 0;
    text-wrap: balance;
}

.lg-chapter { counter-increment: chapter; }
.lg-chapter > h2::before {
    content: counter(chapter, decimal-leading-zero);
    flex: none;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--between-color);
}

.lg-text {
    font-size: 17px;
    line-height: 1.65;
    color: var(--primary-color);
    overflow-wrap: break-word;
}

/* :where keeps this below the spacing rule after it */
.lg-text :where(p, ul, h3, address) { margin: 0; }
.lg-text > * + * { margin-top: .9em; }
.lg-text ul { padding-left: 1.3em; }
.lg-text li + li { margin-top: .35em; }
.lg-text li::marker { color: var(--between-color); }
.lg-text strong { font-weight: 600; }

.lg-text h3 {
    font-size: 17px;
    font-weight: 600;
}

.lg-text > h3 { margin-top: 1.4em; }

.lg-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--accent-color);
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color .3s;
}

.lg-text a:hover { text-decoration-color: var(--primary-color); }

/* a detail still to be filled in */
.lg-todo {
    padding: 0 .3em;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-color) 35%, transparent);
    color: inherit;
}

.lg-address { font-style: normal; }

/* -- Narrow screens: the dots in a row at the top, like the iPhone's setup ------ */

@media (max-width: 860px) {
    .lg { display: block; padding-top: 0; }

    .lg-rail {
        top: var(--nav-h);
        z-index: 10;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: 48px;
        margin: 0 calc(var(--gutter) * -1);
        padding: 0 var(--gutter);
        background: var(--secondary-color);
    }

    /* every mark the same width, so nothing moves when the orb changes places; the 26px orb
       overhangs its 20px mark into the gaps */
    .lg-rail-list { flex-direction: row; align-items: center; gap: 4px; }
    .lg-step { gap: 0; }
    .lg-mark { width: 20px; }
    .lg-name { display: none; }

    .lg-rail-now {
        display: block;
        min-width: 0;
        overflow: hidden;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--primary-color-light);
    }

    .lg-chapter { scroll-margin-top: calc(var(--nav-h) + 48px + 16px); }
    .lg-text { font-size: 16px; }
}