/*
 * Transport Live Realtime — standalone Firestore public_live test page.
 *
 * Visual design (card shell, banner, no-drivers message) is NOT duplicated
 * here — it is inherited byte-for-byte by enqueuing the actual production
 * stylesheets (transport-live.css, transport-live-telemetry.css) alongside
 * this file, and by this page's JS building markup with the SAME class
 * names (.sris-tl-card, .sris-tl-banner, .sris-tl-nodrivers, etc.). This
 * file only carries the small amount of chrome that is genuinely unique to
 * this test page: the testing-only zone/last-seen meta line and the
 * onPhoneCall badge, which have no production equivalent. (The
 * connection-status header — page title + Connecting/Live chip — was
 * removed, along with its .sris-tlrt-header/-title/-status rules, so the
 * page opens straight onto the banner + grid like production does.)
 * See docs/realtime-live-migration.md.
 */

#sris-transport-realtime-root {
    box-sizing: border-box;
}

#sris-transport-realtime-root * {
    box-sizing: border-box;
}

/* ── Category explainer box (no production equivalent) ────────────────── */

/* Short "what can this service help with?" box, rendered between the banner
   and the grid for categories whose PAGE_COPY entry defines an `explainer`
   (today: Bike Mitra only). Palette/radius are lifted from .sris-tl-banner in
   transport-live.css so it reads as the same family.

   Mobile-first, and deliberately COMPACT: this box sits between the banner and
   the first driver card, so every row it costs pushes a real driver below the
   fold. The errands are therefore chips that flow and wrap (see the list rule)
   rather than one full-width stacked bullet each, which on a ~360px screen is
   about three rows instead of five, with nothing hidden from a first-time
   visitor. Spacing and type are a step down from the banner's for the same
   reason. No fixed or min widths — the box just fills the column. */
.sris-tlrt-explainer {
    background: #f4f7fb;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.sris-tlrt-explainer-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: #1c1c1c;
}

.sris-tlrt-explainer-lead {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #5b6472;
}

/* Chip row: the <ul>/<li> stays a semantic list, it is only presented as
   wrapping pills. list-style/padding are cleared so no marker or indent
   survives the flex layout. */
.sris-tlrt-explainer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.sris-tlrt-explainer-item {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dbe4ee;
    font-size: 12px;
    line-height: 1.35;
    color: #41495a;
    overflow-wrap: break-word;
}

/* ── Testing-only card markers (no production equivalent) ─────────────── */

/* Zone + last-seen: useful realtime-verification signal, not the collapsible
   admin "Debug" panel — kept, styled to match the muted tone already used by
   .sris-tl-card-category / .sris-tl-status-last. */
.sris-tlrt-meta {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

/* onPhoneCall (public_live) — a raw fact from the app; this red badge is our
   own presentation choice, distinct from the live/last_active status line. */
.sris-tlrt-oncall {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fde0e0;
    color: #a3231f;
    font-size: 12px;
    font-weight: 600;
}