/* Only the imported page HTML (Page.BodyHtml) is styled here. Everything else uses MudBlazor. */

.tis-body {
    overflow-wrap: anywhere;
}

.tis-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 16px 0;
    background: #fff; /* the drawings are black line art on transparent or white, keep them readable in dark mode */
}

/* Wiring diagrams open fitted to the width and the phone can pinch-zoom them.
   "Actual size" (tis-actual) shows them 1:1 and the box scrolls sideways. */
.tis-wiring {
    overflow-x: auto;
    touch-action: pan-x pan-y pinch-zoom;
}

.tis-wiring.tis-actual img {
    max-width: none;
}

.tis-body .dead-link {
    color: var(--mud-palette-text-secondary);
}

.tis-body .missing-image {
    display: inline-block;
    margin: 16px 0;
    padding: 24px 32px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-secondary);
    font-family: monospace;
}

.tis-body .tis-table {
    border-collapse: collapse;
    margin: 16px 0;
    max-width: 100%;
}

.tis-body .tis-table caption {
    text-align: left;
    font-weight: 600;
    padding-bottom: 4px;
}

.tis-body .tis-table td,
.tis-body .tis-table th {
    border: 1px solid var(--mud-palette-table-lines);
    padding: 4px 8px;
    vertical-align: top;
}

.tis-body a {
    color: var(--mud-palette-primary);
}

/* Phone result cards: the snippet stops after two lines. MudBlazor has no line clamp. */
.tis-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}