/*
    VFD selector - local rules only. Anything shared belongs in ../css/selectors.css.
    This page is Bootstrap 5.1.3: no 5.2+ utilities and no 5.3+ subtle color tokens.
*/

/* The nav container clips its children, which kills position:sticky outright - the
   summary rail cannot stick until this is cleared. */
#nav_content,
.tabbed-content {
    overflow: visible;
}

/* Prose measure; 820px is off the Bootstrap spacer scale, so it stays here. */
.vfd-lede,
.vfd-about p {
    max-width: 820px;
}

.vfd-intro-img {
    width: 100%;
    height: auto;
    max-width: 320px;
    border-radius: 8px;
}

/* The Available I/O column states three lines, the longest of which is the signal list; it
   needs more than the 300px every spec column shares in selectors.css. Overridden here rather
   than there because nine selectors use that grid. Track 10 is spec column 7 (inputs): three
   identity cells come first. A column added before inputs would move it; one added after is
   absorbed by the trailing repeat. */
#app .selector-tbl-grid {
    grid-template-columns:
        repeat(9, fit-content(300px))
        fit-content(470px)
        repeat(calc(var(--selector-tbl-spec-cols) - 7), fit-content(300px))
        auto;
}

/* The datasheet/cart/subtotal row pins to the card bottom, so it lines up across
   stretched cards. The body's flex yields to v-show's inline display:none; the margin
   trades for padding because Bootstrap's mt-* are !important. */
.vfd-card {
    display: flex;
    flex-direction: column;
}

.vfd-card > .selector-card-body,
.vfd-card .vfd-detail {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.vfd-card .vfd-actions {
    margin-top: auto !important;
    padding-top: 1rem;
}

/* Matches adc-number-input so selects and number fields line up. */
.form-select {
    min-height: 44px;
}

/* Keeps the newlines between Available I/O option-card lines, with the counts aligned. */
#app .selector-tbl-cell li {
    white-space: pre-line;
    font-variant-numeric: tabular-nums;
}