/* Mobile viewport only: no clock actions, role gates or data behavior. */
@media screen and (max-width:820px) {
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"][data-clock-fullscreen-ready="true"] #main-content {
  position:fixed; top:var(--clock-visible-top,0px) !important; left:0; right:0; width:100% !important; max-width:none !important; transform:none !important; animation:none !important;
  height:var(--clock-available-height,calc(100dvh - 148px)) !important; min-height:0 !important; box-sizing:border-box;
  display:grid !important; grid-template-rows:auto auto minmax(0,1fr); gap:6px;
  margin:0 !important; padding:6px max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left)) !important; overflow:hidden;
}
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .mobile-topbar { min-height:48px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto !important; margin:0 !important; padding:4px 10px !important; border-radius:10px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .mobile-topbar :is(.brand-link,.eyebrow,.signal-pill) { display:none !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .topbar-actions { grid-column:2 !important; grid-row:1 !important; display:flex; flex-wrap:nowrap; width:auto; gap:5px; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .mobile-topbar h1 { color:#fff !important; font-size:17px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .topbar-utility-btn { min-height:40px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel { margin:0 !important; padding:7px 9px !important; border-radius:10px !important; background:#f3faf7 !important; border:1px solid #b8d8cf !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-top { margin-bottom:5px; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] :is(.hero-label,.hero-panel .metric-card span,.hero-panel .metric-card small) { color:#526d70 !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel .metric-card { padding:5px 8px !important; min-height:0 !important; background:#fff !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel :is(strong,#overallGoalMeta) { color:#254a4d !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .cards-section { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; margin:0; overflow:hidden; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .section-row { margin:0 0 4px; padding:0 3px; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .cards-section h2 { color:#f3ffff !important; font-size:16px !important; margin:0; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .cards-section .section-kicker { color:#b1e7de !important; font-size:9px; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .walker-list-shell { min-height:0; height:100%; overflow:hidden; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] #walkerCards { height:100%; min-height:0; grid-auto-rows:max-content; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:0 0 4px; scrollbar-width:thin; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .walker-list-row { min-height:58px !important; height:auto !important; padding:8px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] #bottomDock { left:0; right:0; width:100% !important; max-width:none !important; transform:none !important; box-sizing:border-box; bottom:var(--clock-bottom-nav-height,82px) !important; padding:6px max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left)) !important; border-radius:0; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .dock-btn { min-height:44px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .worker-bottom-nav { width:100% !important; max-width:none !important; border-radius:0 !important; }
}
@media screen and (max-width:820px) and (max-height:540px) {
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .mobile-topbar { height:48px !important; min-height:48px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px 8px !important; min-height:0 !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-top { grid-column:1/-1; display:flex; justify-content:space-between; margin:0; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-top > div { display:flex; align-items:baseline; gap:6px; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-metrics { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-metrics { grid-column:1; grid-row:2; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel .overall-metric-card { grid-column:2 !important; grid-row:2 !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-top :is(strong,.hero-label) { font-size:11px !important; line-height:15px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel .metric-card { margin:0 !important; padding:3px 6px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel .metric-card small { display:none; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel .metric-card strong { font-size:13px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel .metric-card > span { font-size:10px !important; line-height:12px !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .hero-panel .goal-track { height:3px !important; margin:2px 0 0 !important; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .cards-section .section-kicker { display:none; }
:is(body,#mobile-clock-layout#mobile-clock-layout#mobile-clock-layout)[data-studio-page="clock_in_mobile.html"] .cards-section .section-count-pill { min-height:24px !important; padding:4px 8px !important; font-size:10px !important; }
}