/* ============================================================================
   at size — mobile (<= 768px)

   The desktop layout is a 4-column table row inside a translucent wrap. On a
   phone that becomes a 2x2 block per row, the filter bar scrolls sideways, and
   the capital control goes full width directly under the title.
   ========================================================================= */

@media (max-width: 768px) {

    /* ── Chrome ─────────────────────────────────────────────────────────
       The desktop navbar is hidden on mobile and BottomNav injects its own
       sticky ticker, so cardboard's body padding-top (sized for the desktop
       navbar + ticker) becomes dead space. Same override livefeed-mobile.css
       makes, for the same reason. */
    body.cardboard #navbar-container { display: none !important; }
    body.cardboard { padding-top: 0 !important; }

    body.cardboard .cb-category-main { padding-top: 56px; }   /* sticky mobile ticker */

    /* ── Header + capital ───────────────────────────────────────────── */

    .cb-ats-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        /* Must reset the desktop `wrap`: a wrapping COLUMN flex container sizes
           itself from its columns rather than its declared width, which pushes
           the children wider than the viewport and scrolls the page sideways. */
        flex-wrap: nowrap;
    }

    .cb-ats-lede { font-size: 12px; max-width: none; }
    .cb-ats-deploy { width: 100%; }
    .cb-ats-amount-input { width: 100%; font-size: 20px; padding: 10px 0; }

    /* All seven amounts reachable without wrapping into three rows. */
    .cb-ats-quick {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .cb-ats-quick::-webkit-scrollbar { display: none; }
    .cb-ats-quick button { flex: none; }

    /* ── Filter bar scrolls sideways rather than stacking ────────────── */

    .cb-filter-bar .cb-filter-pills {
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .cb-filter-bar .cb-filter-pills::-webkit-scrollbar { display: none; }
    .cb-filter-bar .cb-filter-pill { flex: none; }

    /* ── Walkthrough card becomes a bottom sheet ─────────────────────── */
    .cb-ats-tour-card {
        top: auto !important;
        left: 16px !important;
        right: 16px;
        bottom: 84px;                 /* clear the bottom nav */
        width: auto;
        max-width: none;
    }
    .cb-ats-tour-back, .cb-ats-tour-next { padding: 11px 18px; }

    /* Filter band: label sits above the scrolling row, bulb stays reachable. */
    body.cardboard .cb-ats-filters { padding: 12px 16px 14px; }
    /* Pills wrap instead of scrolling, so nothing hides off-screen. overflow
       must be visible: the generic rule above sets overflow-x:auto for the
       sideways-scroll design, and that clips the dropdowns that open below. */
    .cb-filter-bar .cb-filter-pills { flex-wrap: wrap; overflow: visible; }
    body.cardboard .cb-ats-filters .search-container { flex: 1 1 100%; }
    body.cardboard .cb-ats-filters .search-container .search-box { width: 100%; }

    /* Dropdowns span the row, not a 200px box hanging off a right-edge pill:
       the pill row becomes the containing block, so the menu can never clip. */
    .cb-ats-filters .cb-filter-pills { position: relative; }
    .cb-ats-filters .cb-filter-pill { position: static; }
    .cb-ats-filters .cb-filter-pill-dropdown { left: 0; right: 0; min-width: 0; width: auto; }
    .cb-ats-filters .cb-ats-sort { position: static; }
    .cb-ats-filters .cb-ats-sort .toggle-dropdown { left: 0; right: 0; }

    .cb-ats-divider { display: none; }

    /* 44px tap targets on the things people actually press. */
    .cb-ats-quick button { padding: 9px 12px; font-size: 12px; }
    body.cardboard .cb-ats-filters .cb-filter-pill,
    body.cardboard .cb-ats-filters .cb-ats-sort,
    body.cardboard .cb-ats-filters .pledge-filter-chip { padding: 12px 16px; }
    .cb-filter-pill-chips .cb-filter-chip { min-height: 38px; }
    .cb-ats-group { font-size: 11px; }

    /* The one line that answers the question must not be the dimmest text. */
    .cb-ats-summary { font-size: 12px; row-gap: 4px; color: var(--cb-text-secondary); }
    .cb-ats-meta { color: var(--cb-text-secondary); }
    .cb-ats-quick { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 24px; }
    .cb-ats-summary .cb-ats-refresh { margin-left: 0; }

    /* ── Rows: identity + yield on top, fill details below ───────────────
       These selectors carry the SAME specificity as cardboard.css's
       `body.cardboard .cb-bonds-table-wrap .bond-row .bond-col-N { grid-column: N }`
       and load after it, so they win by source order. A plainer
       `.cb-ats-body .bond-col-N` loses to that rule and the whole grid scrambles
       (the fill block lands beside the name instead of below it). */
    /* !important throughout: cardboard.css pins each cell to a fixed
       grid-column (its own 4-column desktop grid) with an identical selector,
       and untangling that by specificity alone proved unreliable. For a mobile
       layout override, forcing the placement is the clean, predictable fix. */
    body.cardboard .cb-bonds-table-wrap .bond-row {
        /* Fixed-width yield column so the long "x% lower than buying one" line
           wraps inside it instead of stretching the column and starving the
           name + meta on the left. */
        grid-template-columns: minmax(0, 1fr) 116px !important;
        grid-template-areas:
            "id   yield"
            "fill fill" !important;
        column-gap: 14px;
        row-gap: 8px;
        padding: 14px 16px !important;
        align-items: start;
    }

    body.cardboard .cb-bonds-table-wrap .bond-row .bond-col-1 {
        grid-area: id !important;
        align-items: flex-start;   /* icon to the top, not floating mid-height */
    }
    body.cardboard .cb-bonds-table-wrap .bond-row .bond-col-2 {
        grid-area: fill !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 3px 8px;
        text-align: left;
        padding-top: 8px;
        border-top: 1px solid var(--cb-border);
    }
    body.cardboard .cb-bonds-table-wrap .bond-row .bond-col-3 {
        grid-area: yield !important;
        align-items: flex-end;
        text-align: right;
    }
    body.cardboard .cb-bonds-table-wrap .bond-row .bond-col-4 { display: none !important; }

    /* The fill line reads as one muted supporting line under the row. */
    .cb-ats-body .bond-col-2 .cb-ats-primary { font-size: 12px; font-weight: 600; }
    .cb-ats-body .bond-col-2 .cb-ats-secondary { font-size: 12px; }

    .cb-ats-body .bond-name { font-size: 13px; white-space: normal; line-height: 1.3; }
    .cb-ats-meta { font-size: 11px; }
    .cb-ats-yield { font-size: 17px; }

    .cb-ats-group { padding: 14px 16px 6px; }

    /* ── Ladder: drop the bar column, stack the state line ───────────── */

    .cb-ats-open { padding: 12px 16px 16px; }

    .cb-ats-lvl {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "price yield qty"
            "state state state";
        gap: 4px 8px;
        padding: 8px 0;
        border-bottom: 1px solid var(--cb-border);
    }

    .cb-ats-lvl-price { grid-area: price; }
    .cb-ats-lvl-yield { grid-area: yield; text-align: center; }
    .cb-ats-lvl-qty   { grid-area: qty;   text-align: right; }
    .cb-ats-lvl-state { grid-area: state; }
    .cb-ats-lvl-val, .cb-ats-lvl-bar { display: none; }

    .cb-ats-lvl--head { grid-template-areas: "price yield qty"; }
    .cb-ats-lvl--head span:nth-child(4),
    .cb-ats-lvl--head span:nth-child(5),
    .cb-ats-lvl--head span:nth-child(6) { display: none; }

    /* ── Execution card ─────────────────────────────────────────────── */

    .cb-ats-exec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cb-ats-exec-btn { width: 100%; padding: 12px; }
    .cb-ats-exec-status { display: block; margin: 8px 0 0; text-align: center; }
}

/* ── Suppress category-page pseudo labels ───────────────────────────────
   mobile.css:635 injects a "amount per bond" ::before on .bond-col-2 for the
   category pages. On this page column 2 is capital deployed, not a unit price,
   so the label is simply wrong. category-mobile.css hides it for the same
   reason ("too cluttered") but that file cannot be loaded here — it also
   display:none's the header, filter bar and summary this page needs. */
@media (max-width: 768px) {
    .cb-ats-body .bond-row .bond-col-2::before,
    .cb-ats-body .bond-row .bond-col-3::before { content: none !important; display: none !important; }
}

/* ── Closed state on a phone ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .cb-ats-closed { padding: 7vh 20px 12vh; }
    .cb-ats-countdown { font-size: 42px; }
    .cb-ats-closed-title { font-size: 26px; }
    .cb-ats-closed-copy { font-size: 13px; margin-bottom: 32px; }
    .cb-ats-closed-links a { flex: 1 1 auto; text-align: center; }
}

/* ── "Still there?" prompt on a phone ────────────────────────────────────
   Keep even breathing room without letting the card hug the screen edges. */
@media (max-width: 768px) {
    .cb-ats-stale { padding: 20px; }
    .cb-ats-stale-card { padding: 32px 24px 26px; }
    .cb-ats-stale-copy { margin-bottom: 24px; }
}