/* North Wildwood phone layout. Share the hosting layer so one stylesheet owns
   mobile geometry without fighting the older global styles or desktop fitter. */
@layer shorelysafe-unified {
  #nwwMobileControlHeader { display:none !important; }
  @media (max-width:900px), (max-height:560px) and (pointer:coarse) {
    html[data-nww-mobile-layout] body { --nww-key-extra:0px; --nww-mobile-timeline:calc(168px + var(--nww-key-extra)); }
    html[data-nww-mobile-layout] body #mapTitleBadge {
      position:fixed !important; top:calc(8px + env(safe-area-inset-top)) !important;
      left:calc(8px + env(safe-area-inset-left)) !important; right:calc(8px + env(safe-area-inset-right)) !important;
      width:auto !important; min-width:0 !important; max-width:none !important; height:52px !important; min-height:52px !important;
      padding:7px 174px 7px 12px !important; margin:0 !important; transform:none !important;
      display:flex !important; align-items:center !important; justify-content:flex-start !important;
      background:rgba(11,18,32,.88) !important; border:1px solid var(--line) !important; border-radius:14px !important; z-index:6100 !important;
    }
    html[data-nww-mobile-layout] body #mapTitleBadge #mapTitleText {
      width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important;
      white-space:normal !important; text-align:left !important; font:750 15px/1.18 system-ui !important; max-width:156px !important;
      overflow:visible !important; text-overflow:clip !important;
    }
    html[data-nww-mobile-layout] body #mapTitleLogo { display:none !important; }
    html[data-nww-mobile-layout] body #mobileControlsToggle,
    html[data-nww-mobile-layout] body:not(.mobile-legend-open) #legendDock {
      position:fixed !important; top:calc(12px + env(safe-area-inset-top)) !important;
      left:auto !important; bottom:auto !important; height:44px !important; min-height:44px !important; max-height:44px !important;
      margin:0 !important; padding:0 !important; transform:none !important; border-radius:10px !important;
      background:rgba(255,255,255,.05) !important; border:1px solid var(--line) !important; z-index:6200 !important;
    }
    html[data-nww-mobile-layout] body #mobileControlsToggle { right:calc(12px + env(safe-area-inset-right)) !important; width:94px !important; min-width:94px !important; max-width:94px !important; }
    html[data-nww-mobile-layout] body #mobileControlsToggle::after { font:700 14px/44px system-ui !important; }
    html[data-nww-mobile-layout] body:not(.mobile-legend-open) #legendDock { right:calc(112px + env(safe-area-inset-right)) !important; width:62px !important; min-width:62px !important; max-width:62px !important; }
    html[data-nww-mobile-layout] body:not(.mobile-legend-open) #legendDock::after { content:'Key' !important; font:700 14px/44px system-ui !important; }
    html[data-nww-mobile-layout] body.mobile-legend-open #legendDock {
      position:fixed !important; top:calc(68px + env(safe-area-inset-top)) !important;
      left:calc(8px + env(safe-area-inset-left)) !important; right:calc(8px + env(safe-area-inset-right)) !important;
      width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important;
      max-height:calc(100dvh - 252px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
      padding:14px !important; margin:0 !important; overflow:auto !important; z-index:6250 !important;
    }
    html[data-nww-mobile-layout] body #nwDefaultNavControl {
      position:fixed !important; top:calc(68px + env(safe-area-inset-top)) !important; right:calc(8px + env(safe-area-inset-right)) !important;
      left:auto !important; bottom:auto !important; width:60px !important; height:auto !important; max-height:none !important;
      display:flex !important; flex-direction:column !important; gap:6px !important; overflow:visible !important; transform:none !important;
    }
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-direction-wheel { width:60px !important; height:60px !important; border-width:2px !important; }
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-wheel-cardinal { font-size:8px !important; }
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-wheel-knob { width:22px !important; height:22px !important; margin:-11px 0 0 -11px !important; }
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-simple-view { width:44px !important; height:44px !important; min-height:44px !important; border-radius:12px !important; font-size:13px !important; }
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-simple-zoom { width:44px !important; height:88px !important; flex-direction:column !important; }
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-simple-zoom-button { width:44px !important; height:44px !important; min-height:44px !important; font-size:24px !important; }
    html[data-nww-mobile-layout] body #timelineDock {
      left:calc(8px + env(safe-area-inset-left)) !important; right:calc(8px + env(safe-area-inset-right)) !important;
      bottom:calc(8px + env(safe-area-inset-bottom)) !important; width:auto !important; min-width:0 !important; max-width:none !important;
      height:var(--nww-mobile-timeline) !important; min-height:var(--nww-mobile-timeline) !important; max-height:var(--nww-mobile-timeline) !important;
      padding:0 !important; border:1px solid rgba(191,219,254,.38) !important; border-radius:16px !important; background:rgba(11,18,32,.97) !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineBubble { top:6px !important; left:62px !important; right:10px !important; width:auto !important; height:44px !important; }
    html[data-nww-mobile-layout] body #timelineDock #playBtn { top:6px !important; left:8px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelinePreviousDay,
    html[data-nww-mobile-layout] body #timelineDock #timelineNextDay,
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs { top:52px !important; height:44px !important; min-height:44px !important; max-height:44px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey { top:99px !important; height:calc(16px + var(--nww-key-extra)) !important; min-height:16px !important; max-height:none !important; gap:0 10px !important; }
    html[data-nww-mobile-layout] body:has(#roadImpactsKey:not([hidden])) { --nww-key-extra:20px; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey:has(#roadImpactsKey:not([hidden])) { flex-wrap:wrap !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey #roadImpactsKey:not([hidden]) { flex:0 0 100% !important; justify-content:center !important; font-size:11px !important; height:16px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey .timeline-key-label { font:500 11px/16px system-ui !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey .timeline-key-swatch { width:8px !important; height:8px !important; flex-basis:8px !important; }
    html[data-nww-mobile-layout] body #timelineDock .timeline-trackRow { top:calc(112px + var(--nww-key-extra)) !important; left:8px !important; right:8px !important; height:44px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineTimeBounds { top:calc(148px + var(--nww-key-extra)) !important; font:500 10px/14px system-ui !important; }
    html[data-nww-mobile-layout] body #timelineDock[data-single-timeline-time="true"] { --nww-mobile-timeline:calc(122px + var(--nww-key-extra)); }
    html[data-nww-mobile-layout] body .leaflet-bottom { bottom:calc(var(--nww-mobile-timeline) + 16px + env(safe-area-inset-bottom)) !important; }
    html[data-nww-mobile-layout] body #toast { bottom:calc(var(--nww-mobile-timeline) + 20px + env(safe-area-inset-bottom)) !important; }
    html[data-nww-mobile-layout] body #mapClickModeControl:not([hidden]) { bottom:calc(var(--nww-mobile-timeline) + 18px + env(safe-area-inset-bottom)) !important; }
    html[data-nww-mobile-layout] body.mobile-controls-open #leftPanel {
      position:fixed !important; top:calc(8px + env(safe-area-inset-top)) !important; bottom:calc(8px + env(safe-area-inset-bottom)) !important;
      left:calc(8px + env(safe-area-inset-left)) !important; right:calc(8px + env(safe-area-inset-right)) !important;
      width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:none !important;
      display:flex !important; flex-direction:column !important; gap:8px !important; padding:12px !important; margin:0 !important; transform:none !important;
      overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important;
      background:var(--bg) !important; border:1px solid rgba(191,219,254,.38) !important; border-radius:18px !important; z-index:7100 !important; scroll-padding-top:124px;
    }
    html[data-nww-mobile-layout] body.mobile-controls-open #mobileControlsToggle { visibility:hidden !important; pointer-events:none !important; }
    html[data-nww-mobile-layout] body.mobile-controls-open #mapTitleBadge { visibility:hidden !important; }
    html[data-nww-mobile-layout] body.mobile-controls-open #timelineDock { opacity:0 !important; pointer-events:none !important; }
    html[data-nww-mobile-layout] body #leftPanel #mobileControlsClose {
      position:fixed !important; top:calc(20px + env(safe-area-inset-top)) !important; right:calc(20px + env(safe-area-inset-right)) !important;
      left:auto !important; bottom:auto !important; width:44px !important; height:44px !important; margin:0 !important;
      display:block !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:12px !important; background:rgba(255,255,255,.075) !important; z-index:12 !important;
    }
    html[data-nww-mobile-layout] body #nwwMobileControlHeader {
      position:sticky !important; top:-12px !important; order:-100 !important; flex:0 0 auto !important; display:block !important;
      margin:-12px -12px 0 !important; padding:12px !important; background:var(--bg) !important; border-bottom:1px solid var(--line) !important; z-index:10 !important;
    }
    html[data-nww-mobile-layout] body #nwwMobileControlHeader .nww-drawer-heading { min-height:44px; padding-right:56px; }
    html[data-nww-mobile-layout] body #nwwMobileControlHeader h2 { margin:0 !important; font:750 19px/24px system-ui !important; }
    html[data-nww-mobile-layout] body #nwwMobileControlHeader p { margin:2px 0 0; color:var(--muted); font:500 12px/16px system-ui; }
    html[data-nww-mobile-layout] body #nwwMobileControlHeader .nww-control-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; }
    html[data-nww-mobile-layout] body #nwwMobileControlHeader button { min-width:0 !important; height:44px !important; padding:6px !important; font:650 14px/1.2 system-ui !important; background:rgba(255,255,255,.05) !important; border:1px solid var(--line) !important; border-radius:10px !important; }
    html[data-nww-mobile-layout] body #nwwMobileControlHeader button[aria-selected="true"] { color:var(--nw-ui-blue) !important; background:var(--accent-soft) !important; border-color:var(--nw-ui-blue) !important; box-shadow:none !important; }
    html[data-nww-mobile-layout] body #leftPanel:is(#leftPanel)[data-nww-section="forecast"] [data-nww-group]:not([data-nww-group="forecast"]),
    html[data-nww-mobile-layout] body #leftPanel:is(#leftPanel)[data-nww-section="map"] [data-nww-group]:not([data-nww-group="map"]),
    html[data-nww-mobile-layout] body #leftPanel:is(#leftPanel)[data-nww-section="tools"] [data-nww-group]:not([data-nww-group="tools"]) { display:none !important; }
    html[data-nww-mobile-layout] body #leftPanel .panel-card,
    html[data-nww-mobile-layout] body #leftPanel .rail-card { padding:10px !important; border-radius:12px !important; gap:8px !important; }
    html[data-nww-mobile-layout] body #leftPanel .section-title { min-height:36px !important; margin:0 !important; gap:6px !important; }
    html[data-nww-mobile-layout] body #leftPanel .section-title .title-with-help { flex:1 1 auto !important; min-width:0 !important; }
    html[data-nww-mobile-layout] body #leftPanel .section-title .pill { display:none !important; }
    html[data-nww-mobile-layout] body #leftPanel .data-source-options { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    html[data-nww-mobile-layout] body #leftPanel .data-source-options button { grid-column:auto !important; white-space:normal !important; padding:6px 4px !important; font-size:14px !important; }
    html[data-nww-mobile-layout] body #leftPanel #forecastScenarioCard { order:2 !important; }
    html[data-nww-mobile-layout] body #leftPanel #returnIntervalCard { order:3 !important; }
    html[data-nww-mobile-layout] body #leftPanel #timelineIntervalCard { order:4 !important; }
    html[data-nww-mobile-layout] body #leftPanel #calendarCard { order:5 !important; }
    html[data-nww-mobile-layout] body #leftPanel #mobileRailMount { gap:8px !important; order:6 !important; }
    html[data-nww-mobile-layout] body #leftPanel #mobileRailMount:empty { display:none !important; }
    html[data-nww-mobile-layout] body #leftPanel .layer-item { min-height:48px !important; padding:4px 0 !important; }
    html[data-nww-mobile-layout] body #leftPanel .toggle { min-width:44px !important; min-height:28px !important; }
    html[data-nww-mobile-layout] body #leftPanel #townAddressCard { order:-1 !important; }
    html[data-nww-mobile-layout] body #leftPanel #townAddressInput { width:100% !important; min-width:0 !important; font-size:16px !important; }
    html[data-nww-mobile-layout] body #leftPanel button:focus-visible { outline:2px solid var(--nw-ui-blue) !important; outline-offset:2px !important; }
    html[data-nww-mobile-layout] body #leftPanel #timelineIntervalCard { display:flex !important; flex-direction:column !important; gap:8px !important; }
    html[data-nww-mobile-layout] body #leftPanel #timelineIntervalCard .section-title { flex:0 0 44px !important; }
    html[data-nww-mobile-layout] body #leftPanel #dayNavCenter { display:flex !important; align-items:center !important; height:44px !important; min-height:44px !important; max-height:none !important; overflow:visible !important; }
    html[data-nww-mobile-layout] body #leftPanel #observedDateInput { box-sizing:border-box !important; height:44px !important; min-height:44px !important; max-height:44px !important; padding:6px !important; font:600 16px/1.2 system-ui !important; }
    html[data-nww-mobile-layout] body #leftPanel #timelineIntervalToggle { display:flex !important; position:static !important; width:100% !important; height:44px !important; min-height:44px !important; max-height:none !important; padding:0 !important; gap:6px !important; overflow:visible !important; border:0 !important; background:none !important; }
    html[data-nww-mobile-layout] body #leftPanel #timelineIntervalToggle button { position:static !important; flex:1 1 0 !important; min-width:0 !important; height:44px !important; margin:0 !important; padding:4px !important; border-radius:10px !important; font-size:14px !important; }
    html[data-nww-mobile-layout] body:not(.tutorial-active) #leftPanel .snapshot-card { display:none !important; }
    html[data-nww-mobile-layout] body #leftPanel .datum-card .segmented-control { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important; height:auto !important; padding:0 !important; background:none !important; border:0 !important; }
    html[data-nww-mobile-layout] body #leftPanel .datum-card .segmented-control button { width:100% !important; border-radius:10px !important; }
    html[data-nww-mobile-layout] body #leftPanel #opacityText { display:inline-flex !important; }
    html[data-nww-mobile-layout] body #leftPanel .layer-item:has(#nsiStructuresToggle) { grid-column:1 / -1 !important; }
    html[data-nww-mobile-layout] body #leftPanel .layer-item .layer-meta { min-width:0 !important; overflow-wrap:normal !important; word-break:normal !important; }
    html[data-nww-mobile-layout] body #leftPanel .layer-item .layer-meta * { overflow-wrap:normal !important; word-break:normal !important; }
    /* Reuse the desktop palette; older shared mobile rules supplied teal states. */
    html[data-nww-mobile-layout] body #mapTitleBadge,
    html[data-nww-mobile-layout] body #mapTitleBadge #mapTitleText { color:#dbeafe !important; }
    html[data-nww-mobile-layout] body #leftPanel button,
    html[data-nww-mobile-layout] body #mobileControlsToggle,
    html[data-nww-mobile-layout] body #mobileControlsToggle::after,
    html[data-nww-mobile-layout] body:not(.mobile-legend-open) #legendDock::after { color:var(--text) !important; -webkit-text-fill-color:currentColor !important; }
    html[data-nww-mobile-layout] body #leftPanel button.active { color:var(--nw-ui-blue) !important; background:var(--accent-soft) !important; border-color:var(--nw-ui-blue) !important; }
    html[data-nww-mobile-layout] body #leftPanel #timelineIntervalToggle button.active { color:white !important; border-color:transparent !important; }
    html[data-nww-mobile-layout] body #leftPanel .help-btn { color:white !important; }
    html[data-nww-mobile-layout] body #leftPanel .layers-card { background:rgba(11,18,32,.97) !important; border-color:rgba(191,219,254,.38) !important; }
    html[data-nww-mobile-layout] body #leftPanel .layer-item { background:rgba(255,255,255,.05) !important; }
    html[data-nww-mobile-layout] body.mobile-legend-open #legendDock { color:var(--text) !important; background:rgba(11,18,32,.94) !important; border-color:rgba(191,219,254,.16) !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineBubble .timeline-bubble-stage { background:rgba(var(--nw-ui-blue-rgb),.26) !important; border-color:rgba(191,219,254,.64) !important; box-shadow:inset 0 1px rgba(255,255,255,.16),0 7px 16px rgba(0,0,0,.18) !important; }
    html[data-nww-mobile-layout] body #timelineDock .timeline-day-arrow { color:var(--text) !important; background:rgba(255,255,255,.05) !important; border-color:var(--line) !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs .timeline-day.active { background-color:var(--accent-soft) !important; color:#f8fbff !important; border-color:#f8fbff !important; }
    html[data-nww-mobile-layout] body #leftPanel #calendarGrid { gap:3px !important; }
    html[data-nww-mobile-layout] body #leftPanel #calendarGrid button { min-width:0 !important; padding:2px !important; }
  }
  @media (max-width:360px) {
    html[data-nww-mobile-layout] body #mapTitleBadge { padding-right:157px !important; padding-left:8px !important; }
    html[data-nww-mobile-layout] body #mapTitleBadge #mapTitleText { font-size:13px !important; }
    html[data-nww-mobile-layout] body #mobileControlsToggle { width:84px !important; min-width:84px !important; max-width:84px !important; }
    html[data-nww-mobile-layout] body:not(.mobile-legend-open) #legendDock { right:102px !important; width:54px !important; min-width:54px !important; max-width:54px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey { gap:7px !important; }
    html[data-nww-mobile-layout] body #leftPanel .button-grid-3 button { font-size:14px !important; padding:4px !important; }
  }
  @media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
    html[data-nww-mobile-layout] body { --nww-mobile-timeline:calc(120px + var(--nww-key-extra)); }
    html[data-nww-mobile-layout] body #timelineDock #timelineBubble { width:calc(43% - 76px) !important; right:auto !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelinePreviousDay { top:6px !important; left:43% !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineNextDay { top:6px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs { top:6px !important; left:calc(43% + 78px) !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey { top:52px !important; }
    html[data-nww-mobile-layout] body #timelineDock .timeline-trackRow { top:calc(64px + var(--nww-key-extra)) !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineTimeBounds { top:calc(102px + var(--nww-key-extra)) !important; }
    html[data-nww-mobile-layout] body #nwDefaultNavControl { width:158px !important; display:grid !important; grid-template-columns:60px 44px 44px !important; align-items:start !important; }
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-direction-wheel { grid-area:auto !important; }
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-simple-view,
    html[data-nww-mobile-layout] body #nwDefaultNavControl .nw-simple-zoom { grid-area:auto !important; }
    html[data-nww-mobile-layout] body.mobile-controls-open #leftPanel { left:auto !important; width:min(460px, calc(100vw - 32px)) !important; }
    html[data-nww-mobile-layout] body.mobile-legend-open #legendDock { right:auto !important; width:min(430px,calc(100vw - 24px)) !important; max-height:calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
  }
}

