/*
 * SPDX-FileCopyrightText: 2024 Benedict Harcourt <ben.harcourt@harcourtprogramming.co.uk>
 *
 * SPDX-License-Identifier: BSD-2-Clause
 */

details.panel, article.panel {
    max-width: 48rem;
}
details.panel {
    padding: 0;
}
article.panel {
    padding: 0.5rem 0;
}
article.panel>h2 {
    margin: 0 0.5rem 0.5rem;
}
details.panel>summary, details.panel>p {
    margin: 0 0.5rem;
}
details.panel>p {
    margin-bottom: 0.5rem;
}

fieldset:disabled>fieldset {
    display: none;
}

fieldset.panel {
    padding: 0.5rem 0.5rem 0.3rem 0;
    margin: 5px 0;
}

.conn-title {padding-left: 0.5rem; margin: 0;}
.oc-grid.type_text .type_media {display: none;}
.oc-grid.type_media .type_text {display: none;}

label.connection, label.description { display: block; }
input[type="file"] {
    max-width: 200px;
    font-size: 10pt;
}
img.type_media {
    max-width: 100%;
    max-height: 6rem;
}

.connection input, textarea { width: 100%; display: block; }
.connection span, .description span { width: auto; display: block; }

label[row] {
    margin: 0.8rem 0;
}
label[row]>span {
    display: none;
}

@media screen and (min-width: 940px) {
    .oc-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1.4rem) 1fr;
        grid-column-gap: 0.3rem;
        grid-row-gap: 0.3rem;
        align-items: center;
    }
    .oc-grid.type_media {
        grid-template-rows: 2rem repeat(2, 8rem) 1.4rem 1fr;
        align-items: start;
    }
    label.connection { grid-area: 4 / 1 / 5 / 3; display: grid; grid-template-columns: 14rem 1fr; }
    label.description { grid-area: 5 / 1 / 6 / 3; display: grid; grid-template-columns: 14rem 1fr; }
}
@media screen and (min-width: 720px) {
    label[row] { margin: 0 }
    label[row]>span { display: inline; }
}

label>span {
    display: inline-block;
    width: 6rem;
}

summary>h2 {
    display: inline-block;
}

label[editor], input[editor] {
    position: relative;
    outline: 2px solid var(--editor);
}
label[editor]::before, input[editor]::before {
    position: absolute;
    left: 0;
    bottom: 100%;
    content: attr(editor);
    height: 12px;
    background: var(--editor);
    font-size: 10px;
}