/* IntelliClerk — Terms of Service and Beta Tester Agreement.
   A layer over dashboard-v3.css, which must be linked first. Both pages are
   one long instrument rather than a docket, so this file sets the leaf as a
   drafted paper: articles numbered down the gutter the entry numbers use, and
   a measure narrow enough to read at length. */

a.btn-draft {
    text-decoration: none;
}

/* Terms and the beta agreement are separate instruments, so their tabs part
   the way the practice areas do. */
.tab--terms { background: var(--ink); }
.tab--beta  { background: var(--walnut); }

/* ---------- the instrument ---------- */

.legal .caption {
    padding-bottom: 1.4rem;
}

.legal__date {
    display: block;
    margin-top: 0.15rem;
    color: var(--walnut);
    letter-spacing: 0.06em;
}

/* ---------- table of articles ---------- */

/* A long instrument is entered at the article counsel wants, not at the top. */
.toc {
    list-style: none;
    margin: 0;
    padding: 1.3rem var(--leaf-pad) 1.4rem var(--gutter);
    border-bottom: 1px solid var(--rule-soft);
    columns: 2;
    column-gap: 2.5rem;
}

.toc li {
    break-inside: avoid;
    margin-bottom: 0.4rem;
}

.toc a {
    font-family: var(--data);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--walnut);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.toc a:hover {
    color: var(--ink);
    border-bottom-color: var(--ochre);
}

/* ---------- articles ---------- */

/* The article number rides in the gutter, right against the double rule, the
   way an entry number does on a docket leaf. */
.clause {
    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule-soft);
}

.legal .clause:last-of-type {
    border-bottom: 0;
    padding-bottom: 2rem;
}

.clause__num {
    font-family: var(--data);
    font-size: 0.875rem;
    color: rgba(27, 46, 74, 0.45);
    text-align: right;
    padding-right: 1.6rem;
    /* Sits on the first line of the heading beside it. */
    padding-top: 0.35rem;
}

.clause__body {
    max-width: 42rem;
    padding-right: var(--leaf-pad);
}

.clause__head {
    font-family: var(--display);
    font-size: 1.3125rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 0.7rem;
}

.clause__body p {
    margin-bottom: 0.85rem;
}

.clause__body p:last-child,
.clause__body ul:last-child {
    margin-bottom: 0;
}

/* Sub-paragraphs, lettered the way an instrument letters them. */
.clause__list {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    counter-reset: sub;
}

.clause__list li {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: 0.5rem;
    counter-increment: sub;
}

.clause__list li::before {
    content: "(" counter(sub, lower-alpha) ")";
    position: absolute;
    left: 0;
    font-family: var(--data);
    font-size: 0.8125rem;
    color: var(--walnut);
}

/* A defined term, the first time the instrument fixes it. */
.clause__body strong {
    font-weight: 600;
}

/* ---------- the foot of the instrument ---------- */

/* Where each paper points at the other, since neither stands alone. */
.legal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 1.3rem var(--leaf-pad) 1.5rem var(--gutter);
    border-top: 1px solid var(--rule);
}

.legal-foot__note {
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.legal-foot a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--data);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--walnut);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.15rem;
    transition: color 140ms ease, border-color 140ms ease;
}

.legal-foot a:hover {
    color: var(--ink);
    border-bottom-color: var(--ochre);
}

/* ---------- narrow screens ---------- */

@media (max-width: 48rem) {
    .toc {
        columns: 1;
        padding-left: var(--leaf-pad);
    }

    /* Below the gutter's width the number sets over its article rather than
       beside it, and the double rule no longer has a column to hold. */
    .clause {
        grid-template-columns: minmax(0, 1fr);
        padding-left: var(--leaf-pad);
        padding-right: var(--leaf-pad);
    }

    .clause__num {
        text-align: left;
        padding: 0 0 0.3rem;
    }

    .clause__body {
        padding-right: 0;
    }

    .legal-foot {
        padding-left: var(--leaf-pad);
    }
}