/* IntelliClerk — Active Matters.
   A layer over dashboard-v3.css, which must be linked first: this file reuses
   that stylesheet's palette, type scale, masthead, ledger card, folder tabs,
   status marks, and button forms, and adds only what the card grid needs. */

/* The overview card's action leads to the new-matter form, so it is a link
   wearing the button's clothes. */
a.btn-draft {
    text-decoration: none;
}

/* ---------- the grid ---------- */

/* One matter to a row, full shell width — the card reads as a pleading leaf
   like the docket's, and the caption no longer has to wrap at 25rem. The gap
   clears the folder tab, which hangs ~1.7rem above each card's top edge. */
#matters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
    /* The first card's tab hangs above it, clear of the line above. */
    margin: 2.6rem 0 1rem;
}

/* ---------- the card ---------- */

.matter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--vellum);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(10, 23, 41, 0.06);
    animation: leaf-in 420ms ease both;
}

/* The pleading-paper double rule. At full width the card can afford the same
   gutter the docket leaves use, so the two pages rule alike. */
.matter-card::before,
.matter-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(27, 46, 74, 0.32);
}

.matter-card::before { left: calc(var(--gutter) - 0.75rem); }
.matter-card::after  { left: calc(var(--gutter) - 0.5rem); }

.matter-card:hover {
    box-shadow: 0 2px 10px rgba(10, 23, 41, 0.12);
}

/* Card padding starts clear of the double rule. */
.matter-card__head,
.matter-card__acts {
    padding: var(--leaf-pad) var(--leaf-pad) 1.2rem var(--gutter);
}

.matter-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--rule-soft);
}

.matter-card__title {
    font-family: var(--display);
    font-size: 1.6875rem;
    font-weight: 400;
    line-height: 1.22;
    margin: 0;
}

.matter-card__venue {
    margin-top: 0.3rem;
    font-size: 1rem;
    color: var(--muted);
}

.matter-card__venue em {
    font-style: normal;
    color: var(--walnut);
}

/* Docket number, date created, and the side of the caption the client sits on
   — the record strip, set in the docket typeface. */
.matter-card__record {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.5rem;
    margin: 0.85rem 0 0;
}

.matter-card__record > div {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.matter-card__record dt {
    font-family: var(--data);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 400;
}

.matter-card__record dd {
    margin: 0;
    font-family: var(--data);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--ink);
}

/* ---------- holdings tally ---------- */

/* Four counts of what the matter holds, ruled apart like the ledger cells. */
.tally {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0;
    padding: 0 var(--leaf-pad) 0 var(--gutter);
    border-bottom: 1px solid var(--rule-soft);
}

.tally__cell {
    padding: 1rem 0.75rem 1.1rem;
    border-left: 1px solid var(--rule-soft);
    text-align: center;
}

.tally__cell:first-child {
    border-left: 0;
}

.tally__count {
    display: block;
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}

/* Nothing filed yet reads as an absence, not a quantity. */
.tally__cell--empty .tally__count {
    color: rgba(110, 97, 83, 0.42);
}

.tally .eyebrow {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
}

/* ---------- actions ---------- */

/* Pushed to the bottom so every card in a row ends on the same line, whatever
   the length of its caption. */
.matter-card__acts {
    display: flex;
    gap: 0.6rem;
}

/* The docket's action button at its own size. A full-width card has room for
   the four abreast, so they sit left rather than stretching across the leaf. */
.matter-card__acts .act {
    flex: 0 0 auto;
    min-width: 9.5rem;
}

/* All four open a shelf of the matter's holdings, so all four share one form:
   plate and rule, brass on hover. */
.act--briefs,
.act--motions,
.act--case,
.act--discovery {
    color: var(--walnut);
    background: var(--plate);
    border-color: var(--rule);
}

.act--briefs:hover,
.act--motions:hover,
.act--case:hover,
.act--discovery:hover {
    color: #FFFFFF;
    background: var(--brass);
    border-color: var(--brass);
}

/* Edit Matter sits with the caption it edits, out of the action row below. */
.matter-card__head .case-act--edit {
    flex: 0 0 auto;
    white-space: nowrap;
}

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

/* Four tally cells across a narrow card leave no room for the counts, so they
   fold to two rows — the odd cells then start a row and drop their left rule. */
@media (max-width: 54rem) {
    .tally {
        grid-template-columns: repeat(2, 1fr);
    }

    .tally__cell:nth-child(odd) {
        border-left: 0;
    }
}

@media (max-width: 40rem) {
    .matter-card__head,
    .matter-card__acts {
        padding-left: 1.6rem;
    }

    .tally {
        padding-left: 1.6rem;
    }

    /* The padding above is tighter than the narrow --gutter, so the rule comes
       back in with it rather than striking through the caption. */
    .matter-card::before { left: 0.85rem; }
    .matter-card::after  { left: 1.1rem; }

    .matter-card__head {
        flex-wrap: wrap;
    }

    .matter-card__title {
        font-size: 1.25rem;
    }

    .matter-card__acts {
        flex-wrap: wrap;
    }

    .matter-card__acts .act {
        flex: 1 1 100%;
    }
}