/* The show-type and show-object dialog bodies. The frame, its scrolling and
   its buttons are engy/engy.css's; this is only the printed shape inside. */

.sot-describe {
    font-size: var(--text-md);
}

.sot-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.sot-name {
    font-weight: 600;
    color: var(--color-accent);
}

/* A name that opens another dialog: text, not a button-shaped control. */
.sot-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-accent);
    text-decoration: underline dotted;
    cursor: pointer;
}

.sot-link.engy-muted {
    color: var(--color-fg);
}

.sot-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-xs) var(--space-lg);
    margin: var(--space-sm) 0 var(--space-lg);
}

.sot-facts dt {
    opacity: 0.55;
}

.sot-facts dd {
    margin: 0;
}

.sot-section h4 {
    margin: var(--space-lg) 0 var(--space-xs);
    color: var(--color-accent);
    font-weight: 400;
    opacity: 0.85;
}

.sot-cols {
    width: auto;
}

.sot-flag {
    margin-right: var(--space-lg);
}

.sot-key {
    color: var(--color-ok);
}

.sot-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--space-md);
}

.sot-list li {
    padding: var(--space-xs) 0;
}

/* A row's cells as a three-column grid — name, value, reference — and a row
   nested under a foreign key spanning the columns, indented. Names and the
   reference keep to one line; a long value wraps, so the reference beside it
   stays in view rather than off to the right. */
.sot-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    column-gap: var(--space-lg);
    row-gap: var(--space-xs);
    align-items: baseline;
}

.sot-cell-name {
    opacity: 0.7;
    white-space: nowrap;
}

.sot-cell-value {
    overflow-wrap: anywhere;
}

.sot-cell-ref {
    white-space: nowrap;
}

.sot-nested {
    grid-column: 1 / -1;
    margin: 0 0 var(--space-xs) var(--space-md);
    padding-left: var(--space-lg);
    border-left: 1px solid var(--color-line);
}

/* show-text's whole body: one long value, wrapped rather than truncated. */
.sot-text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
}

/* show-record's view picker, in the dialog's own header, shown only when a
   type has more than one data view; the view area scrolls on its own once a
   view's min-width/min-height no longer fits the dialog, rather than
   squashing the view. */
.sot-view-select {
    background: none;
    border: 1px solid var(--color-line);
    color: var(--color-fg);
    border-radius: 999px;
    padding: var(--space-xs) var(--space-md);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
}

/* The frame's own .engy-dialog-body is already the scroll boundary (flex: 1,
   min-height: 0, overflow: auto) at a height the dialog's own row sets
   (dashboard.dialog.height / show-record's own 70vh) — a second, unit-mixed
   max-height guess here would only fight it. This fills the body instead. */
.sot-view-area {
    overflow: auto;
}

/* show-record measures its frame's chrome once, as the dialog opens and
   before a view has drawn, and grows the frame to the view's min-width plus
   that chrome. A view that then outgrows the height brings in the body's
   vertical scrollbar, which the measure never saw, and the view overflows
   sideways by its width — so the gutter is reserved from the start. */
.sot-show-record .engy-dialog-body {
    scrollbar-gutter: stable;
}