/* IntelliClerk — Archive.
   A layer over dashboard-v3.css, which must be linked first: this file reuses
   that stylesheet's palette, type scale, masthead, ledger card, and button
   forms. A closed matter is read across rather than worked in, so the archive
   is set as a bound register — one ruled line per matter — instead of the card
   grid the active docket uses. */

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

/* Read by a screen reader, not set on the page: the register's summary and the
   heading over its action column. */
.visually-hidden-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- the register ---------- */

/* The table's own border can't be rounded without the corner cells breaking
   out of it, so the frame is the wrapper's. It also carries the sideways
   scroll on screens too narrow for the register but too wide to stack. */
.register-wrap {
    position: relative;
    margin: 2.6rem 0 1rem;
    background: var(--vellum);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(10, 23, 41, 0.06);
    overflow: hidden;
    animation: leaf-in 420ms ease both;
}

/* The pleading-paper double rule, drawn tight to the left edge as it is on the
   matter cards. It runs the height of the register, behind the lines. */
.register-wrap::before,
.register-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(27, 46, 74, 0.32);
    pointer-events: none;
}

.register-wrap::before { left: 0.85rem; }
.register-wrap::after  { left: 1.1rem; }

.register {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.register th,
.register td {
    text-align: left;
    vertical-align: middle;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--rule-soft);
}

/* Every line clears the double rule. */
.register th:first-child,
.register td:first-child {
    padding-left: 2rem;
}

.register th:last-child,
.register td:last-child {
    padding-right: 1.6rem;
}

/* The register's head is a ruled heading on the same paper, not a second navy
   band under the masthead. */
.register thead th {
    font-family: var(--data);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--parchment);
    border-bottom: 1px solid var(--ink);
    white-space: nowrap;
}

.register tbody tr:last-child td {
    border-bottom: 0;
}

.register tbody tr:hover {
    background: var(--plate);
}

/* ---------- the line ---------- */

.register__name {
    display: block;
    font-family: var(--display);
    font-size: 1.1875rem;
    line-height: 1.25;
}

/* Practice area, in the color the folder tabs give it elsewhere, set with the
   docket number the matter closed under. */
.register__mark {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin-top: 0.35rem;
}

.area {
    font-family: var(--data);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--parchment);
    border-radius: var(--radius-control);
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.area--criminal   { background: var(--ink); }
.area--commercial { background: var(--walnut); }
.area--realestate { background: var(--steel); }

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

.register__venue {
    display: block;
}

.register__venue em {
    display: block;
    font-style: normal;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* Dates, client position, and the brief count are record, so they are set in
   the docket typeface rather than the body serif. */
.register__data {
    font-family: var(--data);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--ink);
    white-space: nowrap;
}

.register__count {
    font-family: var(--display);
    font-size: 1.375rem;
    line-height: 1;
    text-align: center;
}

.register__act {
    text-align: right;
}

/* Nothing here is being worked on, so the archive's one action takes the quiet
   plate the holdings buttons wear on the active docket, not the moss of a live
   brief. */
.act--view {
    min-width: 7.5rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--walnut);
    background: var(--plate);
    border-color: var(--rule);
    border-radius: var(--radius-control);
}

/* It opens the closed matter's file list rather than acting on the register,
   so it is a link wearing the button's clothes. */
a.act--view {
    text-decoration: none;
}

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

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

/* Seven columns stop reading as a line well before the shell runs out, so each
   matter becomes a stacked entry and every cell states its own heading. */
@media (max-width: 62rem) {
    .register,
    .register tbody,
    .register tr,
    .register td {
        display: block;
        width: 100%;
    }

    .register thead {
        display: none;
    }

    .register tbody tr {
        padding: 1.2rem 0 1.3rem;
        border-bottom: 1px solid var(--rule);
    }

    .register tbody tr:last-child {
        border-bottom: 0;
    }

    .register td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.2rem 1.6rem 0.2rem 2rem;
        border-bottom: 0;
    }

    .register td::before {
        content: attr(data-label);
        font-family: var(--data);
        font-size: 0.6875rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        flex: 0 0 auto;
    }

    /* The caption and the action head and foot the entry; neither is a field
       of it, so neither takes a heading. */
    .register__matter,
    .register__act {
        display: block;
        padding-bottom: 0.6rem;
    }

    .register__matter::before,
    .register__act::before {
        content: none;
    }

    .register__act {
        padding-top: 0.9rem;
        padding-bottom: 0;
        text-align: left;
    }

    .register__venue,
    .register__count {
        text-align: right;
    }

    .register__venue em {
        display: inline;
    }
}

@media (max-width: 40rem) {
    .register th:first-child,
    .register td:first-child {
        padding-left: 1.6rem;
    }

    .register__name {
        font-size: 1.0625rem;
    }

    .act--view {
        width: 100%;
        justify-content: center;
    }
}