/* Full-width time rail, direct day navigation, and a separate transport row. */
@layer shorelysafe-unified {
  html[data-nww-mobile-layout] body #timelineDock .timeline-step { display:none !important; }
  html[data-nww-mobile-layout] body #timelineDock .timeline-sr-date { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; }
  html[data-nww-mobile-layout] body #timelineDock #hourSlider:focus-visible { outline:2px solid var(--nw-ui-blue) !important; outline-offset:3px !important; border-radius:8px !important; }
  @media (max-width:900px), (max-height:560px) and (pointer:coarse) {
    html[data-nww-mobile-layout] body { --nww-mobile-timeline:calc(180px + var(--nww-key-extra)); }
    html[data-nww-mobile-layout] body:has(#timelineDock[data-single-timeline-time="true"]) { --nww-mobile-timeline:calc(126px + var(--nww-key-extra)); }
    html[data-nww-mobile-layout] body #timelineDock[data-single-timeline-time="true"] {
      --nww-mobile-timeline:calc(126px + var(--nww-key-extra));
      height:var(--nww-mobile-timeline) !important; min-height:var(--nww-mobile-timeline) !important; max-height:var(--nww-mobile-timeline) !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineBubble {
      top:6px !important; left:12px !important; right:158px !important; width:auto !important;
      flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:2px !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineBubble .timeline-bubble-current { font:750 18px/22px system-ui !important; font-variant-numeric:tabular-nums !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineBubble .timeline-bubble-stage { font:650 12px/16px system-ui !important; padding:0 6px !important; }
    html[data-nww-mobile-layout] body #timelineDock #playBtn { left:auto !important; right:58px !important; top:6px !important; border-radius:12px !important; }
    html[data-nww-mobile-layout] body #timelineDock .timeline-step {
      position:absolute !important; top:6px !important; bottom:auto !important; left:auto !important;
      display:grid !important; place-items:center !important;
      width:44px !important; min-width:44px !important; max-width:44px !important;
      height:44px !important; min-height:44px !important; max-height:44px !important;
      padding:0 !important; margin:0 !important; border-radius:10px !important;
      color:var(--text) !important; background:rgba(255,255,255,.05) !important; border:1px solid var(--line) !important;
      font:700 13px/1 system-ui !important; font-variant-numeric:tabular-nums !important;
      touch-action:manipulation !important; user-select:none !important; transform:none !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineStepBack { right:108px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineStepForward { right:8px !important; }
    html[data-nww-mobile-layout] body #timelineDock .timeline-step:disabled { opacity:.35 !important; cursor:default !important; }
    html[data-nww-mobile-layout] body #timelineDock .timeline-step:active:not(:disabled) { background:var(--accent-soft) !important; border-color:var(--nw-ui-blue) !important; }
    html[data-nww-mobile-layout] body #timelineDock .timeline-step:focus-visible,
    html[data-nww-mobile-layout] body #timelineDock .timeline-day:focus-visible { outline:2px solid var(--nw-ui-blue) !important; outline-offset:-3px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelinePreviousDay,
    html[data-nww-mobile-layout] body #timelineDock #timelineNextDay { display:none !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs {
      left:8px !important; right:8px !important; top:54px !important; height:44px !important;
      display:flex !important; gap:5px !important; border-radius:0 !important; overflow-x:auto !important; overflow-y:hidden !important;
      justify-content:flex-start !important; scrollbar-width:none !important; touch-action:pan-x !important; overscroll-behavior-x:contain !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs::-webkit-scrollbar { display:none; }
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs .timeline-day {
      position:relative !important; display:block !important; flex:1 0 52px !important;
      min-width:52px !important; height:44px !important; border-radius:9px !important;
      padding:0 4px 3px !important; font:650 13px/39px system-ui !important;
      background:rgba(255,255,255,.05) !important; color:var(--text) !important;
      border:1px solid var(--line) !important; overflow:hidden !important; box-shadow:none !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs .timeline-day::after {
      content:'' !important; position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important;
      height:4px !important; width:auto !important; transform:none !important; opacity:1 !important;
      background:var(--timeline-day-gradient,#94a3b8) !important; border:0 !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs .timeline-day.active {
      background:var(--accent-soft) !important; border-color:var(--nw-ui-blue) !important; color:#f8fbff !important;
    }
    html[data-nww-mobile-layout] body #timelineDock .timeline-trackRow {
      display:block !important; top:100px !important; left:8px !important; right:8px !important; height:44px !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #hourSlider {
      --nww-thumb-size:30px;
      background-size:calc(100% - 30px) 8px !important; cursor:ew-resize !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #hourSlider::-webkit-slider-runnable-track { height:8px !important; }
    html[data-nww-mobile-layout] body #timelineDock #hourSlider::-moz-range-track,
    html[data-nww-mobile-layout] body #timelineDock #hourSlider::-moz-range-progress { height:8px !important; }
    html[data-nww-mobile-layout] body #timelineDock #hourSlider::-webkit-slider-thumb {
      width:30px !important; height:30px !important; margin-top:-11px !important; box-shadow:0 0 0 4px rgba(96,165,250,.14) !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #hourSlider::-moz-range-thumb {
      width:30px !important; height:30px !important; box-shadow:0 0 0 4px rgba(96,165,250,.14) !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineTimeBounds {
      display:block !important; top:138px !important; left:23px !important; right:23px !important; font-size:11px !important;
    }
    html[data-nww-mobile-layout] body #timelineDock #timelineTimeBounds span { position:absolute; white-space:nowrap; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFirstTime { left:0; transform:translateX(-50%); }
    html[data-nww-mobile-layout] body #timelineDock #timelineMiddleTime { transform:translateX(-50%); }
    html[data-nww-mobile-layout] body #timelineDock #timelineLastTime { right:0; transform:translateX(50%); }
    html[data-nww-mobile-layout] body #timelineDock #timelineTimeBounds span::before { content:''; position:absolute; left:50%; top:-8px; height:4px; width:1px; background:var(--muted); opacity:.6; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey { top:156px !important; }
    html[data-nww-mobile-layout] body #timelineDock[data-single-timeline-time="true"] #timelineFloodKey { top:102px !important; }
    html[data-nww-mobile-layout] body #timelineDock[data-single-timeline-time="true"] .timeline-trackRow,
    html[data-nww-mobile-layout] body #timelineDock[data-single-timeline-time="true"] #timelineTimeBounds { display:none !important; }
  }
  @media (max-width:360px) {
    html[data-nww-mobile-layout] body #timelineDock #timelineBubble .timeline-bubble-current { font-size:16px !important; }
  }
  @media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
    html[data-nww-mobile-layout] body { --nww-mobile-timeline:calc(126px + var(--nww-key-extra)); }
    html[data-nww-mobile-layout] body:has(#timelineDock[data-single-timeline-time="true"]),
    html[data-nww-mobile-layout] body #timelineDock[data-single-timeline-time="true"] { --nww-mobile-timeline:calc(80px + var(--nww-key-extra)); }
    html[data-nww-mobile-layout] body #timelineDock #timelineBubble { width:142px !important; right:auto !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineStepBack { left:160px !important; right:auto !important; }
    html[data-nww-mobile-layout] body #timelineDock #playBtn { left:210px !important; right:auto !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineStepForward { left:260px !important; right:auto !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineDayTabs { left:314px !important; top:6px !important; }
    html[data-nww-mobile-layout] body #timelineDock .timeline-trackRow { top:50px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineTimeBounds { top:88px !important; }
    html[data-nww-mobile-layout] body #timelineDock #timelineFloodKey { top:106px !important; }
    html[data-nww-mobile-layout] body #timelineDock[data-single-timeline-time="true"] #timelineFloodKey { top:56px !important; }
  }
}