/* Zone documentation — zone (room) page, zone types, imports.
/* --------------------------------------------------------------------------
/* Reuses the asset page's hero, section heads, datasheet and file tiles
/* (asset_detail.css); only what those don't cover lives here.
/* --------------------------------------------------------------------------- */

@layer components {
    /* Upload row under a documents / photos list: kind picker, file input, button. */
    .zone-upload {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-block-start: 0.75rem;

        & .input--select {
            inline-size: auto;
        }

        & input[type="file"] {
            max-inline-size: 100%;
            min-inline-size: 0;
        }
    }

    /* Zone photos: one row of tiles per capture day. Larger than
       the asset gallery tiles, because these photos get read, not glanced at. */
    .zone-photos__day {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-block-end: 1rem;
    }

    .zone-photo {
        inline-size: var(--attachment-md);
    }

    /* Zone list on a zone type page: compact monospace chips that wrap. */
    .zone-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .zone-chip {
        border: 1px solid var(--rule);
        border-radius: var(--radius-sm, 4px);
        color: var(--ink-soft);
        display: inline-block;
        font-family: var(--font-data);
        font-size: var(--text-x-small);
        padding: 0.15rem 0.45rem;
        text-decoration: none;

        @media (any-hover: hover) {
            &:hover { border-color: var(--color-link); color: var(--color-link); }
        }
    }
}

@layer components {
    /* Section board: a zone's group head. The zone name links to the zone
       page; type code and the "Photos & docs" caption follow as group meta;
       the edit dialog trigger sits at the far end. */
    .zone-head {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.25rem;
    }

    a.datasheet__group-marker--link {
        text-decoration: none;

        @media (any-hover: hover) {
            &:hover { color: var(--primary); text-decoration: underline; }
        }

        &:focus-visible {
            outline: 2px solid var(--color-selected);
            outline-offset: 2px;
        }
    }

    .zone-head__edit {
        background: transparent;
        border: 0;
        color: var(--ink-mute);
        cursor: pointer;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        margin-inline-start: auto;
        padding: 0;
        text-transform: uppercase;

        @media (any-hover: hover) {
            &:hover { color: var(--primary); }
        }

        &:focus-visible {
            outline: 2px solid var(--color-selected);
            outline-offset: 2px;
        }
    }
}