/* =============================================
   SOLIBUS v6.1 — Passenger Experience
   Google Maps Design Language · Snap Sheet · Sidebar
   ============================================= */

/* === MAP LAYER === */
#map-container { position:fixed; inset:0; z-index:0 }
#mapa-principal { width:100%; height:100% }

/* =============================================
   FLOATING SEARCH BAR — GM Pill Style
   ============================================= */
.floating-search {
    position: fixed;
    top: calc(12px + var(--safe-top));
    left: 12px;
    right: 12px;
    z-index: 500;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 8px;
    align-items: center;
}

/* Avatar / Menu btn */
.search-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg-raised);
    border: none;
    display: flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--dur-fast), transform var(--dur-fast);
    font-family: var(--font-display);
    font-weight: 700; font-size: 0.9rem;
    color: var(--ink-primary);
}
.search-avatar:active { transform:scale(0.92); box-shadow:var(--shadow-sm) }

/* Search field — GM Pill */
.search-field {
    display: flex; align-items:center; gap:10px;
    height: 44px; padding: 0 16px;
    background: var(--bg-raised);
    border: none; border-radius: var(--r-full);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--dur-normal);
}
.search-field:focus-within { box-shadow: var(--shadow-lg) }
.search-field svg { color:var(--ink-muted); flex-shrink:0 }
.search-field input {
    flex:1; border:none; background:none; outline:none;
    font-size: 16px; font-weight:400;
    color: var(--ink-primary); font-family: var(--font-body);
}
.search-field input::placeholder { color:var(--ink-faint) }

/* Action btn — Circular */
.search-action {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--bg-raised); border: none;
    display: flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-md); color: var(--ink-secondary);
    transition: all var(--dur-fast);
}
.search-action:active { transform:scale(0.92) }
.search-action.active {
    background: var(--accent); color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(26,115,232,.4);
}

/* =============================================
   ROUTE CHIPS — Google Maps Filter Chips
   ============================================= */
.route-pills-track {
    position: fixed;
    top: calc(66px + var(--safe-top));
    left: 0; right: 0;
    z-index: 400;
    display: flex; gap: 8px;
    padding: 4px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
}
.route-pills-track::-webkit-scrollbar { display:none }

.gm-pill {
    flex-shrink: 0;
    display: flex; align-items:center; gap:6px;
    padding: 7px 14px;
    border-radius: var(--r-full);
    background: var(--bg-raised); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-display); font-size:0.75rem; font-weight:600;
    color: var(--ink-secondary); white-space: nowrap;
    transition: all var(--dur-fast) var(--ease-out); cursor: pointer;
}
.gm-pill:active { transform:scale(0.95) }
.gm-pill.active {
    background: var(--accent-soft); border-color: var(--accent);
    color: var(--accent); box-shadow: none;
}
body.dark-mode .gm-pill.active {
    background: rgba(138,180,248,.15); border-color: var(--accent); color: var(--accent);
}
.gm-pill-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }

/* =============================================
   MAP FABs — Circular (GM Authentic)
   ============================================= */
.map-fabs {
    position: fixed;
    right: 14px; bottom: calc(var(--sheet-mid-height, 300px) + 16px);
    z-index: 400;
    display: flex; flex-direction:column; gap:10px;
    transition: bottom var(--dur-drawer) var(--ease-drawer);
}

.map-fab {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-raised); border: none;
    box-shadow: var(--shadow-md);
    display: flex; align-items:center; justify-content:center;
    color: var(--ink-secondary);
    transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.map-fab:active { transform:scale(0.9); box-shadow:var(--shadow-sm) }
