/* IntelliClerk — Case Document Summary and Discovery Summary.
   A layer over dashboard-v3.css, form.css, new-brief.css, and brief-view.css,
   in that order. The summary is read the way a brief's summary is read, so the
   leaf, the panel head, and the digest all come from brief-view.css; this file
   adds the file bar above the leaf and the few marks the digest needs to carry
   a document rather than a draft.

   Both pages are the same instrument; only where the paper came from parts
   them, and the tab is what says so. */

.tab--intake    { background: var(--ink); }
.tab--discovery { background: var(--steel); }

/* ---------- the file bar ---------- */

/* What was uploaded, and what may be done with it. It sits above the leaf
   rather than inside it: the summary is IntelliClerk's reading of the document,
   while the file itself is the record counsel put in — two different things,
   and the bar keeps them apart. */
.filebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.75rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 2.9rem;
    padding: 0.9rem 1.1rem;
    background: var(--vellum);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--steel);
    border-radius: var(--radius-control);
}

/* Discovery came from the other side, so its bar is marked in the walnut the
   docket gives to produced material rather than the steel of counsel's own. */
.filebar--produced {
    border-left-color: var(--walnut);
}

.filebar--produced .filebar__mark {
    color: var(--walnut);
}

.filebar__read {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.filebar__mark {
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    color: var(--steel);
}

.filebar__name {
    font-family: var(--data);
    font-size: 0.875rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.filebar__note {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.filebar__acts {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Downloading takes the file back out unchanged, so it keeps the quiet
   outline; exporting produces something new and takes the ink. */
.btn-file {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--walnut);
    background: var(--plate);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    padding: 0.5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn-file:hover {
    color: #FFFFFF;
    background: var(--brass);
    border-color: var(--brass);
}

.btn-file--export {
    color: var(--parchment);
    background: var(--ink);
    border-color: var(--ink);
}

.btn-file--export:hover {
    color: #FFFFFF;
    background: var(--brass);
    border-color: var(--brass);
}

/* ---------- the description filed at upload ---------- */

/* What counsel wrote when the file was put in, kept in counsel's own hand and
   kept out of the leaf: the summary below is IntelliClerk's reading, and this
   is what it was told to read for. Ochre marks it as the one thing on the page
   a person wrote. */
.filed-note {
    max-width: 46rem;
    margin: 0 0 2.9rem;
    padding: 1rem 1.2rem 1.05rem;
    background: var(--plate);
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--ochre);
    border-radius: var(--radius-control);
}

.filed-note__label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Set in the reading face rather than the docket face — it is prose counsel
   wrote, not a field of the record. */
.filed-note__text {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text);
}

.filed-note__text p + p {
    margin-top: 0.7rem;
}

.filed-note__by {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* ---------- the summary ---------- */

/* Where the reading came from and when. Set as a note under the panel head so
   the first term of the digest is still the first thing read. */
.summary__provenance {
    margin-top: 0.9rem;
    max-width: 46rem;
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--muted);
}

/* Facts drawn out of the document are listed rather than written out, so the
   eye can run down them the way it runs down a docket. */
.digest__list {
    margin: 0.55rem 0 0;
    padding: 0;
    max-width: 46rem;
    list-style: none;
}

.digest__item {
    display: flex;
    gap: 0.9rem;
    padding: 0.5rem 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    border-bottom: 1px solid var(--rule-soft);
}

.digest__item:last-child {
    border-bottom: 0;
}

/* The page of the document the fact was read off, so counsel can go to it. */
.digest__cite {
    flex: 0 0 4.4rem;
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding-top: 0.28rem;
}

/* A point the summary flags for counsel rather than merely reports. */
.digest__item--flag .digest__cite {
    color: var(--ochre-deep);
}

.digest__flag {
    font-family: var(--data);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ochre-deep);
    margin-right: 0.5rem;
}

/* ---------- the foot of the leaf ---------- */

/* How the summary was made, standing where a certificate of service stands. */
.summary__foot {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

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

@media (max-width: 40rem) {
    .filebar__acts {
        width: 100%;
    }

    .btn-file {
        flex: 1 1 auto;
        justify-content: center;
    }

    .digest__item {
        flex-direction: column;
        gap: 0.1rem;
    }

    .digest__cite {
        padding-top: 0;
    }
}