/* IntelliClerk — Discovery Analysis.
   A layer over dashboard-v3.css, form.css, new-brief.css, brief-view.css, and
   summary.css, in that order. The page reads a whole production rather than one
   item, so the leaf, the panel head, the digest, and the cited-fact list all
   come from the two files below it; this file adds the tabs that part the four
   readings, the productions table, and the marks a recommendation needs. */

/* Four leaves, read in order: what arrived, what it shows, what is missing,
   what to do. The tabs keep them apart at a glance, and the omissions leaf
   takes the ochre the docket reserves for a warning. */
.tab--standing  { background: var(--steel); }
.tab--highlight { background: var(--ink); }
.tab--omission  { background: var(--ochre-deep); }
.tab--next      { background: var(--walnut); }

/* ---------- findings cited to items ---------- */

/* A finding here is read off an item of the production rather than a page of
   one document, so the cite column carries the entry number from the docket and
   is set wide enough for a finding drawn from two items at once. */
.digest__list--items .digest__cite {
    flex: 0 0 6.6rem;
    white-space: nowrap;
}

/* Where a finding is read against the file rather than out of it. */
.digest__against {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--steel);
}

/* ---------- productions received ---------- */

/* Discovery arrives in tranches, and when a thing arrived is often the point,
   so the productions are set as a register with the date in the docket face. */
.tranche {
    margin: 0.55rem 0 0;
    padding: 0;
    max-width: 46rem;
    list-style: none;
    counter-reset: tranche;
}

.tranche__item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.2rem 1.1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule-soft);
}

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

.tranche__when {
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--ink);
    padding-top: 0.28rem;
}

.tranche__what {
    font-size: 1.0625rem;
    line-height: 1.55;
}

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

/* The tranche still being read, and the one that changed what came before it. */
.tranche__item--open .tranche__when,
.tranche__item--open .tranche__count {
    color: var(--ochre-deep);
}

/* ---------- what to do next ---------- */

/* Recommendations are numbered because they are taken in order, and each says
   what it rests on — a recommendation with nothing under it is an opinion. */
.next {
    margin: 0.55rem 0 0;
    padding: 0;
    max-width: 46rem;
    list-style: none;
    counter-reset: next;
}

.next__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.2rem 1.1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule-soft);
    counter-increment: next;
}

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

.next__item::before {
    content: counter(next) ".";
    font-family: var(--data);
    font-size: 0.8125rem;
    color: var(--walnut);
    padding-top: 0.2rem;
}

.next__act {
    font-size: 1.0625rem;
    line-height: 1.55;
}

.next__basis {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--muted);
}

/* A step with a date on it. Ochre, because the date is the whole of the
   warning. */
.next__due {
    display: inline-block;
    margin-top: 0.35rem;
    font-family: var(--data);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ochre-deep);
    border: 1px solid var(--ochre-deep);
    border-radius: var(--radius-control);
    padding: 0.2rem 0.5rem;
}

/* ---------- where the analysis stands ---------- */

/* An analysis is a reading taken on a date, and the file goes on growing after
   it. This bar carries that fact at the head of the page: which date the
   reading was taken, and whether anything has come in since. Where something
   has, the reading no longer answers for the whole file — the bar says so in
   the ochre the page reserves for a warning, and offers to take the reading
   again.

   It carries the same states and the same colours as the bar above the document
   lists, so the standing of an analysis reads the same wherever it is met. */
.currency {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    margin: 1.1rem 0 1.6rem;
    padding: 0.9rem 1.15rem;
    background: var(--plate);
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--rule);
    border-radius: var(--radius-control);
}

.currency__read {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* Hollow until the analysis stands for something; filled in the colour of
   whatever state it is in. */
.currency__mark {
    width: 0.6rem;
    height: 0.6rem;
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid var(--rule);
    background: transparent;
}

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

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

/* The state names the standing and the detail qualifies it; the point parts the
   two the way the docket parts its particulars. */
.currency__detail::before {
    content: "\00b7";
    margin-right: 0.6rem;
    color: var(--rule);
}

.currency__detail:empty::before {
    content: none;
}

/* The acts come after the caveat, so counsel is told what the reading does not
   cover before being offered the button that fixes it. */
.currency__acts {
    order: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* The reading on file answers for everything under it. */
.currency[data-state="current"] {
    border-left-color: var(--moss);
}

.currency[data-state="current"] .currency__mark {
    background: var(--moss);
    border-color: var(--moss);
}

.currency[data-state="current"] .currency__state {
    color: var(--moss);
}

/* Being read again. Nothing on the page below has changed yet. */
.currency[data-state="working"] {
    border-left-color: var(--steel);
}

.currency[data-state="working"] .currency__mark {
    background: var(--steel);
    border-color: var(--steel);
}

.currency[data-state="working"] .currency__state {
    color: var(--steel);
}

/* Files have come in since the reading was taken, so what follows no longer
   answers for the whole file. The one state that asks for something. */
.currency[data-state="stale"] {
    border-left-color: var(--ochre-deep);
    background: rgba(166, 100, 28, 0.05);
}

.currency[data-state="stale"] .currency__mark {
    background: var(--ochre-deep);
    border-color: var(--ochre-deep);
}

.currency[data-state="stale"] .currency__state {
    color: var(--ochre-deep);
    font-weight: 700;
}

/* Said once in words, under the bar, because a coloured edge is not notice
   enough that everything below it was read against an older file. Shown only
   where it is true. */
.currency__caveat {
    order: 2;
    flex: 1 0 100%;
    margin: 0.15rem 0 0;
    max-width: 46rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--ochre-deep);
}

.currency:not([data-state="stale"]) .currency__caveat,
.currency:not([data-state="stale"]) .currency__regen {
    display: none;
}

/* Exporting is the act on a current page and takes the ink; where the reading
   is out of date, taking it again is the act asked for, and the export steps
   back to the quiet outline behind it. */
.currency__regen {
    color: var(--parchment);
    background: var(--ink);
    border-color: var(--ink);
}

.currency[data-state="stale"] .btn-file--export {
    color: var(--walnut);
    background: var(--plate);
    border-color: var(--rule);
}

.currency[data-state="stale"] .btn-file--export:hover {
    color: #FFFFFF;
    background: var(--brass);
    border-color: var(--brass);
}

/* Nothing is pressed twice while the reading is being taken. */
.currency[data-state="working"] .btn-file {
    opacity: 0.55;
    pointer-events: none;
}

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

@media (max-width: 40rem) {
    .tranche__item,
    .next__item {
        grid-template-columns: 1fr;
    }

    .tranche__when {
        padding-top: 0;
    }

    .next__item::before {
        padding-top: 0;
    }
}