.map-fab.located { color:#1A73E8 }
body.dark-mode .map-fab.located { color:#8AB4F8 }

/* =============================================
   APP SHEET — GM Persistent Snap Drawer
   3 snap states: peek · mid · full
   ============================================= */
.app-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 500;
    pointer-events: none;
}

.app-sheet-inner {
    pointer-events: auto;
    background: var(--bg-raised);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -2px 12px rgba(60,64,67,.16), 0 -1px 4px rgba(60,64,67,.1);
    /* Height controlled by JS snap behavior */
    height: 300px;
    max-height: 90dvh;
    display: flex; flex-direction:column;
    transition: height 350ms cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: height;
    overflow: hidden;
    border-top: 1px solid var(--border);
}
body.dark-mode .app-sheet-inner {
    box-shadow: 0 -2px 16px rgba(0,0,0,.6);
}

/* State classes applied by JS */
.app-sheet-inner.snap-peek  { height: 80px  }
.app-sheet-inner.snap-mid   { height: 300px }
.app-sheet-inner.snap-full  { height: 88dvh }
.app-sheet-inner.is-dragging { transition: none !important }

/* Hidden (menu-closed toggled by existing app.js) */
body.menu-closed .app-sheet-inner {
    height: 0 !important;
    transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* When peeking, content fades out */
.app-sheet-inner.snap-peek .sheet-content { opacity:0; pointer-events:none }
.app-sheet-inner.snap-peek .sheet-nav     { opacity:0; pointer-events:none }
.sheet-content, .sheet-nav {
    transition: opacity var(--dur-normal) var(--ease-out);
}

/* Drag handle — GM style */
.sheet-drag {
    display: flex; justify-content:center;
    padding: 10px 0 6px;
    cursor: grab; flex-shrink:0; touch-action:none;
}
.sheet-drag:active { cursor:grabbing }
.drag-bar {
    width: 36px; height: 4px;
    border-radius: var(--r-full);
    background: var(--border-strong);
    transition: background var(--dur-fast), width var(--dur-fast);
}
.sheet-drag:hover .drag-bar { width:48px; background:var(--ink-faint) }

/* Sheet scroll area */
.sheet-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 16px 8px;
}

/* Panels */
.sheet-panel, .gm-panel { display:none }
.sheet-panel.active, .gm-panel.active {
    display: block;
    animation: panelReveal 0.25s var(--ease-out);
}
@keyframes panelReveal {
    from { opacity:0; transform:translateY(6px) }
    to   { opacity:1; transform:none }
}

/* =============================================
   BOTTOM NAV — GM Tabs
   ============================================= */
.sheet-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 0 4px calc(4px + var(--safe-bottom));
    background: var(--bg-raised);
}
.nav-item {
    display: flex; flex-direction:column; align-items:center; gap:3px;
    padding: 10px 4px 6px;
    color: var(--ink-muted);
    font-family: var(--font-display); font-size:0.6rem; font-weight:600;
    letter-spacing: 0.2px; position:relative;
    transition: color var(--dur-fast);
    border-top: 2px solid transparent; margin-top:-1px;
}
.nav-item svg { width:20px; height:20px; transition:transform var(--dur-fast) var(--ease-out) }
.nav-item.active {
    color: var(--accent);
    border-top-color: var(--accent);
}
.nav-item.active svg { transform:scale(1.06) }

/* Alert badge */
.tab-badge {
    position: absolute; top:8px; right: calc(50% - 16px);
    width:7px; height:7px; border-radius:50%;
    background: var(--red); display:none;
    border: 1.5px solid var(--bg-raised);
}
.tab-badge.visible { display:block; animation:popIn .3s var(--ease-out) }
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }

/* =============================================
   SECTION HEADS — GM Labels
   ============================================= */
.section-head {
    display: flex; justify-content:space-between; align-items:center;
    margin-bottom: 10px; margin-top: 6px;
}
.section-head h3 {
    font-family: var(--font-display); font-size:0.76rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.7px; color:var(--ink-muted);
}
.section-action {
    font-family: var(--font-display); font-size:0.78rem; font-weight:600;
    color: var(--accent); padding:4px 8px; border-radius:var(--r-xs);
    transition: background var(--dur-fast);
}
.section-action:active { background:var(--accent-soft) }

.gm-section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.gm-section-title span { font-family:var(--font-display); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.7px; color:var(--ink-muted) }
.gm-see-all { border:none; background:none; cursor:pointer; font-family:var(--font-display); font-size:0.75rem; font-weight:600; color:var(--accent) }

