/* SPDX-FileCopyrightText: Copyright 2026 Osric Wilkinson <osric@fluffypeople.com> */
/* SPDX-License-Identifier: MIT */

/* The rules the shell markup needs, kept apart from site.css: they describe the shape of the
   document rather than how the site looks. Linked first, so site.css and a view's own sheet can
   override a structural rule; the form rules below are the shape every shell form relies on. */

/* Read by a screen reader, invisible on screen, and still read when there is no sheet at all. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Markers removed by the rule below, so the role stays on the element to keep the semantics. */
ul.diagnostics {
    list-style: none;
    margin: 0;
    /* <pre> used to give these both; the list has to say so itself now. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
}

/* A block that scrolls sideways has to be reachable by keyboard to be scrollable at all. */
.source:focus-visible {
    outline: 2px solid #005fa3;
    outline-offset: 2px;
}

/* The listing: one line per page, with the actions in a column after the name. A table would need
   a header for each of those verbs and an empty cell for every row that has fewer of them. */
.pages {
    list-style: none;
    padding: 0;
}

.pages > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
}

.pages > li > :first-child {
    flex: 0 0 16ch;
    overflow-wrap: anywhere;
}

/* The document's children used to be the body's; the landmark that now wraps them is a flex column
   so the editor keeps the window and the form keeps filling it. */
body.editor-page > main {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
    min-height: 0;
}

/* A form's fields are a description list: the label is a dt and the control is its dd. The label
   column takes the widest label's width up to 40% of the form, then wraps; the control takes the
   rest. The cap keeps one long label from squeezing the control to nothing. */
form.form {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-items: start;
}

/* Each list shares the form's column tracks, so a form split by a textarea's fieldset still lines
   up its labels. */
form.form > dl {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: inherit;
    margin: 0;
}

form.form dt {
    overflow-wrap: anywhere;
}

form.form dd {
    min-width: 0;
    margin: 0;
}

form.form dd > input:not([type="checkbox"]):not([type="radio"]),
form.form dd > select,
form.form dd > textarea {
    box-sizing: border-box;
    width: 100%;
}

/* A textarea spans both columns: its fieldset is the wide row and its legend carries the label. */
form.form > fieldset {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

form.form > fieldset > legend {
    padding: 0;
    font-weight: 600;
}

form.form > fieldset > textarea {
    box-sizing: border-box;
    width: 100%;
}

form.form > button {
    grid-column: 2;
    justify-self: start;
}

form.form > .form-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Browsers without subgrid put the dt and dd directly in the form's tracks. */
@supports not (grid-template-columns: subgrid) {
    form.form > dl {
        display: contents;
    }
}

/* One column: the label sits above its control, which still fills the width. */
@media (max-width: 30rem) {
    form.form {
        grid-template-columns: 1fr;
    }

    form.form > button,
    form.form > .form-actions {
        grid-column: 1;
    }
}