/**
 * Inline field editing on the life-safety category cards.
 *
 * >>> ONE PLACE, NOT TWELVE. <<<
 * Each category template carries its own copy of the .cls-field-card rules, so changing the
 * edit affordance in the template would mean changing it twelve times and keeping them in step.
 * This loads after them and overrides, so the treatment lives in one file.
 *
 * WHAT WAS WRONG WITH IT.
 * Clicking Edit toggled `display: none` to `display: flex` on the same frame: an input and a
 * heavy filled Save button appeared instantly BELOW the value they edit, so the card grew, the
 * ones under it jumped, and the value now appeared twice with no indication which one was live.
 * It read as a form that had always been there and had just been un-hidden — which is exactly
 * what it was.
 *
 * WHAT IT DOES NOW.
 * The form animates open in place, the value it replaces steps back, and Save is sized as the
 * secondary action it is. Nothing moves except the card being edited.
 */

/* The card is the positioning context and the thing that reacts to being edited. */
.cls-field-card {
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

.cls-field-card.cls-editing {
    border-color: #9fd2de;
    box-shadow: 0 0 0 3px rgba(20, 166, 181, 0.10);
}

/*
 * The value recedes rather than disappearing: it is what the input is replacing, and keeping it
 * legible-but-quiet is what makes the input read as an edit of THAT value.
 */
.cls-field-card .cls-field-card-value {
    transition: opacity 180ms ease, color 180ms ease;
}

.cls-field-card.cls-editing .cls-field-card-value {
    opacity: 0.45;
}

/* The Edit affordance stops hiding until hover — a control nobody can see is not discoverable. */
.cls-field-card .cls-field-card-edit {
    opacity: 0.55 !important;
    gap: 5px;
    transition: opacity 160ms ease, color 160ms ease;
}

.cls-field-card:hover .cls-field-card-edit { opacity: 0.9 !important; }
.cls-field-card .cls-field-card-edit:hover { opacity: 1 !important; color: #14a6b5; }
.cls-field-card.cls-editing .cls-field-card-edit { opacity: 0 !important; pointer-events: none; }

/*
 * Animating from display:none is impossible, so the form is laid out at all times and collapsed
 * with grid-template-rows — which animates, unlike height:auto.
 */
.cls-field-card .edit-form,
.cls-field-card .edit-form.show {
    display: grid !important;
    grid-template-rows: 0fr;
    grid-template-columns: 1fr auto;
    gap: 0 8px;
    margin-top: 0;
    opacity: 0;
    /*
     * visibility, not just opacity: a collapsed form is still in the tab order otherwise, so
     * keyboard users tab into an input they cannot see. Delayed by the animation's length so
     * closing still plays — hiding it on frame one would cut the animation off.
     */
    visibility: hidden;
    transition: grid-template-rows 220ms cubic-bezier(.22,.68,.36,1),
                opacity 160ms ease,
                margin-top 220ms ease,
                visibility 0s linear 220ms;
}

.cls-field-card .edit-form.show {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
    visibility: visible;
    transition: grid-template-rows 220ms cubic-bezier(.22,.68,.36,1),
                opacity 160ms ease,
                margin-top 220ms ease,
                visibility 0s;
}

/* Children of a 0fr row must not force it open. */
.cls-field-card .edit-form > * { min-height: 0; overflow: hidden; }

.cls-field-card .edit-form input[type="text"] {
    width: 100%;
    padding: 9px 12px !important;
    font-size: 13px;
    border: 1px solid #cfdce3 !important;
    border-radius: 8px !important;
    background: #fff;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.cls-field-card .edit-form input[type="text"]:focus {
    border-color: #14a6b5 !important;
    box-shadow: 0 0 0 3px rgba(20, 166, 181, 0.16) !important;
}

/* Secondary weight: saving a field is a small act, and the filled slab overstated it. */
.cls-field-card .edit-form button {
    padding: 9px 16px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f607c !important;
    border: 1px solid #cfe3ea !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease;
}

.cls-field-card .edit-form button:hover {
    background: #0f607c !important;
    border-color: #0f607c !important;
    color: #ffffff !important;
}

.cls-field-card .edit-form button:active { transform: translateY(1px); }

.cls-field-card .edit-form button:focus-visible {
    outline: none;
    border-color: #14a6b5 !important;
    box-shadow: 0 0 0 3px rgba(20, 166, 181, 0.22) !important;
}

/* Demo: the field is not editable, and the notice says so where the change would have landed. */
.cls-field-note {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #12586e;
    background: #f2fafc;
    border: 1px solid #cfe3ea;
    border-radius: 8px;
    padding: 7px 11px;
    animation: cls-field-note-in 180ms ease-out both;
}

@keyframes cls-field-note-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cls-field-card,
    .cls-field-card .cls-field-card-value,
    .cls-field-card .cls-field-card-edit,
    .cls-field-card .edit-form,
    .cls-field-card .edit-form input[type="text"],
    .cls-field-card .edit-form button { transition: none !important; }
    .cls-field-note { animation: none !important; }
}