/* =============================================
   NEARBY STOPS — GM List Items
   ============================================= */
.gm-nearby {
    display: grid; grid-template-columns:48px 1fr;
    gap:12px; align-items:center; padding:12px; margin-bottom:6px;
    border-radius:var(--r-md); background:var(--bg-inset); cursor:pointer;
    transition:background var(--dur-fast); border:1px solid var(--border);
}
.gm-nearby:active { background:var(--bg-root) }
.gm-nearby-dist { text-align:center }
.gm-nearby-dist .val {
    font-family:var(--font-mono); font-size:1.05rem; font-weight:500; line-height:1;
    font-variant-numeric:tabular-nums; color:var(--ink-primary);
}
.gm-nearby-dist .unit {
    font-size:0.55rem; font-weight:600; color:var(--ink-muted);
    text-transform:uppercase; letter-spacing:0.3px;
}
.gm-nearby-info { min-width:0 }
.gm-nearby-info h4 {
    font-family:var(--font-display); font-size:0.84rem; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gm-nearby-routes { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap }
.gm-nearby-tag {
    font-family:var(--font-display); font-size:0.58rem; font-weight:700;
    color:#FFFFFF; padding:2px 8px; border-radius:var(--r-full);
}

/* =============================================
   ROUTE CARDS — GM Left-stripe Style
   ============================================= */
.gm-route-card {
    display: grid; grid-template-columns:4px 1fr;
    background: var(--bg-raised); border-radius:var(--r-md); margin-bottom:8px;
    cursor:pointer; overflow:hidden; border:1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.gm-route-card:hover { box-shadow:var(--shadow-md) }
.gm-route-card:active { transform:scale(0.98); box-shadow:var(--shadow-sm) }
.gm-rc-stripe { width:4px; border-radius:var(--r-md) 0 0 var(--r-md) }
.gm-rc-body { padding:13px; min-width:0 }
.gm-rc-top { display:flex; align-items:center; gap:10px; margin-bottom:5px }
.gm-rc-badge {
    font-family:var(--font-display); font-size:0.62rem; font-weight:700;
    color:#FFFFFF; padding:3px 10px; border-radius:var(--r-full);
    flex-shrink:0; letter-spacing:0.3px;
}
.gm-rc-name {
    font-family:var(--font-display); font-size:0.88rem; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
}
.gm-rc-fav { color:var(--gold); font-size:0.85rem; flex-shrink:0 }
.gm-rc-desc {
    font-size:0.74rem; color:var(--ink-muted); margin-bottom:8px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gm-rc-meta { display:flex; gap:6px; flex-wrap:wrap }
.gm-rc-tag {
    font-size:0.6rem; font-weight:600; padding:3px 8px;
    border-radius:var(--r-full); background:var(--bg-inset); color:var(--ink-secondary);
    display:flex; align-items:center; gap:3px; white-space:nowrap;
    border:1px solid var(--border);
}
.gm-rc-tag.price { background:var(--gold-soft); color:var(--gold); border-color:transparent }
.gm-rc-tag.freq  { background:var(--blue-soft);  color:var(--blue); border-color:transparent }

/* =============================================
   INFO BENTO — GM Grid Cards
   ============================================= */
.info-bento {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.bento-card {
    display:flex; align-items:center; gap:10px; padding:13px;
    border-radius:var(--r-md); background:var(--bg-inset); cursor:pointer;
    transition:background var(--dur-fast), transform var(--dur-fast);
    border:1px solid var(--border);
}
.bento-card:active { transform:scale(0.97) }
.bento-card.bento-wide { grid-column:1 / -1 }
.bento-icon {
    width:36px; height:36px; border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.bento-card strong { font-family:var(--font-display); font-size:0.84rem; font-weight:700; display:block }
.bento-card span   { font-size:0.7rem; color:var(--ink-muted) }
.gm-info-card { display:flex; align-items:center; gap:12px; padding:13px; border-radius:var(--r-md); background:var(--bg-inset); cursor:pointer; transition:transform var(--dur-fast); border:1px solid var(--border) }
.gm-info-card:active { transform:scale(0.97) }
.gm-info-icon { width:36px; height:36px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.gm-info-cards { display:flex; flex-direction:column; gap:6px }

/* =============================================
   PANEL SECTION
   ============================================= */
.panel-section { margin-bottom:18px }
.panel-section:last-child { margin-bottom:8px }

.panel-search-bar, .gm-search-inline {
    display:flex; align-items:center; gap:10px;
    height:44px; padding:0 14px;
    background:var(--bg-inset); border-radius:var(--r-full); margin-bottom:14px;
    border:1px solid var(--border);
}
.panel-search-bar svg, .gm-search-inline svg { color:var(--ink-muted); flex-shrink:0 }
.panel-search-bar input, .gm-search-inline input {
    flex:1; border:none; background:none; outline:none;
    font-size:16px; font-weight:400; color:var(--ink-primary); font-family:var(--font-body);
}
.panel-search-bar input::placeholder,
.gm-search-inline input::placeholder { color:var(--ink-faint) }

/* =============================================
   PROFILE — GM Account Style
   ============================================= */
.profile-hero {
    display:grid; grid-template-columns:52px 1fr;
    gap:14px; align-items:center;
    padding-bottom:18px; margin-bottom:14px;
    border-bottom:1px solid var(--border);
}
.profile-hero-avatar {
    width:52px; height:52px; border-radius:50%;
    background:var(--accent); color:#FFFFFF;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:1.2rem;
}
.profile-hero-info h2  { font-family:var(--font-display); font-size:1.05rem; font-weight:700 }
.profile-hero-info span { font-size:0.75rem; color:var(--ink-muted) }

#portal-links { display:none; flex-direction:column; gap:6px; margin-bottom:14px }
#portal-links a {
    display:block; text-align:center; padding:12px 14px; border-radius:var(--r-sm);
    font-family:var(--font-display); font-weight:600; font-size:0.84rem; color:#FFFFFF;
    transition:transform var(--dur-fast), opacity var(--dur-fast);
}
#portal-links a:active { transform:scale(0.97); opacity:0.9 }

.profile-menu { display:flex; flex-direction:column; gap:1px }
.menu-row {
    display:grid; grid-template-columns:40px 1fr 20px;
    align-items:center; gap:12px; padding:10px 8px; border-radius:var(--r-sm);
    transition:background var(--dur-fast); min-height:52px; width:100%;
    text-align:left; color:var(--ink-primary);
}
.menu-row:active { background:var(--bg-inset) }
.menu-icon {
    width:40px; height:40px; border-radius:var(--r-sm); background:var(--bg-inset);
    display:flex; align-items:center; justify-content:center; color:var(--ink-secondary);
}
.menu-text { min-width:0 }
.menu-text strong { display:block; font-family:var(--font-display); font-weight:600; font-size:0.88rem }
.menu-text small  { font-size:0.7rem; color:var(--ink-muted) }
.menu-chevron { color:var(--ink-faint) }
.menu-divider { height:1px; background:var(--border); margin:6px 0 }
.menu-row.danger .menu-icon { background:var(--red-soft); color:var(--red) }
.menu-row.danger strong { color:var(--red) }
.gm-menu-item { display:flex; align-items:center; gap:14px; padding:12px 8px; border-radius:var(--r-sm); border:none; background:none; cursor:pointer; width:100%; color:var(--ink-secondary); transition:background var(--dur-fast); min-height:48px }
.gm-menu-item:active { background:var(--bg-inset) }

/* =============================================
   EMPTY STATE
   ============================================= */
.empty-state, .gm-empty {
    display:flex; flex-direction:column; align-items:center;
    gap:8px; padding:32px 0; color:var(--ink-faint);
}
.empty-state svg { opacity:0.35 }
.empty-state p, .gm-empty p { font-size:0.82rem; color:var(--ink-muted) }
.gm-empty-icon { font-size:1.5rem }

/* =============================================
   ROUTE DETAIL OVERLAY — GM Full Screen
   ============================================= */
.route-detail-overlay {
    display:none; position:fixed; inset:0; z-index:700;
    background:var(--bg-root); flex-direction:column; overflow:hidden;
}
.route-detail-overlay.visible {
    display:flex;
    animation: slideRight 0.3s var(--ease-out);
}
@keyframes slideRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }

.detail-header {
    display:grid; grid-template-columns:44px 1fr 44px;
    align-items:center; gap:8px;
    padding: calc(12px + var(--safe-top)) 14px 12px;
    background:var(--bg-raised); border-bottom:1px solid var(--border);
    z-index:10; flex-shrink:0;
}
.detail-back, .detail-fav {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-inset); color:var(--ink-primary);
    transition:background var(--dur-fast), transform var(--dur-fast);
}
.detail-back:active, .detail-fav:active { transform:scale(0.88) }
.detail-fav.is-fav { color:var(--gold) }
.detail-header h2 {
    font-family:var(--font-display); font-size:1rem; font-weight:700;
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.detail-scroll {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; padding:20px;
}
.dt-hero { display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; margin-bottom:24px }
.dt-hero-badge {
    width:64px; height:64px; border-radius:var(--r-md);
    display:flex; align-items:center; justify-content:center;
    color:#FFFFFF; font-family:var(--font-display); font-size:1.4rem; font-weight:800;
}
.dt-hero-info { min-width:0 }
.dt-hero-info h1 { font-family:var(--font-display); font-size:1.15rem; font-weight:700 }
.dt-hero-info p  { font-size:0.82rem; color:var(--ink-secondary); margin-top:2px }
.dt-empresa { font-size:0.7rem; color:var(--ink-muted); font-weight:500; margin-top:2px }
.dt-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px }
.dt-stat {
    background:var(--bg-inset); border-radius:var(--r-md); padding:14px 8px;
    text-align:center; border:1px solid var(--border);
}
.dt-stat .val { font-family:var(--font-mono); font-size:1.1rem; font-weight:500; font-variant-numeric:tabular-nums }
.dt-stat .lbl { font-size:0.58rem; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.4px; margin-top:3px }
.dt-tarifa-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px }
.dt-tarifa { background:var(--bg-inset); border-radius:var(--r-md); padding:14px; text-align:center; border:1px solid var(--border) }
.dt-tarifa .lbl { font-size:0.68rem; font-weight:600; color:var(--ink-muted); text-transform:uppercase }
.dt-tarifa .price { font-family:var(--font-mono); font-size:1.2rem; font-weight:500; color:var(--gold); margin-top:4px }
.dt-section-lbl {
    font-family:var(--font-display); font-size:0.68rem; font-weight:700;
    color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.8px;
    margin-bottom:10px; margin-top:6px;
}
.dt-dir-toggle {
    display:grid; grid-template-columns:1fr 1fr; gap:3px;
    background:var(--bg-inset); border-radius:var(--r-sm);
    padding:3px; margin-bottom:14px; border:1px solid var(--border);
}
.dt-dir-btn {
    padding:11px; border-radius:calc(var(--r-sm) - 3px);
    font-size:0.82rem; font-weight:600; font-family:var(--font-display);
    color:var(--ink-muted); text-align:center;
    transition:all .2s var(--ease-out); min-height:42px;
}
.dt-dir-btn.active { background:var(--bg-raised); color:var(--ink-primary); box-shadow:var(--shadow-sm) }
.dt-timeline { position:relative; margin:8px 0 20px 12px; padding-left:24px; border-left:2px solid var(--accent-soft) }
.dt-tl-stop { position:relative; padding:4px 0 16px; display:flex; align-items:center; gap:8px }
.dt-tl-dot { position:absolute; left:calc(-24px - 5px); width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-root) }
.dt-tl-stop.terminal .dt-tl-dot { width:14px; height:14px; left:calc(-24px - 7px); border-width:3px }
.dt-tl-stop.principal .dt-tl-dot { width:13px; height:13px; left:calc(-24px - 6px); background:var(--blue) }
.dt-tl-name { font-size:0.85rem; font-weight:500 }
.dt-tl-type { font-size:0.52rem; padding:2px 6px; border-radius:var(--r-full); font-weight:700; text-transform:uppercase; letter-spacing:0.5px }
.dt-tl-type.terminal { background:var(--accent-soft); color:var(--accent) }
.dt-tl-type.principal { background:var(--blue-soft); color:var(--blue) }
.dt-btn-map {
    width:100%; padding:14px; background:var(--accent); color:#FFFFFF;
    border-radius:var(--r-sm); font-family:var(--font-display); font-size:0.9rem; font-weight:600;
    border:none; cursor:pointer; margin-bottom:20px;
    transition:background var(--dur-fast), transform var(--dur-fast); min-height:48px;
    box-shadow:0 2px 6px rgba(26,115,232,.35);
}
.dt-btn-map:active { transform:scale(0.97) }
.dt-rating { display:flex; gap:6px; margin-bottom:20px }
.dt-star-btn {
    width:44px; height:44px; font-size:1.3rem; border:none;
    background:var(--bg-inset); border-radius:var(--r-sm);
    cursor:pointer; color:var(--ink-faint);
    transition:all var(--dur-fast); border:1px solid var(--border);
}
.dt-star-btn.filled { color:var(--gold); background:var(--gold-soft); border-color:transparent }
.dt-star-btn:active { transform:scale(0.88) }
.dt-schedule { margin-bottom:14px }
.dt-schedule-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 0; border-bottom:1px solid var(--border);
}
.dt-schedule-row:last-child { border-bottom:none }
.dt-schedule-day  { font-size:0.85rem; font-weight:500 }
.dt-schedule-time { font-size:0.85rem; color:var(--ink-secondary); font-family:var(--font-mono) }

