/* phone design: map first. Overrides of base.css (which holds the shared components and the laptop layout). */
body[data-ui=mobile] { font-size:14px; overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
body[data-ui=mobile] #map { position:fixed; inset:0; }
/* top: floating search + filter button, class chips under it */
body[data-ui=mobile] #m-top { position:fixed; z-index:9; top:max(10px, env(safe-area-inset-top)); left:10px; right:10px; display:flex; gap:8px; }
body[data-ui=mobile] #searchbox { flex:1; min-width:0; }
body[data-ui=mobile] #q { height:46px; font-size:16px; border-radius:16px; padding-left:40px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line2); box-shadow:0 8px 28px rgba(0,0,0,.35); }
body[data-ui=mobile] #searchbox > svg { left:14px; }
body[data-ui=mobile] #suggest { top:calc(100% + 8px); max-height:56vh; }
body[data-ui=mobile] .sg { padding:11px 14px; }
body[data-ui=mobile] .fab { position:relative; flex:none; width:46px; height:46px; border-radius:16px; border:1px solid var(--line2); background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:var(--text); display:grid; place-items:center; box-shadow:0 8px 28px rgba(0,0,0,.35); padding:0; cursor:pointer; }
body[data-ui=mobile] .fab i { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; border-radius:9px; background:var(--accent); color:#06121a; font:700 11px/18px system-ui; text-align:center; font-style:normal; padding:0 4px; }
body[data-ui=mobile] #chips { position:fixed; z-index:8; top:calc(max(10px, env(safe-area-inset-top)) + 54px); left:0; right:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 10px 6px; gap:7px; }
body[data-ui=mobile] #chips::-webkit-scrollbar { display:none; }
body[data-ui=mobile] #chips .chip { background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line2); padding:7px 12px 7px 8px; font-size:13px; box-shadow:0 4px 16px rgba(0,0,0,.3); }
body[data-ui=mobile] #chips .chip.on { background:color-mix(in srgb, var(--k, #5cc8ff) 24%, #0f151c); }
body[data-ui=mobile] #chips .chip .g { width:20px; height:20px; font-size:10px; }
/* bottom sheet with the list: three heights, drag the handle or tap it */
body[data-ui=mobile] #side { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-width:none; border-radius:24px 24px 0 0; border-width:1px 0 0 0; z-index:10; height:46vh; padding-bottom:env(safe-area-inset-bottom);
  transition:height .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1); box-shadow:0 -12px 40px rgba(0,0,0,.45); }
