/* Document Analyzer: the upload form and the structured summary. */

label { display: block; font-weight: 600; margin-top: 16px; margin-bottom: 4px; font-size: 14px; }
.help { color: #777; font-size: 12px; margin-top: 2px; }
.errorlist { color: #c00000; list-style: none; padding: 0; margin: 4px 0; font-size: 13px; }
.placeholder-note { color: #c00000; font-style: italic; }

button[type=submit] {
    margin-top: 20px; padding: 10px 22px; border: none; border-radius: 4px;
    background: var(--navy); color: #fff; font-size: 15px; cursor: pointer;
}
button[type=submit]:hover { opacity: .9; }
button[disabled] { opacity: .65; cursor: progress; }

.status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.status-complete { background: #dff5e1; color: #1a7431; }
.status-failed { background: #fbe1e1; color: #a11; }
.status-pending, .status-reading, .status-analyzing { background: #fff3cd; color: #916a00; }

.ocr-badge {
    display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 12px;
    background: var(--gray); color: var(--muted); font-size: 11.5px;
}

/* --- the header facts --- */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 22px;
    margin: 20px 0 6px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcff;
}

.facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); }

/* --- headings --- */
.an-heading {
    margin: 30px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--navy);
    color: var(--navy);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.an-note { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }

.judgement {
    padding: 2px 8px; border-radius: 99px; background: #fff3cd; color: #916a00;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.an-summary {
    padding: 16px 18px;
    border-left: 3px solid var(--teal);
    border-radius: 0 6px 6px 0;
    background: #f6fbf9;
    font-size: 15px;
    line-height: 1.6;
}

/* --- headline figures --- */
.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    /* Not stretch: one long value (a TRIA rate, a three-part employers
       liability limit) would otherwise set the height of every tile beside it. */
    align-items: start;
    gap: 12px;
    margin-top: 16px;
}

.figure { padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

.figure .fv {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.figure .fl { display: block; margin-top: 3px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* --- section-by-section --- */
.sections { margin: 0; padding-left: 0; list-style: none; counter-reset: sec; }

.sections > li {
    position: relative;
    counter-increment: sec;
    padding: 16px 18px 14px 52px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
}

.sections > li::before {
    content: counter(sec);
    position: absolute;
    left: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sections h4 {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 0 0 6px; font-size: 14.5px; color: var(--navy);
}

.sections .page { font-size: 11px; font-weight: 400; color: var(--muted); }
.sections p { margin: 0 0 8px; font-size: 14px; }

.points { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; }
.points li { margin-bottom: 4px; }
.points.flagged li { color: #a11; }

.an-foot {
    margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: 12px; color: var(--muted);
}