/* The sections layout, shared by the client form and the back office answers panel. One file so
   the two cannot drift: a review screen that stops looking like the form the client saw is the
   drift this component exists to prevent.

   Colors go through custom properties with fallbacks, because the two hosts paint differently: the
   client form defines --line and --ink-* in its own dark stylesheet and wins; the back office
   defines nothing and gets the quiet defaults. */

.field-group {
    border: 1px solid var(--line, rgba(128, 128, 128, .35));
    border-radius: 10px;
    padding: .35rem 1.1rem .9rem;
    margin: 1.5rem 0;
}

.field-group legend {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-faint, rgba(128, 128, 128, .9));
    padding: 0 .45rem;
    margin-left: -.45rem;
}

/* Two columns where two fit, one where they do not. auto-fit with a minimum wide enough for a
   Georgian label means a phone gets one column with no media query. */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: 1.4rem;
}

.field {
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line, rgba(128, 128, 128, .25));
}

.field:first-of-type { padding-top: .35rem; }

/* Inside a group the box is the boundary, so the hairline between rows goes. */
.field-grid .field {
    border-bottom: none;
    padding: .55rem 0;
}

/* A four-line box beside a one-line input is two unreadable columns; the textarea takes the row. */
.field-grid .field-wide {
    grid-column: 1 / -1;
}

.field label {
    display: block;
    font-weight: 560;
    font-size: .95rem;
    margin-bottom: .5rem;
}

.field .required {
    color: var(--accent, #c96);
    margin-left: .2rem;
    font-weight: 700;
}

.field .help {
    margin: -.25rem 0 .55rem;
    font-size: .85rem;
    color: var(--ink-dim, rgba(128, 128, 128, .9));
}

/* The consent line under a corrected value: what the client originally answered. Quiet on
   purpose; the value above it is what the deed will print. */
.field .field-note {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--ink-dim, rgba(128, 128, 128, .9));
}

.field .field-note-arrow {
    margin-right: .35rem;
    color: var(--accent, #c96);
}

.field .field-error {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: var(--error, #d66);
}