body[data-ui=mobile] #side[data-state=peek] { height:calc(112px + env(safe-area-inset-bottom)); }
body[data-ui=mobile] #side[data-state=half] { height:46vh; }
body[data-ui=mobile] #side[data-state=full] { height:calc(100vh - 118px); }
@supports (height:100dvh) { body[data-ui=mobile] #side[data-state=half] { height:46dvh; } body[data-ui=mobile] #side[data-state=full] { height:calc(100dvh - 118px); } }
body[data-ui=mobile] #grab-area { height:26px; display:grid; place-items:center; cursor:grab; touch-action:none; flex:none; }
body[data-ui=mobile] #grab-area i { width:40px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); }
body[data-ui=mobile] #head { padding:0 16px 8px; border-bottom:1px solid var(--line); }
body[data-ui=mobile] #brand b { font-size:16px; }
body[data-ui=mobile] #reset { font-size:13px; }
body[data-ui=mobile] #rows { padding-bottom:20px; }
body[data-ui=mobile] .item { margin:0 6px; }
body[data-ui=mobile] .row { padding:12px 12px 12px 16px; grid-template-columns:60px 1fr auto; gap:12px; }
body[data-ui=mobile] .badge { font-size:13px; padding:6px 6px; border-radius:10px; }
body[data-ui=mobile] .dest { font-size:15px; }
body[data-ui=mobile] .next { font-size:12.5px; }
body[data-ui=mobile] .pill { font-size:13px; padding:5px 10px; }
body[data-ui=mobile] .empty { padding:30px 20px; }
/* filter sheet */
body[data-ui=mobile] #scrim { position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.5); }
body[data-ui=mobile] #scrim[hidden], body[data-ui=mobile] #filters[hidden] { display:none; }
body[data-ui=mobile] #filters { position:fixed; left:0; right:0; bottom:0; z-index:40; max-height:82vh; overflow:auto; background:#121a22; border-radius:24px 24px 0 0; border-top:1px solid var(--line2); padding:16px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow:0 -12px 50px rgba(0,0,0,.6); }
body[data-ui=mobile] #filters .fh { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
body[data-ui=mobile] #filters .fh b { font-size:17px; }
body[data-ui=mobile] #m-filter-done { background:var(--accent); color:#06121a; border:0; border-radius:12px; padding:8px 18px; font:700 14px system-ui; cursor:pointer; }
body[data-ui=mobile] #filters h5 { margin:16px 2px 8px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--dim2); font-weight:600; }
body[data-ui=mobile] #delays { gap:6px; }
body[data-ui=mobile] .dc { padding:10px 4px 8px; border-radius:12px; } body[data-ui=mobile] .dc b { font-size:17px; } body[data-ui=mobile] .dc span { font-size:11px; }
body[data-ui=mobile] #cc { flex-wrap:wrap; }
body[data-ui=mobile] #cc .chip { padding:8px 14px; font-size:14px; }
body[data-ui=mobile] #pop { position:static; width:auto; background:none; border:0; box-shadow:none; padding:0; }
body[data-ui=mobile] #pop h5 { margin:16px 2px 6px; }
body[data-ui=mobile] .opt { padding:12px 8px; font-size:15px; }
body[data-ui=mobile] .switch { display:block; margin-top:18px; text-align:center; color:var(--dim); font-size:13px; text-decoration:none; }
/* train detail: a bottom sheet instead of a window that follows the train */
body[data-ui=mobile] #tw { background:#10171e; backdrop-filter:none; position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-height:74vh; transform:none !important; border-radius:24px 24px 0 0; border-width:1px 0 0 0; z-index:12; padding-bottom:env(safe-area-inset-bottom); }
body[data-ui=mobile] .tw-head { padding:14px 12px 12px 16px; }
body[data-ui=mobile] .tw-head .dest { font-size:17px; }
body[data-ui=mobile] .tw-x { font-size:30px; padding:0 8px; }
body[data-ui=mobile] .tw-body { padding:0 16px 16px; }
body[data-ui=mobile] .tabs button { padding:8px 14px; font-size:14px; }
body[data-ui=mobile] .kv { font-size:14px; grid-template-columns:96px 1fr; }
/* map controls and attribution stay clear of the sheets */
body[data-ui=mobile] .maplibregl-ctrl-bottom-left { bottom:calc(122px + env(safe-area-inset-bottom)); }
body[data-ui=mobile] .maplibregl-ctrl-bottom-left .maplibregl-ctrl-zoom-in, body[data-ui=mobile] .maplibregl-ctrl-bottom-left .maplibregl-ctrl-zoom-out { display:none; }
/* station page and connection sheet: comfortable tap targets */
body[data-ui=mobile] #st-top { padding-top:max(14px, env(safe-area-inset-top)); }
body[data-ui=mobile] #st-name { font-size:22px; }
body[data-ui=mobile] .trow-main { padding:13px 14px 13px 12px; }
body[data-ui=mobile] #cn-top { padding-top:max(14px, env(safe-area-inset-top)); }
body[data-ui=mobile] #cn-to { font-size:16px; }
body[data-ui=mobile] .tw-head { touch-action:none; cursor:grab; }  /* drag or tap: shrink the detail sheet to its header */
body[data-ui=mobile] #side[data-state=hidden] { transform:translateY(105%); }  /* a train's detail is open: one sheet at a time */
body[data-ui=mobile] #tw[data-size=small] .tw-body { display:none; }
body[data-ui=mobile] #tw[data-size=mid] { max-height:42vh; }
body[data-ui=mobile] #tw[data-size=large] { max-height:74vh; }
body[data-ui=mobile] .tw-size { background:none; border:0; color:inherit; opacity:.7; padding:4px 6px; }