/* Shared page/component geometry. Palette and visual tokens belong to app.css. */

.card {
    min-width: 0;
}

.container > .card,
#operations-observation > .card {
    margin-bottom: var(--section-gap);
}

.container > .card:last-child,
#operations-observation > .card:last-child {
    margin-bottom: 0;
}

.card > h2:first-child,
.card > section > h2:first-child,
.card > .source-title-row:first-child h2 {
    margin-top: 0;
}

.card > p,
.card > form > p {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.card > p:last-child,
.card > ul:last-child {
    margin-bottom: 0;
}

.source-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 16px;
    padding-bottom: 12px;
}

.source-title-row > :first-child {
    min-width: 0;
}

.source-title-row > div:first-child {
    flex: 1 1 240px;
}

.source-title-row h1,
.source-title-row h2 {
    margin: 0;
    min-width: 0;
    line-height: var(--heading-line-height);
    overflow-wrap: anywhere;
}

.page-description {
    margin: 8px 0 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.card > form {
    min-width: 0;
}

.form-row > textarea,
.form-row > .language-picker,
.form-row > .tag-editor {
    min-width: 0;
}

.form-row > textarea {
    flex: 1;
}

.info-table td {
    vertical-align: middle;
}

.table-scroll > .info-table form {
    margin: 0;
}

.tag-catalog-table .tag-count {
    width: 90px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.card > form > h2,
.card > section > h2 {
    margin: 0 0 18px;
    font-size: var(--section-title-size);
}

.card > form > h3,
.card > section > h3 {
    margin: 20px 0 8px;
    font-size: 17px;
}

.card > form .form-row {
    max-width: 920px;
}

.card > form .form-row > input:not([type="number"]):not([type="hidden"]) {
    flex: 1;
}

.card > form .form-row > input[type="number"] {
    width: 220px;
}

.card > form .form-row .form-help {
    flex: 1;
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
}

.card > form .form-row input:not([type="checkbox"]),
.card > form .form-row select {
    min-width: 210px;
}