/* Purpose:
Styles the checklist Field App surface.

Responsibilities:
- Apply the layout, responsive behavior, and visual states required by checklist.

Boundaries:
CSS controls presentation only; trust meaning, workflow state, privacy, and persistence remain in maintained source logic.

Key decisions and invariants:
Status colors supplement text labels and never carry completion meaning by color alone.
*/
.location-status-in-progress {
    color: #a96b20;
}

.location-status-complete {
    color: var(--rbo-success);
}

/*
 * Each trail card should grow only when its own checklist is opened.
 * Without this override, CSS Grid stretches every card in the row to the
 * height of the open card, making closed locations look expanded and empty.
 */
.location-grid {
    align-items: start;
}

.location-card {
    align-self: start;
}

.requirement-list {
    gap: 14px;
}

.requirement-list li.requirement-editor {
    display: block;
    padding: 14px;
    border: 1px solid #e5dfd3;
    border-radius: 12px;
    color: var(--rbo-ink);
    background: #fffdf8;
}

.requirement-editor-complete {
    border-color: rgba(53, 116, 90, 0.3) !important;
    background: #f5faf7 !important;
}

.requirement-editor-follow-up {
    border-color: rgba(242, 152, 54, 0.34) !important;
    background: #fff9ef !important;
}

.requirement-editor-row {
    display: grid;
    grid-template-columns: minmax(132px, 0.35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.requirement-status-select,
.requirement-notes {
    width: 100%;
    border: 1px solid #cfc7b8;
    border-radius: 9px;
    color: var(--rbo-ink);
    background: #fff;
    font: inherit;
}

.requirement-status-select {
    min-height: 39px;
    padding: 8px 10px;
    font-size: 0.77rem;
    font-weight: 750;
}

.requirement-status-select:focus,
.requirement-notes:focus {
    outline: 3px solid rgba(242, 152, 54, 0.19);
    border-color: var(--rbo-orange);
}

.requirement-status-select:disabled,
.requirement-notes:disabled {
    cursor: wait;
    opacity: 0.58;
}

.requirement-description {
    padding-top: 7px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.5;
}

.requirement-editor-complete .requirement-description {
    color: #466b59;
}

.requirement-notes {
    min-height: 72px;
    margin-top: 11px;
    padding: 10px 11px;
    resize: vertical;
    color: var(--rbo-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.requirement-notes::placeholder {
    color: #9b9589;
}

@media (max-width: 720px) {
    .requirement-editor-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .requirement-description {
        padding-top: 0;
    }
}