/* =============================================
   DESKTOP — GM LEFT SIDEBAR
   On 768px+: bottom sheet becomes a fixed
   left panel, just like Google Maps desktop
   ============================================= */
@media (min-width: 768px) {

    /* Sheet becomes a full-height left panel */
    .app-sheet {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        right: auto; width: 390px;
        pointer-events: auto;
        z-index: 200;
    }

    .app-sheet-inner {
        /* Fill the entire sidebar height */
        height: 100% !important;
        max-height: 100%;
        min-height: 0;
        border-radius: 0;
        border-top: none;
        border-right: 1px solid var(--border);
        box-shadow: 2px 0 12px rgba(60,64,67,.12);
        transition: none !important;
        overflow: hidden;
    }

    /* Content + nav always visible on desktop */
    .app-sheet-inner.snap-peek .sheet-content,
    .app-sheet-inner.snap-peek .sheet-nav {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.menu-closed .app-sheet-inner {
        /* Slide off-screen to the left instead of down */
        height: 100% !important;
        transform: translateX(-100%);
        transition: transform var(--dur-drawer) var(--ease-drawer) !important;
    }

    /* Hide the drag handle on desktop — not needed */
    .sheet-drag { display: none }

    /* Search bar shifts right of the sidebar */
    .floating-search {
        left: 402px;
        right: 14px;
        width: auto;
    }

    /* Route chips shift right too */
    .route-pills-track {
        left: 402px;
        right: 0;
    }

    /* FABs stay right side, lower */
    .map-fabs {
        bottom: 90px;
        right: 22px;
        transition: none;
    }

    /* Sidebar header — GM branding strip */
    .sheet-content { padding: 0 16px 8px }

    /* Bottom nav becomes a sidebar footer */
    .sheet-nav {
        border-top: 1px solid var(--border);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 8px 8px calc(8px + var(--safe-bottom));
        background: var(--bg-raised);
    }
    .nav-item {
        padding: 8px 4px 6px;
        border-top: none;
        border-bottom: 2px solid transparent;
        margin-top: 0; margin-bottom: -1px;
        border-top: 2px solid transparent;
    }
    .nav-item.active { border-top-color: var(--accent) }

    /* Route detail overlay on desktop */
    .route-detail-overlay {
        left: 390px;
        animation: slideRight 0.3s var(--ease-out);
    }
}

@media (min-width: 1200px) {
    .app-sheet { width: 420px }
    .floating-search { left: 432px }
    .route-pills-track { left: 432px }
}