/* IntelliClerk — Support.
   A layer over dashboard-v3.css and form.css, in that order: both sections are
   the new-matter leaf carrying one written field instead of a set of them, so
   this file adds only each section's head and the text area itself. */

/* Assistance is asked for; an improvement is offered. Two different errands,
   so the tabs part the way the practice areas do. */
.tab--assist  { background: var(--ink); }
.tab--improve { background: var(--walnut); }

/* Two leaves in a column: the first clears the page head, and the gap between
   them is the docket's own, not that gap plus this one. */
.support + .support {
    margin-top: 0;
}

/* ---------- section head ---------- */

/* The head sits inside the leaf rather than above it, so each section carries
   its own title the way a caption does on a docket leaf. */
.support__head {
    padding: 1.3rem 0 1rem;
    border-bottom: 1px solid var(--ink);
}

.support__title {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
}

.support__blurb {
    margin-top: 0.4rem;
    max-width: 42rem;
    color: var(--muted);
}

/* ---------- the written field ---------- */

/* Wider than a form field and taller than one line: what counsel writes here
   is a paragraph, not an entry. */
.field__textarea {
    display: block;
    width: 100%;
    max-width: 46rem;
    min-height: 11rem;
    resize: vertical;
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--plate);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    padding: 0.8rem 0.95rem;
}

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

.field__textarea:hover {
    border-color: var(--steel);
}

/* The field is the whole of the section, so it takes no rule under it — the
   foot's own spacing closes the leaf. */
.support .field {
    border-bottom: 0;
}

.support .field__hint {
    max-width: 46rem;
}

/* The agreement the second section's feedback is given under. */
.support__ref {
    color: var(--walnut);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}

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

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

@media (max-width: 40rem) {
    .field__textarea {
        min-height: 9rem;
    }
}