@media (max-width: 1100px) {
    .mobile-topbar {
        display: block;
    }

    .main-content {
        margin-left: 0;
        padding: 14px 16px max(96px, calc(72px + env(safe-area-inset-bottom)));
        box-sizing: border-box;
        width: 100%;
        overflow-x: hidden;
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
        padding: 10px 12px;
        padding-top: calc(10px + env(safe-area-inset-top));
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 62%, transparent);
        border-radius: 21px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-solar) 4%, transparent), transparent 70%),
            color-mix(in srgb, var(--color-surface) 94%, var(--color-bg) 6%);
        box-shadow:
            0 14px 34px rgba(17, 24, 39, 0.12),
            0 1px 0 color-mix(in srgb, white 6%, transparent) inset;
    }

    .mobile-topbar-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 11px;
        align-items: center;
    }

    .mobile-back-button,
    .mobile-topbar-home-dot {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .mobile-back-button {
        border: 1px solid var(--color-line);
        border-radius: 14px;
        background: transparent;
        color: var(--color-text);
        cursor: pointer;
        font-size: 1.6rem;
        line-height: 1;
        padding: 0;
    }

    .mobile-topbar-home-dot::before {
        content: '';
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--color-solar), var(--color-water));
        box-shadow: 0 0 0 6px var(--color-solar-soft);
    }

    .mobile-topbar-brand {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .mobile-topbar-home-trigger {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 26px;
        grid-template-rows: auto auto;
        column-gap: 8px;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: 2px 0;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        cursor: pointer;
        font: inherit;
    }

    .mobile-topbar-home-trigger .mobile-topbar-kicker,
    .mobile-topbar-home-trigger .mobile-topbar-title {
        grid-column: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-topbar-home-trigger::before {
        content: '';
        grid-column: 2;
        grid-row: 1 / 3;
        justify-self: end;
        width: 26px;
        height: 26px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 72%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-bg-alt) 72%, transparent);
    }

    .mobile-topbar-home-trigger::after {
        content: '';
        grid-column: 2;
        grid-row: 1 / 3;
        justify-self: center;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        color: var(--color-text-muted);
        transform: rotate(45deg);
    }

    .mobile-topbar-kicker {
        color: var(--color-text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }

    .mobile-topbar-title {
        font-family: var(--font-display);
        font-size: 0.96rem;
        font-weight: 700;
        letter-spacing: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-profile-link {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 13px;
        background: linear-gradient(145deg, var(--color-solar-soft), var(--color-water-soft));
        border: 1px solid var(--color-solar-soft);
        color: var(--color-text);
        text-decoration: none;
        font-weight: 800;
        font-size: 0.9rem;
    }

    .content-shell--mobile-app {
        position: relative;
    }

    .home-sheet-eyebrow {
        color: var(--color-text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .home-sheet-list {
        display: grid;
        gap: 10px;
    }

    .home-sheet-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        width: 100%;
        padding: 14px;
        border: 1px solid var(--color-line);
        border-radius: 18px;
        background: transparent;
        color: var(--color-text);
        text-align: left;
    }

    .home-sheet-item.active {
        border-color: var(--color-solar-soft);
        background: linear-gradient(180deg, var(--color-solar-soft), var(--color-bg-alt));
    }

    .home-sheet-item-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .home-sheet-item-name {
        font-size: 0.96rem;
        font-weight: 700;
    }

    .home-sheet-item-meta {
        color: var(--color-text-muted);
        font-size: 0.82rem;
    }

    .home-sheet-item-state {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        color: var(--color-text-soft);
        font-size: 1.1rem;
        font-weight: 700;
    }

    .home-sheet-item.active .home-sheet-item-state {
        background: var(--color-solar-soft);
        color: var(--color-energy);
    }

    .home-sheet-error {
        color: var(--color-error);
        font-size: 0.86rem;
    }

    .mobile-tabbar {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px));
        z-index: 45;
        display: flex;
        gap: 6px;
        padding: 6px;
        border: 1px solid color-mix(in srgb, var(--color-line-strong) 66%, transparent);
        border-radius: 21px;
        background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg) 8%);
        box-shadow:
            0 16px 42px rgba(17, 24, 39, 0.18),
            0 1px 0 color-mix(in srgb, white 6%, transparent) inset;
        overflow-x: auto;
        scrollbar-width: none;
        /* FOOT-GUN: promote to its own GPU compositor layer so route-change
           sibling repaints (rise-in animates content with opacity 0→1 +
           translateY) can't invalidate the tabbar's paint. Without this, iOS
           Safari + Brave render the tabbar's pill background as transparent
           until a scroll forces recomposite — BUG-247. `isolation: isolate`
           is the modern standards-based way to pin a stacking context; the
           translateZ + backface-visibility combo belts-and-braces the iOS
           Safari / Brave paint quirk which `isolation` alone doesn't fix. */
        isolation: isolate;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .mobile-tabbar--fill {
        justify-content: stretch;
        overflow-x: hidden;
    }

    .mobile-tabbar::-webkit-scrollbar {
        display: none;
    }

    .mobile-tabbar-item {
        display: grid;
        justify-items: center;
        gap: 5px;
        min-width: 64px;
        padding: 7px 6px 6px;
        border: 0;
        border-radius: 15px;
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        flex: 0 0 auto;
        position: relative;
    }

    .mobile-tabbar-item--fill {
        min-width: 0;
        flex: 1 1 0;
    }

    .mobile-tabbar-item.active {
        background: transparent;
        color: var(--color-text);
    }

    /* Direction B: accent icon-chip behind the active tab glyph (replaces the
       Variant-A top pill — unifies with the desktop sidebar's active chip). */
    .mobile-tabbar-item.active .mobile-tabbar-icon {
        background: var(--color-solar-soft);
        /* Amber ring so the active chip stays legible on the near-white tabbar
           surface in light mode (solar-soft cream alone has too little boundary). */
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-solar) 35%, transparent);
        color: var(--color-solar-text);
    }

    .mobile-tabbar-icon {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 24px;
        border-radius: 11px;
        transition: background-color 160ms ease, color 160ms ease;
    }

    .mobile-tabbar-icon svg {
        width: 18px;
        height: 18px;
    }

    .mobile-tabbar-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
}

