/* ===== dr_checkins_html (HTML form) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what styles the
   Anvil designer canvas. Anvil's server strips the text out of a <style> in a
   form_template.html, so the form's rules have to live here.

   NOT :where()-wrapped, on purpose. Every selector below already names .dr-checkin-section,
   the form's own root, so none of them can leak past this form, and wrapping a
   root-anchored selector would DROP it a class: .dr-checkin-section .px-card at (0,2,0)
   becomes :where(.dr-checkin-section) .px-card at (0,1,0), a tie with the dependency's own
   .px-card that a head link loses on document order (the dependency appends its sheet to
   <head> at runtime, after every native_deps link).

   The two .px-* overrides are safe unwrapped and need no second class: neither the
   dependency nor theme.css declares min-width on .px-card or max-width on .px-table-wrap,
   and both of these sit at (0,2,0) against their (0,1,0).

   .dr-note, .dr-info and #dr-tip are used by the markup above but declared once by the
   shell in theme/assets/drivers/drivers.css. No child copies them.

   There is no designer gate: this form has no rule that hides content until JavaScript
   runs. The mount points are empty divs, which is what the canvas shows. */

.dr-checkin-section {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.dr-checkin-section .px-card {
    min-width: 0;
}

.dr-checkin-section .twocol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    min-width: 0;
}

.dr-checkin-section .px-table-wrap {
    max-width: 100%;
}

.dr-checkin-section th,
.dr-checkin-section td {
    white-space: nowrap;
}

.dr-checkin-section .dr-checkin-link {
    border: 0;
    padding: .3rem 0;
    background: none;
    color: var(--px-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font: inherit;
    cursor: pointer;
}

.dr-checkin-section .dr-checkin-badge {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--px-bg-elevated);
    color: var(--px-text-secondary);
    font-size: .72rem;
    font-weight: 500;
    margin-left: .5rem;
}

.dr-checkin-section summary {
    cursor: pointer;
    color: var(--px-text-secondary);
    padding: .6rem 0;
    font-size: .8rem;
}

.dr-checkin-section h3 {
    color: var(--px-text-primary);
    font-size: .9rem;
    font-weight: 600;
    margin: 1rem 0 .5rem;
}

@media (max-width: 640px) {
    .dr-checkin-section .twocol {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .dr-checkin-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .dr-checkin-section table {
        min-width: 520px;
    }

    .dr-checkin-section .dr-checkin-badge {
        margin: .5rem 0 0;
    }

    .dr-checkin-section .dr-checkin-link {
        min-height: 44px;
    }
}