/* ==========================================================================
   roof.css — the roof section diagram and the pitch conversion table.
   ========================================================================== */

.instrument {
    padding: 4px 0 8px;
}

.roof-stage {
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: linear-gradient(180deg, var(--sc-highest), color-mix(in srgb, var(--sc-highest) 88%, var(--outline)));
    border: 1px solid var(--outline-variant);
    padding: 8px 0 4px;
    overflow: hidden;
}

/* Capped, or the drawing grows as tall as it is wide on a desktop and pushes
   the controls off the screen. */
.roof-svg {
    width: 100%;
    max-width: 440px;
    height: auto;
    display: block;
}

.roof-run,
.roof-rise {
    stroke: var(--outline);
    stroke-width: 2;
    stroke-dasharray: 5 6;
}

.roof-fill {
    fill: var(--primary);
    opacity: .18;
}

/* Geometry attributes rather than a transform, so no CSS transition here —
   the sensor already redraws every frame. */
.roof-rafter {
    stroke: var(--primary);
    stroke-width: 4;
    stroke-linecap: round;
}

.roof-tag {
    fill: var(--on-surface-variant);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
}

.roof-tag.run {
    text-anchor: middle;
}

.roof-tag.rise {
    text-anchor: start;
}

/* Conversion table -------------------------------------------------------- */
.conv-scroll {
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid var(--outline-variant);
    background: var(--sc-low);
}

.conv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    min-width: 480px;
}

.conv-table th,
.conv-table td {
    padding: 11px 14px;
    text-align: start;
    border-bottom: 1px solid var(--outline-variant);
    white-space: nowrap;
}

.conv-table thead th {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    background: var(--sc-high);
}

.conv-table tbody th {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--on-surface);
}

.conv-table td {
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
}

.conv-table td:last-child {
    white-space: normal;
    min-width: 160px;
}

.conv-table tbody tr:last-child th,
.conv-table tbody tr:last-child td {
    border-bottom: 0;
}