@media (max-width: 640px) {
    .main-content {
        padding: 12px 12px 24px;
        padding-bottom: max(110px, calc(24px + env(safe-area-inset-bottom)));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        gap: 10px;
        margin-bottom: 12px;
        border-radius: 18px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-solar) 6%, transparent), transparent),
            color-mix(in srgb, var(--color-surface) 90%, transparent);
        border-color: color-mix(in srgb, var(--color-line-strong) 74%, transparent);
        color: var(--color-text);
    }

    .mobile-topbar-row {
        gap: 10px;
    }

    .mobile-tabbar {
        left: 10px;
        right: 10px;
        gap: 4px;
        padding: 7px;
        border-radius: 22px;
    }

    .mobile-tabbar-item {
        /* Tap-target floor: Apple HIG / WCAG 2.5.5 require ≥44×44 CSS px for primary
           navigation. The previous 9/4/7 padding rendered ~38px tall on iPhone SE /
           360–414px viewports. min-height pins the height directly so labels stay tight. */
        padding: 9px 4px 7px;
        border-radius: 16px;
        min-width: 62px;
        min-height: 44px;
    }

    .mobile-tabbar-label {
        font-size: 0.64rem;
    }
}

/* AuDHD additions — audhd-shell
   Shell-level UI: home-switcher option subtitle, global triage chip strip
   variant. Loaded after the base mobile page owner; overrides apply. */


/* ── T3.10 — Home dropdown option subtitle ─────────────────────────────
   Each dropdown option now renders a two-line layout: home name (primary)
   + location/service-count subtitle (secondary). Re-stacks the existing
   single-line `.home-dropdown-option` flex row by introducing an inner
   `.home-dropdown-option-copy` column. The check icon stays on the right.

   Object-permanence hint for users with similar-sounding home names
   ("Casa Joro" vs "Casa Luma"): the location anchors each option. */
.home-dropdown-option-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.home-dropdown-option-copy .home-dropdown-option-name {
    /* Override the original flex:1 — the parent column owns sizing now. */
    flex: 0 0 auto;
}

.home-dropdown-option-meta {
    color: var(--color-text-muted, rgba(230, 236, 242, 0.55));
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── T3.10 — Mobile home sheet meta lines ──────────────────────────────
   The sheet now stacks: name → location/services → state ("Actief" /
   "Overschakelen"). Tighten the second meta row so the trio reads as a
   single block, not three separate paragraphs. */
.home-sheet-item-meta--state {
    color: var(--color-text-soft, rgba(230, 236, 242, 0.7));
    font-size: 0.78rem;
    font-weight: 600;
}


/* T3.12 triage chip strip (shell variant) removed 2026-06-15 together with the
   .ah-triage-* base classes in surface-refinements.css. The strip was already
   unmounted from app.js; this rule referenced classes that no longer exist. */

/* Per-home theming v1 (T-PHT-01) was prototyped here on 2026-05-03 and
 * removed the same day per user feedback ("colors weird, very subtle in
 * the sidebar"). The companion homeContext.js slugify + watch was also
 * reverted — see commit log for details. If this idea returns, consider
 * a different surface (e.g. a small accent dot next to the home name)
 * rather than re-tinting the sidebar chrome. */