/* 20260921_home_mobile_cards_v4
 * Layout only. Inherit all existing theme colors, surfaces, artwork and states.
 * No rules apply at tablet/desktop widths. CSS/JS share the same breakpoint.
 */
@media (max-width: 767px) {
    html body.home-page-shell .xl-home > .wp { width: 100%; min-width: 0; }
    html body.home-page-shell .xl-home .xl-home-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    html body.home-page-shell .xl-home .xl-home-main { min-width: 0; width: 100%; }
    html body.home-page-shell .xl-home .xl-home-hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 10px; }
    html body.home-page-shell .xl-home .xl-home-time-card { width: 100%; min-width: 0; }
    html body.home-page-shell .xl-home .xl-home-time-card .xl-time-section {
        display: grid; grid-template-columns: 66px minmax(0, 1fr) 54px;
        grid-template-rows: auto; align-items: center; gap: 10px;
        width: 100%; min-height: 0; padding: 10px;
    }
    html body.home-page-shell .xl-home .xl-time-date { gap: 2px; min-width: 0; }
    html body.home-page-shell .xl-home .xl-time-date strong { font-size: 22px; line-height: 1.1; }
    html body.home-page-shell .xl-home .xl-time-month,
    html body.home-page-shell .xl-home .xl-time-date > span { font-size: 10px; line-height: 1.4; }
    html body.home-page-shell .xl-home .xl-time-progress { gap: 4px; width: 100%; }
    html body.home-page-shell .xl-home .xl-time-progress-head { font-size: 10px; line-height: 1.3; margin-bottom: 2px; }
    html body.home-page-shell .xl-home .xl-time-progress-head strong { font-size: 10px; }
    html body.home-page-shell .xl-home .xl-time-progress-track { height: 4px; }
    html body.home-page-shell .xl-home .xl-home-signin-action { grid-column: auto; grid-row: auto; margin: 0; width: 100%; }
    html body.home-page-shell .xl-home .xl-home-signin-button { min-width: 0; width: 100%; min-height: 44px; padding: 6px; font-size: 12px; }

    /* The existing notice nodes are moved, not cloned; their listeners survive. */
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side { position: static; width: 100%; margin: 0 0 10px; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-updates-card { padding: 10px 12px; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-section-updates { padding: 0; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-head { margin: 0 0 6px; gap: 8px; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-head h2 { font-size: 13px; line-height: 1.5; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-head svg { width: 14px; height: 14px; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-list {
        display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x proximity; padding-bottom: 4px;
    }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-item {
        flex: 0 0 90%; min-width: 0; display: block; padding: 0;
        scroll-snap-align: start; min-height: 44px;
    }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-timeline { display: none; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-body { padding: 0; min-width: 0; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-body h3 { font-size: 13px; line-height: 1.5; margin: 0; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-body p { font-size: 11px; line-height: 1.5; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Override the legacy rail's inline desktop pinning only on small screens. */
    html body.home-page-shell .xl-home .xl-category-rail {
        display: block !important; position: static !important;
        left: auto !important; top: auto !important; transform: none !important;
        width: 100%; min-width: 0; margin: 0 0 14px;
    }
    html body.home-page-shell .xl-home .xl-category-rail-track {
        display: flex; align-items: center; gap: 8px; min-height: 0;
        padding: 4px 8px; overflow-x: auto; overflow-y: hidden;
    }
    html body.home-page-shell .xl-home .xl-category-rail-link {
        display: flex; flex: 0 0 auto; align-items: center;
        width: auto; min-height: 44px; padding: 0 6px; gap: 5px;
    }
    html body.home-page-shell .xl-home .xl-category-rail-label { white-space: nowrap; font-size: 13px; }
    html body.home-page-shell .xl-home .xl-category-rail-dot { flex-shrink: 0; }
    html body.home-page-shell .xl-home .xl-tool-section[data-home-category-anchor] { margin: 0 0 18px; padding: 10px 0 18px; scroll-margin-top: 82px; }
    html body.home-page-shell .xl-home .xl-tool-section .xl-section-title--layered { margin: 0 0 10px; gap: 8px; }
    html body.home-page-shell .xl-home .xl-tool-section .xl-section-title--layered h2 { font-size: 18px; line-height: 1.4; }
    html body.home-page-shell .xl-home .xl-tool-section .xl-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; align-items: stretch; grid-auto-rows: auto; }
    html body.home-page-shell .xl-home .xl-tool-section .xl-tool-card {
        display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
        width: auto; height: auto; min-height: 0; min-width: 0; max-width: 100%; grid-column: auto; margin: 0;
    }
    html body.home-page-shell .xl-home .xl-tool-section .xl-tool-image {
        position: relative; width: 100%; height: 0; min-height: 0;
        padding-top: 50%; aspect-ratio: auto;
    }
    html body.home-page-shell .xl-home .xl-tool-section .xl-tool-image-pair {
        position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
        aspect-ratio: auto; padding: 0;
    }
    html body.home-page-shell .xl-home .xl-tool-section .xl-tool-info { min-width: 0; padding: 6px 8px; min-height: 44px; column-gap: 2px; }
    html body.home-page-shell .xl-home .xl-tool-section .xl-tool-card .xl-tool-copy .xl-tool-title-action > h3 { font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: break-word; }
    html body.home-page-shell .xl-home .xl-tool-section .xl-tool-copy p { font-size: 11px; line-height: 1.4; }
    html body.home-page-shell .xl-home .xl-tool-section .xl-tool-link.xl-tool-link-arrow { width: 20px; min-width: 20px; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-head > a { font-size: 12px; line-height: 1.5; min-height: 28px; display: inline-flex; align-items: center; }
    /* Single-tool sections keep the same half-width card and image ratio. */
    /* Legacy portrait 9:17..9:15 rules flatten main and put every side-card
       in a date/progress/action grid. Own the complete mobile layout instead. */
    html body.home-page-shell .xl-home .xl-home-main { display: block; }
    html body.home-page-shell .xl-home .xl-home-hero-row > .xl-hero { order: 0; }
    html body.home-page-shell .xl-home .xl-home-hero-row > .xl-home-time-card { order: 1; }
    html body.home-page-shell .xl-home .xl-time-progress { display: grid; }
    html body.home-page-shell .xl-home .xl-time-month,
    html body.home-page-shell .xl-home .xl-time-date > span { display: block; }
    html body.home-page-shell .xl-home .xl-time-month > span { display: inline; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side { order: 0; flex: initial; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-updates-card {
        display: block; grid-template-columns: none; grid-template-rows: none; min-width: 0;
    }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-section-updates,
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-list { width: 100%; min-width: 0; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-side-head { justify-content: space-between; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-item { flex-basis: 100%; }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-body h3 {
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html body.home-page-shell .xl-home .xl-home-main > .xl-home-side .xl-notice-body p { display: block !important; }
    html body.home-page-shell .xl-home .xl-category-rail-track,
    html body.home-page-shell .xl-home .xl-notice-list { scrollbar-width: thin; }
    html body.home-page-shell .xl-home .xl-category-rail-track::-webkit-scrollbar,
    html body.home-page-shell .xl-home .xl-notice-list::-webkit-scrollbar { height: 4px; }
    html body.home-page-shell .xl-home .xl-category-rail-track::-webkit-scrollbar-button,
    html body.home-page-shell .xl-home .xl-notice-list::-webkit-scrollbar-button { display: none; }
}