/* IntelliClerk — Open a New Matter.
   A layer over dashboard-v3.css, which must be linked first. The form sits on
   the same pleading leaf the docket pages use, so this file adds only the
   fields, the choice chips, and the form's foot. */

/* ---------- page head ---------- */

.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin: 2.5rem 0 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ink);
}

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

/* ---------- the leaf as a form ---------- */

.leaf-form {
    margin-top: 2.6rem;
    padding: 0.5rem var(--leaf-pad) 0 var(--gutter);
}

.field {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule-soft);
    /* fieldset carries browser chrome of its own */
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    min-width: 0;
}

.field__label,
.field__legend {
    display: block;
    padding: 0;
    margin-bottom: 0.6rem;
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The one thing counsel types; everything else is chosen from what the
   Commonwealth allows. */
.field__input,
.field__select {
    width: 100%;
    max-width: 34rem;
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--text);
    background: var(--plate);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    padding: 0.65rem 0.85rem;
}

.field__input::placeholder {
    color: rgba(110, 97, 83, 0.55);
    font-style: italic;
}

.field__input:hover,
.field__select:hover {
    border-color: var(--steel);
}

/* The base stylesheet strips native control chrome, so the select draws its
   own mark. Inlined as a data URI — the page loads no image files. */
.field__select {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.3 4.65 6 7.35l2.7-2.7' stroke='%236B4A2F' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.8rem;
}

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

/* Practice area and jurisdiction are read together — one names the body of law,
   the other the court — so they sit side by side. The rule beneath them is the
   pair's, not each column's, so it runs unbroken across the leaf. */
.field-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.75rem;
    border-bottom: 1px solid var(--rule-soft);
}

.field-pair .field {
    border-bottom: 0;
}

.field-pair .field__input,
.field-pair .field__select {
    max-width: none;
}

/* ---------- client position ---------- */

/* Two options only, so they are set as marks on the form rather than hidden in
   a menu — the way a cover sheet asks the question. */
.choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.choice__opt {
    position: relative;
    display: inline-flex;
}

.choice__opt input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.choice__mark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--data);
    font-size: 0.8125rem;
    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.55rem 1rem;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

/* The box that gets ticked, drawn rather than native so it keeps the square
   corners the status marks use. */
.choice__mark::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 auto;
    border: 1px solid currentColor;
}

.choice__opt input:hover + .choice__mark {
    border-color: var(--steel);
}

.choice__opt input:checked + .choice__mark {
    color: var(--parchment);
    background: var(--ink);
    border-color: var(--ink);
}

.choice__opt input:checked + .choice__mark::before {
    background: currentColor;
}

/* The global focus ring can't reach a control with no box of its own. */
.choice__opt input:focus-visible + .choice__mark {
    outline: 2px solid var(--ochre);
    outline-offset: 3px;
}

/* ---------- form foot ---------- */

.form-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.5rem 0 1.75rem;
}

.form-foot__note {
    margin-right: auto;
    font-family: var(--data);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.btn-cancel,
.btn-submit,
.btn-archive,
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--data);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: var(--radius-control);
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn-cancel {
    color: var(--muted);
    background: var(--plate);
    border: 1px solid var(--rule);
}

/* Leaving without filing is not the affirmative action, so it never takes the
   brass this page gives to the one that is. */
.btn-cancel:hover {
    color: var(--ink);
    border-color: var(--steel);
}

.btn-submit {
    color: var(--parchment);
    background: var(--ink);
    border: 1px solid var(--ink);
}

/* The step buttons navigate rather than act, so they are links wearing the
   button's clothes. */
a.btn-cancel,
a.btn-submit {
    text-decoration: none;
}

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

/* ---------- disposition (edit-matter.html) ---------- */

/* A second leaf, below the one that holds the record: what may be done to the
   matter itself. Kept outside the form so a save can never carry one of these,
   and given its own tab so it reads as a separate instrument. */
.tab--disposition {
    background: var(--ochre-deep);
}

.disposition {
    margin-top: 3rem;
    padding-bottom: 0.5rem;
}

/* Each act is a line of the leaf: what it does on the left, the act itself on
   the right, where counsel's eye lands last. */
.disposition__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.75rem;
    flex-wrap: wrap;
}

.disposition__row:last-of-type {
    border-bottom: 0;
}

.disposition__text {
    flex: 1 1 22rem;
    min-width: 0;
}

.disposition__text .field__label {
    margin-bottom: 0;
}

.disposition__text .field__hint {
    margin-top: 0.35rem;
}

/* Archiving is reversible — the matter and everything under it is stored, not
   lost — so it keeps the quiet outline. */
.btn-archive {
    color: var(--walnut);
    background: var(--plate);
    border: 1px solid var(--rule);
}

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

/* Deletion is the one act on this page that cannot be undone. The palette
   holds no red and needs none — ochre is warning enough against beige. */
.btn-danger {
    color: var(--ochre-deep);
    background: var(--plate);
    border: 1px solid var(--ochre-deep);
}

.btn-danger:hover {
    color: #FFFFFF;
    background: var(--ochre-deep);
    border-color: var(--ochre-deep);
}

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

@media (max-width: 48rem) {
    .field-pair {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Stacked, the pair reads as two fields and takes the rule between them. */
    .field-pair .field:first-child {
        border-bottom: 1px solid var(--rule-soft);
    }

    .field-pair .field:last-child {
        padding-top: 1.5rem;
    }
}

@media (max-width: 40rem) {
    .leaf-form {
        padding-left: var(--leaf-pad);
    }

    .form-foot__note {
        margin-right: 0;
        width: 100%;
    }

    .btn-cancel,
    .btn-submit,
    .btn-archive,
    .btn-danger {
        flex: 1 1 auto;
        justify-content: center;
    }
}