/* IntelliClerk — Account.
   A layer over dashboard-v3.css and form.css, in that order: the two sections
   are docket leaves, and their field labels are the ones the new-matter form
   sets. This file adds the profile's two-column plate, the firm mark, and the
   subscription's plan row. */

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

/* The account's leaves divide the record from the terms it is held under. */
.tab--profile      { background: var(--ink); }
.tab--subscription { background: var(--walnut); }

/* ---------- attorney profile ---------- */

/* The card's one action is pinned to its top right corner rather than set in
   the caption, so it holds the corner however long the record beside it runs.
   The leaf is already positioned, so the button hangs off that. */
.profile-leaf .case-act--edit {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 1;
    margin: 0;
}

/* The docket data then starts clear of the button above it. */
.profile-leaf .caption__meta {
    padding-top: 1rem;
}

/* The mark sits left of the record it letterheads, on the same line the leaf's
   double rule already draws down the page. */
.profile {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 2rem 2.5rem;
    padding: 1.75rem var(--leaf-pad) 1.9rem var(--gutter);
}

/* The uploaded logo, shown as it is set on a brief's letterhead: on plate,
   ruled, and given room around it. */
.mark-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--plate);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    padding: 1.5rem 1.25rem;
}

.mark-plate svg {
    width: 100%;
    height: auto;
}

.mark-file {
    display: block;
    margin-top: 0.65rem;
    font-family: var(--data);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--muted);
}

/* Name, firm, bar, address, phone — the particulars that head every filing, so
   they are set two to a line and read down. */
.profile__record {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 2rem;
    margin: 0;
}

.profile__record > div {
    min-width: 0;
}

/* The record is wider than the address, which is the one field that wraps. */
.profile__record > .profile__wide {
    grid-column: 1 / -1;
}

.profile__record dd {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* Bar number, phone, and anything else the clerk would read back is record, so
   it takes the docket face. */
.profile__record .is-data {
    font-family: var(--data);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: var(--ink);
}

.profile__record address {
    margin: 0;
    font-style: normal;
}

/* ---------- bar admissions ---------- */

/* An attorney may be admitted in more than one jurisdiction, so the bar number
   is not one field but a list: the state, the number it issued, and the
   standing it is held in. */
.admissions {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    border-top: 1px solid var(--rule-soft);
}

.admission {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem 13rem;
    align-items: baseline;
    gap: 0.2rem 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule-soft);
}

.admission__state {
    font-size: 1.0625rem;
}

/* IntelliClerk operates in Virginia alone, so exactly one admission is filing
   authority here; the rest are record. */
.admission__flag {
    margin-left: 0.6rem;
    font-family: var(--data);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--parchment);
    background: var(--ink);
    border-radius: var(--radius-control);
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.admission__bar {
    font-family: var(--data);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--ink);
}

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

/* An admission not in good standing is not filing authority anywhere, so it
   says so in the one caution tone the palette carries. */
.admission__standing--lapsed {
    color: var(--ochre-deep);
}

.admissions__note {
    margin-top: 0.85rem;
    max-width: 34rem;
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--muted);
}

/* ---------- subscription ---------- */

/* Level, cost, and renewal, ruled apart the way the docket counts are. */
.plan {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0 var(--leaf-pad) 0 var(--gutter);
    border-bottom: 1px solid var(--rule-soft);
}

.plan > div {
    padding: 1.5rem 1.5rem 1.6rem;
    border-left: 1px solid var(--rule-soft);
}

.plan > div:first-child {
    border-left: 0;
    padding-left: 0;
}

/* The label sits closer to its figure here than it does over a form field. */
.plan dt {
    margin-bottom: 0;
}

.plan dd {
    margin: 0.5rem 0 0;
    font-family: var(--display);
    font-size: 1.75rem;
    line-height: 1.1;
}

/* A date that has not been set is not a quantity, and should not read as one. */
.plan .is-undetermined {
    font-size: 1.375rem;
    color: var(--muted);
}

.plan__note {
    padding: 1.2rem var(--leaf-pad) 0 var(--gutter);
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--muted);
    max-width: 46rem;
}

/* ---------- the agreements ---------- */

/* What the account is held under. They are papers, so they are listed as
   papers rather than set as buttons. */
.agreements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.25rem;
    list-style: none;
    margin: 0;
    padding: 1.4rem var(--leaf-pad) 1.75rem var(--gutter);
}

.agreement {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    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;
}

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

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

@media (max-width: 62rem) {
    .profile {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: 1.5rem 1.75rem;
    }

    .plan {
        grid-template-columns: 1fr;
    }

    .plan > div {
        border-left: 0;
        border-top: 1px solid var(--rule-soft);
        padding-left: 0;
        padding-right: 0;
    }

    .plan > div:first-child {
        border-top: 0;
    }
}

@media (max-width: 56rem) {
    .admission {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
}

@media (max-width: 48rem) {
    .profile,
    .plan,
    .plan__note,
    .agreements {
        padding-left: var(--leaf-pad);
    }

    .profile {
        grid-template-columns: minmax(0, 1fr);
    }

    .mark-plate {
        max-width: 14rem;
    }

    .profile__record {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.2rem;
    }
}